Clips
 Up

Movie Clips

Movie Clips (also called MCs) are unique symbols -- literally in a class by themselves -- and their construction, methods, behavior and properties are unlike any other symbols in Flash. Basically, MCs are mini-Flash movies. They have their own Timeline, which can contain as many frames and/or keyframes as you want. You can add buttons, graphics and graphic symbols, animation, sounds, text fields, and even other MCs into them. Then you can place your MC as its own entity on the Stage in your main movie's Timeline.

You can load MCs from your Library to your Stage dynamically with ActionScript. Scripting MCs dynamically gives you greater control in loading, unloading, placement, and playback of Movie Clips on the Stage. You can also load external Flash movies (SWF files outside of your movie) into your movie while playing back. You can even dynamically load MCs into MCs on your Stage, or load MCs from other FLA files' Libraries into your movie.

TIP
Movie clips can be easily identified in ActionScript by naming your symbol with an _mc extension, such as myClip_mc.

level numbers

When you begin loading MCs and SWFs dynamically, it's important to know that every Flash movie document contains a visual stacking order of numbered levels, starting with _level0 and going up to just about as many as you'd like -- well, officially the topmost level is _level16534. Although you probably won't need that many levels, you will need to understand the basics of how levels work.

First, don't confuse a movie's levels with its layers -- you cannot see or manipulate levels until you load something onto a level and thus create it. Your main movie exists on _level0. If you load an external MC (or JPG) into your movie and do not specify the level number, you replace the contents of your Stage (your movie) with the external file on _level0.

nest MovieClips

Because of the ability to nest MCs inside of each other, Flash utilizes a parent-child hierarchy. The parent is the MC containing the child MC. When scripting to a child MC, you must first reference it as the child of a parent clip by referring to it with the instance name of the parent before it, like this: myClip.childClip_mc. You can also reference it using _parent like this: _parent.childClip_mc.

registration points

If you dynamically load an MC onto the Stage but do not specify an X or Y position on the Stage, Flash automatically positions the MC in the Stage's 0, X and 0, Y position -- that is, the upper-left corner. You probably don't always want your MC loaded in the Stage's upper-left corner, so you need to specify the X and Y position you want your MC placed upon on the Stage in ActionScript.

Also, for exact positioning, you need to know your MC's X and Y (horizontal and vertical) registration points. Usually a symbol's registration points are at the center of the symbol -- this happens automatically if you select an item on the Stage and convert it to a symbol.

However, when creating MCs for dynamic loading, it's best to design them with their X and Y positions set to 0, 0 -- the symbol's upper-left corner. That way you can always envision how your MC will load dynamically. Also, it helps to design a symbol on the Stage in the exact X and Y position where you want to load your MC, and target this movie clip to load your dynamic MC into. This way you'll know exactly how your MC will appear on the Stage.

Probably the best way for you to grasp how MCs can be used is to try them out. Go to this lesson's first assignment ("Create Movie Clips") now to create a Movie Clip for the Web site of our fictitious company, Acme Interactive, and then learn to dynamically load MCs. When you've finished that assignment, come back to this lesson, and we'll delve into Components

Components

New in Flash MX, Components are special kinds of Movie Clips comprised of commonly used GUI (graphical user interface) elements such as push buttons, scrollbars, drop-down listboxes, checkboxes, and radio buttons. All of the interactivity and functionality of these kinds of UI controls are prebuilt for your use, and you can use ActionScript to customize Component parameters to fit your needs.

Components can be accessed by choosing Window > Components or by pressing the Command+F7 (Mac) or Ctrl+F7 (Windows). You can also download new sets of Components from Macromedia's Web site.

For some practical experience with Components, let's add some scrolling text to the Acme Interaction Web site, with the help of the ScrollBar Component. Open FlashMX04.fla which you saved at the end of Lesson 4's assignment, and follow these steps:

  1. Create a new layer in your movie and name it text.
  2. Choose the Text tool, and click and choose Dynamic Text in the Properties panel, as shown in Figure 5-1.

Figure 5-1: Text Properties panel.
Figure 5-1: Text Properties panel.

  1. Pick Arial, a system font, and a readable font size such as 14 points. Make the text black and choose Multiline from the Line type pop-up menu.
  2. Click on the Stage and drag a good-sized text box, about 1/3 the height and width of the stage. Make sure to name the textfield instance -- let's call it myText_txt.
  3. Open the Components panel (Command+F7, Ctrl+F7, or Window > Components), shown in Figure 5-2.

Figure 5-2: Components panel.
Figure 5-2: Components panel.

  1. Click and drag the ScrollBar Component to the right edge of the textfield. When the ScrollBar is properly attached to the textfield, the name of the textfield will appear next to the Target Textfield label in the Component property panel.
  2. Resize the scrollbar to fit your textfield by typing a number one pixel bigger in the scrollbar's Height field in the Property panel. (You need that extra pixel to accommodate the graphical elements of the scrollbar.)
  3. In the text layer, put a keyframe under every section label, and then place a few paragraphs of text in each keyframe. Make sure you have enough text to warrant scrolling (that is, more text than the box can fit), or your textfield won't scroll.
  4. Test your movie (Command+Return, Ctrl+Enter, or choose Control > Test Movie), and click your scrollbar to see your text scroll.
  5. Save your file

