The application

Before you begin, you must first understand what you will be building. A significant amount of time and effort went into this sample application, because I wanted to provide an example that combines the powerful capabilities of Flex and AIR with Amazon S3 to demonstrate something truly unique and useful. In short, the application you will be building is a utility for managing images in an Amazon S3 bucket that you own. However, you could easily extend the example to emulate a file-management application that integrates seamlessly with the local file system similar to mounting a remote drive on your local system by tunneling through a virtual private network (VPN).

When the application is first initialized, a window similar to Figure 1 appears. Upon typing your Amazon access ID, private key, and bucket name, the application springs to life, as seen in Figure 2.

Figure 1. The application must have your Amazon S3 account information before it can do anything.

Figure 2. The application comes to life after you have entered the information.

The image thumbnails displayed in the horizontal list at the bottom of the application represent the images in my bucket, which I named galleryassets. After you have set up your Amazon S3 account, I recommend installing the Amazon S3 Firefox plug-in before doing anything else. The easiest way to create your own bucket is to click the little folder icon in the Amazon S3 organizer window after you have it installed. Because bucket names are actually global namespaces on the Amazon S3 system, you will need to name your bucket something other than galleryassets, because that namespace belongs to me now. After you ve created your bucket, just leave it empty. You re going to fill it up in just a minute.

Tools and code libraries

If you haven t already done so, download the code for this tutorial now. In Adobe Flex Builder, navigate to File > import > Flex Project. You should be able to simply extract the download and select the S3ImageViewer directory as the project folder. I ve left all of the project properties files as is for easy importing, and I also included the additional libraries needed for AIR to work with Amazon S3, including CoreLib, Crypto, and AWSs3Lib.

Note: AWSs3Lib is currently a work in progress, and I have added a few classes to the com.adobe.webapis.awss3 package so that it would support HTTP POST functionality.

Fill your bucket

Before you dive into the code, launch the S3ImageViewer project from Flex so that you can make sure it s all working. After you enter your access ID, secret key, and bucket name, the authentication window disappears; but you still won t have anything in your thumbnail browser. Assuming that you have some JPEG images somewhere on your computer, open a file browser and drag and drop your JPEG images onto the area of the application where the thumbnails should appear. You should immediately begin seeing thumbnails of your images. You do not have to drag them over one at a time, either. Try grabbing a whole group of images and dragging them over.

Now, I show you how you were just able to do that in the code.

Page 2 of 3

Previous Page

Next Page