Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Flash Professional CS5

Accessing the input data


From:

Creating a First Web Site with Flash Professional CS5

with Paul Trani

Video: Accessing the input data

Once you have your input text fields in place, you then need to check to make sure the user actually entered in information in these fields before sending out the information. So I'm going to select this contact form right here. I'll just double click on it, so I'm inside of this Contact movie clip. And let's just confirm a couple of these instance names. For this first text field, it is called theName, then we have theEmail, then we have theMessage.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a First Web Site with Flash Professional CS5
2h 45m Beginner Jul 27, 2010

Viewers: in countries Watching now:

Creating a First Web Site with Flash Professional CS5 shows how to make a fully functional, dynamic web site in Flash Professional CS5. This course covers the fundamentals of creating and importing content, adding smooth 2D and 3D transitions, and adding button functionality that goes beyond links. This course will also show how to integrate and control video and audio as well as how to implement a gallery and a contact form. Exercise files are included with the course.

Topics include:
  • Understanding web design
  • Creating buttons and web graphics in Photoshop
  • Formatting text with the Text Layout Framework
  • Using the Timeline
  • Creating a custom looping animation
  • Loading images in a gallery
  • Creating invisible buttons
  • Adding music and video to a site
  • Customizing video playback controls
  • Optimizing and publishing a web site
Subjects:
Web Interaction Design Projects
Software:
Flash Professional Illustrator
Author:
Paul Trani

Accessing the input data

Once you have your input text fields in place, you then need to check to make sure the user actually entered in information in these fields before sending out the information. So I'm going to select this contact form right here. I'll just double click on it, so I'm inside of this Contact movie clip. And let's just confirm a couple of these instance names. For this first text field, it is called theName, then we have theEmail, then we have theMessage.

So those are the three text fields that I'm just going to check when you click on the Send button. But really what I need to do is I need to take this graphic and convert it into a button. So I'll just select a graphic, drag it into the Library, and let's call it send button, make sure the Type is of Button, and I'll click OK. All right, with that button still selected, I can give it an instance name of send_btn. Okay, so when you click on send_btn, I want to just check those fields.

So I'm going to use code snippets to get me started with the code structure. So, in the Code Snippets panel, under Event Handlers, I'm just going to add a Mouse Click Event. So I'll just double-click on that, and I just added the mouse click event to the Send button, and it just traces out the "Mouse Clicked." Well, I don't really want to do that. What I want to do is I want to check or at least get the information in those text fields. So what I can do is I can type in theName.text, just like that, and that will enable me to see whatever is in that text field.

Okay, I'm just going to copy this line, paste it below twice, because I want to get theEmail and theMessage, just like that. So, when they click on the Send button, trace out whatever is in these three fields. I'm going to get the text in them and what it's going to do is it's going to appear in my Output panel. So with that set up, all I'm going to do is I'm just going to test out this movie to make sure it's working.

(Music playing) Just like that. I've entered an information in there and if I click the Send button, I should see in the Output panel this text, and there it is. So again, my trace statement actually sort of prints out that information, places it in my Output panel. All right. So that next step is to go ahead and make sure the user actually entered in information into those three fields. And even if they did, what I want to do is display a nice message right next of the Send button.

So close this file, go back into my code, and I'm going to go ahead and write in place of this comment, I'm going to go ahead and add an If statement. So, here is the basic If statement structure. It's going to look just like this. I'll move this up a little bit. Open and close parenthesis. If a certain value is met, then do whatever is in these two curly braces. So, I'm going to check if theName.text is equal, I need two equal signs there, if it's equal to nothing, so if they didn't put anything in there, that's two quotes there, then display a certain message.

And what I want to do is I want to display a message right in this text field. So I need to select this text field, I'm going to go to Properties, and I need to make sure it has an instance name. So I'm going to call it theFeedback. Let me go back to that code. It's in my first frame of the Timeline here, and theFeedback, in that text field go ahead and put "Please enter in a name," just like that, within quotes.

So if there's nothing in there, then it shows me this message. Let's go and test this. (Music playing) Again, I'm not going to put anything in here. I'll just click Send, and it says "Please enter in a name." So it's working out great so far, the other thing I need to do is add in checks for these other two text fields. So I'm going to do that right now, and continue on to add some more code as well.

So theName.text, if that's equal to nothing then displays this. And what I want to do is I'm going to edit this message to say, "Please fill out all fields." So that's going to be the generic message that gets displayed anytime they do not enter in information in here. So, I'm going to add some more code in here. So, it there's nothing in theName text field or, and these are two pipes is what those are, just under the Delete key, these two pipes is an OR statement.

So, or theEmail.text is also, you know, if that's equal to nothing or theMessage.text is equal. And again, I need two equal signs right in here, because I'm doing a check to see if one thing is compared to another basically. All right, so that looks pretty good. It there is nothing in theName text field or nothing in theEmail or nothing in theMessage, then display this line.

If they do actually fill out all these fields, well, I want to add an else, open curly brace, closing curly brace gets added when I hit the Return button. else theFeedback.text, we'll just add a quick Thank you. There we go. That's perfectly fine, just some feedback and saying that they have entered in the Form, and its entirety. And what I can even do is clear it, so theName. Again, they entered in the fields correctly.

I display a thank you message and then I clear all the fields, in case they want to send another message, just like that. All right, everything now looks good. I'm going to go ahead and test this out now. (Music playing) Okay, so maybe again I did not enter anything in the Email field.

I'll click Send, and it does display that information but also says, "Please fill out all fields," and I'm like okay, well, I will. There we go. Now if I click Send, it clears the form and then gives you a thank you message as well. So now that I have this verification in place, I can then take that data and then pass it out and ultimately send this information to the person's email address.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash Professional CS5.


Expand all | Collapse all
Please wait...
Q: I followed all the steps and suggestions in the "Adding a progress bar" video, but when I add the progress bar to my web site, I can’t remove it once the index.swf file loads up. The progress bar remains on the homepage and the rest of the pages. How do I make it disappear once the site loads?
A: To make it disappear, just make sure the progress bar is only in frame 1. If it’s on its own layer, then right-click on the 2nd frame in that same layer and select "Insert Blank Keyframe." That will make it disappear.
Q: Despite following the steps in the "Adding a progress bar" video, I cannot figure out how to keep the progress bar from appearing on a movie that has finished loading. How can I make the progress bar disappear?
A: Just add the red line below to the preloader.fla file. This will make the progress bar invisible: 
"function contentLoaded(evt:Event):void { //Optionally change to a clip holder and set progressbar visibility. addChild(contentLoader); progressbar.visible = false; }"
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Flash Professional CS5.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked