Colour Line Drawing – Part 2

April 2nd, 2008 by Adrian

Following on from yesterday’s post, I’ve had chance to update the Colour Line Drawing demo to include gradual colour changing (instead of random) and fixed the saving of the image to a jpeg file.

The saving of the image is done using the as3corelib library (thanks to Henry Jones for providing an example of this). Thanks also to Ryan Taylor for his color spectrum blog post.

Colour Line Drawing Screengrab

Click here to launch the demo.

You can download the source files here.

Here is the code in the Main document class …

package {
    import flash.display.MovieClip;
    import flash.display.Graphics;
    import flash.display.Stage;
    import flash.display.BitmapData;
   
    import flash.events.MouseEvent;
    import flash.events.KeyboardEvent;
   
    import flash.ui.Mouse;
    import flash.ui.Keyboard;
   
    import flash.utils.ByteArray;
   
    import flash.net.navigateToURL;
    import flash.net.URLRequestHeader;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.net.URLRequestMethod;
   
    import com.adobe.images.JPGEncoder;

    public class Main extends MovieClip
    {
        private var canvas:MovieClip;
        private var serverPath:String = "";
        private var colourIncrement:int = 0;
       
        public function Main():void
        {
            Mouse.hide();
            stage.showDefaultContextMenu = false;
            stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
           
            canvas = new MovieClip();
            canvas.graphics.beginFill(0x000000);
            canvas.graphics.drawRect(0, 0, 500, 375);
            canvas.graphics.endFill();
            canvas.graphics.moveTo(mouseX, mouseY);
            canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoved);
            canvas.addEventListener(MouseEvent.CLICK, clearScreen);
            addChild(canvas);
        }
       
        private function mouseMoved(evt:MouseEvent):void
        {
            var nColorPercent:Number = colourIncrement / 200;
            colourIncrement += 1;
            var nRadians:Number = (-360 * nColorPercent) * (Math.PI / 180);
            var nRed:Number = Math.cos(nRadians) * 127 + 128 < < 16;
            var nGreen:Number = Math.cos(nRadians + 2 * Math.PI / 3) * 127 + 128 << 8;
            var nBlue:Number = Math.cos(nRadians + 4 * Math.PI / 3) * 127 + 128;
            var nColour:Number = nRed | nGreen | nBlue;

            canvas.graphics.lineStyle(60, nColour, 1);
            canvas.graphics.lineTo(mouseX, mouseY);
            evt.updateAfterEvent();
        }
       
        private function clearScreen(evt:MouseEvent):void
        {
            canvas.graphics.clear();
            canvas.graphics.beginFill(0x000000);
            canvas.graphics.drawRect(0, 0, 500, 375);
            canvas.graphics.endFill();
            canvas.graphics.moveTo(mouseX, mouseY);
        }
       
       
        private function reportKeyDown(evt:KeyboardEvent):void
        {
            if (evt.keyCode == Keyboard.SPACE) {
                createJPG(canvas, 90, "colour_line_drawing");
            } else if (evt.keyCode == Keyboard.ESCAPE) {
                if (stage.displayState == "normal") {
                    stage.displayState = "fullScreen";
                }
            }
        }
       
        function createJPG(m:MovieClip, q:Number, fileName:String)
        {
            var jpgSource:BitmapData = new BitmapData (m.width, m.height);
            jpgSource.draw(m);
            var jpgEncoder:JPGEncoder = new JPGEncoder(q);
            var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
           
            var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
                       
            var jpgURLRequest:URLRequest = new URLRequest ( serverPath+"jpg_encoder_download.php?name=" + fileName + ".jpg");      
            jpgURLRequest.requestHeaders.push(header);             
            jpgURLRequest.method = URLRequestMethod.POST;              
            jpgURLRequest.data = jpgStream;
           
            var jpgURLLoader:URLLoader = new URLLoader();      
            navigateToURL(jpgURLRequest, "_blank");
        }
       
    }
}

Posted in ActionScript 3.0, Flash, Sample Code | 4 Comments »

Colour Line Drawing

April 1st, 2008 by Adrian

This afternoon my 22 month-old daughter came up to me while I was on the computer, and wanted to play with the mouse. So rather than have her delete all my work I quickly put together a little simple colourful drawing app which she could play with. It was also a good exercise for me to learn some more AS3.

Move the mouse to draw. Click to go fullscreen. Press spacebar to save image out as a JPEG (not working at present).

Here is a screengrab …

Click here to launch the app.

Here are the source files.

Main document class code here …

package {
    import flash.display.Sprite;
    import flash.display.Graphics;
    import flash.display.Stage;
    import flash.display.BitmapData;
   
    import flash.events.MouseEvent;
    import flash.events.KeyboardEvent;
   
    import flash.ui.Mouse;
    import flash.ui.Keyboard;
   
    import flash.utils.ByteArray;
   
    import flash.net.navigateToURL;
    import flash.net.URLRequestHeader;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.net.URLRequestMethod;
   
    import com.adobe.images.JPGEncoder;

    public class Main extends Sprite
    {
        private var canvas:Sprite;
        private var serverPath:String = "";
       
        public function Main():void
        {
            Mouse.hide();
            stage.showDefaultContextMenu = false;
            stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
           
            canvas = new Sprite();
            canvas.graphics.beginFill(0x000000);
            canvas.graphics.drawRect(0, 0, 500, 375);
            canvas.graphics.endFill();
            canvas.graphics.moveTo(mouseX, mouseY);
            canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoved);
            canvas.addEventListener(MouseEvent.CLICK, mouseClicked);
            addChild(canvas);
        }
       
        private function mouseMoved(evt:MouseEvent):void{  
            canvas.graphics.lineStyle(40, (Math.random()*0xFFFFFF), 1);
            canvas.graphics.lineTo(mouseX, mouseY);
            evt.updateAfterEvent();
        }
       
        private function mouseClicked(evt:MouseEvent):void {
            if (stage.displayState == "normal") {
                stage.displayState = "fullScreen";
            }
        }
       
        private function reportKeyDown(evt:KeyboardEvent):void {
            if (evt.keyCode == Keyboard.SPACE) {
                createJPG(canvas, 90, "sketch");
            }
        }
       
        function createJPG(m:Sprite, q:Number, fileName:String) {
            var jpgSource:BitmapData = new BitmapData (m.width, m.height);
            jpgSource.draw(m);
            var jpgEncoder:JPGEncoder = new JPGEncoder(q);
            var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
           
            var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
                       
            var jpgURLRequest:URLRequest = new URLRequest ( serverPath+"jpg_encoder_download.php?name=" + fileName + ".jpg");      
            jpgURLRequest.requestHeaders.push(header);      
            jpgURLRequest.method = URLRequestMethod.POST;            
            jpgURLRequest.data = jpgStream;
           
            var jpgURLLoader:URLLoader = new URLLoader();      
            navigateToURL(jpgURLRequest, "_blank");
        }
       
    }
}

Posted in ActionScript 3.0, Flash, Sample Code | No Comments »