ターボ・アジャスト機能付きアナログ時計 の 作り方




【オブジェクトの生成】
針の画像を作成し、短針,長針,秒針を それぞれ hour_hand, minute_hand, second_hand と名付ける。
それらをシンボル化し、インスタンス名をつける。

インスタンスを選択すると、丸と十字がでるので、回転の軸になる基準点(中心点)を針の根元に
合わせる。また、針のデフォルトの位置は、１２時を向いた状態で、針の長さなども調整する。

※中心点についての解説があるページ： リンク




【時計の背景の作成】
次に、時計の背景やインジケーター(時刻を表す印)をつくる。
インジケーターは、ひとつ作成し、シンボル化し、縦(横)反転・コピー・回転を使うと
正確な時刻を示す時計が作れる。インジケーターなど画像をすべて作成したら、
それぞれのレイヤーにフレームを挿入し、３フレームにする。




【アクションスクリプトの作成】
１フレーム目に、変数の初期化、２フレーム目と３フレーム目に１２時の時点から
現在時刻まで回転するコード（以下、ターボ機能と呼ぶ）を以下のようにして書く。

２フレーム目と３フレーム目の違いは、３フレーム目に _level0.prevFrame();
というコードが追加されている。

これで、１→ ２→３→ ２→３ → ２→３・・・とフレームを行ったり来たりする。
その間にターボ機能および、現在時刻の表示が行われる。

※携帯の壁紙にした場合は、壁紙が一時的に隠れただけでも、再表示され、１フレーム目
　から再生が再開される。



【ｆｐｓの設定】
携帯などで実行すると負荷がかかり、適度な再生速度になるが、パソコンでは一瞬で
ターボ機能が実行される。よって、30.0 fps のように遅めに設定するのがお勧め。

１秒間に再生されるフレーム数は、12.0fpsなどとかかれた文字をダブルクリックすると
変更できる。



【動作環境】
　Windowsマシン・Macintosh用。　
　Flash Player 7.0以降。 　
【開発環境】
　Windows版 Flash CS3
Action Script 2.0



■ダウンロード → AnalogWatch.zip


FireFoxでは以下のソースを掲載した部分について、テーブルの背景のレイアウトが崩れます。ご了承ください。m(_ _)m



【１フレーム目のアクションスクリプト】 

_global.TimeSetFlg = false;

_global.secIdx = 0;
_global.minIdx = 0;
_global.hourIdx = 0;

_global.secFlg = false;
_global.minFlg = false;
_global.hourFlg = false;

myTime2 = new Date();
_global.theHour2 = myTime2.getHours();
_global.theMin2 = myTime2.getMinutes();
_global.theSec2 = myTime2.getSeconds();


if (_global.theSec2<3) {
	_global.theSec2 += 60;
	if (_global.theMin2<1) {
		_global.theMin2 += 60;
		if (_global.theHour2<1) {
			_global.theHour2 += 24;
		}
		_global.theHour2 -= 1;
	}
	_global.theMin2 -= 1;
}
_global.theSec2 -= 3;//(1/30)*(60+_global.theSec2)



【２フレーム目のアクションスクリプト】 


