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 »

4 Responses

  1. Murtaza Topiwalla Says:

    Hello,
    I like your script above but i was just wondering if this could be done without using PHP using AIR instead..
    Do you have any idea how to save a movieclip as a JPG using AIR?

    Thanks
    Murtaza Topiwalla

  2. Adrian Parr Says:

    Murtaza,

    Add these three import statements …

    import flash.filesystem.File;
    import flash.filesystem.FileStream;
    import flash.filesystem.FileMode;

    … and modify the createJPG method to read …

    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 fl:File = File.desktopDirectory.resolvePath(fileName+".jpg");
        var fs:FileStream = new FileStream();
        fs.open(fl,FileMode.WRITE);
        fs.writeBytes(jpgStream);
        fs.close();
    }

    This will save the image to the desktop. I hope that helps.

  3. Murtaza Topiwalla Says:

    Hey
    Thanks for the help.
    It saved me tons of time as the ASCorelib did all the work :)

    Thanks again
    Murtaza

  4. Peter Balogh Says:

    Everything about this code is working… except for the fact that I can’t open the JPEG after it downloads to my desktop. Every program I use complains that there appears to be corrupt data.

    I’ve tried Henry’s version of this–also corrupt. I’ve tried other versions, and always the same thing. I do get data saved out as a JPEG file, but not one that can be read.

    Is this a PHP thing? Is this an Apache thing? A security thing?

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.