FlexApps Component - Version 0.9

DIGG IT!     8 Comments Published Wednesday, February 21, 2007 at 2:20 AM .

Today marks the first public release of the FlexApps Component 0.9 that takes pictures of your Flex application at runtime for FlexApps on Flickr. It is like adding a camera into your Flex app for uploading images to FlexApps. Simply add the component into your app and run it. To take a picture, you just: Right-Click > Send to FlexApps!

Download FlexApps Component 0.9

The component makes it easy to send high quality images of your Flex application to FlexApps for approval. I wrote a parallel application for approving the images uploaded through the FlexApps Component making it easy for me to process lots of images.

How to use FlexApp Component:

1. Unzip the FlexApps.zip into your Flex project.
2. Use the "FlexAppExample_Usage.mxml" as an example. You will need to create a namespace for com.flexapps.* and denote your apps properties within the component like so:

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:fxa="com.flexapps.*">

<fxa:FlexApps
title="FlexApps Component"
description="Sends images to FlexApps within a Flex application."
tags="ByteArray,URLRequest,uploader,AMF3,PNG,imaging"
url="http://www.onFlex.org"
developer="Ted Patrick - Adobe Systems"/>

</mx:Application>

Once the FlexApps component is in you app, you can take a series of images of your flex application working. It makes it quick and easy to send high quality images with full meta-data attached for addition to FlexApps.

Imaging Tips:

1. FlexApps Component will take an image to the edge of the Flex SWF file depending on the size of the browser window. The width is limited to 1200px and height to 1000px to minimize the image upload size.

2. Make sure to change out the component properties for your application. If I see any data from the default examples, I will be forced to discard the images.

3. I will only approve quality images. In order to make sure that FlexApps maintains a high level of quality I will be strict about what gets approved.

4. Have full approval before uploading images of your Flex application. I would love to see images of Flex apps you have built but please ask permission before posting images.

5. Please be patient after uploading images. I plan to approve images regularly but the approval process is without feedback. Please do not expect an email when images are approved or deleted. I will do my best to be prompt.

FlexApps Components in action:



FlexApp Component results:



The FlexApp component has some unique features and workflow. First it snaps an image of the whole application and writes it to a BitmapData Object. This image is then encoded into a JPG image in memory which results in a ByteArray object. I then encode an object containing the image metadata into AMF via the writeObject method on the ByteArray class. The ByteArray is then uploaded to onflex.org where the image is stored in a queue for processing and approval. Daily I open the management app in Flex and it displays all uploaded images in the queue. With one click, I can preview the image, edit the metadata, and either delete or upload the image to Flickr.

Ideally the FlexApps Component will make posting your FlexApps easy. I have gotten lots of mail about the FlexApps Flickr account and it has become very popular. What is interesting is that several people are using it to sell Flex as a solution for their clients. The Flickr gallery provides a simple way to flip though 150 images of Flex applications. I strongly encourage anyone with a Flex application to post images to FlexApps and mark the images with your contact information. FlexApps is a great way to locate Flex developers and consulting firms and get high quality referrals for Flex consulting projects.

What I find most interesting about this app is uploading a blend of binary image and AMF3 data to the server as a whole. In this case, a JPG with an embedded AMF3 object is uploaded to the server using php. The server does nothing but save the data to the file system and the Flex SWF and Flash Player does all the heavy lifting. In this case, data is uploaded, stored, and downloaded as binary data directly from onflex.org without server side modification. My server doesn't have AMFPHP or Flex Data Services installed, I am simply using the Flash Players support of binary data creation to enable this apps functionality. The ability to read and write AMF3 bytes, compress and uncompress binary data, and manipulate binary data in memory are built into the flash.utils.ByteArray class within Flash Player 9.

The FlexApps components come pre-packaged with several classes from the spiffy AS3 CORELIB Library on Google Code. Make sure to check out this great free library it helped a ton with development. Special thanks for the JPGEncoder and the PNGEncoder within, they were invaluable!

I am planning some new features for the 0.91 release this week:
1. Add in a snazzy camera shutter sound.
2. Preview the image before uploading.

I am looking forward to approving your FlexApps images!

Cheers,

Ted :)

---