Section 10.2. Organizing an Animation

10.2. Organizing an Animation

As you see in a lot of the examples earlier in this book, you don't have to do a thing to your standard Timeline, organization-wise. You can let Flash play your animation sequentially, from Frame 1 right through to Frame 500 (or whatever number your last frame is) with no problems.

But you can designate certain sections of your Timeline as named scenesor even just label certain framesand speeding up development time, as well as make your animations more flexible and interactive.

Organizing your animation as a series of scenes speeds up development time . If you break an animation into scenes, then you can find what you're looking for quickly; you can also easily rearrange your animation. For example, say you create an animation containing a couple hundred frames (not an uncommon length). You might find yourself getting pretty tired of looking for that single eight-frame span that shows your cartoon character reacting to the marketing copy you're adding in as an audio voice-over. Your marketing team changes its mind on the copy, and suddenly your character has to smile. They change their minds again, and instead of smiling, your character now has to look thoughtful.

If you don't organize your animation into scenes, you have to slog through your animation frame by frameall 200 of themto find the specific images you want. But if you do organize your animation into scenes, all you have to do is zip to the scene you named ralph_reacts. And if you need to reposition the ralph_reacts scene before the product_description scene, all you have to do is open the Scene panel and drag the scene where you want itno need to cut and paste.
Creating scenes and labeling frames makes your animations more flexible and interactive . If you break an animation into named chunks with scenes and frame labels, then you give your animations the potential to be flexible and more interactive, because you can write ActionScript actions that target (act on) each individual chunk . For example, you can let your audience decide whether to play the ralph_reacts scene first, last, or skip it altogether.

Tip: Both scenes and labeled frames are a natural fit for creating a Web site in Flash because they let you organize your content non-sequentially. Section 10.2.2 shows you an example of linking content to navigation buttons .

Flash gives you two options when it comes to organizing your animation into named chunks: scenes and labeled frames. The following sections describe both options.

10.2.1. Working with Scenes

A scene in Flash is a series of frames that you assign a name of your choosing. For example, you can assign the first 15 frames of your animation name "intro," the next 30 frames the name "main," and the final 15 frames the name "credits."

Each time you create a new scene, Flash displays a brand new Timeline for you to fill with content. Then, when you play your animation, Flash plays each scene in top-down order, beginning with the first scene listed in the Scene panel (Figure 10-3), and ending with the last.

As the following sections show, after you create scenes, you can rename them and reorganize them with the click of a button.

10.2.1.1. Creating a scene

Flash automatically starts you out with one scene (cleverly named Scene 1) each time you create a new Flash document.

To create additional scenes:

On the Timeline, create content for the frames you want in your first scene .

If you're using the example file scene_begin.fla, you see two layers , buttons and words, each of which extends from Frame 1 through Frame 15. (You can download this example file from the "Missing CD" page at www.missingmanuals.com/cds.)
Choose Window Other Panels Scene .

The Scene panel appears.

Figure 10-3. Every animation you create contains at least one scene (named Scene 1, unless you tell Flash differently). By using the Scene panel to create and name new scenes, you can organize long animations into manageable chunks. Flash displays the Timeline for each scene separately, so it can be easy to forget which scene you're in at any given time. In fact, your only cue is the scene name Flash displays in the Edit bar. If you don't see it (along with the little clapper icon), choose Window Toolbars Edit Bar.
Click the "Add scene" icon .

In the Scene panel, Flash creates a new scene and then places it directly below Scene 1. Flash also displays a brand new Timeline and a clean, fresh Stage (Figure 10-4).
On the Timeline, create content for the frames you want in your new scene .

When you're done, you may want to rename the scene (as discussed in the next section), and then test it by choosing Control Test Scene. Or, to create additional scenes, simply repeat steps 3 and 4.

Figure 10-4. Each time you create a new scene, Flash hides the Timeline for the previous scene and displays a brand-new workspace. At this point, Flash associates everything you add to the Stage and the Timeline to the newly created scenehere, Scene 7. (Flash names scenes sequentially; in this figure, Scenes 2 through 6 were created and then deleted.)

10.2.1.2. Renaming a scene

The names Flash gives each scene you createScene 1, Scene 2, Scene 3, and so on, as you see in Figure 10-4aren't particularly useful if you're using scenes as a way to find the frames you need quickly. Fortunately, Flash makes it easy for you to rename scenes. Here are the steps:

Choose Window Other Panels Scene .

