How do you attach Movie in AS 3.0?

Migrating from ActionScript 2.0 to 3.0 has been a bit bumpy, since my brain has been trained to solve problems in AS 2 for a very long time. While starting out on my mission to conquer AS 3, I realized that I use to rely on AttachMovie to dynamically place assets on stage. Unfortunately, attachMovie has been replaced with addChild. So the question becomes: How do I work with assets in the library? The answer is fairly simple, especially if you have been developing Object-Oriented Programming in AS 2.0. You can assign a class to it, or let flash automatically assign a class to it. We will cover a few different tasks in the following examples.

EXAMPLE 1: basic attach movie

Lets start from scratch open up Flash CS3.
Save it.
Select the rectangle tool and draw a rectangle on stage (I drew a red rectangle).
Select the rectangle right click (or ctrl click MAC) select Convert to Symbol option.
In the Name dialog enter a name (I entered redRectangle).
In the Type radio buttons select MovieClip.
In the Linkage dialog select Export for ActionScript, this will automatically select Export in first frame radio button, which basically means the symbol is to be compiled in the resulting .swf file. Note In the Class dialog box that the MC name has been provided (in my case it says redRectangle). Note in the Base Class dialog Flash has furnished a base class for you, no need to change this.
Select OK.

linkage_dialog

Flash has basically generated a linked class by the specified name automatically as a subclass of MovieClip.
Delete the rectangle mc you created from the stage.
All we need to do now is write code to access the class/rectangle.
Since we started this out from scratch we need create the base class for our fla. Open up your text editor and create a class like so:

package{
import flash.display.Sprite;
import flash.display.MovieClip;

public class AttachMovieClipExample extends Sprite{

public function AttachMovieClipExample()
{

}

}
}

Save this class as AttachMovieClipExample.as and make sure its in the same folder as the fla.
Now go back to the Flash Ide and open the properties panel and under Document class enter AttachMovieClipExample. Once the program’s main (AttachMovieClipExample) class has been associated with the .fla we can now compile the program, Select-Control Test Movie. You will not see the rectangle just yet, because we haven’t instructed flash to display it, lets do that now.
Go back to AttachMovieClipExample class and lets add code to display or attach our MovieClip from the library.

package{
import flash.display.Sprite;
import flash.display.MovieClip;

public class AttachMovieClipExample extends Sprite{

public var rect:MovieClip;

public function AttachMovieClipExample()
{
rect = new redRectangle();
rect.x = 25;
addChild(rect);//the equivalent of attach movie
}

}
}

Time to compile, go back to the Flash Ide Select-Control Test Movie and walla the rectangle is now on stage. You can add as many rectangles as your heart desires. In the example below I added another rectangle and set its x property to be 125, so now we have 2 rectangles on stage.

package{
import flash.display.Sprite;
import flash.display.MovieClip;

public class AttachMovieClipExample extends Sprite{

public var rect1:MovieClip;
public var rect2:MovieClip;

public function AttachMovieClipExample()
{
rect1 = new redRectangle();
rect1.x = 25;
rect2 = new redRectangle();
rect2.x = 125;
addChild(rect1);
addChild(rect2);
}

}
}

So what if your MovieClip was a bit more complex, meaning you had a bunch of nested MovieClips that you would like to access. This is normal in an agency setting, in fact I usually requested my designers to convert all there assets to movie clips just in case I was to move or manipulate them programmatically.. Let’s create a simple example:

Example 2: accessing children in an attached movie

Go back to your .fla open up your library and double click on the rectangle (redRectangle) we created earlier. You should now be within the rectangles timeline.
Add a new layer and draw a circle (I drew a green circle) onto stage and place it directly on the rectangle.
Select the circle right click (or ctrl click MAC) select Convert to Symbol option.
In the Name dialog enter a name (I entered greenCircle).
Select OK.
Select the circle on stage open the properties panel and give it an instance name (I named it greenCircle).
SAVE

redSquare

Now if you were to compile Select-Control Test Movie you would have a rectangle with a circle directly on it. So, we have a created a child movieclip within our rectangle movieclip. Since we gave the circle an instance name we can directly access the child via the parent. Lets go back to the AttachMovieClipExample class and add some code.

