Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Buttons and EventListeners

From: Flash CS3 Professional Essential Training

Video: Buttons and EventListeners

If we take the function example from the prior video and add one more step we arrive at the event listener. Event listeners are a way of handling and reacting to events, like mouse clicks and other things similar to that, and then calling functions when those events occur. Event listeners are actually a lot easier to understand then most people think. Imagine if you're back in grade school, and there is a classroom of ten people. When the bell rang at the end of the class, all ten students who were trained to understand what that meant, would get up and leave. Also, imagine if each of the ten of you, when walking through the door was told something by the teacher, and one of you was told to stand up when a certain word was pronounced.

Buttons and EventListeners

If we take the function example from the prior video and add one more step we arrive at the event listener. Event listeners are a way of handling and reacting to events, like mouse clicks and other things similar to that, and then calling functions when those events occur. Event listeners are actually a lot easier to understand then most people think. Imagine if you're back in grade school, and there is a classroom of ten people. When the bell rang at the end of the class, all ten students who were trained to understand what that meant, would get up and leave. Also, imagine if each of the ten of you, when walking through the door was told something by the teacher, and one of you was told to stand up when a certain word was pronounced.

In other words, one out of the ten students was trained to react to a single message, a single word being pronounced that would cause that student to stand up. During the class, when the teacher pronounced the word, one student out of the ten would stand. This demonstrates the power and effectiveness of event listeners. You have two situations here. One in which all ten students will react, which is the sounding of the bell that marks the end of class when all students would leave and another where a single student was told to listen for a particular message, and then a single student stood when a word was pronounced. All we have to do is set up the definition of the behavior, which is the function, that would be leaving the class, or standing up. Then we would define the event that triggered the action, so in our example, that would be the bell ringing, or the teacher saying the word, and then we simply associate the two. So, let's take a look at the structure of this file. Here on the stage in the upper right hand corner is a button. The instance name of this button is rect_btn, for rectangular button. Here in the listener, we see that instance name, and the add event listener being added to the button, which of course, I'll explain in just a moment. Now, let's look at the code. We have a function structure, which is exactly the same as the prior example, with one simple exception. We now have an argument to discuss. We skipped over that last time because our parenthesis were empty. So, let's review real quickly. We have the function keyword, defining the function, we have a unique name for this function, we have parenthesis, again let's skip the argument for just a moment. We have data type for return, we're not returning anything, so our data type is void, and then we have open and close brace with the instruction therein.

Now, we move on to the event listener. We already have the behavior we wish to trigger in the form of our function, now all we have to do is identify the event, and figure out how it calls that function. Over here on the right we have MouseEvent.CLICK. This is simply saying that the type of event we're working with is the mouse event, rather than event which would be for frame scripts, and we need to know which event associated with the mouse we're going to use and in this case, we're going to use the mouse click. Now we know what event we're seeking, we know what event we're trained to listen for, that is the click of the mouse. Now what do we do when we get that event? When we capture that event, when we know it occurred, what do we do? That is, we call the function by this name, onRectBtnClick. That is the function that we have defined previously. Now that we know the event that we are listening for, and we know what to do when we hear it, all we have to do is associate that pair to something that is trained to do the listening, and that is our button. So again, we define a function that is supposed to be triggered when the event occurs, we determine which event we're going to listen for, and what to do when we hear it, and then we simply say, who is supposed to be doing the listening? In this case, the button will listen for all of these things. So, when the button hears the mouse click, it will call for the function. Now, let's quickly talk about our argument. In simple terms, an argument is a kind of variable that only has life inside the function. It's purpose is to receive information from the function call, so the function can use that information to vary it's outcome. When determining argument names, such as this evt, short for event, we need to follow the same rules that we observed when naming variables. In this case, evt, or event will contain information about the event that triggered the function, so we also want to data type our argument and in this case, we're going to give it a data type of MouseEvent. And as you can see, that's what we're passing in, MouseEvent.CLICK. In practice, we'll be creating very simple event listeners in this course and therefore, we won't need to rely on this argument. However, in action script three essential training, we'll see that we can get information from the event such as which button was clicked on, or other related information. For now, we only need to know that the event must be there, and that as we discussed in the variable basics video, the data type should match the expected data to avoid errors and again, we're saying that we're going to pass in a mouse event and we are, MouseEvent.CLICK. So, let's try this ourselves, and let's tie in everything we've learned so far.

