Rotate Object Around Center In FlashBuilder/Flex

February 16th, 2012
ActionScript, Adobe Flex

In Flash, rotating a movieclip/component simply requires setting the movieclip registration point to the center.

In Flex/FlashBuilder there are numerous blog posts on the subject (including wrapping the component inside another container and setting relative coordinate to the center of the wrapper).

I thought I’d quickly share a quick way I found to do this:

Set the component’s transform properties to half the width/height of the component ie.:

component.transformX = component.height/2

and / or

component.transformY = component.width/2

Here’s an example below built with the GTween library :

Download example files from google code

In this case our “component” is the Joomla Job Board logo – (Sorry, couldn’t resist)

Code

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   applicationComplete="_init()"
			    >
	<fx:Script>
		<![CDATA[

			import com.gskinner.motion.GTween;
			import com.gskinner.motion.easing.*;

			import flash.events.Event;
			import mx.controls.Alert;
			import flash.events.MouseEvent;

			private var picTween:GTween;

			private function _init():void {
				GTween.defaultEase = Back.easeInOut;
				picTween = new GTween(logo, 1);

				this._setListeners();
			}

			private function _setListeners():void {
				right_btn.addEventListener(MouseEvent.CLICK, _flipRight);
				left_btn.addEventListener(MouseEvent.CLICK, _flipLeft);
				up_btn.addEventListener(MouseEvent.CLICK, _flipUp);
				down_btn.addEventListener(MouseEvent.CLICK, _flipDown);
			}

			private function _killButtons():void {
				right_btn.enabled = false;
				left_btn.enabled = false;
				up_btn.enabled = false;
				down_btn.enabled = false;
			}

			private function _reviveButtons():void {
				right_btn.enabled = true;
				left_btn.enabled = true;
				up_btn.enabled = true;
				down_btn.enabled = true;
			}

			private function _rotateComplete():void {
				this._reviveButtons();
			}

			private function _flipRight(e:Event):void{
				picTween.proxy.rotationY = logo.rotationY - 180;
				picTween.proxy.onComplete = this._rotateComplete();
			}

			private function _flipLeft(e:Event):void{
				picTween.proxy.rotationY = logo.rotationY + 180;
				picTween.proxy.onComplete = this._rotateComplete();
			}

			private function _flipDown(e:Event):void{
				picTween.proxy.rotationX = logo.rotationX + 180;
				picTween.proxy.onComplete = this._rotateComplete();
			}

			private function _flipUp(e:Event):void{
				picTween.proxy.rotationX = logo.rotationX - 180;
				picTween.proxy.onComplete = this._rotateComplete();
			}

		]]>
	</fx:Script>
	<s:HGroup y="20" x="150" fontSize="19" fontWeight="bold">
		<s:Label text="Flip Logo" />
	</s:HGroup>
	<s:HGroup x="10" y="50" width="288">
		<mx:Image source="@Embed(source='job_board_logo.png')" id="logo" width="368" height="368" transformX="{logo.height/2}" transformY="{logo.width/2}" />
	</s:HGroup>
	<s:HGroup horizontalAlign="center" x="20" y="{logo.height + 70}" >
		<s:Button label="Left" id="left_btn"/>
		<s:Button label="Right" id="right_btn"/>
		<s:Button label="Vertical" id="up_btn"/>
		<s:Button label="Vertical opposite" id="down_btn"/>
		<s:Label id="rotating" />
	</s:HGroup>
</s:Application>

Download from google code

Tags: 3D rotate, As3, center point, Flashbuilder, Flex

Trackback URL.