Flash 10 Experiments: The Warholizer (Loading and Processing Local Images)

Posted in "Examples, Flash, Flex, General" at 10:21 am on December 22, 2008 by Allen Rabinovich | 2 comments

One of the new features in Flash Player 10 is the ability to read local files. We’ve been looking at this feature for some of our upcoming components, and built a small example that demonstrates how to load, display, and process local images.  This example, dubbed “The Warholizer”, allows you to open any image file on your machine, and without uploading it to the server, extract the image’s bitmap data, and run it through some color filters, achieving an effect not unlike the one in some of Andy Warhol’s work. Try it out by dropping in a photo of your own for those 15 minutes of fame (though make sure the image is not too large: Flash has an upper limit on the size of bitmaps):

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

The code for the example is below the fold.

<?xml version="1.0" encoding="utf-8"?>
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();" xmlns:ns1="com.yahoo.astra.mx.controls.*">
 
<mx:Script>
	<![CDATA[
 
import mx.core.Container;
import mx.core.UIComponent;
import flash.net.FileReference;
import flash.display.BitmapData;
 
public var fileRef:FileReference = new FileReference();
 
public function init() : void {
	fileRef.addEventListener(Event.SELECT, handleSelectedImage);
	fileRef.addEventListener(Event.COMPLETE, handleFileLoad);
}
 
public function handleBrowseClick () : void {
	var typeFilter:Array = new Array();
	typeFilter.push(new FileFilter("Images", "*.jpg;*.gif;*.png"));
	fileRef.browse(typeFilter);
}
 
public function handleSelectedImage(evt:Event) : void {
	fileName.text = fileRef.name;
	fileRef.load();
}
 
public function handleFileLoad (evt:Event) : void {
	var fileByteData:ByteArray = new ByteArray();
	fileByteData = fileRef.data as ByteArray;
 
	var loader:Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, extractBitmapData);
	loader.loadBytes(fileByteData);
}
 
public function extractBitmapData (evt:Event) : void {
	var sourceBMP:Bitmap = evt.currentTarget.loader.content as Bitmap;
	var outputBMP:Bitmap = new Bitmap(new BitmapData (sourceBMP.width*2 + 10, sourceBMP.height*2 + 10), "auto", true);
 
	var sourceRect:Rectangle = new Rectangle(0,0,sourceBMP.width, sourceBMP.height);
 
	var blueTransform:ColorTransform = new ColorTransform(1,1,10);
	var yellowTransform:ColorTransform = new ColorTransform(10,10,1);
	var greenTransform:ColorTransform = new ColorTransform(1,10,1);
	var redTransform:ColorTransform = new ColorTransform(10,1,1);
 
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(0,0));
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(0, sourceBMP.height + 10));
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(sourceBMP.width + 10, 0));
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(sourceBMP.width + 10, sourceBMP.height + 10));
 
	outputBMP.bitmapData.colorTransform(new Rectangle(0,0, sourceBMP.width, sourceBMP.height), blueTransform);
	outputBMP.bitmapData.colorTransform(new Rectangle(sourceBMP.width+10, 0, sourceBMP.width, sourceBMP.height), yellowTransform);
	outputBMP.bitmapData.colorTransform(new Rectangle(0,sourceBMP.height + 10, sourceBMP.width, sourceBMP.height), redTransform);
	outputBMP.bitmapData.colorTransform(new Rectangle(sourceBMP.width+10,sourceBMP.height+10, sourceBMP.width, sourceBMP.height), greenTransform);
 
	var ratio:Number = outputBMP.width / outputBMP.height;
	var sourceRatio:Number = sourceBMP.width / sourceBMP.height;
	sourceBMP.width = 200;
	sourceBMP.height = 200/ratio;
 
if (outputPanel.width > outputPanel.height) {
	outputBMP.height = outputPanel.height - 100;
	outputBMP.width = outputBMP.height * ratio;
}
else {
	outputBMP.width = outputPanel.width - 50;
	outputBMP.height = outputBMP.width / ratio;
}
 
	var outputContainer:UIComponent = new UIComponent();
	var sourceContainer:UIComponent = new UIComponent();
	var arrowContainer:UIComponent = new UIComponent();
 
	sourceContainer.width = sourceBMP.width;
	sourceContainer.height = sourceBMP.height;
 
	outputContainer.width = outputBMP.width;
	outputContainer.height = outputBMP.height;
 
	arrowContainer.width = 10;
	arrowContainer.height = 40;
 
	sourceContainer.addChild(sourceBMP);
	arrowContainer.addChild(drawArrow());
	outputContainer.addChild(outputBMP);
 
	outputPanel.removeAllChildren();
 
	outputPanel.addChild(sourceContainer);
	outputPanel.addChild(arrowContainer);
	outputPanel.addChild(outputContainer);
}
 
public function drawArrow () : Sprite {
	var targetSprite:Sprite = new Sprite();
	targetSprite.graphics.beginFill(0x000000);
	targetSprite.graphics.lineTo(10,20);
	targetSprite.graphics.lineTo(0,40);
	targetSprite.graphics.lineTo(0,0);
	targetSprite.graphics.endFill();	
return targetSprite;
}
]]>
</mx:Script>
<mx:Button id="browseButton" label="Browse for an image" right="10" top="10" click="handleBrowseClick();"/>
<mx:TextInput id="fileName" right="166" top="10"/>
<mx:Label text="Warholizer" fontWeight="bold" fontSize="17" left="7" top="6"/>
<mx:Panel layout="horizontal" bottom="10" right="10" left="10" top="41" id="outputPanel" clipContent="true" title="Output" horizontalAlign="center" verticalAlign="middle">
</mx:Panel>
</mx:Application>

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

2 Comments »

RSS feed for comments on this post. TrackBack URI

  1. [...] Continue reading Flash 10 Experiments: The Warholizer (Loading and Processing Local Images)… [...]

    Pingback by Flash 10 Experiments: The Warholizer (Loading and Processing Local Images) « Animator’s World — January 3, 2009 #

  2. Awesome, but how safe is it with user point of view.

    Comment by Sandeep Bhardwaj — March 18, 2009 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Hosted by Yahoo!

Copyright © 2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.