INTERACTIVE Flash DEMO Turn on your speakers and roll your mouse over the buttons.
Q: OK, so now that we have our buttons, what do we do with them?
A: Go to frame 1.
Script your Buttons
This is your introduction to Flash ActionScripting. Actions for buttons are merely instructions that you assign to a button so it knows what to do in its different states. The button itself has some instructions set by Flash. You know that it will turn the cursor into a hand when the user rolls over it, it will respond to a click, and it will respond to a hit area. Now you will tell the button what to do when the user rolls over. The simplest HTML link functions like a button. You roll over a link, the cursor changes to a hand, you click and then you're transported to another web page. The link is underlined by default and changes color when it's active and after it's been visited. Links give us the ability to travel through our web pages in a non-linear fashion rather than going from page 1 to 10 in order. They are part of the overall navigation of the interface design.
ActionScripts are the magic that get us from one place to another in Flash.
For those of you who know JavaScript, Flash ActionScripts comply with the international JavaScript standard. I am not a programmer, but I am comfortable using ActionScripts. Start with the basics and move on when you need to and when you're comfortable. One of my A/S heroes is Colin Moock. He recently said this in an interview for his new A/S book:
"Q. What advice would you give a beginner who knows little but is keen to make her mark?
A. Programming isn't hard. Don't be intimidated. in an hour you can learn to make something that's neat. You don't have to know everything to create something worthwhile. Play around with what you know, then read a little more, explore online examples (ultrashock.com and Flashkit.com are good starting points). At every stage of your development, you can make something interesting, beautiful, and functional. Focus on where you are, then build on that. It's a learning process that never ends."
--Colin Moock http://www.moock.org
ActionScript: The Definitive Guide - Mastering Flash Programming, By Colin Moock
May 2001, O'Reilly Publisher
1-56592-852-0, Order Number: 8520 - 720 pages, $39.95
* check for the most current release and ISBN number
In addition to Colin Moock's book on A/S, Friends of Ed's A/S book: Foundation ActionScript is essential reading for those wanting to study more. There are also a host of web tutorials.
Actions can be assigned to buttons and frames and movie clips. Let's stick with buttons since we haven't talked much about frames and movie clips. We'll get back to those later in this lesson.
Flash is based on object-oriented programming. This means that an event happens and an action is triggered. The event for buttons is related to the user's mouse or keys on the keyboard. The user can trigger an event through a button when any of the following mouse events occur: Press, Release (the default action), Release Outside, Key Press, Roll Over, Roll Out, Drag Over, Drag Out. See these check boxes in the diagram below. You may have more than one event selected if it makes sense. For instance you wouldn't do the same thing on roll over and roll out.
Here are the steps to assign an action to your button.
1. Open a new Flash document.
2. Create a button or use one from the Common Libraries.
3. Drag an instance of the button symbol to the stage and center the button. Rename Layer 1 "button".
4. Select the button and open the Properties Panel. Your symbol will be identified with its name and behavior. My girly kiss button is named but-girl, with a button behavior and the option to 'track as button'. Leave this option on this default setting. There are 3 small circular icons on the right edge of the Properties Panel. The middle one is an arrow which will open the actions window associated with this particular button.
Click here or roll your mouse over the image below to display this movie. Once the movie appears, rollover and click on the actions icon button. Click on the X icon in the upper right of the action window to close the actions panel in the movie. Click the help icon to open the help panel. Click the accessibility icon to open the accessibility panel.
When you select a button and then launch the actions window, the Actions Window opens with 'onRelease' selected as the mouse event by default. Flash knows that you have selected a button and the only actions associated with buttons are triggered by mouseEvents. On (release) {} means that the user has clicked and released the mouse. We'll use this default setting. Notice that the Actions Window says Actions - Button and the top drop-down menu says: Actions for [No instance name assigned] (but-red).
Flash MX 2004 is designed to present code hints when you name your instances with the appropriate suffix:
When naming a movie clip instance, always give the instance a suffix of _mc, as in screen_mc.
When naming a button, use the _btn suffix.
When naming a text field, use the _txt suffix.
For more information about additional instance name suffixes that prompt code hints, see "Writing code that triggers code hints" in ActionScript Reference Guide Help.
If the Actions panel isn't open in MX 2004, select Window > Development Panels > Actions.
Actions - Frame appears at the top of the panel, which indicates that you selected a frame in which to apply ActionScript. It's a good practice to verify that you're attaching ActionScript to the intended frame or object.
The Actions panel includes a Script pane, the blank text entry area, in which you can enter text directly; an Actions toolbox, which lets you select ActionScript to add to your script; and a Script navigator, which functions like the Movie Explorer.
5. Now we have to assign an action telling Flash what to do when the user clicks and releases the mouse. In the left pane of Normal Mode of the Actions Window, select the Actions Book>Movie Control>goto action. You can double-click it to populate the right pane or you can click-hold-drag it from the left pane to the right pane. In MX 2004, type in the on(release) { }code. Then insert the cursor between the curly braces and select the Global Functions Book > Timeline Control > gotoAndPlay or gotoAndStop, depending upon what you want to happen in the specified frame. Then add the frame number within the parentheses such as (1) if it's frame 1 or in quotes if you have a frame label such as ("start"). You will learn more about this in the lesson on Frame Labels and Navigation which follow this lesson.
Flash will add the code in the right pane of the action window telling Flash to
'go to and play frame 1'. The right frame or pane is called the 'script' window.
6. Select the line of text in the right pane that says gotoAndPlay (1); by clicking on the line. View the top pane of the Actions Window. Flash gives you the options of changing the Scene:, Type:, Frame: and Go to and Play or Go to and Stop options. Leave all these options as mine are in the above image.
What does this mean? — gotoAndPlay (1);
This script says: when user releases the mouse after clicking on the selected button, Flash will send the playback head of the main timeline to go to frame 1 and play the movie. It's that simple. If you want to send it to frame 5, 6, or whatever, enter a different frame number in the Frame: field.
This is your first action script. However the only thing we have in frame one is our button.
On the main timeline for your movie, insert a new layer and name it 'circle'. Draw a circle on the stage, select all of it (fill and stroke if any) and convert to symbol. F8. Center it on your stage. Save your movie.
Select frame 20 of the circle layer and insert a keyframe. Press F6. Open the Transform Panel and check constrain and enter 2 for the percent. This will make the symbol seem to shrink to nothing at frame 20. Open the Instance Panel Effect Tab and go to the Alpha option and select 0%. This will make the symbol invisible at frame 20. Save your movie.
Select any frame from 1 to 19 in the circle layer. Go to the Frame Properties Panel and select motion tween. Save your movie.
Play your movie.
On the button layer, move the playback head to frame 20. Insert frames. Not keyframes. Just frames. Go to the Insert Menu - Insert>Frames or right click in frame 20 of button layer and insert frames or F5. This extends the button you made at the beginning of the lesson out to the last frame of the motion tweened circle symbol.
The button is already scripted to return to frame 1 but the movie is automatically looping back to frame 1. Let's put a stop action in frame 20. Then the button will act like a replay button, bringing the viewer back to see the animation again.
Insert a new layer above the other two layers. You can select the top layer and then insert a new layer or you can just insert a new layer wherever you happen to be and drag the new layer to the top. Name this layer "actions". Save your movie.
Move the playback head to frame 20 on the actions layer. Insert a keyframe. Select the frame and open the Frame Actions window. In the Actions window for the selected frame, select the Actions>MovieControl>stop action. Double click on the stop in the left pane to insert the action script into the right frame. You can also click, hold and drag the stop from the left pane to the right pane. This will keep the playback head at frame 20 until the user releases the mouse on our button which tells the playback head to move back to frame 1 and play.
LINEAR (not-interactive) Flash DEMO
Save and test your movie. Does it work? In the interactive demo that follow, please note my button on the upper right of the timeline image. I positioned my button in the center of the circle symbol so it only appears at the end of the tween.
INTERACTIVE Flash DEMO
Click the small arrow button below to begin the animation. I hope yours works just as well.
There are many enhancements we can make to our buttons. As you saw with the kissing girl button, we can add sounds to the different button states. We can also add animation to one or more of the states. You'll be learning to do animation in a button on your homework assignment but I'll show you how to add sound when we get to the sound lesson.
Please continue to the next section of this lesson.
