In this tutorial we will create an Interactive 3D cover flow like image gallery. You can navigate through the images by clicking on an image, using the supplied skinnable scrollbar, or the keyboard arrow keys. An image or video can be flipped over to reveal its title and description.

Introduction

This tutorial uses the Flash Framer coverFlip3D component. The coverFlip3D 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 coverFlip3D component.

Step 1

Once you have downloaded and installed the coverFlip3D 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 coverFlip3D component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700×500 pixels. I will also size the component to 700×500 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 nine images.
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 coverFlip3D 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 coverFlip3D 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 coverFlip3D component out of the box or modify and skin it to your liking.

coverFlip3D 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.
Skinning the coverFlip3D 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

Final Customized Gallery

Conclusion

This is just a few ways to customize the coverFlip3D 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 space3D 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 coverFlip3D gallery.