While cycling around the city this past weekend with my girlfriend I shot a couple quick photos with my iPhone to play with some of the encoded EXIF/GPS data for an upcoming project I am working on. After creating some quick thumbnails, I built the following Google Maps prototype to display the images where I photographed them extracting the GPS data with a PHP script I have running on the server.

In the process of building this simple example I came across a strange phenomenon where the GPS data wasn’t being preserved if the original iPhone image was altered in any way. This was happening whenever I saved an edited version of the image in Photoshop CS4 including the creation of a thumbail. Even with the preserve metadata flag selected when saving for web.

This was especially annoying because I typically like to use the popular CameraBag app to easily treat my images before saving them on the phone. An explanation from their website suggests that Apple does not allow third party applications to preserve the EXIF data on save. Seriously? Not sure if this is true although a very quick search through Apple’s iPhone dev portal hasn’t yielded any suggestions one way or the other.

Nonetheless, Apple’s own photo editing application Aperture does preserve the EXIF data when exporting out a version however this is a less than optimal solution as I find cropping and exporting batch sequences of thumbnails to a be a clumsy and tedious operation in Aperture.

So what to do? After some searching for a solution I came across Phil Harvey’s impressive ExifTool which can read/write/copy image metadata across files ala the command line.

After going here and installing the package and adding it to my path I can run the following script and copy the GPS data from my source iPhone image1.jpg to my treated version or thumbnail image2.jpg.

exiftool -overwrite_original -tagsfromfile image1.jpg -gps:all image2.jpg

Awesome, and there are a whole list of tags, arguments, etc that you can pass into the tool all outlined in the documentation. One thing to note though is that I have been unsuccessful in copying over the data that describes when the source image was created & last modified. Having tried all of the following commands without success I’m still searching for a solution to copy the timestamp over. If anyone has any ideas I’d love to hear how you did it.

# none of these worked for me...
exiftool -overwrite_original -tagsfromfile image1.jpg -all:all image2.jpg
exiftool -overwrite_original -tagsfromfile image1.jpg -createdate image2.jpg
# attempt to alter the existing date by a few hours...
exiftool -overwrite_original -createdate+=3 image2.jpg
exiftool -overwrite_original -alldates+=1:30 image2.jpg

So after treating the images and banging out some thumbnails, I added the GPS data back in via the ExifTool and pushed everything up my server to try working with the metadata inside of Flash.

The larger project that I am building this prototype for will require the image data to come to Flash via a DB which is why I wrote up a PHP solution instead of reading the image headers right out of the jpeg file using the methods of the AS3 ByteArray.

In my test case here I am communicating with the backend using AMFPHP and wrote a simple service class that includes the main ExifReader class, collects all the EXIF data and sends the results back to Flash.

class AMFDirectoryReader{
 
   public function __construct()
   {
   // relative path to the ExifReader script //
     require_once '../../php/gmaps-gps-images/ExifReader.php';
   }    
 
   public function getEXIFImageData($args)
   {
     $target = $args[0];
     $params = explode(',', $args[1]);
 
     $exif = new ExifReader();
     if (is_file($target)) return $exif->readImage($target, $params);        
     if (is_dir($target)) return $exif->readDirectory($target, $params);
 
     return array('ERROR: Target Does Not Exist');
   }     
}

I can then call getEXIFImageData() from Flash using my RemotingCall class passing in the $target file or directory I want to read and an array of strings that describe what metadata tags I want to get back.

import flash.display.Sprite;
import com.quietless.remoting.RemotingCall;
import com.quietless.events.HTTPRequestEvent;
 
public class AppMain extends Sprite {
 
private var _rc	        :RemotingCall;
private var _params	:Array = ['gps', 'date', 'size'];
private var _target	:String = '../../php/gmaps-gps-images/thumbs';
 
   public function AppMain()
   {		
     _rc = new RemotingCall('http://quietless.com/amfphp/gateway.php');
     _rc.call('AMFDirectoryReader', 'getEXIFImageData', [_target, _params.join()]);
     _rc.addEventListener(HTTPRequestEvent.COMPLETE, onRequestComplete);
   }
 
   private function onRequestComplete(e:HTTPRequestEvent):void
   {
     var exif:Array = e.target.response;
   }
}

The real work happens inside of ExifReader where the target image or all images in a target directory are read using calls to exif_read_data(). Currently the class only supports the $params arguments ‘gps’, ‘date’, ‘size’ but if you take a look at what’s going on and reference the method’s man page you can easily extend this to send back what you need.

 
class ExifReader{
 
