Image Plane Developer Documentation

Implementation

An ideal implementation of Image Plane will most likely utilize a number of sophisticated web development techniques and use any number of client and server side scripts. The bare minimum implementation should use an embed or object tag (although embed tags are deprecated in HTML 4.0) to add the Image Plane application to the page. See the example of a well formed embed tag below. A better implementation would use a script to dynamically add the input variables to the get string.

Embed Example

Download this file.
  1. <div id="imagePlaneDiv" style="width:100% height:600px">
  2.    <embed
  3.    src="/flash/imagePlane.swf?originalName=myImage.png&
  4.    inputFileName=upload_1212683511877.gif&
  5.    inputXML=/flash/parameters.xml&
  6.    outputFileName=1212683511877&
  7.    divID=imageEditorDiv&
  8.    verbose=false"
  9.  
  10.    quality="high"
  11.    pluginspage="http://www.adobe.com/products/flashplayer/"
  12.    play="true"
  13.    loop="false"
  14.    wmode="window"
  15.    devicefont="false"
  16.    name="ImagePlane"
  17.    menu="false"
  18.    allowfullscreen="true"
  19.    allowscriptaccess="sameDomain"
  20.    salign=""
  21.    type="application/x-shockwave-flash"
  22.    height="100%"
  23.    width="100%">
  24. </div>

Recommendations

The application is designed to be flexible and fit into any framework. If you wish to enable the user to edit images as they are uploaded you will need to create a more sophisticated page interface. For example, let's say we have a page thats part of a CMS with a form to add a new product to a web store. You can enable the user to upload and edit a new image for the product before they submit the new product form

To do this, add an iframe to the product form. Inside this iframe use a file field to select an image for the new product. When the user selects a file, the form of the iframe submits and uploads the new image to the server. After the upload is complete the iframe changes to display a thumbnail of the new image and adds an "edit image" link that will open the Image Plane application to edit the now server-side image. The user can then edit the image using Image Plane before saving it back to a temporary directory. The user repeats this process for any other image files before finally submitting the original form for the new product. This submit script that checks the temporary directory for Image Plane's file output to see if a file was uploaded by the user and stores the new image with the product information to a database.

A few other important notes:

  • Image Plane is programmed in ActionScript 3.0, thus it requires Flash Player 9 or later to run.
  • Because it can stretch to fill any space, opening Image Plane in a new browser or modal window by itself allows it to maximize its potential.
  • There is no capacity for Image Plane to close itself when finished. Any implementation should include a javascript "closeScript" callback in the parameters.xml file. It is also useful to note that this callback will transmit a parameter indicating the location and name of the output image, if one exists.
  • Image Plane is generally setup to save each image instance output under the same filename. To prevent these instances from overwriting each other you should save each instance output to a unique temporary location. You can control this using the IPinstance nodes of the parameters.xml file.

Site Info

Contact Us

By Phone:
979-696-SITE (7483)
By Email:
Send Email
For Support:
Please visit our Get Satisfaction forum.

About Us

The Kitchen is run by the fine folk at Net Perspective, LLC.

Find out more about The Kitchen or visit us at Net-Perspective.com.

Copyright

This site, its contents, and its design are © Copyright 2008 - 6081 Net Perspective, LLC. All rights reserved.

Some images used here by permission are copyright of their respective owners. Thanks to Mark James for the fantastic Silk icon set.