Saving images with AIR –
Create a wallpaper using AS3 only

Looking for class to save images? Check out ImageSaver.as

I’m experimenting with AIR, because I heard saving a ByteArray ( for example encoded PNG or JPG ) should be quite simple. You don’t need PHP or another serverside script for this, just write directly on you disk. Well, just check it out.

See this example of how to get it work. The image will be save on the same directory as your AIR application.// use adobe’s encoder to create a byteArray
var jpgEncoder:JPGEncoder = new JPGEncoder( 60 );
var byteArray:ByteArray = jpgEncoder.encode( bitmapData );

// set an filename
var filename:String = “cool-image.jpg”;

// get current path
var file:File = File.applicationDirectory.resolvePath( filename );

// get the native path
var wr:File = new File( file.nativePath );

// create filestream
var stream:FileStream = new FileStream();

// open/create the file, set the filemode to write in order to save.
stream.open( wr , FileMode.WRITE);

// write your byteArray into the file.
stream.writeBytes ( byteArray, 0, byteArray.length );

// close the file.
stream.close();

// That’s it.

Is that it? This would be a boring post if I stopped right now 😉
I experimented to create a colorful cool wallpaper using AS3 only and save it using AIR. If you don’t got AIR or just don’t want to use it, I recommend using my ImageSave class.

This is my code to create this wallpaper:
Feel free to play with the code, but post a link to your experiment / wallpaper here.
package
{
import com.adobe.images.*;
import flash.display.*;
import flash.events.*;
import flash.filesystem.*;
import flash.filters.*;
import flash.geom.*;
import flash.text.*;
import flash.utils.*;
import nl.stroep.utils.*;

public class Main extends Sprite
{
public function Main():void
{
var bitmapData:BitmapData = new BitmapData (1280, 1024, false, 0x000000 );

// create colorful radial lines
var shape:Shape = new Shape();
shape.graphics.moveTo ((bitmapData.width/2), (bitmapData.height/2))
for (var i:Number = 0; i < 1900; i++) { // create some weird colors using sinus shape.graphics.lineStyle( 30, (Math.sin( i * 9 ) * i / 200) * 0xffffff, 0.4 ); // do some weird sin/cos moves shape.graphics.lineTo ((bitmapData.width/2) + (Math.sin( i/3 )*i/2), (bitmapData.height/2) + (Math.cos( i/3 )*i/2) ); } // add it multiple times using other blendmodes, isn't that what we do all the time in PhotoShop? bitmapData.draw ( shape, null, null, BlendMode.NORMAL ); bitmapData.draw ( shape, null, null, BlendMode.ADD ); bitmapData.draw ( shape, null, null, BlendMode.MULTIPLY ); bitmapData.draw ( shape, null, null, BlendMode.OVERLAY ); // cool! filters! Add some blur to our lines to make a nice blurry background bitmapData.applyFilter( bitmapData, bitmapData.rect, new Point() , new BlurFilter( 40, 40, 5 ) ); // create colorful radial lines var anotherShape:Shape = new Shape(); anotherShape.graphics.moveTo ((bitmapData.width/2), (bitmapData.height/2) ); for (var j:Number = 0; j < 1900; j++) { // create some weird lines with weird sizes var lineWidth:Number = 50 - ((j / 50) >> 0);
var color:Number = (Math.sin( j ) * j / 200) * 0xFFFFFF
anotherShape.graphics.lineStyle( lineWidth, color, 0.2, false, LineScaleMode.NORMAL, CapsStyle.SQUARE, JointStyle.MITER );
anotherShape.graphics.lineTo ((bitmapData.width/2) + (Math.sin( j/3 )*j/2), (bitmapData.height/2) + (Math.cos( j/4 )*j/2) );
}
// cool! filters! Add some blur to our lines to make a little blurry
bitmapData.applyFilter( bitmapData, bitmapData.rect, new Point() , new BlurFilter( 5, 5, 5 ) );
// blendmode ADD is awesome
bitmapData.draw ( anotherShape, null, null, BlendMode.OVERLAY );

// create some text
var textfield:TextField = new TextField ();
textfield.antiAliasType = AntiAliasType.NORMAL;
textfield.htmlText = “FUN WITH BITMAPDATA
CREATE YOUR OWN WALLPAPER WITH FLASH“;
textfield.autoSize = TextFieldAutoSize.LEFT;

// cool! filters! Add blur to your text
textfield.filters = [ new BlurFilter(20,20,3) ]

// draw textfield into bitmapdata, and use a matrix to set its position to center screen
bitmapData.draw ( textfield, new Matrix( 1, 0, 0, 1, (bitmapData.width/2) – (textfield.textWidth/2) ,(bitmapData.height/2) – (textfield.textHeight/2)), null, BlendMode.ADD);

// reset the filters, just add DropShadow
textfield.filters = [ new DropShadowFilter( 0, 45, 0, 0.3, 5, 5, 2, 5 ) ]

// draw textfield again
bitmapData.draw ( textfield, new Matrix( 1, 0, 0, 1, (bitmapData.width/2) – (textfield.textWidth/2) ,(bitmapData.height/2) – (textfield.textHeight/2) ) );

// show the bitmapData, just add it to the stage, using the Bitmap Class
this.addChild ( new Bitmap ( bitmapData ) )

// use adobe’s encoder to create a byteArray
var jpgEncoder:JPGEncoder = new JPGEncoder( 60 );
var byteArray:ByteArray = jpgEncoder.encode( bitmapData );

// set an filename
var filename:String = “cool-wallpaper.jpg”;

// get current path
var file:File = File.applicationDirectory.resolvePath( filename );

// get the native path
var wr:File = new File( file.nativePath );

// create filestream
var stream:FileStream = new FileStream();

// open/create the file, set the filemode to write; because we are going to save
stream.open( wr , FileMode.WRITE);

// write your byteArray into the file.
stream.writeBytes ( byteArray, 0, byteArray.length );

// close the file. That’s it.
stream.close();

}
}
}