In this tutorial we will create a unique circular image gallery. A user clicks on a thumbnail image, the thumbnail expands to full size while the current image sizes down to a thumbnail and the rest of the thumbnails dynamically reorganize. The rotaryGallery has many customizable parameters to get an infinite number of looks.

Introduction

This tutorial uses the Flash Framer rotaryGallery component. The rotaryGallery component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a 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 rotaryGallery component.

Step 1

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

You can read how to install the component in the rotaryGallery documentation click here to download.

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 rotaryGallery component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700x500 pixels. I will also size the component to 700x500 to fit the stage.

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

Step 3

Now lets load some images. I’m using ten images and one .swf file.
Put your images in the same directory as your Flash file in a folder named IMAGES.

Step 4

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

A Dialog box will popup.
Click on the plus button to add the image url, link url, title, id, and description.
Repeat this until you have all your images entered.

You can also use XML file to control every parameter of the rotaryGallery 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 rotaryGallery.

Step 5

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

rotaryGallery comes built with tons of parameters to customize your gallery. Such as: xml, layout, camera position, scrollbar, border, reflection, link type, back flip, and much more.
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. The rotaryGallery allows you to customize the glass effect movie clip and the information box with the title, description and link button.
Skinning the rotaryGallery component is 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

Completed Gallery

Below the completed rotaryGallery. I've added next, back, and shuffle buttons using the rotaryGallery API.

Conclusion

This is just a few ways to customize the rotaryGallery 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 rotaryGallery API

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