AS3 Chronicles #1: Simple Drawing Example

I’ve failed my 3rd try at attempting to install ColdFusion & friends, so need to prove I can actually do something out of my comfort zone. So, I’m starting an AS3 chronicles, mirroring my Flex Chronicles (2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
12) to help people transition.

Drawing Example – Move your mouse around (Requires Flash Player 8.5) – ActionScript 3 source file

Someone on the Flexcoders list requested a Flex2 drawing example, so before I went to bed, I whipped one up real quick. Here is an ActionScript Project example of doing this in AS3, using no Flex components. There are a few key differences between Flash Player 8.5 using AS3 and Flash Player 8/7/6 using AS2. I’ll highlight the ones below via stepping through the code.

First, the stage. BIG changes are in our future for this baby. For now, you just gotta get used to stage being a variable that MovieClips/Sprites/DisplayObjects have. Don’t think of Stage as a Singleton, but rather, the display details of _root. Don’t get me started on root…

Instead of doing:

Stage.scaleMode = "noScale";

you now do:

import flash.display.StageScaleMode;
stage.scaleMode = StageScaleMode.NO_SCALE;

Instead of doing:

Stage.align = "TL";

you now do:

import flash.display.StageAlign;
stage.align = StageAlign.TOP_LEFT;

Benefits? If you mispell noScale or TL, you get yelled at by the compiler, and can more quickly fix it.

Now, for the actual drawing canvas to pick up our mouse movements:

import flash.display.Sprite;
canvas_sprite = new Sprite();

Notice I’m using Sprite instead of MovieClip. Why? Sprite is a MovieClip, but without the timeline. If you aren’t using timeline like features, like gotoAndPlay, then don’t incur the overhead MovieClip brings; use Sprite instead. MovieClip extends Sprite so has the majority of the good stuff MovieClip has.

Secondly, I add sprite to the DisplayList via addChild. This means, “Add this sprite I just made to your display list. Each frame, the renderer will go through this list to know what he needs to draw to the screen. If the renderer finds something in your DisplayList, he’ll draw it in order from bottom to top.”

The cool part is, you can have a sprite exist, but not actually drawn. It’s like if all MovieClips/Sprites start of as myClip._visible = false, except they aren’t even drawn. MovieClips that have a visibility property of false are in fact drawn and take up resources, just not as much. This level of control makes it even more efficient.

Finally, the reason we do this is I couldn’t get mouse move events to trigger without a child clip to get them; don’t know why; if you do, please feel free to comment!

Drawing commands have been moved to graphics.

import flash.display.Graphics;
var g:Graphics =;
g.beginFill(0x000000, 0);
g.lineTo(500, 0);
g.lineTo(500, 500);
g.lineTo(0, 500);
g.lineTo(0, 0);

Notice, I just made a reference because typing “g” is easier than typing “graphics”. In earlier players, you’d do:

my_clip.lineTo(0, 0);

Now, it’s:, 0);

My favorite, adding listeners. Notice, NO FRIKIN’ DELEGATE!

It used to be:

import mx.utils.Delegate;
my_clip.onMouseMove = Delegate.create(this, myOnMouseMove);

Now it’s:

canvas_sprite.addEventListener(MouseEventType.MOUSE_MOVE, mouseMoveListener);

And the cool thing is, your mouseMoveListener is the actual function running in the scope of the class you’re in instead of canvas_sprite’s scope; awesome!

The cool thing to notice here, too, is that your event objects are now actual classes instead of vanilla (plain) objects; it’s an actual MouseEvent instance.

private function mouseMoveListener(event:MouseEvent)
        trace("mouse move");
        var g:Graphics = graphics;
        g.lineStyle(2, 0x000000);
        g.moveTo(100, 100);
        g.lineTo(mouseX, mouseY);

Update: Still looking for updateAfterEvent… apparently he’s part of MouseEvent, KeyboardEvent, and TimerEvent, but it’s not in the docs yet.

Aha! It’s event.updateAfterEvent() inside the function that gets the event object.

5 Replies to “AS3 Chronicles #1: Simple Drawing Example”

  1. > Notice, I just made a reference because typing ‘g’ is easier than typing ‘graphics’.

    I hope the ‘with’ statement is still available in AS3…

    > Notice, NO FRIKIN’ DELEGATE!

    So now how do you pass parameters a la ascb.util.Proxy?
    I’m guessing they have to be put into the event object, right?


  2. with == lame. It had bugs in earlier players, so I haven’t trusted it since, nor would care too but can see the reasoning; save typing.

    Parameters? No clue… if you find out, let me know!

  3. Hi Jesse,
    I experimented with your example and what I have found is this.

    ‘Flash Player dispatches the mouseMove event when a user moves the pointing device while it is over an InteractiveObject.’

    Quoted from InteractiveObject.

    With that being said, I decided to trace the width and height of the class that you are actually trying to get the event added to. Well they trace 0.

    This makes sense, unless you create a child object, like you did 500×500, there is no Sprite to recieve or for that matter produce a mouseMove event.

    By creating your transparent backgraound, flex then knew that your Sprite was 500×500, when you add that bit of code back in, they both trace to 500×500 and you actually have an real Sprite.

    Man this as3 is awsome.

    Peace, Mike

  4. how to draw some picture in user interactive at flash swf file . such as oval, rectangle, square or any thing like paint window.

Comments are closed.