第18回
アナログ時計の作り方アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

前回は、Dateクラスを使用してデジタル時計を作りましたが、今回は同じDateクラスを使用してアナログ時計を作ります。

▼完成

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

 

作成方法

  1. 新規ファイル(AS3.0)を開き、ステージサイズを「200」×「200」pxに変更します。
  2. 「文字盤」「秒針」「短針」「長針」の4つの素材をそれぞれ準備します。
    アナログ時計を作るために必要な、4つの素材
  3. 「秒針」「短針」「長針」をそれぞれムービークリップシンボルに変換し、下記の通りインスタンス名をつけます。
    • 秒針⇒second_mc
    • 短針⇒hour_mc
    • 長針⇒minute_mc
  4. 同一のレイヤーにパーツを配置します。
    パーツを配置
  5. 新規にレイヤーを追加し、下記のスクリプトを記述します。
    addEventListener(Event.ENTER_FRAME,XupDate);
    function XupDate (evt:Event):void{
    	var date:Date = new Date();
    	hour_mc.rotation = date.hours * (360/12) + date.minutes * (30/60);
    	minute_mc.rotation = date.minutes * (360/60);
    	second_mc.rotation = date.seconds * (360/60);
    }

【補足】針の回転角度

と、なります。

次のページは…
マウスチェイサーの作り方
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

SATT入社後、m-SchoolでFlashのインストラクターを担当。

トレーニングコースの企画・開発等を経て、現在はトレーニング(企業研修)やeラーニングに関するコンサルティングを担当。

K-1好きは誰にも負けない自信あり。

Flash Beginner's School

RSSフィードで
最新情報を購読