First, let's use a frame script to initialize our event listener. We'll choose the actions layer, frame 1, and we'll open up our Actions panel. Second, let's comment our code to make sure we know what we're doing later on. Let's put in a single line comment, or a double slash and we'll say we're "making navigation buttons". Next, let's create a variable that we can manipulate. So, we'll say we're declaring the variable with the "var" keyword, we'll give it a valid name, "nextSection," and we'll give it a data type of "String," and we'll give it a value of "home". Next, we'll set up a function to trigger when the event occurs.

So, let's say "function onHomeClicked," again an arbitrary name, let's call it onHomeClick, and then we'll say "(evt:MouseEvent)," and we're not going to return anything from the function, so we'll give it a data type of ":void," and we'll open up our braces here. Then, inside the braces let's just redefine the variable, "nextSection = "products:", so we can see that our function is working. In order to get some immediate results, let's use our "trace" action, and trace the value of that variable, so we can see the change. Finally, let's add our listener, and we called the button on stage "rect_btn," so we'll add to that, "_addEventListener," and we'll say "(MouseEvent.CLICK," that's the event we're looking for, and the function we want to call is "onHomeClick)". Great, so now we're all done, and let's check and make sure it works. Before we do that, we need to go through our script here just so we know what to expect. The first thing that occurs in this script, is that the variable is defined and populated. The second, is that the function and listener are defined. Here's the function in 5 through 8, and then in line 10, we've defined our listener. The contents of the function won't execute until they're called. The listener has been added to the button, which is set up to listen for our MouseEvent.CLICK. So, we start of with a value of home, when we then click on the button, the function is called, which re-evaluates or re-assigns a value of products to nextSection, and then nextSection is traced to the output window. So, the ultimate result is we get nothing initially in the output window, and when we click the button, the variable is re-defined and we get the new result in the output window. Alright let's test is to see how it works.

Control > Test Movie. So, we get initially nothing as we expected, let me hide this for you, when we click on our button, the output window shows us products. That's exactly what we wanted. Let's close our output window, and let's close our SWF and go back to our main movie. That's an overview of how to create an event listener, and now that we have this under our belt, we can take the same process and apply it to several buttons. We'll create multiple listeners and functions for our navigation buttons and then we'll begin to control other elements such as our components, and so on as we go through the course.

Show transcript

This video is part of

Image for Flash CS3 Professional Essential Training
Flash CS3 Professional Essential Training

93 video lessons · 58049 viewers

