Let's continue from the previous section. We'll now add a button layer. Here are the steps:
1. Add a new layer and name it "buttons".
2. Open the library from one of the movies you made that used a button symbol or use a button from the Common Libraries. Select frame 1 of the buttons layer. Drag 3 instances of the button on the stage. Place the buttons towards the bottom of the stage. Don't be concerned about their exact location. Just put them towards the bottom of the stage in a horizontal line with space between them. Save your movie.
3. Select all 3 buttons. Open the Align Panel if it's not open. If it is open, deselect the "To Stage" option button. You do not want to center the buttons to the stage. You want to align the vertical center and distribute the horizontal center. This will make the buttons line up horizontally in a row with equal spacing between them.
align vertical center
deselect To Stage: button
distribute horizontal center
deselect To Stage: button
4. On the stage, select only the left button. Open the Actions Panel.
The Actions Panel in MX 2004 has changed quite a bit from its previous versions in MX. Find the blue cross in the top left of the Actions Panel. Click and hold the blue cross button and a drop down menu will display which contains different action items such as Global Functions, Time Line Control, etc. Once you become familiar with that format, you will know the general area to check for all your actions. Take time to explore the Actions Panel in MX 2004. Notice that the Actions Window Title Bar says Button, so you know that you are scripting a button, and not a movie clip or a frame.
Flash MX2004 Actions
Back to Flash MX Actions Panel... Follow the menu trail to find the "goto" action and double click or drag the goto action to the script window in the right frame. In the right pane, select the gotoAndPlay (1); line. In the Type: field of the parameters in the top of the script window, change the drop-down menu from Frame Number to Frame Label. Then go to the Frame: drop-down menu. When the menu is expanded you will see all your label names for the timeline you're in. Select the triangle frame label from the menu list.
5. Select triangle from the Frame Label drop-down list.
The code for this line changes to gotoAndPlay ("triangle");
6. The Go to and Play radio button is selected telling Flash to move the playback head to the frame label triangle and then continue playing the movie from that point forward.
7. Assign the actions for the remaining 2 buttons substituting 'square' and 'oval' for the label 'triangle'. Flash is smart enough to know that you've selected a button and buttons only respond to mouse events. Flash will enter the default 'on (release)' code for the event. You can change the mouse event by selecting the on (release) line in the script window and selecting another mouse event from the display above the script. Save your movie.
8. You have now scripted 3 buttons directing each button to a specific frame on the timeline identified by a label. Test your movie and click the buttons. (Control + Enter).
You will notice that it is not a very effective use of buttons. It's not clear to the user what the button is doing. To remedy this, let's put a stop action in frame 1. This will stop the playback head on frame 1 and all the user will see are 3 buttons on a black background.
9. Select frame 1 in the actions layer. Right click on the frame and select actions from the context-sensitive menu. Double-click stop from the Actions in the left pane of the Frame Actions Panel so the code showes up in the right pane. Save your movie. Now test the movie again.
10. The purpose of buttons is still not intuitive to our user. Here's how we will make this movie more user-friendly. We'll add a stop frame action at all of our 3 labels. We'll add a blankkeyframe (F7) after the keyframe where we placed each of our 3 symbols. We'll add text below each button to identify its purpose to our user. Continue to follow these steps, and it will make sense.
11. In the actions layers, add a keyframe (F6) to frames 9, 24, and 39. Select frame 9 and add a stop action to the frame by double clicking the frame to open the Actions Panel and double clicking 'stop' from the left pane so the code shows in the right pane. Save your movie. Add a stop action for frames 24 and 39. Note that these frames (9, 24, and 39) are before the keyframe where the next shape appears (10, 25, 40). Now, add a stop action in frames 1 and 55. Save your movie.
12. Now we'll add one blank keyframe (F7) to each shape layer immediately after the keyframe that holds the symbol on the stage.
13. Select frame 11 of the triangle layer. Right click and Insert Blank Keyframe or hit F7 on your keyboard.
14. Select frame 26 of the square layer. Right click and Insert Blank Keyframe or hit F7 on your keyboard.
15.
Select frame 41 of the oval layer. Right click and Insert Blank Keyframe or hit F7 on your keyboard. Save your movie.
16. Create a new layer and name it 'text'. Select frame 1 of the text layer. Select the type tool and type the word 'triangle' into one text block. Position it below the button on the far left. Create another text block and type the word 'square' into the second text block. Position it below the middle button. Type the word 'oval' into the third text block and position it below the third button.
17. Use the Align Panel to align the text blocks to each other and distribute their centers the way we did for the buttons. Save your movie.
18. Test your movie.
This is more like it. The user knows what to expect (intuitive interface) and the button takes them directly to the requested symbol. The timeline should stop until another button is clicked.
But, there is a slight problem. To detect the problem, click the triangle button twice. Does your triangle shape stay visible on the stage or does it Flash on and then disappear? Try clicking each button a few times in succession. The associated shape should remain on the stage until you select another shape's button. To fix this, go back and select each button and change the action from "gotoAndPlay" to "gotoAndStop."
19. Now try your movie again.
Does your movie function like the following model solution? Make sure you click several times in a row on each button to see that the associated shape remains on the stage.
INTERACTIVE Flash DEMO Sample shapes.swf - sample solution to your homework.
Make your movie the default pixel size. The solution is scaled down to fit on the webpage.
This basic button and frame navigation is enough to get you started on your Flash final project.
The following illustration shows how the frames in the timeline change when you add a blank keyframe (F7) after a keyframe (F6). Notice that the keyframe itself is gray with a black dot and a black line on either side of the keyframe followed by white frame with a hollow dot.
In the movie above, there are no shapes in frames 11 - 24, 26 - 39 and 41 - 54. The buttons and text extend throughout the movie; as a result, all the frames in those two layers are filled with gray. The reason I left so many frames between the labels was to let you see the labels clearly. With the knowledge you have of Flash so far, this movie could have been made using only 4 frames on the main timeline. You could also have placed the stop actions in the frames with the labels on frames 10, 25, and 40. If you continue studying Flash and action scripting, you'll learn how this movie could be made in one frame on the main timeline! Your shapes.swf should look and behave like the sample.
Click here or roll your mouse over the image to display the entire timeline.
The following demo, where the shapes do not remain visible on the second click of the associated button, is incorrect.
Please fix it if yours looks like this:
Now, go and change all the button actions back to gotoAndPlay();
You may see differences in the behavior of your movie when you click on a button for a shape that is already selected or showing. With gotoAndStop(); - does the second click shut off the shape and present a blank screen? How does it work when the button is scripted with gotoAndPlay(); and you click more than once on the same button?
Tips:
If you double click the blue title bar of panels in Flash, the panels will collapse leaving just the title bars, giving you more space on the screen.
To select just one frame of a segment on a layer, hold the control key and then click in the frame.
Use the Edit Menu to Copy and Paste code, and Copy Frames and Paste Frames in the timeline to avoid repetitive work.
The actions window has a normal and expert mode. If you already know how to code, you can set the expert mode as your default under the Edit Menu - Edit Preferences. You can copy and paste code into the normal and expert panes. If you make a mistake in the expert mode, Flash will not let you return to normal mode until you fix the error. Click on the right pointing triangle arrow below the title bar in the right corner of the Actions Panel window to toggle between modes and select more options for the Actions Panel.
Type the button text once and set the character attributes. Copy and paste the text twice and position them where you want them on the stage. Then doubleclick inside each one of the texts in the text block and replace it with the text you want. Much quicker.
This is a requirement for ALL your Flash projects (not just a tip):
Create a separate layer for all your frame actions and call it actions.
Create a separate layer for all your frame labels and call it labels.
Create separate and individual layers for each tween.
Work on development of your final. The user should be able to access any area of your site within 2 - 3 clicks. Choose a style that represents your content. Allow the user to go back to the main menu choices from any screen without having to view your preloader or animation over and over again.
ActionScript and the Actions Panel are different in version MX 2004
Click here or roll your mouse over the following image to display a page that shows some of the basic differences in the Actions Panel between Flash MX and Flash MX 2004.
Please continue to the next section of this lesson.
Sample shapes.swf - sample solution to your homework.
