Week 8 Topics

Chapter 10 - Movie Clips

As we saw in Chapter 6, the timeline of graphic symbols is related to the Main Timeline; a graphic symbol with 10 frames will require 10 frames in the Main Timeline to play. Movie clips symbols are different; they require only a single keyframe on the main Timeline to play. Movie Clips cannot be previewed simply by pressing enter as is done with button and graphic symbol instances. Movie clips can be previewed in the library (independent of the rest of the movie) by selecting Control>Test Movie or by publishing the movie.

Exercise 1 - Creating a Movie Clip (using movieClip.fla)

  1. Click the Insert Layer button to add a new layer, renaming it fillTween. Press F11 to open the library, drag an instance of gfxFill graphic symbol onto the stage, and position it using the arrow keys so that it exactly covers the X outline. Change the magnification level to 200% to help with this positioning.
  2. Select frame 20 and press F6 to add a keyframe and then repeat this for frame 40. With the playhead on Frame 40, select the instance on the Stage, and using the Property Inspector, choose Alpha and 0% (this makes it invisible). Move the playhead to frame 1 and similarly set alpha to 0%.
  3. Click in the Timeline to the right of the fillTween layer name to select all the frames on this layer. Choose Tween>Motion in the Property Inspector. In the outline layer, click on frame 40 and drag down to the text layer and press F5 to add frames up to frame 40 in both layers. Press Enter to test the animation
  4. Click to the right of the text layer name to select all the frames in that layer. Shift+click to the right of the outline and fillTween layer names to select all the frames on both of these layers as well. Choose Edit>Cut Frames.
  5. Choose Insert>New Symbol and make it a Movie Clip symbol named mcOutlineFill. Select the first keyframe and choose Edit>Paste Frames to put all the layers and frames inside the Movie Clip. Click on Scene 1 tab to return to the Main Timeline. Select the text layer and click on the Trashcan icon in the timeline to delete the layer and do the same for the outline layer. Double click on the fillTween layer name and name this layer MovieClip. Click on frame 42 and drag backward to frame 2 to select frames 40 through 2 (this over-selecting is not necessary, but useful to avoid missing a frame). Right click and choose Remove Frames.
  6. Open the library by pressing F11 and drag an instance of the movie clip you just created onto the Stage. Choose Control>Test Movie to preview it. Notice that the Movie Clip plays even through there is only one frame in the main Timeline because the Movie Clip timeline is indendendent of the Main Timeline. Save the file. Note that the symbol could have been created by starting with Insert>New Symbol but the above steps are to show how one might do this if one created something in the main Timeline and then made a Movie Clip out of it.

Exercise 2 - Animated Graphic Symbols versus Movie Clip Symbols

  1. Use the file from the previous exercise and save it as mcVsGfx.fla. Click on the stage and change the document properties width to 400 px. Press F11 to open the Library and select the mcOutlineFill symbol and click the arrow at the top right of the panel to access the options and select Duplicate. Name the symbol gfxOutlinefill and make it a graphic symbol.
  2. In the Library, select the new symbol and press Play to test it, doing the same for the symbol it was created from. They should look the same, and their timelines will look the same as well.
  3. Click on Scene 1 to return to the Main Timeline, lock the movieClip layer and insert a new layer, renaming it animGfx. Drag an instance of the gfxOutlineFill symbol onto the Stage and position it to the right of the mcOutlineFill Movie Clip symbol. Select the Text tool, and click below the gfxOutlineFill instance and write Animated Graphic Symbol. Lock this layer and unlock the other layer and add the text Movie Clip Symbol below the mcOutlineFill instance (on the left).
  4. Press Enter to test the movie -- nothing happens but then choose Control>Test Movie and notice that the Movie Clip symbol plays while the other does not. Because there is only one frame in the main timeline, the graphic symbol (which may have many frames), will only display the first one. For the Movie Clip, it doesn't play when you press Enter, but will display with Control>Test Movie.
  5. In the main Timeline, click and drag to select Frame 40 in both layers and press F5 to add 40 frames to both layers. Press Enter to test the movie and now the animated Graphic symbol will play but the Movie Clip symbol will not because it is now viewable through pressing Enter. Both will play under Control>Test Movie. Save the file.