  public function __construct() { }
 
  /**
  * Returns an array of EXIF data objecta for all jpgs in the target directory 
  **/	
  public function readDirectory($dir, $props)
  {
  // $dir points to this directory from amfphp //
    $files = scandir($dir);
    $images = array();
  // loop over the files array and look for images
    for ($i=0; $i < count($files); $i++) { 
      if (stristr($files[$i], '.jpg')){
  // if the jpeg has gps data add it to the images array //	
      $img = $this->readImage($dir.'/'.$files[$i], $props);
      if ($img) array_push($images, $img);
      }
    }
    return $images;
  }
 
/**
* Returns the EXIF data object of a single image 
**/	
  public function readImage($image, $props)
  {
  $exif = exif_read_data($image, 0, true);		
  if ($exif){
    $data = array();
    $data['name'] = $exif['FILE']['FileName']; 
    foreach($props as $val)
    {				
  // return an array [lat, lng] //
      if ($val=='gps') $data['gps'] = $this->getGPS($image);
  // return date value in milliseconds //
      if ($val=='date') $data['date'] = $exif['FILE']['FileDateTime']*1000;
  // return size in kilobytes //	
      if ($val=='size') $data['size'] = floor(($exif['FILE']['FileSize'] / 1024 * 10 )/10)."KB";
    }
    return $data;
    }	else{
    return null;
    }
  }
 
/**
* Returns GPS latitude & longitude as decimal values
**/	
  private function getGPS($image)
  {
    $exif = exif_read_data($image, 0, true);
    if ($exif){
      $lat = $exif['GPS']['GPSLatitude']; 
      $log = $exif['GPS']['GPSLongitude'];
      if (!$lat || !$log) return null;
  // latitude values //
      $lat_degrees = $this->divide($lat[0]);
      $lat_minutes = $this->divide($lat[1]);
      $lat_seconds = $this->divide($lat[2]);
      $lat_hemi = $exif['GPS']['GPSLatitudeRef'];
 
  // longitude values //
      $log_degrees = $this->divide($log[0]);
      $log_minutes = $this->divide($log[1]);
      $log_seconds = $this->divide($log[2]);
      $log_hemi = $exif['GPS']['GPSLongitudeRef'];
 
      $lat_decimal = $this->toDecimal($lat_degrees, $lat_minutes, $lat_seconds, $lat_hemi);
      $log_decimal = $this->toDecimal($log_degrees, $log_minutes, $log_seconds, $log_hemi);
 
      return array($lat_decimal, $log_decimal);
      }	else{
      return null;
    }
  }
 
  private  function toDecimal($deg, $min, $sec, $hemi)
  {
    $d = $deg + $min/60 + $sec/3600;
    return ($hemi=='S' || $hemi=='W') ? $d*=-1 : $d;
  }
 
  private function divide($a)
  {
  // evaluate the string fraction and return a float //	
    $e = explode('/', $a);
  // prevent division by zero //
    if (!$e[0] || !$e[1]) {
      return 0;
    }	else{
    return $e[0] / $e[1];
    }
  }
}

At some point in the future I’d like to write an elegant way to load a batch of thumbnails and just extract the image metadata right from within Flash. This solution does allow you to read the image tags first though before you load them, ideal for querying a DB to collect a result set of images that meet a specific requirement say like falling within a coordinate boundary, before actually loading them into Flash.

As always downloads of the above classes.
Comment and suggestions are most welcome.

This is an update to my earlier post where I demonstrated how to dynamically generate an image of a DisplayObject in Flash and push it up to the server using PHP. I’ve cleaned up and extended the code here to now allow you to also save an image to the desktop using the new save( ) method of the FileReference class introduced in Flash Player 10.

To use this class download the source files and create a new BitmapSnapshot object passing in the DisplayObject you want to create an image of as well as an optional file name, width and height. If width and height are omitted BitmapSnapshot will use the full width and height of the object you are passing in.

Note : BitmapSnapshot will generate a jpg or a png based on the extension of the filename you pass in.
The default output will be a png because it’s encoding algorithm is much faster than that of jpeg’s.

private function saveToDesktop():void
{
var img.BitmapSnapshot = new BitmapSnapshot(_canvas, _filename);
    img.saveToDesktop();			
}
 
private function saveOnServer():void
{
var img:BitmapSnapshot = new BitmapSnapshot(_canvas, _filename);
    img.saveOnServer(_phpscript, _destination);
}

