See how to create a simple 3D photo album with Five3D.
Flash 3D engines are becoming more and more popular. Away3D, Papervision, Alternativa, Sandy3D, Coppercube... The list keeps growing. However most of these 3D engines are quite large and complicated, which can make it difficult to get started. Five3D is an alternative to these behemoths. Consisting of just a few classes, Five3D has a short learning curve.
In this article we will look at getting a simple photo slide application up and running with Five3D. The framework that we use here is only slightly modified from the Away3D framework explained here, so I won’t go into much detail about those classes here. I’ll will point out the Five3D specific changes though.
EngineManager.as
The Five3D Scene3D object is created, positioned and added to the EngineManager as a child in the createChildrenEx function. [code]
The Scene3D object is removed from the EngineManager and set to null in the shutdown function. [code]
SpriteObject.as
This is the equivalent of the MeshObject in the Away3D framework. It takes a Sprite and adds it to the Scene3D object in the startupSpriteObject function, and removes it in the shutdown function.
Photo.as
The Photo class extends the SpriteObject class. It displays an image that is created off to the left of the screen and moves right, removing itself when it is off the screen.
First we create a Bitmap3D object. This class is used to display an image in 3D space, and it takes a BitmapData object in its constructor. [code]
Next we create a Sprite3D object, and add the Bitmap3D object as a child. You could simply add the Bitmap3D object directly to the scene, but since we have chosen the Sprite class as the base object that is used by the SpriteObject class, we first need to add the Bitmap3D to a Sprite3D. [code]
The Sprite3D is then positioned off to the left of the screen, with a random y and z value for some added variation. [code]
Finally the Sprite3D is passed to the base startupSpriteObject class. This will add the image to the screen. [code]
The enterFrame function moves the image across the screen, removing it from the system with a call to shutdown when it has moved off the edge of the screen. [code]
ApplicationManager.as
The ApplicationManager creates an array of the available BitmapData objects, which are used in the construction of the Photo class. [code]
At predetermined intervals a new Photo object is created. This keeps a constant stream of Photos sliding across the screen. [code]
Five3D is a useful alternative to the larger Flash 3D engines, and is more than capable of creating 3D Flash applications. While it does not have all the capabilities of other 3D engines, it has the basics, and is easy to get started with.
Go back to Five3D Tutorials
Five3D Tutorials - Mouse Events
In this tutorial you will learn how to interact with Five3D objects with the mouse.
CAKE Programming Tutorial - Photo Slide
See how to create an animated photo album with CAKE and JavaScript.