This example shows you a component that extends a Panel to give it the capacity of the rotation.
This movie requires Flash Player 9
Remember to embed fonts otherwise the text will not be displayed after a rotation
The Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="it.creativesource.*"
viewSourceURL="http://www.aboutflex.net/labs/rotablePanel/srcview/index.html">
<ns1:RotablePanel id="rP" x="99" y="99"
width="250" height="229" title="Rotate Me!!" >
</ns1:RotablePanel>
</mx:Application>
the Component - RotablePanel
package it.creativesource
{
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.text.Font;
import flash.text.TextFormat;
import mx.containers.Panel;
import mx.controls.Button;
import mx.effects.Rotate;
public class RotablePanel extends Panel
{
[Embed(source="/assets/fonts/verdana.TTF", fontName="verdana")]
public static var verdana:Class;
private var _rotator:Button=new Button();
private var _rotator1:Button=new Button();
private var _rotator2:Button=new Button();
private var _rotator3:Button=new Button();
private var _startGap:Number=0;
private var _direction:Number=1;
public function RotablePanel()
{
Font.registerFont(verdana);
super();
}
override protected function createChildren():void{
super.createChildren();
super.rawChildren.addChild(_rotator);
super.rawChildren.addChild(_rotator1);
super.rawChildren.addChild(_rotator2);
super.rawChildren.addChild(_rotator3);
_rotator.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
_rotator1.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
_rotator2.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
_rotator3.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
_rotator.width=12;
_rotator.height=12;
_rotator.x=super.width-_rotator.width+12;
_rotator.y=super.height-_rotator.height+12;
_rotator1.width=12;
_rotator1.height=12;
_rotator1.x=super.width-_rotator1.width+12;
_rotator1.y=-12;
_rotator2.width=12;
_rotator2.height=12;
_rotator2.x=-12;
_rotator2.y=-12;
_rotator3.width=12;
_rotator3.height=12;
_rotator3.x=-12;
_rotator3.y=super.height-_rotator3.height+12;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "verdana";
titleTextField.embedFonts=true;
titleTextField.defaultTextFormat=textFormat;
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
private function startRotation(e:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,rotate)
stage.addEventListener(MouseEvent.MOUSE_UP,stopRotation)
var radVal:Number = Math.PI * this.rotation / 180;
var originX:Number=unscaledWidth/2
var originY:Number=unscaledHeight/2
var centerX:Number = this.x + originX * Math.cos(radVal) - originY * Math.sin(radVal);
var centerY:Number = this.y + originX * Math.sin(radVal) + originY * Math.cos(radVal);
var a: Number = (originY-contentMouseY)
var b: Number =(originX-contentMouseX)
var ipo:Number = Math.sqrt((a*a)+(b*b))
_startGap=Math.round(180 * Math.asin(a/ipo) / Math.PI)
if(b<0){
_direction=-1
}else{
_direction=1
}
}
private function stopRotation(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP,stopRotation)
stage.removeEventListener(MouseEvent.MOUSE_MOVE,rotate)
}
private function rotate(e:MouseEvent):void{
var radVal:Number = Math.PI * this.rotation / 180;
var originX:Number=unscaledWidth/2
var originY:Number=unscaledHeight/2
var centerX:Number = this.x + originX * Math.cos(radVal) - originY * Math.sin(radVal);
var centerY:Number = this.y + originX * Math.sin(radVal) + originY * Math.cos(radVal);
var a: Number = (originY-contentMouseY)
var b: Number =(originX-contentMouseX)
var ipo:Number = Math.sqrt((a*a)+(b*b))
if(_direction>0)
this.rotation+=-_startGap+Math.round(180 * Math.asin(a/ipo) / Math.PI)
else
this.rotation+=_startGap-Math.round(180 * Math.asin(a/ipo) / Math.PI)
radVal = Math.PI * this.rotation/180;
var originalOffsetX:Number = originX * Math.cos(radVal) - originY * Math.sin(radVal);
var originalOffsetY:Number = originX * Math.sin(radVal) + originY * Math.cos(radVal);
var newX:Number = Number((centerX - originalOffsetX).toFixed(1));
var newY:Number = Number((centerY - originalOffsetY).toFixed(1));
this.move(newX, newY);
}
}
}
other components that extend the Panel