Rich Shupe
Author

 
Expand all | Collapse all
  1. 5m 12s
    1. Welcome
      1m 22s
    2. Using the exercise files and cross-referencing
      3m 50s
  2. 23m 10s
    1. Creating a new document
      3m 34s
    2. The default workspace
      1m 45s
    3. Customizing your workspace
      5m 28s
    4. Reorganizing panels
      3m 52s
    5. Saving workspaces
      1m 50s
    6. Document tabs
      2m 25s
    7. Maximize mode
      1m 26s
    8. Finding help
      2m 50s
  3. 34m 24s
    1. Drawing tool basics
      1m 9s
    2. Drawing with the Pencil and Line tools
      4m 49s
    3. The improved Pen tool
      5m 38s
    4. The Quick Color tools
      1m 10s
    5. Drawing with shapes
      4m 1s
    6. Selecting content
      2m 19s
    7. Manipulating lines and fills
      6m 4s
    8. Painting with brushes
      2m 38s
    9. Erasing content
      2m 29s
    10. Understanding drawing modes
      4m 7s
  4. 16m 3s
    1. Using the Color Mixer
      6m 38s
    2. The Gradient Transform tool
      3m 13s
    3. Color swatches
      6m 12s
  5. 57m 40s
    1. Symbols overview
      7m 23s
    2. Creating and editing symbols
      2m 41s
    3. Nesting and breaking apart symbols
      6m 6s
    4. Working with buttons
      10m 59s
    5. Working with movie clips
      4m 25s
    6. Working with graphics
      5m 8s
    7. Using the Library
      3m 29s
    8. Transformation tools
      5m 15s
    9. Transformation panels
      6m 41s
    10. Transformation menus
      5m 33s
  6. 38m 31s
    1. Using layers
      11m 13s
    2. Adding, deleting, and grouping layers
      3m 35s
    3. What is a keyframe?
      4m 31s
    4. Using frames and keyframes
      6m 30s
    5. Working with multiple frames
      7m 0s
    6. Copying and pasting frames
      2m 45s
    7. Understanding scenes
      2m 57s
  7. 11m 17s
    1. Understanding document settings
      2m 5s
    2. Testing buttons and movie clips
      1m 24s
    3. Testing your movie
      1m 59s
    4. Publishing your movie
      5m 49s
  8. 33m 47s
    1. Vector vs. bitmap
      3m 58s
    2. Importing images and image compression
      8m 26s
    3. Importing Photoshop files
      5m 40s
    4. Importing Illustrator files
      4m 12s
    5. Tracing bitmaps
      7m 20s
    6. Breaking apart bitmaps
      4m 11s
  9. 43m 10s
    1. Shape tweening
      10m 58s
    2. Using shape hints
      2m 23s
    3. Tweening gradients
      3m 44s
    4. Motion tweening
      11m 54s
    5. Copy and Paste Motion
      2m 46s
    6. Motion guides
      4m 2s
    7. Custom easing
      7m 23s
  10. 41m 13s
    1. Understanding text types
      6m 0s
    2. Controlling text appearance
      6m 39s
    3. Simple text effects through tweening
      5m 46s
    4. Adding text to a project file
      19m 11s
    5. Spell-checking and Find and Replace
      3m 37s
  11. 33m 50s
    1. Using filters
      4m 5s
    2. Special filter options
      7m 57s
    3. Animating filters
      8m 8s
    4. Adding filters to a project file
      3m 34s
    5. Using blend modes
      3m 11s
    6. Flash-specific blend modes
      6m 55s
  12. 17m 3s
    1. Components overview
      4m 35s
    2. Adding a UIScrollBar component
      4m 16s
    3. Using a Loader component
      8m 12s
  13. 25m 6s
    1. Adding sound to the timeline
      4m 14s
    2. Adding basic effects to sounds
      4m 43s
    3. Sound sync options
      8m 59s
    4. Adding sound to buttons
      4m 47s
    5. Sound compression basics
      2m 23s
  14. 21m 37s
    1. Embedded vs. external
      3m 28s
    2. Embedding videos with the Flash Video Encoder
      9m 27s
    3. Encoding external FLVs with optional cue points
      4m 14s
    4. Playing external videos with the FLVPlayback component
      4m 28s
  15. 51m 1s
    1. Overview and interface elements
      6m 3s
    2. Frame scripts, tracing, and comments
      6m 8s
    3. Variable basics
      3m 1s
    4. Function basics
      4m 19s
    5. Buttons and EventListeners
      7m 59s
    6. Simple navigation
      16m 11s
    7. Scripting components
      7m 20s
  16. 24m 36s
    1. The story so far
      2m 27s
    2. Animated buttons
      6m 23s
    3. Animated masks
      9m 54s
    4. Publishing your site
      5m 52s
  17. 3m 3s
    1. Additional resources
      1m 12s
    2. Goodbye
      1m 51s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now Already a member? Log in

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 Flash CS3 Professional Essential Training.

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 preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.