Create A Flex Widget To Show Images With Auto Advance and Constrain Image Size

Posted At : September 5, 2007 11:57 AM | Posted By : Bruce Phillips
Related Categories: Flex

Introduction

I recently had to create an "upcoming events" Flex widget for work. The widget had to include an image and a title that linked to the area of our website that had more information. I started with the excellent image gallery tutorial provided by Sas Jacobs (see references 1 and 2). However, I needed to add to her example the ability for the images to auto advance and for the image to be constrained to the size of the widget. You can view an example and its source code here.

Discussion

To constrain each image to a specific size that would fit in the widget I used the technique described in reference 3:

"To let Flex resize the image as part of laying out your application, set the height or width properties to a percentage value. Flex attempts to resize components with percentage values for these properties to the specified percentage of their parent container."

Below is an excerpt from the Flex application where the image control is used.

<mx:HBox name="imgBox" width="100%" height="75%">

    <mx:Image id="imgPhoto" visible="false"
        showEffect="FadeInEffect" width="100%" height="100%" />

</mx:HBox>

Note that the image is contained within an HBox container. The size of the HBox container is set to 100% of its container (which is a VBox used to layout the complete application) and 75% of its container's height. I then set the width and height of the mx:Image tag to be 100% for each. By using these percentages, Flex will automatically resize the image to fit the HBox container. When Flex does resize the image it will maintain the image's aspect ratio so that the image doesn't become distorted (see reference 7 for more information).

By using percentages to control the image's resizing, my application can accommodate different image sizes while the overall widget maintains its original size and doesn't interfere with other elements on the web page.

The other feature I added to Sas Jacob's image gallery code was an auto advance. Every 4 seconds the next image and its title appear. The user can pause and restart the automatic advancement. ActionScript 3.0's Timer class (see references 4 and 5) made this simple. Below is the ActionScript code that creates the Timer object.

timer = new Timer(4000,0);

timer.addEventListener( TimerEvent.TIMER, onTime );

timer.start();

The Timer class constructor takes 2 arguments. The first argument specifies the delay (in milliseconds) between timer events. So in my example, I want a 4 second delay between timer events. The second argument is the repeat count, which is how many times the timer event should be fired. If you use 0 as the value for the second argument, the timer event will repeat indefinitely.

The call to the addEventListener specifies a function (the second argument onTime) to call each time the TimerEvent is dispatched. So every 4 seconds the TimerEvent will be dispatched and the onTime function will be called. The timer doesn't start automatically, you have to call the start() method to start the timer. You can use the stop() method to stop the timer.

In the onTime function I have the logic for advancing to the next image and title or restarting with the first image and title. I also provide the user a LinkButton that pauses (or if paused, plays) the images.

Conclusion

If you have questions or comments about how I constrained the image size or made the images auto advance please post below. But if you have comments about how the images are loaded into the application and the general layout, please consult Sas Jacobs' articles (reference 1 and 2 below). Her work is available for a small fee on dmxzone.com. I found her tutorials to be very helpful in getting me started on several projects and well worth the small charge. Please note, I don't receive anything if you purchase Sas's articles and have no relationship with her or dmxzone.com.