by
kirupa | 28 May 2007
In Flash CS3, you have support for creating
ActionScript 3.0 (AS3) projects. Besides allowing you to
write code in the new AS3 language, there are some
subtle differences that may go unnoticed unless you are
actively looking for new things. One such difference is
what happens when you create or convert something into a
new movie clip.
With AS3 projects, when you convert or create something
into a movie clip, you specify the name of your movie clip
like you always did. This time around, though, what happens
is that you not only create a new movie clip object, you
also have access to the class that defines your new movie
clip.
By accessing the class and writing code directly inside
it, you can bypass adding code using the timeline. For
example, the following animation was created by me adding
code to the movie clip's class file:
The actual code is defined inside the class itself. In
other words, I didn't write any code on the timeline at all,
and that is different from what you saw in my earlier
Animating Dynamic Movie Clips tutorial where everything
was written on the timeline.
In this article, I will explain how to take a movie clip,
create a class file for it, and write some code inside the
class file to create the animation you see above. Since you
are already here, I will also explain how the animation
works to create the circular motion you see above :-)
First, you will need to create a movie clip. For this
article, simply create a solid blue circle movie clip and,
in the Library, give it the class name
BlueCircle. If you don't know how to do
that, feel free to read the detailed instructions below.
Otherwise, jump on over to the
next page!
The following instructions explain how to setup
your movie and specify the blue circle:
- First, create a new animation in Flash CS3, and be
sure to set your document type to be
Flash File (ActionScript
3.0). From the Properties panel, click the button
next to the Size text and set the animation's width and
height to 300 pixels by 200 pixels respectively:
[ set your
animation's width/height to 300 by 200 ]
- While you are at the Properties panel, set
the frame rate to 25.
- Now that our stage's width and height have been
setup just the way we want, let's draw a circle. Using
the Circle tool, draw a circle with a blue solid-fill
color:
[ draw a blue, solid,
filled circle ]
- Make sure your circle has been selected
and press F8 or go to Modify | Convert to Symbol. The
Convert to Symbol window will appear. For name, enter
circle and make sure the Movie Clip
option has been selected:
[ give your symbol the name circle and
make sure it is also set to be a movie clip ]
Do not hit OK just yet. Let's make some
more modifications.
- From the same Convert to Symbol window,
find the area marked Linkage. If you do not see the
Linkage area, press the Advanced button to display it.
Check the box that says Export for Actionscript.
A few lines above that, in the Class field, replace
whatever text is displayed (probably circle) with the
text BlueCircle:
[ check 'Export for ActionScript and
enter BlueCircle for your class ]
The Base class field will automatically be
populated for you, but if it hasn't, make sure to enter
flash.display.MovieClip as
shown in the above image.
- Press OK to close the Convert to Symbol
window. After you have pressed OK, you will see your
Library display your newly created symbol:
[ your circle in your Library ]
If you do not see your Library, press Ctrl
+ L to display it.
- At this point, your circle movie clip is
stored in the Library, and you have a copy of that same
clip on your stage right now. Save this file as
rotatingCircles.fla.
At this point, you should see a blank stage with your
Library displaying the circle movie clip with the class name
BlueCircle. Right now, nothing is really being done. We'll
change that on the
next page
when you create the BlueCircle class file and add some code.
Onwards to the
next page!
|