I designed this animation sequence for my first Flash project. If you are a serious Flash developer, you probably already knew that Flash is not a 3D (three-dimensional) application. It should not be since Flash is designed for web animation. Flash has a facility to perform geometric matrix transformation. This is simply a very basic and crude technique to map a 3D point onto a 2D viewing plane.

Realistic 3D scenes require a lot more: perspective, camera angles, light sources and shadows, transparency, reflection, to name a few simple requirements to bring any 4-GHz dual core to its knees... I just want to find out if true 3D animation is still possible with Flash. The result on this page speaks for itself. I cheated a little by creating the 3D scene outside Flash and just gluing these frames on the Flash stage.

The spinning 3D model is a Lego toy truck. The ceramic floor is textured with strong reflectivity so you can see the refelection of the model toy truck. The truck has a cyan windshield which is transparent to a light source on the far right. You can guess that the image is ray-traced with its realistic cast shadow on the floor. Each scene is rendered with the open-source Pov-ray raytracer at 480 by 180 resolution, HDTV aspect ratio.

I rendered only 18 scenes to complete a 360-degree rotation at 20-degree increment. At fast frame rate, you probably do not need finer angle increment since this would increase the rendering time and file size (bandwidth). The frames look realistic enough without using radiosity computation.

The final Flash file is generated including appropriate HTML codes with just one click. You do not need to know Flash or program its scripting language. You do not have to use any traditional desktop Flash tools to create this effect.

The parameters are self-explanatory hopefully to most of us. If you do not understand its meaning, change its value and see how it affects the text animation.

1. Width of image   
(default 480 pixels)

2. Height of image   
(default 180 pixels)

3. Text vertical position   
(default 140 pixels)

4. Text horizontal position   
(default 40 pixels)

5. Enter your text to render
(up to 120 characters)


6. Font size   
(default 30 points, max 72 points)

7. Typeface: Arial Black



8. Starting text size scale   
(default 500 percent)

9. Ending text size scale   
(default 100 percent)

The following Flash image demonstrates this effect. The font used is the populat free movie font Burton's Nightmare.



Click to generate the Flash image file with your current choice of parameters in a separate window.

The generated Flash swf file will be automatically removed from the server in approximately one hour. Right click on the apppropriate link and choose "Save Link As..." or "Save Target As..." to download the Flash or HTML file to your computer.


I decided to put this clip here (around 300 KB), maybe someone can use it for some useful purposes. I used this text effect so that the letters are rolling in while being scaled down from an initial large size to form a text line at your specified baseline and font size. Each character is then "popped" back to their original size at a low transparency setting. If you do not want the text, type in a blank space in the text field.

The rolling effect can be controlled with additional rotational effect. You can vary several basic parameters such as the initial and ending font size, dual colors, and the rolling speed to customize the animation sequence for your design need. This effect is available with five high-quality commercial typefaces.

The image is originally designed at 480 by 180 pixels. If the image width and height are specified at this size, no scaling will occur.

The Linux-based ActionScripting engine behind this page generates the graphic file in industry standard Flash swf format that is supported by most modern browsers, and is compatible to all Flash player versions. Enjoy.