Stroep

Just a collection of random works – Mark Knol

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.

Cool wallpaper created with AS3

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, 0×000000 );
           
            // 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 = "<font face=’Arial’ color=’#FFFFFF’ size=’60′>FUN WITH BITMAPDATA</font> <br/> <font face=’verdana’ color=’#FFFFFF’ size=’20′><B>CREATE YOUR OWN WALLPAPER WITH FLASH</b></font>";
            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();
                   
        }      
    }
}



14 responses to “Saving images with AIR -
Create a wallpaper using AS3 only”

  1. Sweet, i’m definitely going to try this! Thanks

  2. Mark Knol says:

    Thanks! Let me know when you created something.

  3. Checked your work on Flick and I’m very impressed.
    You must be a big fun of Joshua Davis too. :)

    It will be great to post that work on the blog. it’s easier for people to keep track of new things.

  4. Agha says:

    This editor not let me to post code
    Just emial me i will send it for you.

  5. Mark Knol says:

    My wordpress doesn’t allow code (don’t know how to turn that on?), so maybe you could just share the image with me? Please post a link to the image ;)

  6. Boudewijn says:

    useful template, I’ve worked with it and the results are terrific. Just like the number of options to create your own wallpaper

  7. Derek Jackson says:

    Cheers for this. Considering buying Flash CS5 to do a little project I’ve been asked to do.

    One of the requirements is to be able to save out TXT and JPG files of the results of some user choices.

    Can’t use PHP as the little app will just be sitting on their laptop with no internet access.

    Am I right in thinking this code will let me do something similar? Haven’t got my head around exactly what AIR is – another bit of software I’ll need to get hold of? I’m hoping all I need to do is give my client the final SWF file…

  8. meh says:

    So I try this and get:

    Scene 1, Layer ‘AS’, Frame 1, Line 4 1046: Type was not found or was not a compile-time constant: JPGEncoder.

    Scene 1, Layer ‘AS’, Frame 1, Line 5 1120: Access of undefined property bitmapData.

    Since most as3 tutorials I find seem to mention only half of what they actually need to run, I tried using the as3 core lib, but then..

    Scene 1, Layer ‘AS’, Frame 1, Line 4 1180: Call to a possibly undefined method jpgEncoder.

    Scene 1, Layer ‘AS’, Frame 1, Line 5 1120: Access of undefined property bitmapData.

    Then I changed it to new JPGEncoder, which fixed the first error, but the bitmapdata still won’t work, no matter how it’s written. What’s wrong?

    Also, dead AS3 tutorial-writers everywhere: It’s nice that you share code with us, but FFS, just attach a working sample FLA. It’s getting really tiresome to fix all those bugs and typos.

  9. meh says:

    Oops, I mean “dear”, not dead.

  10. Orangewood says:

    Usefull template!

  11. Azra3L says:

    Cheers.. nice example.. this helped me a lot!.. its much better than using fileReference.save();

  12. SumiGhosh says:

    how about the reverse. getting data and show it on the sprite.

  13. Ankit Sharma says:

    ok tried your first script, copied it on a timeline in flash and try to compile it it kept saying compile type constant not found. even thou i had jpgencoder and png encoder in com folder in the same location as flash file :( did i do something wrong. sorry I am new to as3 coding

    impressive work BTW :)

Say something interesting

Please link to code from an external resource, like gist.github.com.