Create a Flash Cover Flow-style menu

You can create a cool menu for your website in under half an hour using Flash’s clever IgalleryX component. Paul Wyatt explains how


 main image

If you’ve got an iPod I’m guessing you’ll distinctly remember the first time you experienced its menu. No doubt what rattled through your head was the sheer coolness factor of it.

It is cool. It’s also a great way to show content on the web. But building one is hard work, which involves spending a lot of time getting your head around some pretty hefty coding.

But now there’s a great Flash component that can help you bypass most of that. It’s called IgalleryX and there are two versions of it: a pure component version for AS2 – available from Flash Den for only a tenner – and a completely open source version for AS3.

In this tutorial we’ll show you how to use the AS2 version to produce a fully working Flash Cover Flow-style menu system. With a little XML knowledge, image editing, CSS styling and Flash component tweaking you’ll be done in about half an hour.

We’ll also give you an overview of how to get the best out of the open source AS3 version, including the inside knowledge from its developer Rimmon Trieu, who discusses how he developed the menu components as well as some of his upcoming projects.


 step 1

1. Download the file

Download this file from Flash Den. Unzip the files to your working directory. The component itself is in the IgalleryX folder and is called IgalleryX.mxp.


 step 2

2. Get Adobe Extension manager

To install the component you’ll need the latest version of the Adobe Extension Manager. This includes support for Flash CS3 releases and can be downloaded from Adobe.


 step 2

3. Install the component

Open the Adobe Extension Manager. Select File>Install Component and browse to the mxp folder within the IgalleryX folder. Select IgalleryX.mxp and hit Install. You’ll get a confirmation the component has been installed. You can now open Flash.


 step 4

4. Document

Create an AS2 Flash document (800x600px/ 30fps). Rename the default layer gallery_menu. Hit Ctrl+F7 for the components panel. Under Xcomponent, click and drag out an instance of the IgalleryX component onto the gallery_menu layer; name it Igallery in the properties inspector.


 step 5

5. Add a dynamic text layer

Use the properties inspector to position the IgalleryX component at X: “0” and Y: “0”. Create a new layer and name it caption text. Hit T on your keyboard to bring up the text tool. Click in the caption text layer and drag out a text box to hold your caption in.


 step 6

6. Set the instance names

Select the text box. Give it the instance name of ctext and set the following properties: text type to Dynamic and Multi line. Now hit F8 to convert it into a movie clip. Give it an instance name of caption in the properties inspector.


 step 7

7. Embedded fonts

To make your Flash Cover Flow menu captions more eye-catching, embedding a custom font into the Flash file. Click within the dynamic text box. In font options choose the font. Click the embed button and ensure upper case, lower case, numerals and punctuation are embedded.

8. XML magic

The data powering the menu is driven by an XML document containing image caption and URL references. Enter the XML below and save as 'data.xml' to get started.

<code><IgalleryX>    <photos>        <photo>            <content src="1m.jpg" />            <caption content="Thom" />            <link src="http://www.google.com"/>        </photo>        <photo>            <content src="2m.jpg" />            <caption content="Rayners" />            <link src="http://www.google.com"/>        </photo>        <photo>            <content src="3m.jpg" />            <caption content="Louise" />            <link src="http://www.google.com"/>        </photo>        <photo>            <content src="4m.jpg" />            <caption content="Belinda" />            <link src="http://www.google.com"/>        </photo>        <photo>            <content src="5m.jpg" />            <caption content="Tommy" />            <link src="http://www.google.com"/>        </photo>    </photos></IgalleryX>
 step 9

9. XML image references

To load items, open data.xml in a text editor and change the source and name of photos to your own. You can also alter the link references each file points to and give each photo a unique caption to be displayed in the dynamic text field we’ve just added.


 step 10

10. Thumbnails

Our thumbnail images need to be uniform in size, as we’re given one universal option in the components properties that sets them. Images over 300x300 pixels can cause your menu to run slower and appear clunky. In this instance we’re making them 200x200 pixels.


 step 11

11. Using the Component Inspector

Return to Flash and click on IgalleryX component on the stage. Hit Alt+F7 to bring up the Components Inspector. In the parameters tab you have a long list of parameter names and their values. All you need to do is to adjust the parameters here to customise your menu.


 step 12

