Flash Player 10 : rotation (x,y,z) properties example
One of the new ActionScript APIs include in Flash Player 10 is the addition of z based properties (joining the existing x and y). The DisplayObject.z and DisplayObject.rotationZ properties allow you to manipulate your display object on the z axis (relative to the 3D parent container).
Below is a simple example that shows how changing the rotationX, rotationY and rotationZ properties affect a DisplayObject instance.
The UI is in Flex, but of course, the APIs also work in Flash Authoring. The example requires the Flash Player 10 RC release from labs.
Here is the code for the application (basically just sets the properties for the sprites):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="0xFFFFFF"
creationComplete="onCreationComplete()"
>
<mx:Script>
<![CDATA[
[Embed(source="graphics.swf", symbol="logo")]
[Bindable]
private var logoClass:Class;
private function onCreationComplete():void
{
frameRateSlider.value = systemManager.stage.frameRate;
}
private function onValueChange(e:Event):void
{
var slider:HSlider = HSlider(e.target);
switch(slider)
{
case rotationXSlider:
{
logo.rotationX = slider.value;
break;
}
case rotationYSlider:
{
logo.rotationY = slider.value;
break;
}
case rotationZSlider:
{
logo.rotationZ = slider.value;
break;
}
}
}
private function onAnimateSelect():void
{
if(animateXCB.selected || animateYCB.selected ||
animateZCB.selected)
{
addEventListener(Event.ENTER_FRAME, onEnterFrame);
return;
}
if(!animateXCB.selected && !animateYCB.selected &&
!animateZCB.selected)
{
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
return;
}
}
private var xDirection:int = 1;
private function onEnterFrame(e:Event):void
{
if(animateXCB.selected)
{
animateSlider(rotationXSlider, "rotationX");
}
if(animateYCB.selected)
{
animateSlider(rotationYSlider, "rotationY");
}
if(animateZCB.selected)
{
animateSlider(rotationZSlider, "rotationZ");
}
}
private function animateSlider(slider:HSlider, property:String):void
{
if(logo[property] == 180)
{
logo[property] = -180;
}
else
{
logo[property] += 2;
}
slider.value = logo[property];
}
private function onFrameRateChange():void
{
stage.frameRate = Math.ceil(frameRateSlider.value);
}
]]>
</mx:Script>
<mx:Panel layout="absolute" right="10" left="10" top="10" bottom="10"
title="DisplayObject Z Properties Example"
color="#000000" height="619">
<mx:Label text="rotationX" left="10" bottom="4"/>
<mx:Label text="rotationY" left="10" bottom="30"/>
<mx:Label text="rotationZ" left="10" bottom="56"/>
<mx:HSlider left="73" bottom="5" id="rotationXSlider" minimum="-180"
maximum="180" allowTrackClick="true"
value="0"
change="onValueChange(event)" liveDragging="true" snapInterval="1"/>
<mx:HSlider left="73" bottom="36" id="rotationYSlider"
allowTrackClick="true" minimum="-180" maximum="180"
value="0"
change="onValueChange(event)" liveDragging="true" snapInterval="1"/>
<mx:HSlider left="73" bottom="62" id="rotationZSlider"
allowTrackClick="true" minimum="-180" maximum="180"
value="0"
change="onValueChange(event)" liveDragging="true" snapInterval="1"/>
<mx:VRule height="64" bottom="10" left="338"/>
<mx:HRule bottom="82" left="10" right="10"/>
<mx:Image width="200" height="200" id="logo"
source="{logoClass}" horizontalCenter="0" top="150"/>
<mx:Image width="200" height="200" right="9" horizontalCenter="0" top="150"
alpha=".05"
source="{logoClass}"/>
<mx:CheckBox label="Animate" left="239" bottom="54" id="animateZCB" click="onAnimateSelect()"/>
<mx:CheckBox label="Animate" left="239" bottom="28" id="animateYCB" click="onAnimateSelect()"/>
<mx:CheckBox label="Animate" left="239" bottom="2" id="animateXCB" click="onAnimateSelect()"/>
<mx:Label text="Framerate" bottom="4" left="348"/>
<mx:HSlider left="418" bottom="5"
id="frameRateSlider"
liveDragging="true"
allowTrackClick="true" minimum="1" maximum="70"
change="onFrameRateChange()"/>
</mx:Panel>
</mx:Application>
You can find more information on the z and rotationZ properties in the DisplayObject entry in the Flash Player 10 ActionScript APIs docs.
You can find more information on Flash Player 10 on labs.
