Drawing API and Mouse Events

swfgeek — Mon, 25 Feb 2008 16:33:44 +0000

Click on the image to see the example and get the code.

A pair of days ago I found the blog of Sorin Haidan in wish he post some very useful tutorials on Flash and Actionscript 3.0 in a very understandable way, I found one that caught my attention called Draw Custom shapes with ActionScript 3.0. In this tutorial he explains how to make a “Ball” appear on screen every time you click and move your mouse on the screen by using the Drawing API and MouseEvents, the change of the color on the ball was achieved doing a loop in a 10 frame movie clip with a ball of different gradient fill on each frame, so occurred to me to wrap that code on a class on a Flex 3 Actionscript Project and get rid of the Flash assets by drawing the ball in a dynamic way and this let me Change the color of the Ball more than the 10 times of Sorin example, so check the example be sure to check Sorin’s blog .
In my example if you right click on the file you get to see the source that it’s also included below this text here’s what I got: Drawing API Ball Example.

Thanks Sorin for letting me mess around with his code keep up with those good tutorials.

^?View Code ACTIONSCRIPT3

/*
/////---- Class by Dave Ga?mez (.swfgeek) 24-February-2008 http://www.swfgeek.net----\\\
///---- Original Example by: Sorin Haidan in his  Draw Custom shapes with ActionScript 3.0. Tutorial ----\
///---- Found on his blog http://biochimistu.blogspot.com/ ---- \
*/
 
package {
 
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import com.adobe.viewsource.ViewSource;
 
    [SWF(backgroundColor="0x000000",frameRate="31")]
 
    public class DrawingAPI extends Sprite
    {
        private var sprite:Sprite;
        private var holder:Sprite;
        private var myCircle:Sprite;
        private var fillType:String;
        private var colors:Array;
        private var alphas:Array;
        private var ratios:Array;
        private var matr:Matrix;
        private var spreadMethod:String;
        private var focalPointRatio:Number;
 
        public function DrawingAPI()
        {
            init();
        }
 
        private function init():void
        {
            ViewSource.addMenuItem(this, "srcview/index.html");
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(MouseEvent.MOUSE_DOWN,prepareToDraw);
 
        }
 
        public function prepareToDraw(event:MouseEvent):void
         {
          stage.addEventListener(MouseEvent.MOUSE_MOVE,drawGraphics);
          stage.addEventListener(MouseEvent.MOUSE_UP,stopDrawing);
 
         }
 
        public function drawGraphics(event:MouseEvent):void
        {
         fillType = GradientType.RADIAL;
         colors = [0xFFFFFF, Math.random()*0xFFFFFF];
         alphas = [1, 1];
         ratios = [0x37, 0xFF];
         matr= new Matrix();
         matr.createGradientBox(100, 100, Math.random()*360, -40, 0);
         spreadMethod = SpreadMethod.PAD;
         focalPointRatio = 1;
         holder = new Sprite();
         addChild(holder);
         myCircle = new Sprite();
         myCircle.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr,spreadMethod);
         myCircle.graphics.drawCircle(0,0,40);
         myCircle.graphics.endFill();
         holder.addChild(myCircle);
         holder.x = mouseX;
         holder.y = mouseY;
         holder.scaleX = holder.scaleY = Math.random()*2+0.5;
         holder.rotation = Math.random()*360;
         holder.alpha = Math.random()+0.7;
       }
 
        public function stopDrawing(event:MouseEvent):void
       {
        stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawGraphics)
       }
    }
}

.swfgeek » MouseEvents

Drawing API and Mouse Events