package{
import flash.display.Sprite;
import flash.display.MovieClip;

public class AttachMovieClipExample extends Sprite{

public var rect1:MovieClip;
public var circle:MovieClip;

public function AttachMovieClipExample()
{
rect1 = new redRectangle();
rect1.x = 25;
addChild(rect1);
circle = rect1.greenCircle;
circle.y=100;

}

}
}

Compile! Note that you have a circle that is placed 100 pixels below the rectangle, and thats how you would access children of the attached movieclip. Now, I will leave you with the other part of attaching a movie clip from the library and that is removing it from the stage. lets go back to our class and add a few more lines of code.

Example 3: remove the attached movieclip

I’m about to introduce you to events just for the purpose of this example.
The first thing we want to do is import the events classes:
import flash.events.MouseEvent;
The second thing we want to do is add a stage listener which will act as our switch to remove the movicelip : stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownEvent);
And finally we need to add a method which will actually remove the movieclip:

private function onMouseDownEvent(event:MouseEvent):void
{
removeChild(rect1)
}

This is what your class should look like.

package{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;

public class AttachMovieClipExample extends Sprite{

public var rect1:MovieClip;
public var circle:MovieClip;

public function AttachMovieClipExample()
{
rect1 = new redRectangle();
rect1.x = 25;
addChild(rect1);
circle = rect1.greenCircle;
circle.y=100;
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownEvent);
}
private function onMouseDownEvent(event:MouseEvent):void
{
removeChild(rect1)
}

}
}
COMPILE! Note the rectangle and circle on stage. Click/mouse down on the stage and presto, you just removed the movieclip. Now that was easy wasn’t it? Some methods of interest which helps debugging nested movieclips, most importantly read up on numChildren and getChildAt().

package{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;

public class AttachMovieClipExample extends Sprite{

public var rect1:MovieClip;
public var circle:MovieClip;

public function AttachMovieClipExample()
{
rect1 = new redRectangle();
rect1.x = 25;
addChild(rect1);
circle = rect1.greenCircle
circle.y=100;
trace(“number of children ” + rect1.numChildren);
trace(“get child at ” + rect1.getChildAt(0).toString());
trace(“get child at ” +rect1.getChildAt(1).toString());
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownEvent);
}

private function onMouseDownEvent(event:MouseEvent):void
{
removeChild(rect1)
}
}
}

Compile and you will notice the output window trace out info on our movieclip . The rectangle has 2 children, one is a shape, which would be the vector rectangle and the other is a movieclip which is our circle.

I will finally leave you with a fun little animation. The code below will place a bunch of rectangle’s on screen randomly, and then remove them all based off the TimerEvent.

package{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class AttachMovieClipExample extends Sprite{

public var rectangleArray:Array;
private var timer:Timer;
private var numOfMovieClips:uint = 100;
public function AttachMovieClipExample()
{
rectangleArray = new Array();
timer = new Timer(100,0);
startAnimation();
}

private function startAnimation():void
{
timer.addEventListener(TimerEvent.TIMER,attachMyMovie);
timer.start();

}

private function attachMyMovie(evt:TimerEvent):void
{

if(rectangleArray.length < numOfMovieClips){ var theRect:MovieClip = new redRectangle(); var randomX:Number = Math.floor(Math.random()*400); var randomY:Number = Math.floor(Math.random()*450); theRect.x = randomX; theRect.y = randomY; addChild(theRect); rectangleArray.push(theRect); }else{ timer.removeEventListener(TimerEvent.TIMER,attachMyMovie); timer.addEventListener(TimerEvent.TIMER,removeMyMovie); } } private function removeMyMovie(evt:TimerEvent):void { if(rectangleArray.length > 0){
var mc = rectangleArray[0];

removeChild(mc);
rectangleArray.shift();
}else{
rectangleArray =[];
timer.stop();
timer.removeEventListener(TimerEvent.TIMER,removeMyMovie);
startAnimation()
}
}

}
}

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: