Flex, Apollo, and Flash CS3

The Flex/Flash/Apollo Project

I’ve been at my latest project for a while, writing bits and pieces of it when I’ve gotten a chance. Since the Flash CS3 Flex Component kit was announced I’ve wanted to build something that used it. I had the idea of making an Apollo application to show that the kit wasn’t just for Flex. Then I had a better idea: write an application for both Apollo and Flex, using Flash CS3 Flex Component Kit as well as a Flex Library Project to tie everything together.

I made what is perhaps a simple or silly application, but it does show how to do a number of different things. I call it the Flickr Scrapbook. The idea is that you make a scrapbook for your friends and family using photographs from Flickr – ideally your own photos, but anything public can be displayed. Each page can hold multiple photographs with captions and notes can be added as well. The pages and text can be colored, the photographs rotated and resized, and the whole thing can be displayed on a web page using Ely’s FlexBook control.

Scrapbook Editor

Scrapbook Viewer

The project is two applications. One is written for Apollo and is the Scrapbook Editor. The other is written for Flex and is the Scrapbook Viewer. It seemed appropriate that an editor would be written as an Apollo application because you may want to save your work onto your local machine. The viewer would of course, be on a web page so Flex was the obvious choice. I also created a Flex Library project to keep the common classes they both use. I used Flash CS3 to make skins and components that would be difficult in Flex alone.

You can view a couple scrapbooks I made by following these links:

Miami Scrapbook

Bella Luna Scrapbook

If you have the Apollo runtime (labs.adobe.com/apollo) you can download the Scrapbook Editor and try it out:

Scrapbook AIR (scrapbook.air)

(note: you may be asked to save the file as a .zip – do not do that – rename the file with a .air extension)

Disclaimer

Aside from the usual, “use at your own risk, this is not supported by Adobe, no animals were harmed in the making of this application, etc. etc.” disclaimers, I have to emphasize that I am NOT a developer. So my architecture may not be what you are used to. I know I didn’t use enough interfaces to make software gurus swoon, but I think there is enough substance to at least give you ideas and to show you how to do things with Flex.

Source Code

The link here will download a zip file. The zip file contains everything: the source to both projects, the Flash CS3 source, and the Scrapbook Flex library project. You should be able to import the projects right into Flex Builder 2. If you have later version of Flex Builder, create new projects and just import the source files.

Download Here

Bits and Pieces

  • Use these two applications as a resource. Here are some things you’ll find as you explore them:
  • Reading and Writing Files using the Apollo File class. This class is so cool. It is cross-platform and easy to use.
  • Making data service calls with HTTPService. I used my own Flickr API, but the one from Adobe Labs is cool too. I would have used that one but I had already started down my own path.
  • Displaying Images. Using the Image tag is relatively straightforward. But mostly you’ll want to show something while the image is loading and then switch to the image once it has loaded. I used Alex Uhlmann‘s “Flip” effect to spin the images into view.
  • Using States and Transitions. This is one of the neatest features of Flex. I use states in several places, but if you start the Editor and start selecting things like photographs, notes, and the cover page, you’ll see the property panels slide in and out. Hiding and showing the property area in the Editor is also a state change.
  • Using Effects. As I just mentioned, I use effects to show the images, to switch property panels, among other things.
  • Using Drag and Drop with the DragManager. Components like the DataGrid and Tree have drag and drop capability built in. I show you how to use it when that isn’t available – just drag a photograph onto a scrapbook page and see.
  • Making Flex Components and Skins with Flash CS3. Finally, Flash is in its rightful place along side Flex. I use the Flex Component Kit for Flash CS3 two ways: to make actual components (eg, the handle to hide and show the property area) and skins (most of the buttons).
  • Creating and Using Custom Events. You can’t write a decent application without custom events. And they are pretty easy, too.
  • Using Cascading Style Sheets. I tried to put most of the styles into an external style sheet.
  • Interaction Using the Mouse: Drag, Resize, and Rotate. Dragging things around the screen is very helpful with an editor. I show you how to do that along with resizing and rotating the photographs – using effects no less.
  • Using Embedded Fonts. You must use embedded fonts if you want to scale text or modify it in any graphical way.
  • Creating Components using ActionScript. Laying out your application using MXML tags is great, but it makes your application static. You’ll need to know how to create and add components while the application is running. An example is creating a new photograph on a scrapbook page.
  • Deploying Flex Applications to a Web Server. Once you’ve made your scrapbook file you need to put it to your webserver for people to see.
  • Using a Custom HTML Wrapper. The Scrapbook Viewer uses a custom HTML wrapper which takes reads the scrapbook file name from the URL (query parameter) and passes it to the Flex application.
  • Subclassing Components and Using Interfaces. You need to do this to get mileage out of your components. No need to write everything twice when you can extend something.

