Mike Chambers

code = joy

Flash Player 10 : rotation (x,y,z) properties example

with 5 comments

One of the new ActionScript APIs include in Flash Player 10 are the addition of z based proprties (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.

Written by mikechambers

August 25th, 2008 at 1:08 pm

Posted in General

5 Responses to 'Flash Player 10 : rotation (x,y,z) properties example'

Subscribe to comments with RSS or TrackBack to 'Flash Player 10 : rotation (x,y,z) properties example'.

  1. How does the use of .z affect the working with the displayList? I read in the docs that setting it activates a 3D coordinate mode, but what does it do with the getChildByIndex (etc)?

    Macaca

    25 Aug 08 at 11:52 pm

  2. [...] Read more [...]

  3. Is the rotation always around the top left corner or can it be specified (for example the center of the component)?

    Tom Van den Eynde

    27 Aug 08 at 1:44 am

  4. 3d real en flash?

    12 Nov 08 at 4:41 am

  5. [...] me suis fortement inspiré d’un article du blog de Mike Chambers. J’ai traduit son code source en français et fais quelques changements. Ce qui est très [...]

Leave a Reply