イラストレーターで1からのアナログ時計作り
昨日作った時計を保存するのを忘れてまた1から作りました。
時計の作り方だけは完璧に覚えた。。。
「アナログ時計の作り方」
1
楕円形ツールで円を書いていく。
中塗りはなしで外枠に色を付ける(自分は20pxのグラデーション)
2
ガイドを出し円の中心で縦と横の線を引く。
ペンツールで縦のガイドに沿って12時の位置で上下に2回クリック 目盛り線を書く。
カラーはご自分の好きな感じでおk。
3
12時のオブジェクトを選んだまま
回転ツールで「alt」押しながらガイドの中心をクリック。
「回転ダイヤログ」がでるので角度をー30°にしてコピー。
五分の位置に目盛りがコピーされる。
こんな感じ↓↓↓
4
そのままオブジェクトが選択されてると思うので、「command + D」で11時の位置まで
ひたすらコピー。
5
12時 3時 6時 9時の目盛り線を「shift」を押しながら順番に選択
選択された目盛り線を太くする。
6
次に針を書いてく。
線も自分で適当につくってみましょう。
長針、短針、秒針の3本作る。
って事でここまでで必要な素材は「秒針、短針、長針、枠」の
4つになる。
7
ここからflashに入る、まず上記4点すべての素材をイラレからコピー&ペースト。
「秒針」「短針」「長針」をそれぞれムービークリップにする。
インスタンス名を付ける。
「秒針」→「sec_mc」
「長針」→「min_mc」
「短針」→「hour_mc」
同一のレイヤーにパーツを配置↓↓↓
(12時にすべてを合わせて配置しておくといい)
8
新規レイヤーを作り「actions」で下記記述
import flash.events.Event; import flash.events.DataEvent; addEventListener(Event.ENTER_FRAME,XupDate); function XupDate(evt:Event):void{ var date = new Date(); this.hour_mc.rotation = date.hours *(360/12) + date.minutes*(30/60); this.min_mc.rotation = date.minutes *(360/60); this.sec_mc.rotation = date.seconds *(360/60); }
プレビューしてみる。。。