The Scene panel appears.
In the Scene panel, double-click the name of the scene you want to change .

Flash displays the scene name in an editable text box.
Type the new name .

You'll need to refer to this name in ActionScript code if you're planning to make your animation interactive, so short and meaningful is best. For example, you might choose intro for an introductory scene, main for the meat of your animation, and credits for the last few wrap-up frames that display your company's name and contact info .

10.2.1.3. Reorganizing scenes

Flash always plays scenes in order from the scene that appears at the top of the Scene panel down to the scene that appears in the bottom. To change the order in which Flash plays your scenes:

Note: Another way to change the order in which Flash plays your scenes and frames is by using ActionScript (Chapter 9).

Choose Window Other Panels Scene .

The Scene panel appears.
In the Scene panel, click the name of the scene you want to move, and then drag it above or below the other scenes, as shown in Figure 10-5 .

The instant you let up on your mouse, Flash reorders the scenes in the Scene panel. The new order is the order in which Flash plays your animation when you choose Control Test Movie.

Note: To play just the scene currently on the Stage, select Control

Test Scene (instead of Control

Test Movie).

10.2.1.4. Scripting (targeting) a scene

In Flash parlance, targeting a scene means writing ActionScript code that performs some action on a scene.

The example in this section shows how to add ActionScript to buttons so that your audience can choose to play different scenes. Figure 10-6 gives you a quick overview of how the finished example looks.

Note: For more information on creating button symbols, see Section 7.1.4.1.

Figure 10-6. You'll often want to break an animation into scenes so that you can give your audience the ability to play the scenes independently. Here, pressing the Play Credits button plays the credits scene, pressing the Play Main button plays the main scene, and pressing the Play Intro button plays the (you guessed it) intro scene. To put together an interactive animation, you have to first create named scenes and then tie those scenes to buttons using ActionScript code.

Note: You can download the example files for this section from the "Missing CD" page at www.missingmanuals.com/cds. The file scene_no_action.fla is the starting point, and scene.fla is the completed animation with ActionScripts.

Open the file scene_no_action.fla .

In the Scene panel (Window Other Panels Scene), notice that the animation contains three scenes (intro, main, and credits). The Stage has three buttons labeled Play Intro, Play Main, and Play Credits, respectively.
Test movie.
In the test window, the word "Intro" recedes; the word "Main" approaches and recedes; and the word "Credits" approaches. Clicking the Play Intro, Play Main, and Play Credits buttonswhich only appear while the intro scene's playingturns the buttons from red to yellow but has no other effect on the animation.
Click the X in the upper-right (Windows) or upper-left (Mac) corner of the test window to close it and return to your workspace .

You're going to attach ActionScript actions to each of these buttons, starting with the Play Intro button.
Click the Edit Scene icon (Figure 10-7) and then choose "intro" if it's not already chosen .

The Edit bar displays "intro" to let you know you're about to edit the intro scene. On the Stage, you see the three buttons shown in Figure 10-7.

Figure 10-7. You can switch from scene to scene in your animation using the Scene panel, but you'll probably find clicking the Edit Scene icon much handier, because the Edit Scene icon doesn't disappear while you're working.
On the Stage, click to select the button marked "Play Intro."

In the Property Inspector, you see the button icon. If the properties you see in the Property Inspector don't appear to be button- related , make sure you haven't selected the "Play Intro" text overlaying the button by mistake.
Open the Actions panel by selecting Window Actions .

The words "ActionsButton" appear at the top of the Actions panel.
Click the Script pane, and then type the following :
```
 on (release) {     gotoAndPlay("intro",1); } 
```
Note: In this example, you attach an action to a button release event. But Flash lets you attach actions to all kinds of events: pressing down on a button, mousing over an object, dragging or dropping an object, and so on. These actions tell Flash how to handle events, and people in programming circles call them event handlers .

When you finish, your Actions panel should look like the one in Figure 10-8. The ActionScript code you just typed in tells Flash to fast-forward to the first frame of the scene named intro and begin playing the animation as soon as your audience clicks (and then releases) the Play Intro button.

Next, you're going to add to the Play Main button an action that plays the main scene.