12. Width and height

Set Screen Width and Screen Height to be equal to the width and height of the stage, in this case 800x600 pixels. Set the Photo Width and Photo Height equal to the width and height of each photo. In this instance it’s set to 200x200 pixels.


 step 13

13. Photo Space

The Photo Space parameter affects how far images are away from each other. A low value makes them appear ‘stuck’ together until they’re clicked on. Documentation included with the component explains what some of the other more obscure adjustments can achieve.


 step 14

14. Parameters

The important parameters to create perspective feeling are Hpers 1, Hpers 2, Vpers, Delta 1 and Delta 2. Hpers stands for horizontal perspective and Vpers for vertical perspective. Delta 1 and Delta 2 are deviations between the horizontal and vertical plane.


 step 15

15. Check the path

Ensure that caption enable and auto start are set to true. Also check that in XML path the path to the XML file is correct. More options can be set for alpha values for images and for choosing duration and ease type. Tweak these to fully customise your menu.


 step 16

16. Flash Cover Flow menu

Hit Ctrl + Enter to preview the menu. Test the links for each file and that the correct captions are displayed. Any corrections or updates can be easily made via the XML file. When exporting for the web ensure that the file structure you upload is the same as on your hard drive.


 step 17

17. IgalleryX for AS3

Download the file from tinyurl.com/4tckpu. The files contain a number of directories including Papervision PV3D and Tweener. Tweener is a class used to create tweenings and other transitions via ActionScript code for projects built in Flash.


 step 18

18. Storing classes

The MyLibs3 folder contains all the necessary classes to enable the menu to function. Classes are pieces of reusable code, used to easily add new functionality to ActionScript code. Copy and paste the folder into the Flash CS3 folder in its location on your hard drive.


 step 19

19. Configuring the class path

Within Flash you’ll need to add a new class path. Choose Edit>Preferences. In the pop-up box select ActionScript. Click the ActionScript3 button and click the + button to browse to where you’ve stored MyLibs3. Click OK.


 step 20

20. Menu sophistication

This menu is a little more advanced and sophisticated than the AS2 version. When the thumbnail is clicked it will spin around, scale up and reveal the clicked content in the menu. This is more akin to the full functionality found on iTunes and iPods.


 step 21

21. File types

Another feature of this menu is that it can display images, SWF files and FLVs from within the menu itself. All these file types are dynamically linked into the menu via XML. The XML can be updated in the same manner as the AS2 version of the menu.


 step 22

22. XML with descriptions

As well as displaying a caption we can also display a description of the file when the menu thumbnail is clicked. Included in the sample files from Flash Den are three types of XML file: images.xml, swfs.xml and videos.xml.


 step 23

23. XML with descriptions

Each XML file uses a similar tag structure: <thumb> for the thumbnail source of each image/SWF/video, <img> for image source, <swf> for SWF source and <vid> for video. <caption> is used for each file type’s caption and <desc> is the description of each file.


 step 24

24. Customising the CSS

Inside the CSS folder is a style sheet named photoStyle.css. This gives you the ability to use styles to affect the style settings for the menu headings, descriptions and links. These can be tweaked to your own taste by changing font weight, size and colour.


 step 25

25. IgalleryX with SWF files

Within the source folder of your download from Flash Den is photoStack3d_swf.fla. This menu references SWF files instead of images. The SWF locations and data is referenced in the file swfs.xml. Keep your SWFs as lean as you can. These won’t preload with the menu so keep them as easy to load as possible.


 step 26

26. IgalleryX with FLV files

The source folder also contains a version of the menu that displays FLVs within a Flash playback component. This file is called photoStack3d_video.fla. A point to remember here is to ensure your video files are encoded to progressively download.


 step 27

27. Playback

Double-click the video component on the stage then hit Shift+F7 to bring up the Components Inspector for the FLV playback component. In the parameters tab set autoplay to true to have the videos play without user action. Set to false to have the user initiate it by clicking play.


 step 28

28. Testing

When exporting the menu for the web make sure all XML references are working and that the folder structure on your external server is copied in the exact way it exists on your local drive. Experiment with the files frame rate if the menu is moving slowly or quickly.

Don't miss this!