Creating new MovieClips in ActionScript 3.0

| 22 Comments

Creating new instances of a class has been greatly simplified in ActionScript 3.0. In previous versions of ActionScript, you needed to call createEmptyMovieClip() or createTextField() if you wanted to create a new MovieClip or TextField. Now, in ActionScript 3.0, you can simply call new MovieClip() or new TextField() directly, as shown in the following examples:

// AS2
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.beginFill(0xFF0000);
mc.moveTo(0, 0);
mc.lineTo(100, 0);
mc.lineTo(100, 80);
mc.lineTo(0, 80);
mc.lineTo(0, 0);
mc.endFill();
mc._x = 80;
mc._y = 60;

The previous code creates a new movie clip instance, draws a red rectangle which is 100x80 pixels, and moves the instance to 80,60 on the Stage. Compare that to the following code which does the exact same thing, although using the new drawRect() method instead of having to use the moveTo() and lineTo() methods:

// AS3
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawRect(0, 0, 100, 80);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
addChild(mc);

Note that there are a few differences. Most obvious is the use of the MovieClip() constructor instead of ActionScript 2.0's createEmptyMovieClip(). Other notable differences are that the drawing methods (beginFill(), drawRect(), and endFill()) are called on the graphics property instead of on the instance itself. Also, in ActionScript 3.0, the x and y properties aren't prefixed with underscores. Finally, in ActionScript3.0 the instance isn't added to the display list until you explicitly call the addChild() method.

TIP: In addition to the drawRect() method, you can also call the drawCircle(), drawEllipse(), or drawRoundRect() methods to draw shapes.

If you wanted to instead draw a rounded rectangle, instead of calling the lineTo() and curveTo() methods, you could use the new drawRoundRect() method, as shown in the following code:

mc.graphics.drawRoundRect(0, 0, 100, 80, 15, 15);

22 Comments

Today I simply understand what the AS3.0 is camed with. Now we are completly moved to OOP's. It really good.

Thanks

How can i Load a MovieClip
into A MovieClip with as3?
Thats my code but it dont work:

var cbox:MovieClip = new chooserbox();

var outScreen:MovieClip= new MovieClip();
outScreen.addChild(cbox);

Alf,

Try adding the outScreen symbol to the display list, like so:
---
var cbox:MovieClip = new chooserbox();

var outScreen:MovieClip = new MovieClip();
outScreen.addChild(cbox);

addChild(outScreen);
---
Peter

I have Flash 9 Public Alpha on my computer. I copied and pasted the following code in to the first frame of my flash file. But it dosen't gave any output. Please advice.

///////

var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawRect(0, 0, 100, 80);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
addChild(mc);

//////////////

Thanks

Hi,
Just come from a google search for help.
All these OOP improvement in AS3 are great, I am just learning the the new changes now.

However, I couldnt find the function in AS3 which takes over the AttachMovie() function in AS2.

For example, Im trying to create a Bullet object, which I need to draw it an image as well need to define its own property and method, such as velocity, angle...

As I know in AS2 it will be easily done by giving an identifier to the MovieClip of Bullet(in Library), and then instance of Bullet can be procedurally generated with AS2.

I've read the help doc of addChild and any possible topic, but didnt find any clue.

Is there any easy/similar way to achieve the thing in AS3?

Would you please give any tips please?
Realy Thank You.

I'm having difficulties with addChild(). Specifically: in AS 2.0, you could do an attachMovie, allowing you to not only grab an item from the library but also give it a unique new name. This name could be dynamically generated, allowing you to attach many MC's and talk to them afterwards. With addChild, you can add the new Sprite/MC/whatever but you can't give it a new name. This is quite a limitation. I'm sure there's a simple workaround, but I can't figure out what it might be.

LB,

Does this not work for you?

var myRedBox:RedBox = new RedBox();
myRedBox.x = 100;
myRedBox.y = 37;
addChild(myRedBox);

var myOtherRedBox:RedBox = new RedBox();
myOtherRedBox.x = 85;
myOtherRedBox.y = 49;
myOtherRedBox.alpha = 0.4;
addChild(myOtherRedBox);

This creates two instances of the symbol in the Library with the linkage identifier "RedBox". Each instance is given a unique name (cleverly named myRedBox and myOtherRedBox) which lets me refer to them after they are created and added to the display list.

Hi - The one issue I'm having with the new methods in AS 3.0 is the ability to declare or reference existing movie clips on the stage. In AS 2, if you placed an instance of a movie clip manually on the stage (from the library), you could write functions that reference that clip by instance name on the 1st frame, even if the movie clip appeared further in the timeline.

For example:

function doSomething() {
myMovieClip_mc.x = 300;
}

doing so in AS 3.0 produces an error - (undefined object,etc.) - declaring the movie clip on the first frame so it's available for any functions,etc. causes a duplicate instance name error:

//Causes an error since the movie clip //does in fact exist somewhere on the //timeline...

var myMovieClip_mc:MovieClip;


It seems that as 3.0 makes it easy and powerful if you're doing everything programatically, but what if yoiu are still like many designers who wants the ability to lay out certain elements by hand and incorporate actionscript for more intteractivity?

- fg

Hi - The one issue I'm having with the new methods in AS 3.0 is the ability to declare or reference existing movie clips on the stage. In AS 2, if you placed an instance of a movie clip manually on the stage (from the library), you could write functions that reference that clip by instance name on the 1st frame, even if the movie clip appeared further in the timeline.