Figure 10-8. Always double-check the Actions panel's title bar to make sure you're adding your action to the object you think you're adding it to. (If you attach your action to the wrong objectlike the text overlaying a button instead of the button itselfyour action won't work properly.) Instead of typing this code in by hand, you can construct it by clicking the Actions toolbox. You can double-click Global Functions Movie Clip Control On, choose release from the context menu, and then continue clicking and typing to build the complete ActionScript statement. But for a simple two-liner like this one, typings usually easier.
On the Stage, click to select the button marked "Play Main ."

The words ActionsButton appear at the top of the Actions panel, and the Script pane clears.
Click the Script pane, and then type the following :
```
 on (release) {     gotoAndPlay("main",1); } 
```
This ActionScript code tells Flash that as soon as your audience clicks and releases the Play Main button, you want Flash to find the first frame of the scene named main and begin playing the animation from there. (The only difference between this code and the code you created for the Play Intro button in step 7 is the name of the scene in quotes.)

Finally, you're going to attach to the Play Credits button an action that plays the credits scene. By now, this should feel familiar.
On the Stage, click to select the button marked "Play Credits."

The words ActionsButton appear at the top of the Actions panel, and once again the Script pane appears empty.
Click the Script pane and type the code that tells Flash to begin playing the first frame of the credits scene as soon as your audience clicks and releases the Play Credits button :
```
 on (release) {     gotoAndPlay("credits",1); } 
```
Next task: Copy the scripted buttons to the other two scenes (main and credits), so that no matter which scene your audience chooses to play, all three buttons will appear.
Use the Selection tool to draw a rectangle around all three buttons .

Flash displays selection boxes around each button, as well as each text box overlaying each button.
Select Edit Copy. Click the Edit Scene icon, and then, from the context menu that appears, select "main."

Flash takes you to the main scene's Timeline.
Click to select the first keyframe in the buttons layer of the main scene. Then, select Edit Paste in Place .

Flash places the scripted buttons on the Stage in the same position they appear on the Stage in the intro scene.
Click the Edit Scene icon and then select "credits."

Repeat the previous step to paste the buttons into the credits scene.

Although Flash displays the Timeline for each scene separately, as you saw in the box on Section 10.2.1, in reality all scenes share the same Timeline. So when your audience clicks the Play Intro button, Flash plays the intro scene, and then continues playing the rest of the animation, including the second (main) and third (credits) scenes. Similarly, when your audience clicks the Play Main button, Flash plays the main scene (the second scene), and continues playing the rest of the animation (credits, which is the third scene). But what you want is for Flash to play each scene once through, and then stop until your audience clicks another button. To tell Flash to stop playing when it gets to the end of a scene, you need to add another snippet of ActionScript code to each scene, as described next:

Working in the credits scene, click the layer name buttons to select the buttons layer .

Flash highlights the name of the layer, as well as all the frames contained in that layer.
Choose Insert Timeline Layer .

Flash creates a new layer (Layer 3) and then places it above the buttons layer.
Rename the new layer by double-clicking the name Layer 3 and typing in the new name actions .

When you're finished, press Return.

Tip: Get in the habit of creating a new layer (named actions) just for the actions you add to your animations. In this simple example, creating a new layer isn't a life-or-death matter; but in more complex animations, adding actions to already-filled frames can cause playback problems.
Click to select the last frame in the scene (in this case, Frame 15 ).

Flash highlights the selected scene.
Choose Insert Timeline Keyframe .

Flash places a keyframe symbol (a hollow circle) in Frame 15, as you see in Figure 10-9.
Click the Script pane of the Actions panel and then type the following ActionScript statement :
```
 stop(); 
```
This ActionScript statement tells Flash to stop playing the animation when it reaches the last frame of the credits scene.
Using the Edit Scene icon to switch, add the same ActionScript to the main and intro scenes .
You can test the scripts you've just created by selecting Control Test Movie .

This time, clicking the Play Intro button plays the Intro scene; clicking the Play Main button plays the main scene, and clicking the Play Credits scene plays the credits scene.

Figure 10-9. Here's an example of adding an action to a frame. (You know it's a frame you're adding an action to by the title of the Actions panel.) After you add an action to a frame, Flash displays a tiny symbol in that frame just like the one in Frame 15 of the actions layer.

Note: With a long exercise like this, it's super-easy to miss a step. To see a working example, check out the finished file scene.fla.

10.2.2. Working with Labeled Frames

Like scenes, labeled frames make it easy for you to target a specific portion of your Timeline with an action so that you can create flexible, interactive animations.

For example, say you're using Flash to build an animated Web site. Every time someone clicks a button on your navigation bar, you want to display a different Web page. If she clicks the Contact Us button, for instance, you want to display a Web page showing your company's contact information.

