Flash Labs > Lab 3: Scenes and Layers

Overview

In this lab you will add a new scene to the animation you created in Lab 2. The new scene will feature an image of a user interface and will use animation to show an interactive part of the interface.

Goals

Scenes are essential to building componentized, organized prototypes. Scenes also make it easy to control the flow or a prototype without having to make a mess of your timeline.

Example

Steps

Optional: Download the working files for this lab

1. Copy the .fla file from Lab 2 in to a new folder called Lab 3. Rename the file yourname_lab3.fla. Open this new file in Flash.

2. Using the Scenes palette, rename the current scene to Intro. Then create a new scene and call it Prototype. Make sure that the Prototype scene comes after the Intro scene, because Flash will play the scenes in order from top to bottom.

3. Take a screenshot (or draw) a user interface in Photoshop from an app of your choosing. Make sure the UI is 640 x 480 so that it matches the dimensions of the Flash document. Save the file as a PNG or JPEG. Then make a modification to the user interface and save the file as a new PNG or JPEG. For example, an interface object could come and go, a slider could move, or an object in the UI could select/deselect.

4. Import the two files you just created in to Flash. Make sure you're still on the Prototype scene because we don't want these images in the Intro scene. Use File > Import to Library so that the images do not populate the timeline immediately.

5. Go to Window > Library so that you can see the two images you just imported. Rename Layer 1 in the timeline to UI Before and place the first image of the interface on that layer. Create a new layer on top of UI Before named UI After and place the second image on that Layer. Use the Align palette to align both of the images so that they are centered on the document.

6. Move the keyframes on the UI After layer so that when the movie plays, the animation will first show UI Before and then show UI After. Note that since UI After is on top of UI Before, UI Before could continue to play but it will be obscured by UI After.

7. Make it so that only Scene 2 loops and not the whole movie. To do this, right-click on the last keyframe on UI After and select Actions. Type:

gotoAndPlay(1);

This makes it so that at this point in the timeline, the movie will go to Frame 1 of the same scene.

8. (Optional) Using the skills learned in Lab 1 for animating a cursor, include a cursor in this animation to demonstrate that someone needs to click something.