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)


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:


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.


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

16 Responses to Flex, Apollo, and Flash CS3

  1. JabbyPanda says:

    Very solid code and application looks cool too!

    It seems to me that you forgot to include in source files custom transition effects from namespace
    Peter: You can get those classes from Alex Uhlmann’s blog: http://weblogs.macromedia.com/auhlmann/

  2. JabbyPanda says:

    Thanks Peter for an answer, I already had figured out the location of AnimationPackage classes by myself.

    My idea is that the application itself and the code architecture underneath is so good, that I advise you to take part in Adobe Apollo Derby, this app is a very solid candidate for the win.

    What are license limitations of your code? Can I reuse certain ideas (XML data serialization, custom drag and drop support, most important – some, I stress it, some UI decisitions) in my commercial app?

    If you want, we can continue this discussion via emails.
    Peter: I keep meaning to make the license more explicit. You can use this code for free, no royalties, etc. at your own risk. Meaning that Adobe doesn’t support the code and I will try when I have time.

  3. Nate says:

    Downloaded Adobe AIR and tried running the Scrapbook.air install but I get this error:

    This application could not be installed or launched (AIR file [path]Scrapbook.air is invalid: This application requires a version of the Adobe Integrated Runtime (AIR) which is no longer supported. Please contact the application author for an updated version.).
    Peter: My timing on this wasn’t so good. Shortly after releasing my examples we (Adobe) announced Flex Builder 3 Beta and Adobe AIR. The Adobe AIR is a newer version of my example. I posted a link a few days ago with an update, so try that. You can also go to my personal site, http://www.keaura.com and download the application there.

  4. Ben says:

    Peter… this is fantastic. Thanks so much for sharing it. It has given me so much insight into how to properly structure things.

    Nice job!
    Peter: Thanks!

  5. Hey Peter!

    Quite informative post. We use Flash Flex Apollo in our web activities and believe that it is the best we can desire at the moment… nevertheless it is a common fact that technologies never stand frozen, the developing and updating every single moment – so we will wait for more news from Adobe đŸ™‚

    thanx a lot for sgaring useful information!


  6. n1c0 says:

    Hi all,

    I already use the flexbook component, and I’d like to use some of your code but can’t find how these two brilliant pieces of code are working together.

    Is there a place where you call the flexbook component in your code ?

    Thanks for you help.
    Peter: If you look Layout.mxml you’ll see the function handleResult. Inside of that function I create the FlexBook in ActionScript and then add all of the pages to it there.

  7. Gyroly says:

    I deployed the scrapbook viewer on my local server(WAMP). I tried the sample books successfully but none of images appear in book – just show “loading…”, and my local server got an error.Anyone tell me wh
    Peter: You need to deploy the PHP code on your server. The PHP code makes the request to Flickr for the images and then sends them back to the Flex app (scrapbook viewer). The reason is that Flickr has no crossdomain.xml file on its servers and the Flex app requires authorization to do some of the bitmap tricks to make the FlexBook control work.

  8. Doctor says:

    Super awesome! Looks like the goofy microsoft page flipper thing is nothing compared to this (that ms page flipper thing, while looking halfway neet, is completely impractical)

  9. spinglitter says:

    Your scrapbook app. looks very interesting… and I would love to explore it further, but when I tried to download the .air editor – I got an error message saying the app was made for a previous version of .air, and I should contact the author.
    “This application requires a version of the Adobe Integrated Runtime (AIR) which is no longer supported. Please contact the application author for an updated version.).”
    Is there a way around this? And will it mean that all the .air related files are also out of date?

  10. spinglitter says:

    Your scrapbook app. looks very interesting… and I would love to explore it further, but when I tried to download the .air editor – I got an error message saying the app was made for a previous version of .air, and I should contact the author.
    “This application requires a version of the Adobe Integrated Runtime (AIR) which is no longer supported. Please contact the application author for an updated version.).”
    Is there a way around this? And will it mean that all the .air related files are also out of date?

    Whoops, sorry , Peter – I just found the reply you wrote to Jabbypanda which deals with the same issue.

  11. Peter Ent says:

    I am still intending to bring this up to date with Flex 3 Beta 2.

  12. Steven Rubenstein says:

    I have been trying to get the Scrapbook Editor to work in both FlexBuilder 2 and 3 beta 2. I give up. I would sincerely appreciate any help you can provide.

    I haven’t done the port yet myself but I’ll look into it for Beta 3.

  13. Billy says:

    Hi Peter,

    I cannot import your source code to Flex Builder (version 3).

    Any version of FB 3 ? Or please advise how I can see your code in Flex 3 ?

    Thanks a lot.


  14. Peter Ent says:

    Unfortunately this code was written for a previous version of Flex and is out of date with what is available today. I will put it onto my to-do list, but I don’t know when I will be able to revisit the topic.

    You should be able to use File->Import->From File System and import the source files into an existing project (after you unzip it). At least you will be able to look at the code.

  15. Nandi says:

    Hi Peter,

    After import scrapbook editor and library in Flex Builder 3, I don’t know how can I use this editor and library. I can’t run this editor and library in flex builder 3. Please advise me.

    Thanks a lot.


  16. Peter Ent says:

    Hi. I’m sorry, but I haven’t looked at this program in ages. And I haven’t even attempted to try it in the latest versions of Flex and AIR. Are you having a compilation problem or getting a specific error message?

    My intent in writing these articles is to provide code you can start with and learn from. This scrapbook program set is particularly advanced. Perhaps after you get more experience with Flex the solutions to the problems you are seeing now will become apparent.