Technically, you don't have to label your frames in order to accomplish this. You can hook up your button to your Contact page by attaching the gotoAndPlay( ) function to your button and, inside the parentheses, specifying the frame number (instead of the scene name shown on Section 10.2.2). The code looks like this:

 gotoAndPlay(15);

The problem with this approach is that going back and adding additional frames to the beginning of your Timeline muffs up your code. If you added 10 frames to the beginning of your animation, for example, the old Frame 15 is now the new frame 25. So to make your button work again, you'd have to change the attach ActionScript code to this:

 gotoAndPlay(25);

A much better approach: give Frame 15 a meaningful label, like contact , and write the ActionScript code this way:

 gotoAndPlay("contact");

When you label a frame like this, Flash always associates the frame with the labelno matter what number that frame ends up being. So you can edit your Timeline to your heart's content without ever having to worry that you're breaking your actions.

The following sections show you how to label frames, and how to reference those labels in ActionScript code.

FREQUENTLY ASKED QUESTION
The Difference Between Scenes and Labeled Frames

It sounds like scenes and frame labels do the same thing: Both let me break up my animation into chunks and make the chunks interactive, and both let me target a frame using a name instead of just the frame number. So if they both do the same thing, when do I use one over the other ?

Using labeled frames is very similar to using scenes. But there are three big differences between the two:

Simply dragging scenes around in the Scene panel rearranges the way Flash plays your animation . You can't drag-and-drop to rearrange labeled frames. (You can rearrange the way your animation plays using labeled frames, but you have to write the ActionScript code to do it.)

It's harder to break up scenes than to add labels . When you use scenes, you need to either add new content for each scene as you build your animation, orif you've already created your animation and want to break it into scenes after the factyou need to cut and paste frames from the original Scene 1 into your new scenes. Hardly rocket science, but it is extra work. Adding or changing frame labels is much quicker.

You work with scenes in separate Timelines; you work with labeled frames in one big Timeline . This difference is usually the showstopper: Some people love working with content in separate Timelines; some people hate it.

10.2.2.1. Labeling a frame

Labeling a frame is easy. All you have to do is select a frame and then, in the Property Inspector for that frame, type in the label you want.

Note: As with all content (images, sounds, actions, and so on), the label you attach to a keyframe stays in force until the next keyframe.

To label a frame:

On the Timeline, click the frame you want to label to select that frame .