A note on dependencies : BitmapSnapshot does rely on the fantastic jpeg and png encoder classes written by Tinic Uro as part of the AS3CoreLibrary. These files are included in the ‘libs’ directory along with BitmapSnapshot so be sure this folder is in your class path when you go to compile.

To see the generated image saved to the server, be sure to clear your cache and view the image here.

As always please leave any questions or problems in the comments below.

Here’s a handy class that takes an array of hex values and creates a full screen radial or linear gradient that automatically scales to the width and height of the screen.

Implementation is simple.

// create an array of string hex values
var colors:Array = ['0xFFFFFF', '0xF57E04', '0xC64D18', '0xA95354'];
 
// constrains width to height, convenient for radial gradients
// to keep them circular, default is true
var constrain:Boolean = true;
 
// valid types are FullScreenGradient.RADIAL
// or FullScreenGradient.LINEAR, default is RADIAL
var type:String = FullScreenGradient.RADIAL;
 
var grad:FullScreenGradient =
--> new FullScreenGradient(colors, type, constrain);
addChild(grad);

You can use the tool below to drop in color values using the pickers to preview your gradient and check for ‘banding’ which seems to be a weird phenomenon that occurs on linear gradients when Flash attempts to interpolate between color values that are too far apart.

Enjoy.

Download the Class File

Updated: February 4. 2009 – Much cleaner implementation with added comments to hopefully help you understand what is going on

In this being a utility I have been meaning to improve on for awhile, this post attempts to tackle two tasks that are especially common in Flash Platform development. 1st the need to load in a batch of images sequentially and 2nd the ability for Flash to be able to ‘see’ inside of a directory on the filesystem and load all the available images within.

As is common knowledge, Flash by itself cannot measure the contents of a directory but PHP conveniently can and report back to Flash its findings. This is all accomplished by loading the included PHP script ‘directory-reader.php’ into an AS3 URLLoader object and capturing the variables PHP echoes back to it.

Consider the following:

public function ImageLoadManager ()
{
   var dr = new DirectoryReader(_pathToDirectory,  '*');
   dr.addEventListener(HTTPRequestEvent.COMPLETE, onDirectoryRead);
}

We create a DirectoryReader object and pass into it the path to the directory we want to read relative to the location of the php script on the filesystem. (We’ll talk about where that script goes in a second). It should be noted that many PHP installations have URL file-access disabled in the server configuration by default which may throw errors if you try to provide absolute URL’s. You many need to change your config file to get around this or just use a relative URL as the sample files provided do instead.

Since this utility was designed to gather all of the image files from a directory that Flash supports, (jpg, png, and gif), it will do just that if you leave the second parameter blank. If you are interested in seeing every visible file in the directory (not including sub-directories) you can pass in a wildcard flag ( * ) as shown in the example above. Note the array of file names this returns will include non-image filetypes which will throw IO errors if you pass them into the ImageBatchLoader in the next step.

After we’ve created our DirectoryReader we’ll want to listen for the ‘HTTPRequestEvent.COMPLETE’ event that gets fired when the PHP script is successfully executed. In the onDirectoryRead function below we can access the array of file names that came back from PHP through the data property of HTTPRequestEvent object.

private function onDirectoryRead(evt:HTTPRequestEvent):void
{
  _files = evt.data as Array;
}

We can then take this list of files and pass it into a new ImageBatchLoader object that will naturally go and load up our images.

private function onDirectoryRead(evt:HTTPRequestEvent):void
{
  _files = evt.data as Array;
// load a batch of images //
  _loader = new ImageBatchLoader(_files, _swfToImages);
  _loader.addEventListener(ImageBatchEvent.IMAGE_PROGRESS, 
   onImageLoadProgress);
  _loader.addEventListener(ImageBatchEvent.BATCH_PROGRESS, 
   onImageBatchProgress);
  _loader.addEventListener(ImageBatchEvent.BATCH_COMPLETE, 
   onImageBatchComplete);	
}

An instance of the ImageBatchLoader class expects at least one parameter, an array of file names to load. Once it has this it will load each image one by one and trace out a whole slew of loader event info to the console so you can monitor each image load’s progress. (Note: To view this output set the debug property of _loader to true) The second parameter is a relative path to the directory where the images to be loaded reside. It should be noted that this path will almost always be different from the path you fed to DirectoryReader since it needs to be relative to the location of the published SWF on the filesystem, NOT the location of the PHP file as we noted above.

