- Click on the file named "A picture of a carnival ride."
- In the window that pops up, right click on the carnival ride picture.
- Go to "Save Picture As."
- Confirm that the picture's File Name is "pic1".
- Save the picture to a location where you'll be able to easily find it later (e.g. 8 Day Local, the local computer, your Pages account -- any of these are fine, just as long as you can find the picture again).
- Click on the file named "A picture of a daisy."
- In the window that pops up, right click on the daisy picture.
- Go to "Save Picture As."
- Confirm that the picture's File Name is "pic2".
- Save the picture to the same location.
- Click on the file named "A picture of flames."
- In the window that pops up, right click on the flames picture.
- Go to "Save Picture As."
- Confirm that the picture's File Name is "pic3".
- Save the picture to the same location.
- Name the layers in this order:
- Top Layer: "Actions"
- Second Layer: "Pictures"
- Third Layer: "Buttons"
- Fourth Layer: "Clear Button"
Your layers panel should look like this:
- Behaviors Option (Only use if your version of Flash supports Behaviors)
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." The box in this area should have a "1" in it.
- Click OK.
- Look up at the Actions Layer > Keyframe 1. Confirm that a little cursive "a" is now present in Keyframe 1. This "a" is the icon Flash uses to tell you there's an action associated with that keyframe.
- You now have a "Stop" action in your project. When you're developing non-linear stories, it's always good to set up a "Stop" action at the beginning of your project. This prevents Flash from playing your project before users can interact with it.
- ActionScript Option (Only use if your version of Flash does not support Behaviors)
- Bring up the Actions Frame (F9).
- Go to Actions > Movie Control > Stop.
- Double click the word "Stop".
- Look up at the Actions Layer > Keyframe 1. Confirm that a little cursive "a" is now present in Keyframe 1. This "a" is the icon Flash uses to tell you there's an action associated with that keyframe.
- You now have a "Stop" action in your project. When you're developing non-linear stories, it's always good to set up a "Stop" action at the beginning of your project. This prevents Flash from playing your project before users can interact with it.
- Insert a blank Keyframe: Insert > Timeline > Blank Keyframe (or in some versions of Flash: Insert > Blank Keyframe).
- Insert 6 frames (hit F5 6 times).
- Click on the Properties Box (bottom of the screen) and look for the Frame Label box.
- In this box, type the word "Home".
- Look up at the Actions Layer > Keyframe 2. You should see a little red flag with the word "Home" next to it. You have just named this frame. This will allow you to associate actions with this frame later.
- Click on the Actions Layer > Keyframe 2.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "2".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9).
- Go to Actions > Movie Control > Stop.
- Double click the word "Stop".
- Insert a blank Keyframe: Insert > Timeline > Blank Keyframe (or in some versions of Flash: Insert > Blank Keyframe).
- Insert 6 frames (hit F5 6 times).
- Click on the Properties Box (bottom of the screen) and look for the Frame Label box.
- In the box, type "Pic 1".
- Look up at the Actions Layer > Keyframe 9. You should see a little red flag with the word "Pic 1" next to it.
- Click on the Actions Layer > Keyframe 9.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "9".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9)
- Go to Actions > Movie Control > Stop
- Double click the word "Stop".
- Insert a blank Keyframe: Insert > Timeline > Blank Keyframe (or in some versions of Flash: Insert > Blank Keyframe).
- Insert 6 frames (hit F5 6 times).
- Click on the Properties Box (bottom of the screen) look for the Frame Label box.
- In this box, type "Pic 2".
- Look up at the Actions Layer > Keyframe 16. You should see a little red flag with the word "Pic 2" next to it.
- Click on the Actions Layer > Keyframe 16.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "16".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9).
- Go to Actions > Movie Control > Stop.
- Double click the word "Stop".
- Insert a blank Keyframe: Insert > Timeline > Blank Keyframe (or in some versions of Flash: Insert > Blank Keyframe).
- Insert 6 frames (hit F5 6 times)
- Click on the Properties Box (bottom of the screen) and look for the Frame Label box.
- In this box, type "Pic 3".
- Look up at the Actions Layer > Keyframe 23. You should see a little red flag with the word "Pic 3" next to it.
- Click on the Actions Layer > Keyframe 23.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "23".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9).
- Go to Actions > Movie Control > Stop.
- Double click the word "Stop".
At this point, your timeline should look like this:
- Click on Keyframe 1 > Insert 7 frames (hit F5 7 times).
- Click on Keyframe 9 > Insert Keyframe (F6).
- Insert 6 frames (hit F5 6 times).
- Click on Keyframe 16 > Insert Keyframe (F6).
- Insert 6 frames (hit F5 6 times).
- Click on Keyframe 23 > Insert Keyframe (F6).
- Insert 6 frames (hit F5 6 times).
- Click on Keyframe 9.
- Go to File > Import to Library.
- Navigate to the location where you saved your pictures. Select "pic1" (the carnival ride picture) and click "Open." If you receive a notification that says "This file appears to be a part of a sequence of images. Do you want to import all of the sequences in the image?" select NO.
- Open the Library (CTRL-L) to confirm that the carnival ride picture is in the library.
- Confirm that you are still on the Pictures Layer > Keyframe 9.
- Drag an instance of "pic1" to the stage. Position the picture toward the lower right portion of the stage, like this:
- Click on Keyframe 16.
- Go to File > Import to Library.
- Navigate to the location where you saved your pictures. Select "pic2" (the daisy picture). If you receive a notification that says "This file appears to be a part of a sequence of images. Do you want to import all of the sequences in the image?" select NO.
- Flash might place the daisy picture directly on the stage. If it does, delete this instance. If this doesn't happen, don't worry about it -- continue on.
- Open the Library (CTRL-L) to confirm that the daisy picture is in the library.
- Confirm that you are still on the Pictures Layer > Keyframe 16.
- Drag an instance of "pic2" to the stage. Position it in roughly the same area where you previously inserted the carnival ride picture (note: the carnival ride picture will not be visible at this point -- you'll need to wing it).
- Click on Keyframe 23.
- Go to File > Import to Library.
- Navigate to the location where you saved your pictures. Select "pic3" (the flames picture).
- Open the Library (CTRL-L) to confirm that the flames picture is in the library.
- Confirm that you are still on the Pictures Layer > Keyframe 23.
- Drag an instance of "pic3" to the stage. Position it in roughly the same area where you previously inserted the carnival ride picture and the daisy picture (note: the pictures will not be visible at this point -- you'll need to wing it).
At this point, your timeline should look like this:
- Click on Keyframe 1, select the circle tool and draw a circle on the stage.
- Select the entire circle and turn it into a symbol (F8).
- Name the symbol "MyButton" and select Behavior: "Button".
- Double click the instance of MyButton that is on stage. This opens the Symbol Editing screen. Your timeline and edit bar should look like this:
- Click on Layer 1 > Over.
- Insert a Keyframe (F6).
- If you want, you can change the button's "over" state. By doing this, the button's appearance will change when a user mouses over the button. To change the "over" state, you must select the shape on the stage. When you do, the properties box will present you with the "shape" tools. These tools will let you change the stroke color, the fill color and other elements.
- Click on Layer 1 > Down.
- Insert a Keyframe (F6).
- If you want, you can change the button's "down" state. By doing this, the button's appearance will change when a user clicks on the button. To change the "over" state, you must select the shape on the stage. When you do, the properties box will present you with the "shape" tools. These tools will let you change the stroke color, the fill color and other elements.
- In the edit bar, Click on "Scene 1." This takes you back to the main stage.
- Delete the instance of MyButton that is currently on the stage.
- Confirm that MyButton is in the library.
- Go to the Library and drag three instances of "MyButton" to the stage.
- Line the instances up vertically, like this:
- Insert a Keyframe (F6). Your timeline should now look like this:
- Select the top instance of "MyButton." Make sure only the top instance is selected. If other button instances are selected, click in the grey part of the stage, then click once on the top instance. If you have successfully selected the top instance of MyButton, your screen will look similar to this:
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "Pic 1".
- Click OK
- ActionScript Option
- Bring up the Actions Frame (F9).
- Go to Actions > Movie Control > Goto.
- Double-click "goto".
- In the right window pane, select the "Go to and Stop" option.
- Set the "Scene:" to <current scene> (it's probably set to this by default, so if it's already there, don't change anything).
- Set the "Type:" to Frame Label (use the pull-down menu to select "Frame Label").
- Set the "Frame:" to Pic 1 (use the pull-down menu to select "Pic 1").
- The actions panel should now look like this (Note: Image only applies if you're using the ActionScript Option. The Behaviors Option does not bring up this window):
ActionScript Sidenote: At this point, you're probably thinking "What the ?*?! am I doing?" In a nutshell, you're associating "actions" with specific instances of your buttons. By doing this, you will be able to let users click on buttons and make things happen. The weird code that you see in the Actions pane (all that "on(Release)" nonsense) is known as ActionScript. This is the code that Flash uses to make all sorts of things happen in a movie. ActionScript is a vital part of non-linear storytelling. It can also be incredibly complicated and take years to master. For this class, you simply need to know that basic ActionScript commands -- such as the ones you're using right this moment -- can add interactivity to your Flash movies.
- Select the second instance of "MyButton." Make sure only the second instance is selected. If other button instances are selected, click in the grey part of the stage, then click once on the second instance.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "Pic 2".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9)
- Go to Actions > Movie Control > Goto.
- Double-click "goto".
- In the right window pane, select the "Go to and Stop" option.
- Set the "Scene:" to <current scene>.
- Set the "Type:" to Frame Label (use the pull-down menu to select "Frame Label").
- Set the "Frame:" to Pic 2 (use the pull-down menu to select "Pic 2").
- Select the third instance of "MyButton." Make sure only the third instance is selected. If other button instances are selected, click in the grey part of the stage, then click once on the third instance.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors ... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "Pic 3".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9).
- Go to Actions > Movie Control > Goto.
- Double-click "goto".
- In the right window pane, select the "Go to and Stop" option.
- Set the "Scene:" to <current scene>.
- Set the "Type:" to Frame Label (use the pull-down menu to select "Frame Label").
- Set the "Frame:" to Pic 3 (use the pull-down menu to select "Pic 3").
- Insert 7 frames (hit F5 7 times).
- Insert a Keyframe (F6)
- Draw a rectangle in the upper right corner of the stage, like this:
- Use the text tool to put the word "Clear" on top of the rectangle.
- Select the rectangle and the text (hold down the shift key as you click to select multiple items). When all of the elements are fully selected, they should look like this:
- Group these elements (Modify > Group or CTRL-G).
- Turn this group into a symbol (F8).
- Name the symbol "Clear Button" and give it Behavior: Button.
- Confirm that Clear Button is now in the library (CTRL-L).
- Double click the instance of Clear Button that is on stage. This opens the Symbol Editing screen. Your timeline and edit bar should look like this:
- Click on Layer 1 > Over.
- Insert a Keyframe (F6).
- If you want, you can change the button's "over" state. By doing this, the button's appearance will change when a user mouses over the button. Note: Things could get very complicated at this point, so only do this next step if you are completely comfortable. Otherwise, I highly recommend that you not worry about setting the button states for the Clear Button. Bottom line: Proceed to this optional next step at your own risk. Otherwise, jump ahead to step 26.
- Super Complicated and Optional Step: Look at your edit bar and confirm that you are in Scene 1 > Clear Button.
- Confirm that you are on Layer 1 > Over
- On the stage, double click the Clear Button. This will bring you into a second editing screen. You need to move into this screen because the Clear Button contains grouped objects. At this point, you are editing: the group that sits in the Clear Button's "Over" state. Like I said, this is where it gets pretty funky. If you don't want to get into this, look at the edit bar and click Scene 1. This will take you back out to the main stage and you can proceed to the next numbered step.
Still here? Let's march on ...
- Your timeline and edit screens should now look like this (note the edit bar: Scene 1 > Clear Button > Group):
- Confirm that you are in Layer 1 > Over
- Click on the background fill in the Clear Button (in this example, the fill is dark green)
- In the properties box at the bottom of the screen, change the fill color next to the paint bucket icon. This will change the appearance of the Clear Button when a user mouses over the button.
- Click on Layer 1 > Down.
- Insert a Keyframe (F6).
- If you want, you can change the button's "down" state. By doing this, the button's appearance will change when a user clicks on the button. We're not going to bother with this here, but you're welcome to try.
- When you're done setting the Clear Button's states, look at the edit bar and Click on "Scene 1." This takes you back to the main stage.
- Select the Clear Button instance on the stage.
- Important Note: Make sure you have selected the Clear Button instance on the stage. Students often only select Keyframe 9. This is a mistake. If you fail to select the Clear Button instance on the stage, you will end up inserting an action into Keyframe 9. This will cause your entire project to not work (no one wants that). So, to be safe, confirm the following:
- You are on the Clear Button layer.
- You have clicked on Keyframe 9.
- You have clicked on the Clear Button instance on the stage.
- Got all that? Excellent. Let's keep going.
- Behaviors Option
- Bring up the Behaviors Frame (Window > Behaviors... or ... Window > Development Panels > Behaviors).
- Click the Plus Sign in the upper left corner of the Behaviors Window.
- In the drop-down menu, select Movieclip > Goto and Stop at frame or label.
- In the window that pops up, look at the area that says "Enter the frame number or frame label at which the movie clip should stop playing." You should see a text box immediately below this area.
- In the text box, type "Home".
- Click OK.
- ActionScript Option
- Bring up the Actions Frame (F9).
- Confirm that you are setting an action on the Clear Button instance. You do this by looking at the top of the Actions screen. There should be an item that reads: "Actions for [No instance name assigned] (Clear Button)." It looks like this (Note: Image only applies if you're using the ActionScript Option):
- If you don't see this confirmation, minimize the Actions pane, go to Clear Button Layer > Keyframe 9 and click on the Clear Button instance on the stage.
- In the Actions Panel (F9), click on Actions > Movie Control > Goto.
- Double-click "goto".
- In the right window pane, select the "Go to and Stop" option.
- Set the "Scene:" to <current scene> (it's probably set to this by default, so if it's already there, don't change anything).
- Set the "Type:" to Frame Label (use the pull-down menu to select "Frame Label").
- Set the "Frame:" to Home (use the pull-down menu to select "Home").
- Minimize the Action Panel.
- Keyframe 9 should look like this:
- Keyframe 9 should NOT look like this:
- Insert a Keyframe (F6).
- Clicking the first button should bring up the Carnival Ride picture. The Clear Button should also appear:
- Clicking the second button should bring up the Daisy picture. The Clear Button should also be present.
- Clicking the third button should bring up the Flames picture. The Clear Button should also be present.
- Clicking the Clear Button will clear the screen of everything except the three original buttons.