In this tutorial we will create a dynamic photo gallery arranged in a random layout. Photos can be rearranged by clicking and dragging. When a photo is clicked on it will enlarge and show the title and description for that image. In just a few easy steps we will have an eye catching photo gallery.

Introduction

This tutorial uses the Flash Framer photoShuffle component. The photoShuffle component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a random photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.

Click here for information and to get the photoShuffle component.

Step 1

Once you have downloaded and installed the photoShuffle component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.

Step 2

Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the photoShuffle component.

Drag and drop the component onto the stage and align it.
I’m using the default stage size of 500x400 pixels.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3

Now lets load some photos. I’m using nine photos of flowers shot in Africa.
Put your photos in the same directory as your Flash file in a folder named photos.

Step 4

Jump back over to Flash.
Click on the photoShuffle component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Photo List value field.

A Dialog box will popup.
Click on the plus button to add a photo with a title and description.
Repeat this until you have all your photos entered.

You can also use XML file to control every parameter of the photoShuffle component.
See the documentation that came packaged with the component or download it here.

Preview you file. File > Publish Preview > Flash

You now have a fully working dynamic photo gallery.

Step 5

You can either use the photoShuffle component out of the box or modify and skin it to your liking.

photoShuffle comes build with dons of parameters to customize your gallery. Such as: xml, sizing, shuffle, transitions, shadow, info box placement, and show arrows.
These setting are found in the Component Inspector in Flash.

Play around with these setting until you get the look you want.

Step 6

You can also skin the component elements to your liking.
Skinning the photoShuffle component is so easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash

Final Customized Gallery

Conclusion

This is just a few ways to customize the photoShuffle component. Read through the full documentation by clicking here. The component also has an ActionScript 3.0 API for advanced customization.
Click here to view the photoShuffle API

We would love to see your work and showcase it on our site.
Just email us at contact@flashframer.com with a link to your photoShuffle gallery.