this.onEnterFrame = function() {

	if (TimeSetFlg == false) {

		myTime3 = new Date();

		_global.theSec3 = myTime3.getSeconds();

		if (_global.theSec3<3) {
			_global.theSec3 += 60;
		}
		_global.theSec3 -= 3;//(1/30)*(60+_global.theSec3)


		if (_global.hourIdx<_global.theHour2) {
			this.hour_hand._rotation = (_global.hourIdx*360/12)+(_global.minIdx/2);///(theMin/360/12/60)
			_global.hourIdx++;
		} else {
			this.hour_hand._rotation = (_global.theHour2*360/12)+(_global.minIdx/2);///(theMin/360/12/60)
			_global.hourFlg = true;
		}
		if (_global.minIdx<_global.theMin2) {
			this.minute_hand._rotation = (_global.minIdx*360/60)+(_global.secIdx*360/60/60);
			_global.minIdx++;
		} else {
			this.minute_hand._rotation = (_global.theMin2*360/60)+(_global.secIdx*360/60/60);
			_global.minFlg = true;
		}

		if (_global.secIdx<60) {
			if (_global.secIdx != _global.theSec3) {
				this.second_hand._rotation = _global.secIdx*360/60;
				_global.secIdx++;
			} else {
				_global.secFlg = true;
			}
		} else {
			if (_global.secIdx-60 != _global.theSec3) {
				this.second_hand._rotation = (_global.secIdx-60)*360/60;
				_global.secIdx++;
			} else {
				_global.secFlg = true;
			}
		}
		trace(_global.secIdx+"/"+_global.theSec3);
		if (_global.secFlg == true && _global.minFlg == true && _global.hourFlg == true) {
			TimeSetFlg = true;
		}
	} else {
		myTime = new Date();
		theHour = myTime.getHours();
		theMin = myTime.getMinutes();
		theSec = myTime.getSeconds();
		if (theSec<3) {
			theSec += 60;
			if (theMin<1) {
				theMin += 60;
				if (theHour<1) {
					theHour += 24;
				}
				theHour -= 1;
			}
			theMin -= 1;
		}
		theSec -= 3;
		this.hour_hand._rotation = (theHour*360/12)+(theMin/2);///(theMin/360/12/60)
		this.minute_hand._rotation = (theMin*360/60)+(theSec*360/60/60);
		this.second_hand._rotation = theSec*360/60;
	}
};



【３フレーム目のアクションスクリプト】 

this.onEnterFrame = function() {

	if (TimeSetFlg == false) {

		myTime3 = new Date();

		_global.theSec3 = myTime3.getSeconds();

		if (_global.theSec3<3) {
			_global.theSec3 += 60;
		}
		_global.theSec3 -= 3;//(1/30)*(60+_global.theSec3)


		if (_global.hourIdx<_global.theHour2) {
			this.hour_hand._rotation = (_global.hourIdx*360/12)+(_global.minIdx/2);///(theMin/360/12/60)
			_global.hourIdx++;
		} else {
			this.hour_hand._rotation = (_global.theHour2*360/12)+(_global.minIdx/2);///(theMin/360/12/60)
			_global.hourFlg = true;
		}
		if (_global.minIdx<_global.theMin2) {
			this.minute_hand._rotation = (_global.minIdx*360/60)+(_global.secIdx*360/60/60);
			_global.minIdx++;
		} else {
			this.minute_hand._rotation = (_global.theMin2*360/60)+(_global.secIdx*360/60/60);
			_global.minFlg = true;
		}

		if (_global.secIdx<60) {
			if (_global.secIdx != _global.theSec3) {
				this.second_hand._rotation = _global.secIdx*360/60;
				_global.secIdx++;
			} else {
				_global.secFlg = true;
			}
		} else {
			if (_global.secIdx-60 != _global.theSec3) {
				this.second_hand._rotation = (_global.secIdx-60)*360/60;
				_global.secIdx++;
			} else {
				_global.secFlg = true;
			}
		}
		trace(_global.secIdx+"/"+_global.theSec3);
		if (_global.secFlg == true && _global.minFlg == true && _global.hourFlg == true) {
			TimeSetFlg = true;
		} else {
			_level0.prevFrame();//３フレーム目のみに記述
		}
	} else {
		myTime = new Date();
		theHour = myTime.getHours();
		theMin = myTime.getMinutes();
		theSec = myTime.getSeconds();
		if (theSec<3) {
			theSec += 60;
			if (theMin<1) {
				theMin += 60;
				if (theHour<1) {
					theHour += 24;
				}
				theHour -= 1;
			}
			theMin -= 1;
		}
		theSec -= 3;
		this.hour_hand._rotation = (theHour*360/12)+(theMin/2);///(theMin/360/12/60)
		this.minute_hand._rotation = (theMin*360/60)+(theSec*360/60/60);
		this.second_hand._rotation = theSec*360/60;
	}
};



【その他コーディングに関して】
setInterval や getTimer(); は、使用せず、フレームが実行される度に処理が
行われる this.onEnterFrame にコーディングした。

また、２フレーム目に戻るときは、 gotoAndPlay(2); ではなく、
_level0.prevFrame(); で記述した。


Arrow 戻る