You do not seem to have Flash and/or Javascript installed. Please click here to disable flash on this page.

Flash Navigator aka the "Spinner"

In order to see this project in action, please click the "Enable Spinner" link to the left if it is not already enabled.

This project was inspired by a tutorial I found on Macromedia's website entitled Creating 3D Classes with ActionScript 2.0. The tutorial is a bit rudimentary, but contains a great framework for implementing 3D objects in Flash using a series of classes. I expanded and modified some of the given classes, and then coded the behavior and interaction style of the object. It should be noted that Flash has no built-in support for 3D objects. Projection of 3D objects onto a 2D plane is done manually, and there is no way to take advantage of 3D hardware accelerators if they are present.

The base data structure for the 3D model is a vertex, which can be represented by a quaternion and rotated in 3D space by concatenating it with a rotation quaternion. Further classes contain collections of vertices, representing lines, circles, and polygons. However, as the entire model is rotated, only the vertices need to be rotated and projected into 2D space (necessitating many mathematical operations per vertex). The lines, circles, and polygons defined by those vertices can be drawn directly using the 2D points. Flash has a built-in system for managing layers with a "depth" system, so nearer elements will automatically occlude elements behind them. Using this framework, processing time for a number of aggregate classes is insignificant compared to the time necessary to process vertices.

The "Spinner" object was designed by myself to be a somewhat complex shape which could be defined by a relatively small number of vertices. One vertex serves as the endpoint for as many as five lines within the object. The "panes" are assigned to different links on the website, and use built-in Flash routines for mouseover effects and URL linking. Unfortunately, texture mapping is too complex an operation to implement, so using text/bitmapping to mark the panes is out of the question (There are a few demonstrations of 3D texture mapping in Flash available on the Internet, but on my machine they require nearly 100% CPU utilisation.) The panes can be identified by a simple label beneath the object, whose contents change with mouse position, and the label itself can be clicked on to jump to the appropriate section of the site. As it is, my project performs adequately on most modern machines, but is a bit too CPU-intensive for older machines.

At start, the navigator is idle and requires very little CPU time. When the mouse is detected above the navigator, a rotation quaternion is created based on mouse position, and the object is rotated accordingly. If a mouse button is pressed, and the mouse is over any "pane", the object jumps to the corresponding URL. If the mouse remains dormant for more than one second, the object decelerates and eventually returns to idle. A major flaw of Flash objects is that they cannot detect the mouse when it moves outside of the object window; i.e. the Flash object continues to believe the mouse is in its last position above the object. So the deceleration effect is required to return the object to idle and reduce CPU usage once the user has ceased interaction. When the mouse begins to move again, the object is accelerated.

I am well aware that the "Spinner" is by no means an efficient method for navigating the website, but it was a fun and very challenging Flash project. Flash is a very powerful and full-featured graphical language, and though it may be ultimately detrimental to the user experience, I have no doubt that within a few years 3D objects will become a commonplace feature of websites. It is only a matter of time before browsers utilize a Direct3D or an OpenGL interface, since these are common technologies supported by the hardware in most modern PCs.

The size of this Flash project is 29 kB.

© Saranga Komanduri
Email: vx9mpuz23a at
Main site: