Element 4 Contact

Shad Gross

3033 Brumbaugh St. NW
North Canton, OH 44720
P: 330.354.3366
Email
Multimedia, Print, and Application Design company based in Canton, Ohio. Specializing in advertisements, websites, and print layouts.

Body Anthology Site
Web Design
more

Actionscript 3 3D Panel Class

December 25th, 2009

On a lot of my older sites (back when I had the luxury of creating sites that held form above content) I had used a set of algorithms to create what I would later call the 3-D Panel effect. The idea is that a fairly simple 3 Dimensional physics engine could move 2 Dimensional panels to give the illusion of depth (seeĀ  Never Say Die and the original Hammer’s tattoo site for examples of the effect). After the introduction of full Object Oriented Programming support in PHP 5, I started thinking about what functions that I find myself building (or copying and pasting) the most and how I could turn those into a class library. Well, it wasn’t a long shot to then start thinking about how I could do the same thing for Flash. Thus was born the 3D Panel class!
This is my first serious endeavor in AS3. I can already think of a few ways to make the class more efficient or extend it, but I currently do not have a project that requires it and plenty of projects to take up my time. So, rather than wait until it is “perfect,” I’ve decided to release it here and see what people have to say. I will return to it and consider this a long-term project, but also figured that getting a little public opinion could definitely help the process. (right click download link and save as or just click it to view the code in your browser window).

download the class

So, here is how it works:

Fig. 1

Fig. 1 - The Z Coord is zero at the screen, increases as it heads into the background

Each instance of the class is a Movie Clip panel that has the usual X and Y coordinates, but also gives a Z coordinate that controls the depth of the panelĀ  fig1.

By creating different panels at different depths you get layers in 3 dimensions fig2.

Fig. 2 The Panels create a sense of depth

Fig. 2 The Panels create a sense of depth

Then run the setup method for each panel to get them started. After having created the panels, add child movie clips of whatever you want (movies or graphics), at sufficient size, to create layered images.
Now where the class actually starts to do its thing is when you call the setXCoord and setYCoord methods to move the panels around. These methods take the argument of an X or Y coordinate and move the panels, in perspective based off of the Z coord of the panel, that distance from the center, in the opposite direction (it moves in the opposite direction because that makes it ready to take a mouseX or mouseY argument and move towards the mouse as opposed to away).

And that’s about it. It is a simple effect, but it’s really in its usage that you get some nice effects. Like I said, this is a rough of the final class. It doesn’t handle zoom effects yet, requires a setup step and a little more user input then it may ultimately need to have. But its a work in progress. . .and its free! You can use it for any purpose, commercial or otherwise, I just ask that you drop me a line and show me how it is used. I really like the effect that this creates and like to see it in use. . .something I just haven’t had the time for myself.
Cheers!
-Shad