Flexでアナログ時計

Flexでアナログ時計です。
これから萌系AIRアプリをたくさん作りたいなぁってことで土台を作ってます。

Flexってオブジェクトの回転中心座標を設定できないから頑張ってMatrixで作るか空のキャンバスを作るかだと思うのですが、今回はキャンバスでやってます。
CanvasにオブジェクトをaddChildして変な方向にずらす。

<mx:Canvas clipContent="false"">
    <mx:Image id="second" source="second.png" x="{-second.width/2}" y="{-second.height+20}"/>
</mx:Canvas>

これで下の画像みたいに普段とは違う場所を中心にして回転することができます。

＃こういうところがFlexはめんどい(＠_＠;)
余談としてキャンバスの設定で「clipContents=false」で勝手に切り取られないので便利です。
スクロールバーいらないときは設定しておきましょう。
あと、今回、時計のライブラリはTeraClockを使用しました。
便利便利。
ソースコードはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" backgroundAlpha="0"
    borderThickness="0"
    showGripper="false" showInAutomationHierarchy="false" showStatusBar="false" showTitleBar="false"
    xmlns:utils="com.trick7.utils.*" clipContent="false"
    mouseDown="nativeWindow.startMove()"
    >
<mx:Script>
<![CDATA[
import com.trick7.utils.TeraClock;
private var clock:TeraClock = new TeraClock();
private function init():void{
    this.addEventListener(Event.ENTER_FRAME , myTimer );
}
private function myTimer( e:Event ):void{
    myCanvasH.rotation = clock.hoursDegree;
    myCanvasM.rotation = clock.minutesDegree;
    myCanvasS.rotation = clock.secondsDegree;
    myLog.text = "" + clock.secondsDegree;
}
]]>
</mx:Script>
<mx:GlowFilter id="gf" blurX="3" blurY="3" color="0xffffff" strength="10" />
<mx:DropShadowFilter id="dsf" blurX="6" blurY="6" color="0x000000" strength="0.4"/>
<mx:Canvas id="myCanvas" width="400" height="400" alpha="0.8">
    <mx:Canvas id="myCanvasM" clipContent="false" x="{myCanvas.width/2}" y="{myCanvas.height/2}">
        <mx:Image id="minute" source="minute.png" x="{-minute.width/2}" y="{-minute.height}" filters="{[gf,dsf]}"/>
    </mx:Canvas>
    <mx:Canvas id="myCanvasH" clipContent="false" x="{myCanvas.width/2}" y="{myCanvas.height/2}">
        <mx:Image id="hour"   source="hour.png" x="{-hour.width/2}" y="{-hour.height}" filters="{[gf,dsf]}"/>
    </mx:Canvas>
    <mx:Canvas id="myCanvasS" clipContent="false" x="{myCanvas.width/2}" y="{myCanvas.height/2}">
        <mx:Image id="second" source="second.png" x="{-second.width/2}" y="{-second.height+20}" filters="{[gf,dsf]}"/>
    </mx:Canvas>
</mx:Canvas>
<mx:TextArea id="myLog"/>
</mx:WindowedApplication>