For example:

function doSomething() {
myMovieClip_mc.x = 300;
}

doing so in AS 3.0 produces an error - (undefined object,etc.) - declaring the movie clip on the first frame so it's available for any functions,etc. causes a duplicate instance name error:

//Causes an error since the movie clip //does in fact exist somewhere on the //timeline...

var myMovieClip_mc:MovieClip;


It seems that as 3.0 makes it easy and powerful if you're doing everything programatically, but what if yoiu are still like many designers who wants the ability to lay out certain elements by hand and incorporate actionscript for more intteractivity?

- fg

All of the above fundas are too good. But I have another doubt that how can I create a text field in a movieclip? Earlier in AS2.0 it was possible through "moviclip.createTextField()" but this is not working in AS3.0. Can anybody help me in this querry pls?

Nilakantha,

Creating new MovieClips and TextFields are even easier in ActionScript 3.0. Now instead of having to remember "createEmptyMovieClip()" and "createTextField()", everything just uses the "new" operator. Like, "new MovieClip()", "new TextField()", "new NetConnection()", etc.

Here's a simple example which does what I think you're asking:

[code]
var tf:TextField = new TextField();
tf.border = true;
tf.text = "The quick brown fox jumped over the lazy dog.";
tf.background = true;
tf.backgroundColor = 0xFF0000;
tf.multiline = true;
tf.wordWrap = true;

var mc:MovieClip = new MovieClip();
mc.x = 100;
mc.y = 50;
mc.addChild(tf);
addChild(mc);
[/code]

HTH,
Peter

I know it is possible but how do I create a TextField inside a new movie clip which I can drag around the stage? Any idea?

how do ya reference to a movie clip inside a movie clip?

it used to be..

_root.myMovieclip.myOtherMovieclip.gotoAndPlay(10);

This is a simple example for Jonathan that uses much of Peter's example. I added in some eventListeners to the stage that might look odd, but the reasoning is to handle onReleaseOutside which is no longer available in as3. This was created in a default flash file so all you need to do is open flash, create an as3 flash file and paste this into the first frame.

I am new to as3 (though with a pretty strong background in as2) so far I find it interesting, though mildly confusing at times. I am not well honed on OOP, but hopefully it will make complete sense in the next few weeks :) Hope this helps someone.

[code]
import flash.display.Shape;

// creating the textfield
var tf:TextField = new TextField();
tf.text = "The quick brown fox jumped over the lazy dog.";
tf.multiline = true;
tf.wordWrap = true;
tf.selectable = false;
tf.x = tf.y = 10;
tf.width = 100;
tf.height = 40;

// creating the mc background
var box:Shape = new Shape();
box.graphics.beginFill(0x123456, .5);
box.graphics.drawRect(0, 0, 120, 60);

// creating the mc
var mc:MovieClip = new MovieClip();
mc.x = mc.y = 0;
mc.addChild(box);
mc.addChild(tf);
addChild(mc);

// setting button mode for the mc
mc.buttonMode = true;
mc.addEventListener(MouseEvent.MOUSE_DOWN, dragStarter);

// drag functions
function dragStarter(e:Event):void
{
mc.startDrag(false, new Rectangle(0, 0, (550 - mc.width), (400 - mc.height)));
stage.addEventListener(MouseEvent.MOUSE_UP, dragStopper);
}
function dragStopper(e:Event):void
{
mc.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, dragStarter);
}
[/code]


Hi peter,
i'm trying to create a duplicate movie clip to load in to main MovieClip.

but its not come into the movie clip.. its create on stage.

Here, i written the code.as.

function dup()
{
_root.main.createEmptyMovieClip('Dup',1)
for (i=1;i duplicateMovieClip("movie_mc", "new_"+i, i);
this["new_"+i]._x=this["new_"+i]._width*i;
//this["new_"+i]._y=this["new_"+i]._height*i;

}
}

dup()

Any other way to load duplicate movieclip into main movieclip ?

Is any one know how to create duplicate Movie clip using ActionScript 3.0?

how to set the registration point of a dynamically created textfield to center using cs3?

how to set the registration point of a dynamically created textfield to the centre using cs3?

Hi
How to attach a movieclip from libraray in AS3.0?

hi,
is it possible to fill gradients inside the box (box created with SCRIPT)

Hi Peter,
I want to change the foloowing code in to AS3.

var mc = parent_mc.createEmptyMovieClip(name_str, level_num);

Thanks,
kanu

hi avn.rocky,

Here is ur solution.

//---Assumption-------
1."parent_mc" is already in the stage.
//-----End------------

//---Code-One----------------
import flash.display.MovieClip
var empty_mc:MovieClip=new MovieClip();
parent_mc.addChild(empty_mc);
//----End---------------

//---Code-Two----------------
import flash.display.Sprite
var empty_sp:Sprite=new Sprite();
parent_mc.addChild(empty_sp);
//----End---------------

//---Comment------------
1.In AS3,depth management is done automatically.
2.There are no gaps between depth numbers
3.Event if we remove any child from its parent,depth of other childs altered just like array after splice
4.Sprite is lightercomponent.So use Sprite, when u need empty display object
//----End---------------

Leave a comment

About this Entry

This page contains a single entry by Peter deHaan published on July 5, 2006 2:33 PM.

Intel Mac public beta of Flash Player 9 was the previous entry in this blog.

Creating clickable movie clips in ActionScript 3.0 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.