Yahoo!ドームの時計

| コメント(0) | トラックバック(0)

先日、Yahoo!ドームで野球の試合を観戦してきた。
その際、気になるものを(・∀・)ハケーン
イニングが変わるたびにバックスクリーンに映し出される交代完了までを示すストップウオッチ。

何か気持ちいい。特に桁が同時に変わる瞬間が気持ちいい。
早速、FLASHでシミュレートしてみた。

FLASH PLAYER

Get Adobe Flash player

実際は、あがってきた数字が止まる瞬間にブルッと震えるのだが、うまくシミュレートできず。
また、6桁とも同じ動きをするので、関数を使って一度にやってしまおうとしたんだけど、こちらも意図した通り動かず断念。

【特徴】

時計をシミュレートする際、必ず使う「Dateクラス」。
上のサンプルでは、それぞれの桁が時間の変化に合わせ違う動きをするため、「Date」インスタンスから得た時間情報をバラバラにして処理を行っている。
また、「attachMovie」の深度を、それぞれの桁ごとに固定することによって、新たに生成された数字が、前の数字を消すようにしている(深度が違うと消えずに数字が乗っかっていく)。

【製作過程】

画面サイズは300x100。背景は白。
ライブラリにムービークリップ「figure」を用意し、その中にダイナミックテキスト(インスタンス名:num)を配置。フォントサイズを「60」にして、「文字の埋め込み」で「数字」を選択。
ムービークリップ「figure」に対してリンケージ設定。識別子は「figure」。
メインタイムライン1フレーム目に「#include "clock.as"」と記述(※注1)

テキストエディタに以下を記述し、「clock.as」というファイル名でswfと同階層に保存。

//0付加関数定義
function addzero(num):Number{
 if(num<10){
  num="0"+num;
 }
 return num;
}
//onEnterFrame実行関数定義
function move():Void{
 this._y+=(0-this._y)*0.5;
 if(this._y<=0){
  delete this.onEnterFrame;
 }
}
//ムービークリップfigureを動的に配置
for(i=0;i<6;i++){
 syoki={_x:i*50,_y:0};
 _root.attachMovie("figure","figure"+i,i,syoki);
 //初期化
 _root["figure"+i].num.text="";
}

this.onEnterFrame=function():Void{
 //dateインスタンス生成
 var date:Date=new Date();
 var hour:Number=addzero(date.getHours());
 var minute:Number=addzero(date.getMinutes());
 var second:Number=addzero(date.getSeconds());
 //Number型をString型に変換
 var hourString:String=hour.toString();
//【時】十の位
  newHour0=hourString.substr(0,1);
 if(newHour0!=_root["figure0"].num.text){
  syoki={_x:0,_y:50};
  _root.attachMovie("figure","figure0",0,syoki);
  _root["figure0"].num.text=hourString.substr(0,1);
  _root["figure0"].onEnterFrame=move;
 }else{}
//【時】一の位
 newHour1=hourString.substr(1,1);
 if(newHour1!=_root["figure1"].num.text){
  syoki={_x:50,_y:50};
  _root.attachMovie("figure","figure1",1,syoki);
  _root["figure1"].num.text=hourString.substr(1,1);
  _root["figure1"].onEnterFrame=move;
 }else{}
 
 //Number型をString型に変換
 var minuteString:String=minute.toString();
//【分】十の位
 newMinute0=minuteString.substr(0,1);
 if(newMinute0!=_root["figure2"].num.text){
  syoki={_x:100,_y:50};
  _root.attachMovie("figure","figure2",2,syoki);
  _root["figure2"].num.text=minuteString.substr(0,1);
  _root["figure2"].onEnterFrame=move;
 }else{}
//【分】一の位
 newMinute1=minuteString.substr(1,1);
 if(newMinute1!=_root["figure3"].num.text){
  syoki={_x:150,_y:50};
  _root.attachMovie("figure","figure3",3,syoki);
  _root["figure3"].num.text=minuteString.substr(1,1);
  _root["figure3"].onEnterFrame=move;
 }else{}
 
 //Number型をString型に変換
 var secondString:String=second.toString();
//【秒】十の位
 newSecond0=secondString.substr(0,1);
 if(newSecond0!=_root["figure4"].num.text){
  syoki={_x:200,_y:50};
  _root.attachMovie("figure","figure4",4,syoki);
  _root["figure4"].num.text=secondString.substr(0,1);
  _root["figure4"].onEnterFrame=move;
 }else{}

//【秒】一の位
 newSecond1=secondString.substr(1,1);
 if(newSecond1!=_root["figure5"].num.text){
  syoki={_x:250,_y:50};
  _root.attachMovie("figure","figure5",5,syoki);
  _root["figure5"].num.text=secondString.substr(1,1);
  _root["figure5"].onEnterFrame=move;
 }else{}

※注1 最後にセミコロン「;」を打つと、コンパイル時に「指示子の書式が間違っています」とエラーが出る。

トラックバック(0)

トラックバックURL: http://www.ayabin.jp/mt5/mt-tb.cgi/166

コメントする

このブログ記事について

このページは、webmasterが2009年5月 5日 20:31に書いたブログ記事です。

ひとつ前のブログ記事は「BitmapDataクラス」です。

次のブログ記事は「サムネールギャラリー(1)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。