Digital Video

You can import digital video files into your Flash movie just as you import any other files, using File > Import, Command+R or Ctrl+R. However, digital video files are naturally huge files due to all the moving bitmaps and large sound tracks, and they can bog down the rest of your movie so badly that your movie may not start playing for 15 minutes or even hours, depending on your user's Internet connection speed! Therefore, let's concentrate on loading external video files dynamically into our movie. This way, our movie can download and play independently of the constraints of a large video file.

Your best bet in working with digital video is to convert the video file into a Flash SWF file, and then you can script to it like any other external SWF. That is exactly how we will be using video in this lesson. You'll be using an Embedded Video file that has already been saved as a Flash SWF file. In the future, if you ever want to use a digital video file such as a QuickTime movie as an external SWF, (or if you want to use your own digital video file instead of the SWF provided in this lesson) you can follow these steps:

  1. Open a new Flash document and import the video file. Choose File > Import, select All Video Formats in the Files of type section, and click Open. The Import Video dialog box shown in Figure 5-3 appears.

Figure 5-3: The Import Video dialog box.2;Choose to Embed the video in a Macromedia Flash document.
Figure 5-3: The Import Video dialog box.2; Choose to Embed the video in a Macromedia Flash document.

  1. Click OK in the Import Video Settings dialog box. Look at the embedded video file now in your Library and you'll notice the Embedded Video symbol has a new icon.
  2. Create a new MovieClip symbol and drag your Embedded Video symbol to your MC's stage.
  3. Set the MC's registration point to 0,0 in the upper-left corner.
  4. Change your Stage's height and width dimensions to match the imported video's dimensions, and drag your new MC to the Stage. Line your MC's registration points up with the Stage's 0,X and 0,Y coordinates, that is, the upper-left corner.
  5. Publish your movie as a Flash-only document (a SWF). Make sure to compress it in the Publish settings.

The power of video is an extremely impressive element to be able to add to your Web site. Making it easily available to users without holding up the rest of your Web site's playback is even more impressive. Go to this lesson's second assignment, "Add Digital Video Clip to Web Site," and see how easy this can be. You'll also add VCR-like play and stop controls for the video clip.

moving on

You've done a lot of work (and learning) in this lesson and its assignments. The assignments are long, but enable you to do the work yourself, which is often the best way to learn. Test yourself with the quiz, and then head on to Lesson 6

Assignment; Create Movie Clips

Open Flash file FlashMX04.fla which you saved at the end of Lesson 4's assignment. We'll continue working in that file.

Let's first create a MC (Movie Clip) containing an animated logo for our fictitious company, Acme Interactive. We'll place it on the Stage, and then create another MC to load dynamically into our logo MC.

Here are the steps to create the animated logo MC:

  1. Insert a new symbol by choosing Insert > New Symbol, pressing Command+F8 or Ctrl+F8.
  2. The Create New Symbol window appears. Type in the name logo_mc, click the Movie Clip Behavior radio button, and make sure to check Export for ActionScript in the Linkage section, as shown in Figure 5-4. (Click the Advanced button if the Linkage section is not visible.) Notice the name logo_mc automatically appears in the Identifier field, and the Export in first frame check box is also automatically checked. Click OK.