Exercise 3 - Creating an Animated Rollover Button - We will put a movie clip in the Over State of a button symbol. Because of timeline independence, the movie clip (with many frames) can play, even though there are only 4 frames in a Button symbol - Up, Over, Down, and Hit.

  1. Using the file from the last exercise, change the stage width to 600 pixels and open the library (F11). Click on the new symbol button in the bottom left corner of the library, and name the symbol btnAnim, set the behavior to Button, and click OK In the symbol, rename layer1 to outline and drag an instance of the gfxOutline symbol onto the Stage.
  2. With the outline still selected, choose Window Align and click the To Stage button, and then click Align Vertical Center and Align Horizontal Center buttons to perfectly align the instance in the center of the Stage. Note that the To Stage button is a toggle switch so if it isn't working, it may be in the wrong state (the button will look like it's depressed after you push it) so click the button again and then click the Align buttons on the left again.
  3. Drag an instance of the gxfText symbol onto the Stage, just to the right of the X outline. With the Align panel still open, click Vertical Center in the Align panel (thus we are aligning it vertically with the center of the stage).
  4. Press F5 in the Down state to add frames in the Over and Down states of the button. Lock the layer and insert a new layer and rename it movieClip (this will of course hold a movie clip). In the library, right click on the mcOutlineFill Movie Clip symbol to bring up a drop down menu (or click on the panel option arrow at the top right of the library) and click Duplicate, and name this mcOverAnim and give it a behavior of MovieClip. In the library, double click the icon for this symbol to open the copy of the movie clip symbol for editing.
  5. Click to the right of the text layer to select the entire layer and click on the Trashcan icon to delete the layer. Do the same for the outline layer to delete it. Scrub the playhead to preview the movie clip. In the library, double click on the btnAnim icon to open the button symbol's timeline and press F7 in the movieClip layer in the Over frame and then in the Down frame to add blank keyframes to both states of the button.
  6. In the Over state of the button, drag an instance of the mcOverAnim movie clip onto the stage and with the Align panel center it in the middle of the stage and then lock the movieClip layer. Insert a new layer and rename it hit.
  7. Click to the right of the layer name and then drag the hit layer below the outline layer. Press F7 in the hit frame to add a blank keyframe. In the toolbox, select the Rectangle tool and draw a rectangle that covers the X outline and the boarding.com text (you can unlock the outline layer and turn Onion Skin Outlines on).
  8. In the Main Timeline, lock both the animGfx and movieClip layers. Insert a layer and rename it animBtn. Use the arrow tool to drag an instance of the btnAnim Button symbol onto the Stage to the right of the animated Graphic symbol. Click on the Text tool and add Animated Button Symbol below the instance. Choose Control>Test Movie. Note that it plays only in response to a mouseover unlike the others. Save the file

Exercise 4 - Animated Rollover Button in Action (using animBtnLive) - We will use the animated rollover button in a different movie and place it in a web page interface.

  1. Using the file from the previous exercise, press F11 to open the library. Open the animBtnLive.fla file. Open the library (F11) if it is not open. Notice that there are two libraries -- because yoiu never closed the previous project and made sure the library was open before you opened the current project, the library for the previous project will stay open until you either close the file or the library for that project. This is another way you can work with the library from another project in addition to the method learned in Chapter 9 (File>Open as Library).
  2. In the main Timeline of the current project, insert a new layer and call it logo. Drag an instance of btnAnim from the previous library onto the Stage and place it over the black box. This also puts the btnAnim symbol in the library of hte current project. Choose Window>Transform and with the constrain box checked, enter 75% in either the height or the width field and hit enter. Choose Control>Test Movie to test the animation. Save the file.

Revised: March 13, 2006. Comments to William Pegram, wpegram@nvcc.edu