Flash highlights the selected frame, and the Property Inspector associated with that Frame appears. (If it doesn't, select Window Properties.)
10.2.2.2. Targeting a labeled frame

After you've labeled a frame, you can reference that label in an ActionScript action. This section shows you how.

Note: The example in this section is identical to the one on Section 10.2.1.4 except for two differences: This example shows ActionScript targeting labeled frames (using a movie clip), while the one on Section 10.2.1.4 shows ActionScript targeting scenes (without using a movie clip).

To target a labeled frame:
1. Open the file labeled_frames_no_action.fla, which you can download as described on Section 10.2.1.4 .
  
  On the Stage, you see an instance of the movie clip symbol myMovie, which contains the word "Intro" along with three buttons labeled Play Intro, Play Main, and Play Credits. (You can also download a working example, labeled_ frames.fla.)
2. Test the animation by selecting Control Test movie .
  
  In the test window, you see the word "Intro" recede; the word "Main" approach and recede; and the word "Credits" approach. Clicking the Play Intro, Play Main, and Play Credits buttons turns the buttons from red to yellow but has no other effect on the animation.
3. Click the X in the upper-right (Windows) or upper-left (Mac) corner of the test window to close it and return to your workspace .
  
  Much as in the previous section, you're going to attach an ActionScript action to each button starting with Play Intro button.
4. Choose Edit Edit Symbols to edit the myMovie movie clip .
5. .
  Figure 10-11. You can label any frames you like, not just frames in a movie clip as shown here. (But using a movie clip gives you a bit more flexibility when it comes to making your animation interactive.)
6. On the Stage, click to select the button marked "Play Intro ."
  
  In the Property Inspector, you see the button icon. If the properties in the Property Inspector don't appear to be button-related, make sure you haven't selected the "Play Intro" text overlaying the button by mistake.
7. Select Window Actions to open the Actions panel .
  
  The words ActionsButton appear at the top of the Actions panel.
8. Click the Script pane, and then type the following :
  
  on (release) { gotoAndPlay("introLabel"); }
  
  When you finish, your Actions panel should look like the one in Figure 10-12. The ActionScript code you just typed in tells Flash to fast-forward to the frame labeled introLabel and begin playing the animation as soon as someone clicks and releases the Play Intro button.
9. Using the same procedure, add the following action to the Play Main button :
  
  on (release) { gotoAndPlay("mainLabel"); }
  
  This ActionScript code tells Flash that as soon as your audience clicks and releases the Play Main button, you want Flash to find the frame labeled mainLabel and begin playing the animation from there. (The only difference between this code and the code you created in step 8 is the name of the label in quotes.)
10. Add the following action to the Play Credits button :
  
  on (release) { gotoAndPlay("creditsLabel"); }
  
  Figure 10-12. In this example, you'd get the same result typing in gotoAndPlay(1) as you do by typing in gotoAndPlay("introLabel") because both statements tell Flash to begin playing the animation at Frame 1 as soon your audience presses (and then releases) the Play Intro button. But typing gotoAndPlay("introLabel"), as shown here, is easier to remember and get right. It also acts as a kind of insurance; if you go back and add frames to your Timeline, you don't have to worry about your additions breaking this ActionScript code.
  
  The above ActionScript code tells Flash to zip to the frame labeled creditsLabel and then begin playing the animation ( after someone clicks and releases the Play Credits button).
As things stand right now, Flash plays the entire animation, from the frame label right through to the last frame on the Timeline, each time someone clicks a button. Just as you did when you made buttons play scenes (Section 10.2.1.4), you need to tell Flash when to stop. This time, you'll create three simple frame-based scripts to tell Flash where to stop when it starts playing each labela kind of end-label, if you will:
1. Click the layer named buttons to select the buttons layer .
  
  Flash highlights the name of the layer, as well as all the frames contained in that layer.
2. Choose Insert Timeline Layer .
  
  Flash creates a new layer (Layer 3) and places it above the buttons layer.
3. Rename the new layer by double-clicking the name Layer 3 and typing in the new name actions .
  
  When you're finished, press Return.
4. In the actions layer, click Frame 15 to select it. Then choose Insert Timeline Keyframe .
  
  Flash places a keyframe symbol (a hollow circle) in Frame 15.
5. In the Script pane of the Actions panel, type the following ActionScript statement :
  
  stop();
  
  This statement tells Flash to stop playing the animation when it reaches Frame 15.
6. In the same manner, add the stop( ) ; action to Frame 45 and Frame 60 (Figure 10-13) .
  
  Make sure you're in the actions layer, and use the Timeline to select the correct frame.
  
  Figure 10-13. Top: You want to make sure you add actions to keyframes and not regular frames. That's becausejust as with any other contentFlash ignores you when you try to add an action to a regular frame and instead places the action in the previous keyframe. You can tell where Flash places an action because of the tiny "a" that appears in the keyframe.
  Bottom: When you're inserting several identical actions, it's easy to forget which keyframe you're working with. Keep an eye on the tab at the bottom of the Script pane and you'll never be lost. (Here, you're adding an action to Frame 60.)
7. Test the scripts you've just created by selecting Control Test Movie .
  
  This time, you see the Intro play through once. Clicking the Play Intro button replays the Intro scene; clicking the Play Main button plays the main scene; and clicking the Play Credits Scene button plays the credits scene.
8. Click the X in the upper-left corner of the test window to close it and return to your workspace .
  
  Your animation's almost perfect. However, unless you tell it otherwise , Flash always plays an animation once through, from the beginning until the endor until it reaches a stop( ) statementeach time the animation runs. In this case, you don't want Flash to do that; you want Flash to display only the buttons and play a scene only after someone clicks a button. To stop the Intro from automatically playing once through, attach an action to the first frame of the main Timeline telling Flash to stop playing the movie clip as soon as it loads the movie clip into the frame.
9. Select Edit Edit Document .
  
  Flash returns you to the main Timeline, whose single keyframe contains an instance of the myMovie movie clip.
10. On the Stage, click the movie clip instance to select it .
  
  In the Actions window, click the Script pane and then type in the following ActionScript code:
  
  onClipEvent (load) { stop(); }
11. Test the script by selecting Control Test Movie .
  
  This time, the Intro doesn't play until you click the Play Intro button. (The other buttons work just as you programmed them to.)