sakri rosenstrom blog

Continuing on with the basics, heres a few more tests. Just to clarify from last time, all of this is achieved using only the x,y,z, rotationX, rotationY and rotationZ properties of plain old Sprites. This is what I find so awesome about the new flashplayer10 as3 features.

Sure, the performance and rendering capabilites are no match for what developers have at their hands in games consoles etc. (this is nothing new or surprising). What I’m really digging is that anyone with a basic understanding of display object programming in as3 can jump into doing fairly cool 3d. Just grab your bag of flash tricks and take them to another dimension (har har ). Seriously, everything works more or less exactly as I wanted / expected, and is a real pleasure to code. Reminds me of of the enthusiasm when I was learning to program with flash5 and 6. :thumbsup:

Anyway. Moving on, z-Sorting :.

There is this ROCKING little method:

[Sprite].transform.getRelativeMatrix3D(parent).position.z;

Here’s what it does:

• In the case of the cube. I created a parent Sprite, called “cube”.
• In it, I created 6 nested Sprites with a square graphic. I moved, and rotated these into positions which constitute a cube.
• Rotating the parent “cube” (with rotationX,Y and Z) results in what you see in “3) CubeTest”.
• To sort these sides, all I need to do is run the afore mentioned function, which returns the current z position of the nested clips.
• With this knowledge, it just takes a simple loop to sort the display list. See an example here.

Simple shading:

Using that same Z value which I used to sort out the sides of the square, I just added a dark layer on top of each “side button”. On every render, I set its trasparency equal to a proportionate value of Z and the maximum and minimum z (possible for the sides of the rotated cube). It’s not phong or gouraud shading, but it’ll fool the novice Again, a real “flash” feeling.

Same thing but with a bitmap material (read simple sprite).

Nested Perspective:

No rocket science here either, just curious how changing the z of a nested clip would act out…

With a little more work, I think something like the Vaio10 menu could be achieved. Same goes for the cube menu above and the Pioneer Kuro Project menu.

As a matter of fact, I can think of several popular papervision menus which can be reproduced using very basic flashplayer 10 AS3 features. I’m guessing this is more than welcome news to the more “designer flashers” as opposed to the “programmer flashers” (who also get their share of new FP10 features, which I’ll be exploring in upcoming posts). All good

As promised, here are the sources. This is a Flex project, in order to work with it (at the time of writing), just follow these simple steps:

1. Download a nightly build of the Flex3 sdk (or gumbo) dating later than May. (more details)
2. Copy the sdk into your flexbuilder sdks folder and create a Flexbuilder project, adjusting the preferences so that the compiler targets flashplayer10 and the new sdk. It’s dead easy, see details here.

Again, here is the link to the test app

I would love to hear/see of anyone that decides to use this “test set up”. Enjoy!

Tags: 3d, AS3, Flash, flashplayer10, fp10

This entry was posted on Wednesday, October 22nd, 2008 at 8:25 pm and is filed under experiment, Flash, flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.