Creating MovieClips in Flash MX

This tutorial will show you the basics of creating and using Movieclips in Flash MX. Most of the information will also be applicable to Flash MX2004.

• First up, draw something that will be the first frame of your movieClip.
• Make sure that you have created a new layer to contain your movieclip.
• Select the whole of the drawing with the Selection Tool (The black Arrow).
  
• Hit the key F8 (or select Menu Items "Insert" - "Convert to Symbol" ), Tick the MovieClip radio button , and give it an actionscript name.
  
  
• Open the library by hitting key F11 or selecting Menu Items "Window" - "Library".
• Double click on the bird_mc movieclip in the library.
  
  
• This will open up the editing stage for movieclips.
• On the timeline, select frame 2 and hit key F6 to create another keyframe.
  
  
• Move the character around a bit. I just moved the wings a bit. Create another keyframe on frame 3. Move the animation around a bit more. Create as many frames until you have an animation that loops from finish to start.
• Drag the movieclip from the library to the stage. With the movieclip selected, open the properties window and find the "instance Name" textfield.
  
  
• Write the name for its stage name in that textfield. I chose "bird". That will be the actionscript name that i will use when coding the movieclip.
  
  

MovieClips and Actionscript

Movieclips have many properties that can be used to program our movieclips. Here are a few of them that are most commonly used.

Well lets start using Actionscript. Note. This code is Actionscript 1.0. Flash MX2004 uses Actionscript 2.0. Have a look in the Actionscript 2.0 section of this website for more details.
Create another layer and call it "Code".


Keep frame 1, code layer selected and open the Actions window by hitting the F9 key or Selecting menu items "Window" - "Actions".
Then write this simple script in that window.

_root.bird._x = 200;
_root.bird._y = 150;

"_root." means the main flash timeline. I always use it to save confusion .
Press "Control" + "Enter" simultaneously to play the movieclip.
So what did the above script do? It moved the x-position to 200 pixels and the y-position to 150 pixels. Position (0,0) Starts at the top-left corner of the stage. Let's use some more of the properties we outlined above.

_root.onLoad = function(){
	// position the clip
	_root.bird._x = 150;
	_root.bird._y = 200;
	// change transparency & rotate
	_root.bird._alpha = 50;
	_root.bird._rotation = 45;
}

The onLoad function is called when the frame is first loaded. It initialises or sets the initial values for any properties.
The onEnterFrame function is called over and over again when the main timeline loops back and forth. Try this:

_root.onLoad = function(){
	_root.bird._x = 0;
	_root.bird._y = 200;
}
_root.onEnterFrame = function(){
	// move right 1 pixel per frame
	_root.bird._x += 2;
	// change alpha
	_root.bird._alpha -= 1;
	// rotate
	_root.bird._rotation += 2;
}

Try the rest of the movieclip properties (height, width, X scale etc ) and experiment with them to see how they work. Experiment with the changing values of all the properties and change signs from "+" to "-" and vice-versa.

Recommended Book
Macromedia Flash Animation and Cartooning
by Ibis Fernandez
Master Flash animation and cartooning using this complete hands-on guide. You'll discover shortcuts for drawing heads and bodies, developing your own characters, and learn to incorporate movie techniques.
Buy Now !

Resources

More flash MX tutorials
Steve's Forums
"Flash MX Bible" by Robert Reinhardt