HTML CONTENT HERE

Tracy Chapman wins FWA!

I just got the call from Jason that the site I built for Tracy's new album, 'Our Bright Future' has won the FWA for December 28, 2008!

Very special thanks to Jason, Adam, Sanaz and Hampus at Ordinary Kids and of course Tracy and Gretchen for making it happen. What a great Xmas present!!

Transform Tool - Drag, Scale and Rotate in Flash at Runtime

On a recent project I created a Transform Tool similar to the one you might find in a typical CS3 application like Photoshop, Illustrator or Flash. Once you instantiate this tool and and assign it a target, you can easily scale, drag and rotate it around the Stage at runtime. Optional properties include a min and max scale value, a boundaries Rectangle object to constrain where the target can be dragged and custom scale and rotate handle icons that you can specify via a linked MovieClip in the library.

TransformTool

In a future version I will combine scale and rotate into one mode eliminating the need to select between them.

View the documentation here
View the source files here

Update 11/24/08 : There was a syntax bug that was confusing placement of the transform handles which subsequently was throwing the selected object off screen at times. This has been fixed.

Upload BitmapData Snapshot to Server in AS3

Here is a very simple wrapper class I wrote last night that allows you to take a BitmapData snapshot of a Display Object on the Stage, convert it to a .png or .jpg and upload it to your server in a directory you can specify at runtime. All in about 10 lines of code.

The technique is quite simple. You instantiate a new 'DynamicBitmap' and pass in the target DisplayObject you want to snapshot as well as a string of the filename you want to call it. e.g. 'MyBitmapSnapshot.png'

In the following example I created two buttons on the stage which snapshot and upload the bitmap separately however you can combine this all into one action if you like.

  1. private var _dbmp:DynamicBitmap;
  2. private var _uploadScript:String = 'uploads/upload.php';
  3. private var _uploadDirectory:String = 'images/'; // optional //
  4. private var _target; // some display object on the stage //
  5. private var _filename:String = 'myBitmapSnapshot.png';
  6.  
  7. public function ApplicationMain ()
  8. {
  9. snapshot_btn.addEventListener(MouseEvent.CLICK, takeSnapshot);
  10. upload_btn.addEventListener(MouseEvent.CLICK, uploadSnapshot);
  11. }
  12.  
  13. private function takeSnapshot(evt:MouseEvent):void
  14. {
  15. _dbmp = new DynamicBitmap(_target, _filename);
  16. }
  17.  
  18. private function uploadSnapshot(evt:MouseEvent):void
  19. {
  20. _dbmp.upload(_uploadscript, _directory);
  21. }

Underneath the _target DisplayObject is drawn into a BitmapData object and then based on the file extension you give it in the filename it is converted into either a JPEG or PNG byteArray using the AS3CoreLib encoding classes by Tinic Uro.

These encoding classes return a raw byteArray which by itself cannot be uploaded to the server as the MIME protocol requires precisely defined headers to accompany the raw image data and instruct the server what to do with it.

Enter the URLRequestWrapper class which is a slightly modified version of the UploadPostHelper class written by Jonathan Marston which adds in the necessary headers required by the server:

  1.  
  2. --pfhchaivbrmxhcighexxsspxpxhepeea
  3.  
  4. Content-Disposition: form-data; name="Filename"
  5.  
  6. myBitmapSnapshot.png
  7.  
  8. --pfhchaivbrmxhcighexxsspxpxhepeea
  9.  
  10. Content-Disposition: form-data; name="dir"
  11.  
  12. images/
  13.  
  14. --pfhchaivbrmxhcighexxsspxpxhepeea
  15.  
  16. Content-Disposition: form-data; name="Filedata"; filename="myBitmapSnapshot.png"
  17.  
  18. Content-Type: application/octet-stream
  19.  
  20. ‰PNG
  21.  

The URLRequestWrapper is simply a modified URLRequest with a data property that contains the image data and all the necessary headers required by the server, including the optional destination directory you specified for the image. When this URLRequest is loaded into a URLLoader object it arrives at the server via the global $_POST array.

I've included a simple upload script 'uploads.php' that looks for a 'dir' property in the header information which contains the _uploadDirectory variable you specified in Flash. It is entirely optional, if no directory is specified it will install the image in the default directory as specified in the upload.php script. This may prove handy in an application where the you'd like to be able to change the destination directory of the newly created image at runtime.

Note: If you specify a directory that does not exist on the server it will be created via the new recursive flag introduced in php5. Be sure to have php5 installed and enabled on your server or the script will throw an argument error and possibly not run.

Source Example Files Here

,

Cool Stuff of The Moment