FLASH講座 ーアクションスクリプトの実践的事始めー
基本編
(10) デジタル時計・アナログ時計
 Webサイトに時計を表示することはあまりないかもしれません。 しかし基本的な機能として、こんなことも出来るという意味で、今回のflash講座とします。 スクリプト自体は非常に簡単なものです。

 なお、時計のデザイン自体は適当に作成しましたが、あまりできばえを云々するレベルではありません。 Web上には様々なかっこいいデザインの時計が提供されています。 しかし、やはり自分自身のデザインで作成したものを表示したいものですよね。特に、携帯電話の待受なんかにはオリジナルものがいいと思いますのでご自分で考えてみてください。 

 但し、携帯用のスクリプトには制限がありますので、携帯用は、近々講座として発表するつもりです。
1.デジタル時計
(1)年月日の表示

   表示例:  

●ステージにダイナミックテキストボックスを作成し、インスタンス名を、例えば、dayとする
●FRAME1に次のスクリプトを書き込む
なお、このスクリプトは、表示開始時の時一度だけデータを取得するので、このままでは日付が変わっても表示は変わらない。 リアルタイムにデータを取得するには、時間表示の項で示すようにsetInterval を使う(FRAMEアクションで記述しても同じ結果を得られる。例えば、_root.onEnterFrame=function() {......を使った記述や、FRAME2でFRAME1に戻るという記述をするなどの方法がある)。
myDate = new Date();
var yobi:Array = new Array
("日", "月", "火", "水", "木", "金", "土");
var y = myDate.getFullYear();
var m = myDate.getMonth()+1;
var d = myDate.getDate();
var yb = myDate.getDay();
$date = y+"年"+m+"月"+d+"日"+"("+yobi[yb]+")";
day.text = $date;
Dateクラスのインスタンス作成
曜日の配列定義

年データの取得
月データ
日データ
曜日データ(日曜を0とする数字)
表示テキスト
ボックスdayに表示
(2)時間の表示(24時間表示)

   表示例:   

●フレームレートを60fpsに設定する
●ステージにテキストボックスを配置(時間(時分秒):hour、100分の1秒:dls)
  デバイスフォントを使う場合は特に設定はいらないが、特殊なフォントを使いたい場合は、
  プロパティでビットマップテキストを選択し、0-9間での数字と、:を埋め込む
●FRAME1に次のスクリプトを書き込む
now();
tId=setInterval(now,10);
function now() {
  myDate = new Date();
  var h = myDate.getHours();
  var min = myDate.getMinutes();
  var s = myDate.getSeconds();
  var ds = Math.floor((myDate.getMilliseconds()/10));
  hyoji(h,min,s,ds);
}
function hyoji(h,min,s,ds){
  if (h<10) {
        h = "0"+h;
  }
  if (min<10) {
        min = "0"+min;
  }
  if (s<10) {
        s = "0"+s;
  } 
  $hour = h+":"+min+":"+s;
  hour.text = $hour;
  dls.text = ds;
}
関数nowの実行(今の時間を開始時に表示)
関数 now を10ミリ秒ごとに実行
関数 now

時間データ取得


ミリ秒のデータを10で割り1/100秒整数にする
関数hyoji(引数)の実行

関数hyoji
もし時間hが一桁だったら
その前に0を付ける

もし分mが一桁だったら
その前に0を付ける

もし秒sが一桁だったら
その前に0を付ける

表示時間のテキスト
ボックスhourに表示
dls ボックスに ds を表示
(3)時間の表示(12時間表示)

   表示例:  

●ボックスhourの前にテキストボックスapmを配置。 ここでは、1/100秒表示のボックスは配置していない。
●以下のスクリプトを前項の24時間表示のスクリプトのif ( h<10 )・・・の行の前に追加する
●dls.text = ds; の代わりに apm.text = $ap; を記入
if (h<12) {
        h = h;
        $ap = "am";
} else {
        h = h-12;
        $ap = "pm";
}
もし、hが12以下なら
hはそのまま
$apを am に
そうでなかったら(12以上)
hから12を引く
$apをpmに
(4)表示に画像数字を使う

   表示例:
      

 表示に普通のフォントでは満足できないときは、画像を使う。 数字のgif画像は、いろいろなサイトで無料配布しているので、そこからダウンロードすると良い。 背景を生かす場合は、背景が透明化されたgifを使う。
●ライブラリーに0-9までの数字gif画像とコロン(:)、am,pm の画像を読み込む
●画像それぞれを(コロンを除く)シンボルに変換し、c01-c09、cam、cpmとする
●ステージ(60fps)にフォント画像を表示したい大きさの矩形を描き、シンボルに変換し、適当に名前を付ける。 この矩形シンボルを横に6つ並べ、インスタンス名を左から、ap、hr1、hr2 ひとつおいて、mn1、mn2とする。 4つ目はコロンの画像を配置する。
●以下のスクリプトをFRAME1に書き込む。
now();
tId = setInterval(now, 10000);
function now() {
    myDate = new Date();
    var h = myDate.getHours();
    var m = myDate.getMinutes();
    hyoji(h, m);
}
function hyoji(h, m) {
    if (h<12) {
      h = h;
      $ap = "am";
    } else {
      h = h-12;
      $ap = "pm";
    }
    if (h<10) {
      h = "0"+h;
    }
    if (m<10) {
      m = "0"+m;
    }
    hr = "$"+h;
    mn = "$"+m;
    ap.attachMovie("c"+$ap, $cap, 0);
    hr1.attachMovie("c"+hr.substr(1, 1), "hr1", 1);
    hr2.attachMovie("c"+hr.substr(2, 1), "hr2", 1);
    mn1.attachMovie("c"+mn.substr(1, 1), "mn1", 1);
    mn2.attachMovie("c"+mn.substr(2, 1), "mn2", 1);
}
今の時間を表示(関数 now)
関数nowを10秒間隔で実施
関数now



関数hyoji(引数)を実施

関数hyojiの定義













hをストリングに
mをストリングに
am、pmいずれかの画像を表示
時間の10の桁
時間の 1の桁
分の10の桁
分の 1の桁
(注) aaa.substr(m,n):ストリングaaaのm番目の文字からn個の文字を抽出
2.アナログ時計
  
●ステージ(60fps)に時計盤を描く(ここでは、flashの描画ツールを使って適当に書いた)
●長針、短針、秒針を描きそれぞれをシンボルに変換する(基準点を針のおしりにとる)
●長、短、秒針のインスタンス名として、それぞれlong、short、secondと名付ける
●時計盤の中心点のところに、それぞれの針のおしりが来るように配置する。(12時に合わせるのがやりやすい)
●以下のスクリプトをFRAME1で記述する
now();
tId=setInterval(now,100);
function now() {
        myDate=new Date();
        h= myDate.getHours();
        m=myDate.getMinutes();
        s=myDate.getSeconds();
        work();
}
function work() {
        short._rotation=h*360/12+m*360/12/60;
        long._rotation=m*360/60+s*360/60/60;
        second._rotation=s*360/60;
}
関数nowの実施
100ミリ秒間隔で、関数nowを実施
関数now




関数workを実施

関数work
短針の角度
長針の角度
秒針の角度
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト    flash action script 基本編(11)