In Flash 8 there were a bunch of properties and methods of the MovieClip class that allowed us to dynamically draw things at runtime. In ActionScript 3, we have these same capabilities along with some handy new ones. The drawCircle() and drawRoundRect() methods are two which will definitely save Flash devlopers quite a bit of time. The biggest difference in the AS 3 drawing API is that it is now its own class called Graphics and is attached to display objects such as MovieClip, Sprite, and Shape. You access the methods by writing something such as myClip.graphics.lineStyle(). The example below draws a line with a random color wherever your mouse moves. You can click the movie to clear the accumulated graphics. The AS 3 code is listed below that.
-
clip.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
-
clip.addEventListener(MouseEvent.CLICK, clearIt);
-
-
function drawLine(args:MouseEvent)
-
{
-
clip.graphics.lineStyle(15, Math.random()*0xBBD9F7);
-
clip.graphics.lineTo(args.localX, args.localY);
-
}
-
-
function clearIt(args:MouseEvent)
-
{
-
clip.graphics.clear();
-
}
Lee
Wow pretty awesome, but it seems a bit slow on my computer. do you think there’s will be a better way to manage the code to further compress file size?
I am not sure if this is related, but prior to activating the flash box (new AS 3 Demo) your links are freakin out…
Try hovering over right column links prior to clicking in the embedded flash box. After activating flash all is well.
Windows XP SP2, IE 6.0.2, Flash player 9.0.28…
That is really cool as always. Do you ever think, damn I if I post this and it isn’t something new then I am going to get hell for it.
It’s running a little slow because there are 2 filters applied to the MovieClip which give it the drop shadow and the inner glow.
Jake – I always like to put up cool stuff, but sometimes a lame example or two makes it up
A little slow on my computer but very nice
Very cool, will post this link at http://www.beedigital.net/blog
very nice.
The mouse move event in AS3 applies to mouse movement within the bounds of the event listener (clip)–not outside it.
Since the clip keeps changing position/size as it follows the mouse (the mouse is technically inside the clip), your code still works, but it might work faster if you allow the stage to listen for mouse movement, instead.
The stage is now a property of any display object (clip, sprite, bitmap, etc), so the change would just be the addition of one word here:
clip.stage.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
adding args.updateAfterEvent() at the end of your drawLine function might make it feel a little snappier
Note that the drop shadow is making the movie slow, for all of those who don’t know filters are spu hogs.
what’s the difference between Math.random()*0xBBD9F7 and Math.random()*0xFFFFFF?
(great as always, lee)
Well done !!!!!!!!!!!!!!!
I’m learning Actionscript doing OOP ActionScript2.0. I’m trying to do a Box class and create
a Flash application that uses it class to define a box on screen. Then add an interface and
logic which will allow me to add boxes to the screen. Add a button which randomises the
location, width and height of all the boxes on stage. Finally, click on one of the boxes and
have it’s details WIDTH and HEIGHT displayed in text fields on the stage. I have try it but
is not working. Do you know what can be the problem??????
Pretty lee.
But…..
I think this is much better:
var clip:Shape = new Shape()
addChild(clip);
stage.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
stage.addEventListener(MouseEvent.CLICK, clearIt);
function drawLine(evt:MouseEvent)
{
clip.graphics.lineTo(mouseX, mouseY);
clip.graphics.lineStyle(15, Math.random()*0xff9933);
}
function clearIt(evt:MouseEvent)
{
clip.graphics.clear();
}
First: No start line in 0,0
Second: Shape create in AS. Shape are small!!
sorry my english, i’m brazillian
Hugs
zer0
that is beautiful
when i’m using drawing api to design a drawing board, i found not only drawrect, drawcircle, the lineto function is also inefficient, in one sprite, you line more, the cpu runs higher
Lee,
I’ve noticed that, when using vector graphics on an instantiated library symbol, the drawing appears beneath the instantiated symbol. Do you know of a way to make it appear on top? If there is no way, it is a shame, because this worked out fine in AS2.0, where you could create your movie clips from library symbols, and then draw on TOP of them.
Thanks,
N.
Hi, not sure if anyone can help me, but it has been addressed in some of the comments. I have the problem, that when using linedraw, dynamically, the CPU keeps climbing, I fear till it makes my computer crash. any suggestions how to avoid that?
cheers
how can you do this on mouse down instead of on mouse move?
Is there any way to add random colors of black/greys/whites instead of random colors. Just curious I guess. Thanks for the posting..
JoshuaVP,
You can just change the 0xff9933 to 0xffffff, but you’ll also have to remove “clip.” from that entire program. (In the timeline’s layer 1 on the stage, press F9 and paste his code). Remove “clip.” and then your program will run with the mouse making random grays of all shades.
-pTymN