Sub: MAAT Code:3350705 Sem:5th

10. Write, test and debug small applications with Scenes and Frame
Labels

1. Create a New Scene in Flash

o 1
Open an existing Flash movie FLA file in Flash: Click the "File" menu, and choose "Open."
This displays the Open dialog box. Navigate to the file, select it, then click the "Open"
button.

o 2
Click the "Window" menu, choose "Other Panels," then select "Scene." This opens the Scene
panel.

o 3
Click the "Add Scene" button in the lower-left corner of the Scene panel. Flash adds a new
scene named "Scene 2." To rename the new scene, double-click the scene name and type the
name for your new scene. Flash creates a new scene with an empty stage and timeline. You
can now create the content for your new scene as you would any new Flash movie.

2. Arrange Multiple Scenes in Flash

o 4
Open an existing Flash movie FLA file containing multiple scenes in Flash: Click the "File"
menu, and choose "Open." This displays the Open dialog box. Navigate to the file, select it,
then click the "Open" button.

o 5
Click the "Window" menu, choose "Other Panels," then select "Scene." This opens the Scene
panel. The Scene panel displays the scenes in the order they will play. You can rearrange the
scenes by changing the order of scenes in the list.

o 6
Click and hold the mouse button on the scene you want to move, and drag the scene to its
new location in the list. As you drag, Flash displays a green line above the scene name,
indicating the new location for the scene. When the green line displays in the location where
you want to move the scene, release the mouse button.

o 7
 Repeat step four until you have rearranged the scenes as desired.

o 8
Hold the CTRL button on your keyboard and press Enter to test the movie.

How to Use Labels in Flash

Interface and game programmers find Flash frame labels useful.

Frame labels are easy to apply in Flash, but using them and understanding their benefit takes more in-depth
knowledge of the software. Most Flash users are familiar with ActionScript, Flash's built-in scripting language,
and use it for everything from relatively simple button programming to complex coding of interactive
games

. ActionScript users love frame labels because they make code more robust. Using them means your code
won't break when you add or remove frames, which is a danger if you use ActionScript without frame
labels. Have a question? Get an answer from online tech support now!


Instructions
1.

o 1
Create three layers in a new Flash document, one called "actionscript," one called "buttons"
and one called "picture." This simple button example will show you how using frame labels
can make your coding efforts easier.

o 2
Create a new keyframe by right-clicking and choosing "Insert Keyframe" in the first frame of
the "buttons" layer. Within that keyframe, create a red button. Draw a red circle using
Flash's drawing tools. Right-click the shape and select "Convert to Symbol." Give the button
a name, and make sure that "Button" is selected in the "Type" drop-down menu. Once
you've defined the button as an item in your Library, you need to give the instance of the
button on the stage a name. Select the button and choose "Window" > "Properties." In the
white box at the top of the "Properties" window, type "redbtn."

o 3
Import a picture of your choice into Flash. When you click your button, this is the picture
that Flash will display. Choose "File" > "Import" > "Import to Library." Navigate to your
photo and click "Open."

o 4
 Select the second frame on the "picture" layer. Right-click it and choose "Insert Keyframe."
From your Library, click and drag the picture you imported in the previous step onto the
stage. If the Library isn't visible in your work area, select "Window" > "Library" to show it.

o 5
Right-click the picture and choose "Create Motion Tween." If you see a message telling you
that you need to convert your image to a symbol first, click "OK." A blue tween span will
appear on the timeline. Adjust the length of the tween to 50 frames by clicking and dragging
the end of it.

o 6
Drag the red timeline indicator to the second frame and click your picture to select it.
Choose "Window" > "Properties." Under "Color Effect," choose "Alpha" and set the alpha
value to zero. Your picture should appear transparent. Drag the timeline indicator to the
50th frame and open the "Properties" panel again. Set the alpha value to 100. When you
program your button, your picture will fade in slowly when it's pressed instead of popping
up suddenly.

o 7
Select the first frame of the "actionscript" layer and choose "Window" > "Actions." Now,
you'll write the code that makes your button work. Type the following:
stop();
redbtn.addEventListener(MouseEvent.CLICK, showimage1);
function showimage1(event:MouseEvent):void {
gotoAndPlay(2);
}
This code adds an event listener to your button. When you click it, Flash runs a function that
sends the program to the second frame, causing it to play the animation that fades your
picture in. The line of code "gotoAndPlay(2)" tells Flash to start playing from the second
frame.
Test your button to make sure it works as expected. Click "Control" > "Test Movie."

o 8
Pretend that you want to add an extra animation before users see your button. Add a few
extra frames at the beginning of your timeline by clicking and dragging the beginning of the
tween span to move it down five frames. Move individual frames in other layers by clicking
them and dragging them down to the fifth frame, just before the start of your tween span.

o 9
Test your button again. You'll notice that it doesn't work. That's because the "gotoAndPlay"
command tells Flash to start playing your tween from the second frame, and your tween
span starts in the sixth frame now. You inserted extra frames, but your ActionScript code
didn't change to account for your modification.
o 10
Delete your tween and re-create it. This time, after you create a keyframe, look at its
"Properties" before you drag in your photo. You'll notice that you can specify a label name.
Label the frame "start" and continue creating your tween like you did in the previous steps.

o 11
Replace the "2" in your ActionScript code with your frame label in quotation marks ("start").
The final code should read:
stop();
redbtn.addEventListener(MouseEvent.CLICK, showimage1);
function showimage1(event:MouseEvent):void {
gotoAndPlay("start");
}

o 12
Test your button. You'll notice it works again, even though you didn't move any frames.
That's because you've changed your ActionScript to refer to a frame label that stays
constant, even if you insert or delete frames from the timeline. If you want, remove a few
frames and test your file again to prove it to yourself.