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.
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");
}
}
}
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 »
May 6th, 2008 at 9:53 am
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
May 6th, 2008 at 3:20 pm
Murtaza,
Add these three import statements …
import flash.filesystem.FileStream;
import flash.filesystem.FileMode;
… and modify the createJPG method to read …
{
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.
May 8th, 2008 at 10:21 am
Hey
Thanks for the help.
It saved me tons of time as the ASCorelib did all the work
Thanks again
Murtaza
June 17th, 2008 at 10:18 pm
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?