In this tutorial we will create an Interactive 3D environment. Images first appear in a 3D wall and then on click randomly expand out. The camera then zooms through space to the clicked image. An image can be flipped over to reveal image information.
Introduction
This tutorial uses the Flash Framer space3D component. The space3D 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.
Step 1
Once you have downloaded and installed the space3D 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 space3D component.
Drag and drop the component onto the stage and align it.
I’m using the stage size of 700x510 pixels. I will also size the component to 700x510 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 twenty five images of space scenes.
Put your photos in the same directory as your Flash file in a folder named images.
Step 4
Jump back over to Flash.
Click on the space3D 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 an image with a title and description.
Repeat this until you have all your images entered.
You can also use XML file to control every parameter of the space3D 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 space3D component out of the box or modify and skin it to your liking.
space3D comes built with tons of parameters to customize your gallery. Such as: xml, spacing, margin, border size and color, reflection, transition, show arrows, back flip, and camera movement.
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 space3D 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
