Creating new MovieClips in ActionScript 3.0

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 100×80 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);

26 Responses to Creating new MovieClips in ActionScript 3.0

  1. Ashok says:

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

  2. Alf says:

    How can i Load a MovieClipinto A MovieClip with as3?Thats my code but it dont work:var cbox:MovieClip = new chooserbox();var outScreen:MovieClip= new MovieClip();outScreen.addChild(cbox);

  3. Peter says:

    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

  4. shashank says:

    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

  5. chen says:

    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.

  6. LB says:

    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.

  7. Peter says:

    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.

  8. Fred G says:

    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

  9. Fred G says:

    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

  10. Nilakantha says:

    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?

  11. Peter says:

    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

  12. Jonathan says:

    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?

  13. Beldin says:

    how do ya reference to a movie clip inside a movie clip?it used to be.._root.myMovieclip.myOtherMovieclip.gotoAndPlay(10);

  14. kevin says:

    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 textfieldvar 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 backgroundvar box:Shape = new Shape();box.graphics.beginFill(0x123456, .5);box.graphics.drawRect(0, 0, 120, 60);// creating the mcvar mc:MovieClip = new MovieClip();mc.x = mc.y = 0;mc.addChild(box);mc.addChild(tf);addChild(mc);// setting button mode for the mcmc.buttonMode = true;mc.addEventListener(MouseEvent.MOUSE_DOWN, dragStarter);// drag functionsfunction 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]

  15. Bhuvan says:

    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

  16. shrikant says:

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

  17. vidyalekshmi says:

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

  18. vidyalekshmi says:

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

  19. A.Ganesan says:

    HiHow to attach a movieclip from libraray in AS3.0?

  20. avn.rocky says:

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

  21. kanu kukreja says:

    Hi Peter,I want to change the foloowing code in to AS3.var mc = parent_mc.createEmptyMovieClip(name_str, level_num);Thanks,kanu

  22. hi avn.rocky,Here is ur solution.//—Assumption——-1.”parent_mc” is already in the stage.//—–End————//—Code-One—————-import flash.display.MovieClipvar empty_mc:MovieClip=new MovieClip();parent_mc.addChild(empty_mc);//—-End—————//—Code-Two—————-import flash.display.Spritevar 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 numbers3.Event if we remove any child from its parent,depth of other childs altered just like array after splice4.Sprite is lightercomponent.So use Sprite, when u need empty display object//—-End—————

  23. Lewis says:

    You saved my ass with this valuable advice of a basic concept, I’ve been struggling with this for a while and now my entire project works. haha. You the man.

  24. Tavo says:

    I have the same code inside a function with(MouseEvent) and its not working. Can anyone tell me why could this be?

  25. I am wanting to put the image in a movie clip that is already on my timeline how would i do that? My code just makes it static on the page. how would i make it go into a blank movie clip.
    var columns:Number;
    var my_x:Number;
    var my_y:Number;
    var my_thumb_width:Number;
    var my_thumb_height:Number;
    var my_images:XMLList;
    var my_total:Number;

    var container_mc:MovieClip;

    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest(“flash.xml”));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);

    function processXML(e:Event):void {
    var myXML:XML = new XML(e.target.data);

    columns = myXML.@COLUMNS;
    my_x = myXML.@XPOSITION;
    my_y = myXML.@YPOSITION;
    my_thumb_width = myXML.@WIDTH;
    my_thumb_height = myXML.@HEIGHT;
    my_images = myXML.IMAGE;
    my_total = my_images.length();

    createContainer();
    callThumbs();

    }
    function createContainer():void{
    container_mc = new MovieClip();
    container_mc.x = my_x;
    container_mc.y = my_y;
    addChild(container_mc);
    }

    function callThumbs():void{
    for (var i:Number = 0; i < my_total; i++){

    var thumb_url = my_images[i].@THUMB;;
    var thumb_loader = new Loader();
    thumb_loader.load(new URLRequest(thumb_url));
    thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

    }
    }
    function thumbLoaded(e:Event):void{
    var my_thumb:Loader = Loader(e.target.loader);
    container_mc.addChild(my_thumb);
    }