Figure 5-4: Check the Linkage options in the Create New Symbol dialog box.
Figure 5-4: Check the Linkage options in the Create New Symbol dialog box.

  1. Flash automatically takes you to the Edit Symbol window. Note the small crosshairs in the middle of the window, indicating your symbol's center X and Y points. Open your Info panel if it's not already open (Window > Info, Command+I or Ctrl+I). Place your mouse on the crosshairs. In the Info panel, you'll see a crosshairs symbol and 0.0 for both X and Y.
  2. Choose the Text tool from the Toolbox, click in the Edit Symbol window and type Acme Interactive. Use whatever font and color you want, but make the font size big -- at least 30 points.
  3. Switch to the Select arrow tool, and click your block of text. In the Info panel, type 0.0 for X and 0.0 for Y. That defines the upper-left hand corner of our MC as 0,0.
  4. With your text still selected, break it into shapes by repeatedly pressing Command+B or Ctrl+B (or repeatedly selecting Modify > Break Apart) until the letters are just filled shapes on the Stage.
  5. Choose the Ink Bottle tool, and a stroke color and size, and stroke each of the letter shapes with a contrasting color. You may need to magnify your view to do this. A quick shortcut for the magnifying Zoom tool (when you're not using the Text tool) is to simply press the M key on your keyboard.
  6. Marquis-select each letter shape separately, including its stroke, and group it (Command+G or Ctrl+G).
  7. In layer 1 on our MC's timeline, place a keyframe (F6) in frame 10 and frame 20. Play around with the letters in keyframes 10 and 20, keeping frame 1 intact. You can resize the letters, move them around, whatever you feel like. Have fun creating a frame-by-frame animation. Play your animation back (press Return or Enter), and add in as many keyframes as you like to get the effect you want. Use Onion Skins to line up your animated letters.
  8. Save your movie.
  9. Switch back to the Stage (Command+E or Ctrl+E) and create a new layer for your logo. Name it MCs. Place your logo_mc where you'd like it on the Stage in frame 1 of the MCs layer. Be sure to give your movie an instance name in the Property panel while you have it selected. Let's call it logo.
  10. Test your movie (Command+Return, Ctrl+Enter, or choose Control > Test Movie) to see your MC. Movie Clips do not play on the Stage -- you have to use the Test Movie action to see them animate. Note your MC is looping. Because Movie Clips contain their own Timeline, they loop endlessly unless you put a stop action in your MC's Timeline.

Now create a static version of the animated logo and script it to load dynamically when a user clicks a button to go to another section. Here's how:

  1. In the Library, select the file logo_mc and from the Library options pop-up menu (click the button in the upper right-hand corner) choose Duplicate.
  2. The Duplicate Symbol window appears. Name the duplicate staticLogo_mc and make sure Movie Clip is selected for Behavior, and that Export for ActionScript and Export in first frame are checked. Click OK.
  3. Flash automatically jumps you to the Edit Symbol window (if it doesn't, press Ctrl+E). In layer 1, shift-select frames 2 through 20, and then press Shift+F5 or choose Insert > Remove Frames to delete the frames. What's left are only the letters on frame 1 -- a static version of our logo.
  4. Switch back to the Stage (Command+E or Ctrl+E). Take note of the X and Y coordinates of logo_mc on the Stage. Put a blank keyframe in layer MCs under the frame label about us. When a user clicks about us or any of the other sections, you want him to see a static version of the logo. Lock layer MCs.
  5. Click in the about us frame in the actions layer and launch the Actions panel if it's not already open (F9).
  6. In the Actions panel, go to Objects > Movie > MovieClip > Methods and choose attachMovie by double-clicking it. Note the words <not set yet> before the dot and attachMovie in the Script panel. Place your mouse in the Object field, and then click the target icon to Insert a Target Path.
  7. The Insert Target Path window appears and you'll see an icon with the word this next to it (this is another name for _root, or your base Flash movie). Click this, and click OK.
  8. In the Parameters window, type "staticLogo_mc" (including the quotes) for the ID Name of the file in your Library, "staticlogo" for the new name, and 1 for the depth. Don't worry about entering anything for the [initObject] parameter now.
  9. Switch to Expert Mode by clicking in the View Options pop-up menu. At the end of your first line of code (this.attachMovie("staticLogo_mc", "staticlogo", 1); press Return or Enter for a new line and type the following exactly:
staticlogo._y = 25;
  1. Press Return or Enter again for another new line and type the following exactly:
staticlogo._x = 390;
Your script should now look like this, and is shown in Figure 5-5: 
this.attachMovie("staticLogo_mc", "staticlogo", 1);
staticlogo._y = 25;
staticlogo._x = 390;


Figure 5-5: Writing the attachMovie script in the Actions panel.

You've just dynamically attached a MC from the Library and positioned it on the Stage with ActionScript. Now let's write a quick script to make sure the static logo MC you just attached doesn't show at the same time that the animated logo does, which will happen if the user clicks back to the beginning of the movie. Here's how to write that script:

  1. Click in the start frame label (frame 1) of the actions layer. Launch the Actions panel if it's not open. Note the script statement you wrote earlier to stop our music sound: stopAllSounds();.
  2. Switch to Expert Mode if you're not still in it. Add a new line to the end of the stopAllSounds(); statement by pressing the Return or Enter key. Type this exactly:
staticlogo.removeMovieClip();
The script in frame 1 should now look like this: 
stopAllSounds();
staticlogo.removeMovieClip();
  1. Test your movie (Command+Return, Ctrl+Enter, or choose Control > Test Movie) to see your MCs load and unload.
  2. Save your file -- you'll use it when you return to Lesson 5 and explore Components. Go there now

Quiz

Question 1
Movie Clips are special kinds of _________________.

A) symbols
B) buttons
C) graphics
D) components

Question 2
Movie Clips can have their own _______________________. (Check all that apply.)

A) buttons
B) scriptable Timelines
C) symbols

Question 3
What are components in Flash MX used for?

A) Buttons, graphics, and sounds
B) Interactive GUI elements
C) Common Libraries
D) Icons

Question 4
What are registration points? (Check all that apply.)

A) They're used to snap symbols to the Stage.
B) They usually in the center of the symbol.
C) They're indicative of the X and Y coordinates of an object.
D) They're where you register your Flash program.

Question 5
You can dynamically load external SWF files into which of the following?

A) A graphic
B) A Component
C) A Movie Clip
D) The Library

Question 6
Where do you set the X and Y coordinates for a symbol?

A) On the Stage
B) In the Property panel
C) In the Library
D) In the Info panel

Question 7
To be able to script to a symbol, you must check the Export for ActionScript option in which area?

A) Import video dialog box
B) Linkage section of the Create Symbol/Convert to Symbol dialog box
C) Property panel
D) Library
 

Previous Up Next