Welcome!

Adobe Flex Authors: RealWire News Distribution, Shelly Palmer, PR.com Newswire, Corey Roth, Matthew Lobas

Related Topics: Adobe Flex

Adobe Flex: Article

How To Create a Photo Slide Show ...

...with Flex 2 and Picasa

All applications, simple or complex, online or desktop, are composed of many elements: screens, forms, menus, etc. In a Rich Internet Application, those elements can also include video, audio, or images. From the programmer's standpoint, it would be great to be able to reuse those parts so that they can be incorporated into different places of the application, or in different applications, using the same component.

In Flex, creating custom MXML components is a very easy task; whenever you create a new component, simply drop it in your application as many times as you want. You can also easily use it in other Flex applications.

In this tutorial, you'll learn how to build a small photo slide show Flex component that reads XML output created by Picasa's export feature. Picasa is a free photo organizer created by Google (www.google.com/picasa/) (see Fig. 1).

Creating a New Project in Flex Builder
Start by creating a new empty project with the default settings in Flex Builder called PhotoshowExample. When a new project is created, Flex Builder also creates an MXML file with an empty Application tag (<mx:Application>). This file is the main starting point of your application. In this tutorial, only use it as a container as if it was a bigger application in which you wanted to include a slide show.

Photo Show MXML Component Layout
To keep your files organized, create the following folder structure in your Flex Builder project: com/asfusion/controls, then choose File > New MXML Component from the menu. When the dialog opens, ensure that the file will be added to the com/asfusion/controls folder. Write Photoshow as the file name, make sure it's based on Canvas, and remove the width and height values from the input fields in that dialog. Basing your component on Canvas gives you a very simple empty component that has the functions and properties of a UI component in Flex. This will make it possible to drop your component inside any other UI object.

At this point, the Photoshow.mxml file will look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Canvas>

Now go to the Design view by clicking on the Design button on the top of the file editor. You'll see only a scary blank canvas, but don't be afraid; you'll soon fill it out.

Pick a Canvas from the Components view on the left side of the editor and place it in the middle of your empty white canvas (see Figure 2). Make it as big as your pictures will be. Mine are 640 in width and 480 in height.

Tip: If your design window doesn't show everything, choose a custom size in the dropdown menu called Design Area in the top right corner of your design window and set it to 800x600.

Then, drag an Image to show the photo inside the Canvas. Place a Button on the right of the canvas and a Button on the left of the canvas for the next and previous functions. Finally, place a Label at the bottom of the image for the caption. Once all the main elements are in place, the component source will be:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Canvas y="10" width="600" height="460" horizontalCenter="0">
       <mx:Image x="0" y="0" width="600" height="460"/>
    </mx:Canvas>

    <mx:Button y="210" width="58" height="60" />
    <mx:Button y="210" width="58" height="60" x="740" />
    <mx:Label x="100" y="478" width="600" height="43"/>
</mx:Canvas>

Now that you have the main layout of the photo slide show (see Figure 3), you will need to add the functionality.

The Image Class
The Photoshow component shows a sequence of images. Each image is composed of the file name, a caption text, and its width and height. All these properties will be contained in an ActionScript class called PhotoshowImage. You will create this file in the same folder as your Photoshow component by choosing from the menu File > New > ActionScript Class. Its package name will be com.asfusion.controls. In this class, add the public properties: name, caption, width and height.

package com.asfusion.controls
{
[Bindable]
    public class PhotoshowImage
    {
       public var name:String;
       public var caption:String;
       public var width:int;
       public var height:int;
    }
}

As short as it seems, you just created an ActionScript class. This class doesn't have any methods and has only four public properties. You could add some private properties or functions if needed. The four properties you added are public because that makes it easier to use in bindings as you'll see later. If you prefer not to break encapsulation, you could also use public setters and getters for private properties that would serve the same purpose, but possibly execute additional business logic. However, you still need to make your class Bindable so that all the public properties of the class can be used in bindings.

Navigating the Images
The Photoshow component will contain an array of PhotoshowImage objects. Define this array in the Photoshow.mxml file and another variable to hold the index of the currently shown picture. In addition, you'll need to store the current picture in a Bindable variable (currentPicture) so that you can use it to get the file name and the caption and sizes in the layout containers.