Of course you can create a list of files names via a remoting call that polls a database or by reading in an XML file. The purpose of this technique to address those situations where you need a fast and lightweight solution to ‘peek’ inside a directory and grab however many images are in it.

This can all be accomplished with the following sample of code:

package {
import flash.display.Sprite;
import flash.events.MouseEvent;
 
import com.quietless.utils.DirectoryReader;
import com.quietless.bitmap.ImageBatchLoader;
import com.quietless.events.ImageBatchEvent;
import com.quietless.events.HTTPRequestEvent;
 
public class ImageLoadManager extends Sprite
{
private var _loader:ImageBatchLoader;
private var _files:Array; // all files names returned by php //
private var _bitmaps:Array;// all bitmaps successfully loaded //
// path from the published swf to the image folder //
private var _swfToImages:String = 'images/';	
// path from the php script to the directory you want to browse //	
private var _phpToImages:String = '../images';	
 
public function ImageLoadManager ()
{
   var dr = new DirectoryReader(_phpToImages, '*');
   dr.addEventListener(HTTPRequestEvent.COMPLETE, onDirectoryRead);
}
 
private function onDirectoryRead(evt:HTTPRequestEvent):void
{
   _files = evt.data as Array;
// load a batch of images //
   _loader = new ImageBatchLoader(_files, _swfToImages);
   _loader.debug = false;
   _loader.addEventListener(ImageBatchEvent.IMAGE_PROGRESS, 
   onImageLoadProgress);
   _loader.addEventListener(ImageBatchEvent.BATCH_PROGRESS, 
   onImageBatchProgress);
   _loader.addEventListener(ImageBatchEvent.BATCH_COMPLETE, 
   onImageBatchComplete);			    
}
 
private function onImageLoadProgress(evt:ImageBatchEvent):void
{
   var bl:Number = evt.data.loaded;
   var bt:Number = evt.data.total;
   log( 'Loading Image # '+evt.data.position+' : '+bl+' of
   --> '+bt+' Bytes Loaded = '+Math.ceil((bl/bt)*100)+' %' );
}
 
private function onImageBatchProgress(evt:ImageBatchEvent):void
{
   log('Successfully Loaded '+evt.data.loaded+' of 
   --> '+evt.data.total+' Images In This Batch');
}
 
private function onImageBatchComplete(evt:ImageBatchEvent):void
{
   _bitmaps = evt.data as Array;
   var img = _bitmaps[0]; 		
   addChild(img);
   log('Image Batch Load Complete!!');
}

As for the business of where to put the PHP script that can actually read the directory you specify? I have it set as a constant variable inside of the DirectoryReader class:

private static const PATH_TO_DIRECTORY_READER:String =
   'http://localhost:8888/php/directory-reader.php';

My Mamp installation points to my project root folder which contains a ‘php’ folder (containing ‘directory-reader.php’), an ‘images’ folder that contains my images and of course the published swf and an html page. Note you will need to have a server running PHP 5 locally if you want to test the sample files from the Flash IDE.

If you have any questions please post in the comments below.

Sample Files

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!!

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.

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/09 : This class has been refactored for improved legibility. Also added now is the ability to register specific targets on the stage via an internal _targets array. See documentation for details.

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.

Note : This class has been updated, you can view the new post here.

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.

private var _dbmp:DynamicBitmap;
private var _uploadScript:String = 'uploads/upload.php';
private var _uploadDirectory:String = 'images/'; // optional //
private var _target; // some display object on the stage //
private var _filename:String = 'myBitmapSnapshot.png';
 
public function ApplicationMain ()
{
     snapshot_btn.addEventListener(MouseEvent.CLICK, takeSnapshot);
     upload_btn.addEventListener(MouseEvent.CLICK, uploadSnapshot);
}
 
private function takeSnapshot(evt:MouseEvent):void
{
     _dbmp = new DynamicBitmap(_target, _filename);
}
 
private function uploadSnapshot(evt:MouseEvent):void
{
     _dbmp.upload(_uploadscript, _directory);
}

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:

--pfhchaivbrmxhcighexxsspxpxhepeea
 
Content-Disposition: form-data; name="Filename"
 
myBitmapSnapshot.png
 
--pfhchaivbrmxhcighexxsspxpxhepeea
 
Content-Disposition: form-data; name="dir"
 
images/
 
--pfhchaivbrmxhcighexxsspxpxhepeea
 
Content-Disposition: form-data; name="Filedata"; filename="myBitmapSnapshot.png"
 
Content-Type: application/octet-stream
 
‰PNG

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