The majority of these items are found in the Scrapbook Editor. The Srapbook Viewer makes use of a few of the techniques and if you are interested in Ely’s FlexBook, the Scrapbook Viewer code shows how to use it.

Here’s an example of what you’ll find in the code: I created the ActionScript class Photograph to encapsulate all the things a photograph on a scrapbook page can be. The Photograph class has properties such as the URL to the image on Flickr, the caption with the photograph, its rotation, its placement on the page, and so forth. However, that’s not enough for either the Editor or the Viewer. In the Editor I want you to be able to select a photograph and use the mouse to resize it, rotate it, and delete it. In the Viewer I want you to click it to enlarge it.

To do those things I put the Photograph class in the Flex Library project to be used as the base class for both applications. Then I created the EditorPhotograph class for the Editor application and added the extras (resizing, rotation, etc). I did a similar thing with the Viewer.

There is also an example of an interface. A page in the scrapbook can hold two types of objects: Photographs and Notes. I wanted to write code as cleanly as possible and not be burdened with figuring out what type of object it had. This is a good place for an interface and I created the IScrapbookItem interface (also in the Flex Library project). Both Photographs and Notes implement it. The Editor extends that with IEditorItem as its needs a few extra things.

Scrapbook Editor Instructions

When you start the Scrapbook Editor you’ll see two main areas: the one on the left is where your Flickr search results appear; the area on the right is where you build the scrapbook, page by page.

Begin by entering some tags (separated by commas) into the search box at the top left. Try simply miami beach and press Enter. After a bit of searching a page of images will appear.

Now give your scrapbook at title. Just enter the new title into the text box below the cover page.

You need a scrapbook page to place photos, so use the large green plus-sign above the scrapbook area to add a page. The page will be placed after the page you are viewing.

Now you can drag photos over to the page and drop them in place. The photos will become selected with the non-selected photos dimmed.

The red x deletes the photograph.

Drag the green arrow to resize the photograph.

Drag the blue arrows to rotate the photograph.

When a photograph is selected you can change its properties. Use the controls on the photograph to delete it, resize it, or rotate it. Below the page are other properties.

You can change the photograph’s caption, remove the drop shadow, change the matte color, text color, and so forth.

Click on the background of the page to de-select the photograph and the properties change to allow you to work with the page itself.

You can change the page’s color and also add notes which you can position around the page by dragging them with the mouse.

Continue to add pages and photographs. When are ready to save your work, use the File menu above the scrapbook. Select Save, locate a place, and give your file a name; the file’s name will be changed to add .xml as the extension.

New will make a new, empty scrapbook.

Open will open an existing scrapbook.

Save and Save as save the current scrapbook.

Print prints the scrapbook.

Deploying the Scrapbook

When you are ready to show the scrapbook to the world, copy the scrapbook .xml file you made, along with the contents of the deployment directory, to your web server. Send a URL to your friends and family:

http://your.domain/scrapbooks/Viewer.html?book=miami_vacation.xml

Adding the query string, book=miami_vacation.xml will automatically load that scrapbook file into the viewer.

Things to To Do

As you use these applications you may find yourself asking why this or that feature is missing. Well, I wanted to get this project done so I left some things out and I wanted to give the ‘interested reader’ the opportunity to modify the code. Here’s some items I’d like to see added and I may get around to doing them myself some day:

  • You can add photographs from Flickr to your scrapbook. It would be nice to use photographs that are already on your computer, too.
  • How about adding video clips? Imaging flipping to a page and there’s a clip of you on the beach. Or may be not.
  • It would be nice to add more properties for the title and notes fields such as size and font family.
  • It would be nice to rotate and resize the notes on the scrapbook pages.
  • You should be able to add textures to pages. Actually, some of the code is already there and needs to be finished.
  • You should be able to add photographs and additional text to your scrapbook cover.
  • It would be nice to add gradient fills to the scrapbook cover; may be the pages, too.
  • It would be cool to have transparent pages. Check out Ely’s FlexBook demo and the medical text book example.
  • It would be nice to view thumbnails of the scrapbook pages in the editor so you could re-arrange them (or delete them).
  • Right now in the Scrapbook Viewer, clicking on a photograph zooms it up on the current page. It would be nice if the photograph spanned the pages and could become larger.

This list could probably go on and on. But you get the idea – even if you don’t want a scrapbook editor or viewer, this should provide you with a good opportunity to explore and try some things out. I hope the comments in the code are helpful enough to guide through these applications.

Summary

The time is right to put these technologies together. You can really make the experience matter.