<mx:Script>
    <![CDATA[
       import com.asfusion.controls.PhotoshowImage;

       private var pictures:Array;
       private var currentIndex:int = 0;
       [Bindable]
private var currentPicture:PhotoshowImage;
]]>
</mx:Script>

Within the same Script block, create two functions: goNext() and goPrevious(). These two functions will respond to the next and previous buttons, respectively, and change the current picture using the currentIndex variable. In these functions you will also probably want to ensure the index never goes beyond the available pictures or below 0. In those cases, you could make them circular such that if the user is at the end of the show, the "next" button will load the first picture.

You'll also need a set function that allows external components to set the pictures array (see Listing 1).

Last, your buttons must respond to user interaction. To make them respond to click events, set their click attribute to goNext() and goPrevious(). Then, the mx:Image component you placed in the middle of the canvas must have its source attribute as the current image, as well as the width and height of the current image. You can use the binding syntax (the curly brackets) to set these attributes. If you're not familiar with bindings, you should get to know them because they are very useful. They allow you to use variables as attributes; whenever those variables change their values, the values of the attributes are automatically changed. In this case, whenever the user changes the picture selection (by clicking on next or previous buttons), the source, width, and height attributes of the mx:Image tag will automatically get the values corresponding to the newly selected image.

<mx:Image source="assets/photoshow/images/{currentPicture.name}" width="{currentPicture.width}"
height="{currentPicture.height}/>

Exporting Pictures from Picasa
Picasa lets you import pictures from a local folder or directly from your camera. Once they are imported, the pictures are organized by albums and folders.

Open Picasa and select the album or folder you would like to export. You can also make a selection of specific images from your library to export by selecting them using the ctrl key and clicking on the images. From the Folder menu, select the option Export as HTML page. When the Export dialog opens, choose 640 pixels. You can use a different size, but that's the size you're using in the Photoshow component. Enter a name for the export folder (or leave the default) and click Next. In the last and most important step, choose XML Code as the template name for your export. Once you click on the Finish button, Picasa will generate an XML file with the names and captions of your images and a folder with scaled versions of the photos. Create a folder in Flex Builder in your project called assets with another folder called photoshow inside (assets/photoshow) and place the XML file and images folder inside assets/photoshow. Now you have a set of pictures and the XML file containing the image's names, captions, and dimensions that can be shown in the Photoshow component.

Not so fast! The data is contained in an XML file and the slide show doesn't know how to use it.

Parsing the XML
The XML output from Picasa is very simple in structure. It contains a root called album, which has a node called images. The images node contains all the pictures in this album; each picture is an image node with several properties. You only need four of all the properties the images have: itemName for the file name, itemCaption, itemWidth, and itemHeight.

<?xml version="1.0" encoding="utf-8" ?>
<album>
<images>
<image>
<itemWidth>640</itemWidth>
<itemHeight>480</itemHeight>
<itemName>img_0279.jpg</itemName>
<itemCaption>A flower</itemCaption>
</image>
</images>
</album>

You could add the XML parsing functionality in the same Photoshow.mxml file, but the principle of separation of concerns tells us that we should favor specialized classes or components over classes that do many different things. Create another component, XMLPhotoshow.mxml that will be in charge of getting the XML file from the server, parsing it, and passing the array of PhotoshowImage objects to the Photoshow component you created earlier. This allows you to change the XML, or even use a different method, such as Flash Remoting or Web services by simply switching the wrapper class without modifying the core Photoshow component. Inside XMLPhotoshow add an instance of that core Photoshow component. Once you create the new component, you can use the design view and find the Photoshow component under the Custom group in the Components View (see Figure 4). This instance will need an ID that can be referenced in other parts of the component whenever the pictures are loaded from the XML file. Set that ID to photoshowContainer. Note that the namespace controls refers to the folder com/asfusion/controls defined in the top MXML tag as xmlns:controls="com.asfusion.controls.*"

<controls:Photoshow id="photoshowContainer" />


More Stories By Nahuel Foronda

Nahuel Foronda is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where he has been creating award-winning applications and offering training for the last five years. He also maintains a blog, called AS Fusion (http://www.asfusion.com), where he writes about Flash, ColdFusion and other web technologies.

More Stories By Laura Arguello

Laura Arguello is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where she has been creating award-winning applications and offering training for the last five years. She also maintains a blog, called AS Fusion (http://www.asfusion.com), where she writes about Flash, ColdFusion and other web technologies.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.