Free! - Not Just Another Image Gallery

I feel like I’m treading in somewhat unfamiliar waters, writing for FLzone. My name is Nancy Gill and I’m an author, technical editor and Community Expert for Adobe Dreamweaver. So what am I doing writing an article on Flash? My first thought also when I was asked to write something about FLzone’s fabulous new 3D ImageFlow Gallery for Flash. But hey, I like new things so I started playing with this component.. and playing .. and I’m still playing with 10 hours to get this thing finished. Time to write.

Look Ma – No Code!

FLzone people made it really easy to specify the image data in your gallery by giving you a wizard that will do it all for you. Not one single line of code if you don't want to use it. We'll use that option in our basic tutorial and, then in further examples, we'll accomplish the same thing with ActionScript, first and then, XML.

In the Command menu of the Flash main menu, find the "Edit 3D Image Gallery XML" command and click on it. The wizard the opens makes it possible for the extension to create the XML for you without your having to write one single line of code. You have a choice of importing images one at a time or by folder. This is the reason the accompanying zip has an images folder within the flowers folder. It's a lot quicker to import the entire folder in one action and doing so will import the names of the images into the wizard for you. You will then want to click on each one and add what you want in the description box. I kept it simple, but you could anything you wish, as long as it doesn't clutter up the bottom of the window and look messy.

You will note that you could have added links from each image to another page with target parameter as well as width and height parameters by clicking on the refresh arrow to automatically measure each image for you, but I have kept this example simple on purpose.

Click OK to produce the XML file that will allow your gallery to function. The screen shot below shows the XML created by the wizard in our example.

 
XML for the Flower Gallery

At this point, you can test the movie and the gallery will function. You should see the first flower in the gallery center stage with the others off to the right. Your first caption should be at the bottom of the page and the title above and centered.

Not bad, but there is a lot more we can do. As is, the gallery will have to have a user click on each image to advance them. Go to the Component Inspector and change autoFlip from false to true. Now if you test the movie, the pictures advance automatically. You can adjust how long they take to transition and how long each appears on the screen by adjusting the values in autoFlipInterval and flipDuration.

You can also play with some of the image settings as to size, depth, offset and how the stacked images to the right and left of the main stage behave. Lots of fun. Just change some values and test your movie to get what you want. If you mess it up, just close the FLA without saving and you're back to where you last saved the document.

One thing I thought was fun and I have applied to the example in the zip was to have a transparent background with a different background color and then set the fogStrength to 50. Doing that will give a tint to the images on the sides and that tint will disappear as the image moves to the front of the stage and comes into focus. Setting the fogStrength higher will show more background color than image on the images out of focus and lowering the fogStrength will show more images. Fun to play with!

Using ActionScript Instead of the Command Wizard

If you prefer, you can also use ActionScript on frame 1 of the movie to advance the images into the gallery. Let's take a look at the ActionScript needed to make our Flowers gallery work. A finished example of this is included in the zip and called flowers_as.fla

The first steps to create this gallery are the same as the first one. Create a new ActionScript 2 Flash document and name it something like as_example.fla. Drop the ImageGallery 3D component onto the stage and give it an instance name like myPictures. Set the height and width to the size of the document (600 by 450 in this example) and set X and Y to 0 in the Property Inspector.

Up to now, it's the same. Here is the departure from the first example. Select Frame 1 of the timeline and open the Actions panel. Make sure you're putting the ActionScript on the frame itself and not the component, or you will get an error that it needs an onclip event. The code is fairly simple, but we've explained it line by line to make sure it makes sense.

// declaration of the gallery
var myPictures:com.flzone.imageflow.Gallery;

Next, we add images to the gallery. At the very least, we need a url so the picture can be found and a description, which will replace the placeholder text at the bottom of the gallery as each picture is loaded.

// add images to the gallery
myPictures.addItem({url:"images/232purpbouganvillia.jpg", description:"Purple Bouganvillia"});
myPictures.addItem({url:"images/232yelowrose.jpg", description:"Yellow Rose"});
myPictures.addItem({url:"images/magnolia_royalcrown.jpg", description:"Royal Crown Magnolia"});
myPictures.addItem({url:"images/whiteflower.jpg", description:"White Flower"});
myPictures.addItem({url:"images/yellowflower.jpg", description:"Yellow Flower"});

And finally we set focus to the gallery so it can do its thing.

// Set the focus to the gallery
myPictures.setFocus();

And that's it. Same result but ActionScript was used in place of XML created by the extension. You can also use XML that you create and use the XMLConnector component if you wish and again, the result will be the same. We'll look at that option next because of the flexibility it offers in that you only have to create the gallery once and then change from one XML document to another to quickly create a brand new gallery!