Posted by: Actionscription | March 12, 2009

3D Rotation

As I mentioned in my overt worship review of the class, TweenLite has a shortRotation plugin that allows one to tween three rotation properties: rotateX, rotateY, and rotateZ… mmm “Z”, as in 3D Z.  So, just how do you create a three dimensional object that will understand these three variables? I set out to determine the answer to just that and I found one. A horrible one. One that would cost me hundreds or thousands of $.   I am working on a second solution, which will cost nothing but time, exorbitant elbow grease, and thorough research (check it out halfway through this post).

3d Rotation the easy way: Buy Flash CS4

uggh! I’m still using CS3 and only for my Flash software. My illustrator, photoshop, premiere, and aftereffects are still at the lowly level of CS2 and for economic reasons, I’m stuck w/ my outdated software configuration for awhile.  But if you’re not in my boat or on the same sea as my boat, consider buying the latest, greatest CS4 Flash to make 3D manipulation inherent in flash display objects.  Yep, inherent, built in, easy.

In Flash CS3 and below, a display object (i.e. sprite or movieclip) only recognizes one rotation property (rotation: Indicates the rotation of the DisplayObject instance, in degrees, from its original orientation, which is usually the upper left, corner or 0,0). This property only rotates objects in the 2D flat space of the Flash stage.  To make 3D work in this flash, one must “fake” it with math. Lots of math, Points, lines, fills, trig, arrays, and sometimes Matrices.  Yippee kayae!

In Flash CS4 and above (as of writing there is no above), a display object (i.e. sprite or movieclip) recognizes four (4) rotation properties. Holy fuck! Yeah, four rotation properties:

  1. rotation: Same as in CS3. 2D rotation.
  2. rotationX: spin that shit around the X axis of the stage, i.e. vertical flipping.
  3. rotationY: spin it around the Y axis of the stage, i.e. horizontal flipping.
  4. rotationZ: spin, baby spin o’er the Z axis of the stage. As far as I’m concerned, a spin around the Z axis is the same as rotation (unless, for some reason, the Z axis does not cross through the orientation point of the object).

So yay. Easy stuff in Flash CS4. If you need some info, this might do the trick: Senocular Eating up 3D in Flash 10

3d Rotation the hard way: Compensate w/ Math

Save some dollars, but lose your wits by simulating 3D w/ ingenius math equations. Actually, it’s not that hard if you get a little help from those awesome folks that paved the way for you already (and lived to document it).  Here are some resources that I find expecially helpful for 3D simulation in Flash CS3 or below:

  • Kirupa’s 3D Section: Exploring 3D
  • Consider getting into Quaternions. And if you do, make sure to tell everyone you know that you’re about to disappear into nerdville for a little bit, only to return in four dimensions.  Actually, despite their intimidating name, Quaternions can save time and processing load in creating/moving objects in 3D space.
  • Book (yeah, not a free resource unless your library is up to date): Foundation Actionscript 3.0 Animation by Keith Peters. This contains some basic and intermediate chapters on 3D simulation in flash (ch: 15, 16, & 17).
  • Flelix Turner has some suggestions, as well: 3D Flash Sites that Work

Have any other suggestions? Let me know and I will add them to this post.
Happy times to you, in the 3rd dimension!

- Actionscription


Responses

  1. [...] re-visit my 3D rotation entry for how I’m utilizing Keith’s 3D classes. [...]


Categories