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.
  
  

Flash Tutorials in Video Format - Watch them now at LearnFlash.com

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.

Property	Code	Example
x value	_x	bird._x = 200;
y value	_y	bird._y = 150;
transparency(0-100)	_alpha	bird._alpha = 90;
rotation	_rotation	bird._rotation = 45;
height	_height	bird._height = 60;
width	_width	bird._width = 50;
Visibility	_visible	bird._visible = false;
Horizontal Scale	_xscale	bird._xscale = 250; // 250%
Vertical Scale	_yscale	bird._yscale = 75; // 75%

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.