Billboard Effect: Example 1

In pursuit of interesting Flash effects, we present in this experiment billboard-type transitions between images. You can change the number of billboard segments and choose a horizontal or a vertical transition. For number of slices equal 1, you obtain an image flip of the playing card type.

Download

  • Download all 'fla' and 'as' files corresponding to this experiment: billboard.zip

The zip file contains all source files corresponding to this experiment. We discuss the custom AS3 Billboard class and the code behind the applets on the last page of this presentation. In the comments to the code, we explain how you can easily customize your billboard, its size, the images displayed etc.

Comments

The examples in this experiment use a custom AS3 Billboard class. The class, as you can see in the attached source files and on the last page of this tutorial, is very easy to use.

If your collection of images is long or the images are large, you may want to load them at runtime rather then embed them in a fla file. For runtime loading, you can use our custom ImageLoader class from the tutorial: Cube in Bloom: Distorting Images in AS3, 3D Menu on a Cube. Also, in its guts, the Billboard class uses a custom BitmapTransformer class. The BitmapTransformer class was introduced and discussed in the latter tutorial as well.

Since we have all the code for billboard effects encapsulated in an AS3 class, we can create many instances of the class within one application. On the next page, we create two instances of the Billboard class.

You can use the classes presented here to create billboard transitions between any two DisplayObjects not necessarily between images. You simply use the 'draw' method of the BitmapData class to 'draw' any DisplayObject into a BitmapData object. Visit our tutorial: AS3 Widgets Flipping in 3D, Taking Snapshots of DisplayObjects to see the method in action.

In Flash Player 10 the billboard effect will be easier to accomplish via the new AS3 properties rotationX and rotationY. In fact, this experiment is inspired by a Flash Player 10 experiment by Devon O. in his onebyoneblog.

Back to Advanced Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.