Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In previous videos, I have shown how to use simple snippets whose code is executed as the playhead enters a particular frame of the timeline. I am now going to show you how to use an object snippet, that is, a snippet whose code is executed when a particular event is dispatched by a particular object. For this demonstration I'll use an exiting file from the Exercise Files area. I'll choose File > Open and go to the Ch_01SimpleSnippets folder and from there, I'll locate and open a file called LogoWithButton.fla.
In this version of the movie, I have a movie clip symbol that has its own animation. That is the biker's legs are moving, and the hair is waving in the wind. But when I test the movie you'll see nothing is happening and that's because there is a Stop command in the Actions layer of the main timeline. This movie, however, has something a little bit different. In the logo area at the bottom of the movie, the text Explore California has been turned into a Button object. A Button object in Flash is a very simple object that just has visual states.
There are four keyframes in a Button object, and these keyframes are causing the visual appearance that you are seeing. When the mouse button is down, the button appears to be pressed, and when the mouse button is up, it appears to be un-pressed. That visual appearance is defined in the button symbol, btnLogo, in the Library. I'll double-click that symbol to show you how this is being done. There are two keyframes, one in the up frame and one in the down frame and this is where the visual effect is being described.
It's the same graphical object but with a Bevel filter with reversed colors for the highlight and the shadow. Now, what matters is what happens when the user clicks that button. This is one of the most common things that Flash developers write ActionScript code for. Once you learned how to use a Stop command, typically the next thing you learn how to do is how to react to a button click. Flash will add all that code for you with a code snippet. Because this is an object snippet, you must have selected the object whose event you want to listen to.
I'll show you what happens first if you don't have anything selected. I'll click off the stage, and that causes everything to be deselected. Then I'll go to the menu and choose Window > Code Snippets. In the Code Snippets panel I'll open the Event Handlers category. Notice that there are five event handler snippets available. Three for mouse events for the Click Over and Out events, one for the Key Pressed event and one for the Enter Frame event. I am going to be using the Mouse Click event.
Watch what happens when I double-click the code snippet. I get the message, "This action requires an object to be selected on the Stage." So I'll click OK to clear that dialogue and then I'll select the button on the Stage. Notice that the button object already has a name in the Properties panel, logo_btn. If you haven't named the object, Flash will offer to name it for you when you add the code snippet. I'll use the name that's already set. I'll double-click and that adds the code snippet to the Actions panel in the frame where the playhead is currently located.
Now here is the code. I am adding the event listener to the button object. I am listening for this particular event whose name is MouseEvent.CLICK and I am reacting by calling this method or function named fl_MouseClickHandler_3. Here is the function. Flash Pro starts the code snippet by adding a trace command to help you debug and see when the button has been clicked. I'll close the Actions panel, and then I'll test the movie.
When I click the button, you'll see the Output panel appear in the background, and show the trace message "Mouse clicked." Each time I click the button, I get a new copy of the trace message. So now, let's customize the code. I'll go back to the Timeline and click on to frame one of the Actions layer and then I'll open the Actions panel. I want to react to the button click in this case by starting the Timeline and causing the biker object to travel from right to left across the Stage.
So I am going to comment out the Trace command, and then I'll place the cursor after all of the commented code, and I'll add a simple Play command, starting with the word play in all lowercase, then an opening and closing parenthesis, and a semi-colon, and that means start the animation. Now, let's test it again. I'll press Ctrl+Enter on Windows, or Command+Enter on Mac to test the movie. I'll click the button and there goes the movie clip symbol. the biker traveling across the Stage from right to left.
Each time I click, the animation happens again. So that's how you can very simply add an event listener to handle the Click event on any movie clip symbol. Now, the requirement is that you must be working with a movie clip symbol instance. The symbol instance must have a name, and again if you haven't already assigned a name to your movie clip symbol instance, Flash will offer to assign it for you, ad then you have to know what you want to do when the click event happens. In this case, I am doing something incredibly simple. calling the Play function, and starting the animation.
What you do is up to you and up to the requirements of your particular Flash movie.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.