PHP,MySQL,Flex,JSな日々+イラストとか このページをアンテナに追加 RSSフィード Twitter

2009年02月03日

Flexでアナログ時計

Flexでアナログ時計です。

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

f:id:haru-komugi:20090203220900j:image

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>

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

f:id:haru-komugi:20090203221806j:image

#こういうところが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>

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証