| Understanding Movie Clips |
| Return to the Tutorials page |
| |
|
Goal: To understand what a Movie Clip is and to place a pre-made Movie Clip (located in the library) onto the stage using ActionScript 3.0.
Imported classes: flash.display.MovieClip and flash.events.Event
Methods: addChild(), addEventListener() and
custom class BlueShoe()
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In this tutorial we will create a blinking Movie Clip and place it in the movie's library. Then using the
addChild() method we will place it on the stage.
|
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it MovieClips and save it inside the FlasherAS3_PartI
folder. In the Document Class box of the Properties panel, type MovieClips and then save the changes.
Open a new ActionScript file, name it MovieClips and then save it inside the Code folder.
You now have twelve separate files on your computer:
In the FlasherAS3_PartI folder - LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla,
CircleEllipse.fla, Sprites.fla and MovieClips.fla.
In the Code subfolder - LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as and
MovieClips.as.
Keep both MovieClips files open as we will be working with both of them simultaneously.
|
|
Return to MovieClips.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your
changes.
|
|
Return to MovieClips.as and type in the following code:
Line 01: package
Line 02: {
Line 03: public class MovieClips extends MovieClip
Line 04: {
Line 05: public function MovieClips()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save the changes.
|
|
This tutorial will require the MovieClip and Event classes so let's import them
now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.MovieClip;
Press Return/Enter.
On line 4 type: import flash.events.Event;
Press Return/Enter to add a blank line on line 5.
Place your cursor at the end of line 9 and press Return/Enter.
All of our Movie Clip code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's create a Movie Clip!
|
|
|
Did you notice anything different on line 6? Instead of inheriting the attributes of a Sprite, this class will inherit the attributes of
a Movie Clip. Going back a bit further, did you catch the difference on line 3 Usually we import the
Sprite class here but this time we imported the MovieClip class because we are
only working with Movie Clips in this tutorial.
|
|
(Definition from Adobe Flash Specs)
"Movie Clips are a key element for people who create animated content with the Flash authoring tool and want to control that content with
ActionScript. Whenever you create a Movie Clip symbol in Flash, Flash adds the symbol to the library of that Flash document. By default,
this symbol becomes an instance of the MovieClip class, and as such has the properties and methods of the MovieClip class.
When an instance of a Movie Clip symbol is placed on the Stage, the Movie Clip automatically progresses through its timeline
(if it has more than one frame) unless its playback is altered using ActionScript. It is this timeline that distinguishes the MovieClip class,
allowing you to create animation through motion or shape tweens through the Flash authoring tool. By contrast, with a display object that is
an instance of the Sprite class, you can create animation only by programmatically changing the object's values.
In previous versions of ActionScript, the MovieClip class was the base class of all instances on the Stage. In ActionScript 3.0, a Movie Clip is
only one of many display objects that can appear on the screen. If a timeline is not necessary for the function of a display object, using the
Shape class or Sprite class in lieu of the MovieClip class may improve rendering performance."
|
|
Sprites and Movie Clips are virtually identical in what they can hold and what they can do. Sprites are generally the display
object to use as they are highly functional and take little memory. However they do not contain an internal Timeline. If you would like to create an
animation contained within the display object, a Movie Clip is the display object to use.
|
|
|
Right-click over the image below and save it inside the Images folder.
Return to MovieClips.fla. Import the shoesBlue.jpg image into the library (File > Import > Import to Library).
The shoesBlue image is now a bitmap located inside the movie's library (Command/Ctrl + L).
Click and drag the image from the library to the stage.
With the image selected on the stage press F8 to convert the image into a Movie Clip. Set the name to blue, the type to
Movie Clip and then press the Advanced button to view more options.
Under Linkage select the Export for ActionScript box. This will automatically include the Export in First Frame option as well. This
ensures that all the appropriate elements will be included when the movie is published.
Under Class change the name to BlueShoe. Note that the Base class is flash.display.MovieClip. This is perfect and does
not need to be changed. Press the OK button.
An 'ActionScript Warning' message will pop up. Click OK. (What this achieves will be reviewed shortly.)
|
|
|
Let's make our blue shoe blink. In the Library, double-click on the blue Movie Clip to reach its editing-mode.
Place your cursor in Frame 2 of the Timeline and press F7 to add a blank key frame.
Return to Scene 1 and then save the changes.
Now when the movie is played, the blue shoes will appear to blink rapidly in place. Try it out by testing the movie.
Try the example: [ Sample Movie ]
The Movie Clip blinks in place on the stage...
Select the Movie Clip instance on the stage and delete it. (The original is still in the library.) Not only are we going to place it back on the
stage using ActionScript, we are going to then animate it across the stage to give you taste of things to come!
|
|
Save the changes and then return to MovieClips.as. In this section we will call the blue shoe image from the library and
place it on the stage. This is done in three steps:
- Import the BlueShoe class.
- Declare the variable (_blue), set the data type to BlueShoe and instantiate a new BlueShoe.
- Using the addChild() method, place _blue on the stage.
Step 1: Import the BlueShoe class
We already did. When the bitmap was converted into an object and we set the Linkage settings, an 'ActionScript Warning' flashed on the screen that
stated:
"A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file on export."
This means that the BlueShoe class is included in the movie.
Step 2: Declare the variable (_blue), set the data type to "BlueShoe" and instantiate a new BlueShoe.
On line 10 type: var _blue = new BlueShoe();
The variable name is _blue, the data type is the image in the library which is represented by the
BlueShoe class. A new blue shoe is instantiated when new BlueShoe() is placed in the code.
Step 3: Using the addChild() method, place _blue on the stage.
Press Return/Enter.
On line 11 type: addChild(_blue);
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see the blue shoe in the upper left corner of the stage. As the movie continues to
play, the shoe blinks repeatedly.
Try the example: [ Sample Movie ]
|
|
Now just for fun, let's add an animation. When the movie begins the blue shoe moves across the stage to the right. Remember this is sample code
that will be explained in later tutorials. Simply copy and paste the code.
Place your cursor at the end of line 11 and press Return/Enter twice. Beginning on line 13, type the following:
Line 13: _blue.addEventListener(Event.ENTER_FRAME, moveShoe);
Line 14: function moveShoe(event:Event):void
Line 15: {
Line 16: _blue.x += 15;
Line 17: }
Your code should look like this: [ view code ]
Save the changes and test the movie to watch the blinking shoe slide right off the stage...
Try the example: [ Sample Movie ]
|
|
This tutorial included some more advanced elements that were not fully explained. This is to help you gain familiarity with the language in
general and to help you see some of the actions that can be triggered using ActionScript code. The main point to walk away with is that Movie Clips
are powerful objects that can play internal animations as well as participate in movie-wide animations.
Adding animation and interactivity is possible through event listeners and custom functions. These are explained in the
Load External Text tutorial. We'll get there soon!
Next, jazz up your Sprites with filters! [ Applying Filters tutorial ]
|
