|
|
||
| FLASH講座 ーアクションスクリプトの実践的事始めー 基本編 (10) デジタル時計・アナログ時計 |
||
| Webサイトに時計を表示することはあまりないかもしれません。 しかし基本的な機能として、こんなことも出来るという意味で、今回のflash講座とします。 スクリプト自体は非常に簡単なものです。 なお、時計のデザイン自体は適当に作成しましたが、あまりできばえを云々するレベルではありません。 Web上には様々なかっこいいデザインの時計が提供されています。 しかし、やはり自分自身のデザインで作成したものを表示したいものですよね。特に、携帯電話の待受なんかにはオリジナルものがいいと思いますのでご自分で考えてみてください。 但し、携帯用のスクリプトには制限がありますので、携帯用は、近々講座として発表するつもりです。 |
||
| １．デジタル時計 | ||
| （１）年月日の表示 表示例： ●ステージにダイナミックテキストボックスを作成し、インスタンス名を、例えば、dayとする ●FRAME１に次のスクリプトを書き込む なお、このスクリプトは、表示開始時の時一度だけデータを取得するので、このままでは日付が変わっても表示は変わらない。 リアルタイムにデータを取得するには、時間表示の項で示すようにsetInterval を使う（FRAMEアクションで記述しても同じ結果を得られる。例えば、_root.onEnterFrame=function() {......を使った記述や、FRAME２で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に表示 |
|
| （２）時間の表示（２４時間表示） 表示例： ●フレームレートを60fpsに設定する ●ステージにテキストボックスを配置（時間（時分秒）：hour、100分の１秒：dls） デバイスフォントを使う場合は特に設定はいらないが、特殊なフォントを使いたい場合は、 プロパティでビットマップテキストを選択し、0-9間での数字と、：を埋め込む ●FRAME１に次のスクリプトを書き込む |
||
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 を表示 |
|
| （３）時間の表示（12時間表示) 表示例： ●ボックスｈｏｕｒの前にテキストボックス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";
}
|
もし、ｈが12以下なら ｈはそのまま $apを am に そうでなかったら（12以上) ｈから12を引く $apをpmに |
|
| （４）表示に画像数字を使う 表示例： 表示に普通のフォントでは満足できないときは、画像を使う。 数字のgif画像は、いろいろなサイトで無料配布しているので、そこからダウンロードすると良い。 背景を生かす場合は、背景が透明化されたgifを使う。 ●ライブラリーに0-9までの数字gif画像とコロン（：）、am,pm の画像を読み込む ●画像それぞれを（コロンを除く)シンボルに変換し、c01-c09、cam、cpmとする ●ステージ（60fps)にフォント画像を表示したい大きさの矩形を描き、シンボルに変換し、適当に名前を付ける。 この矩形シンボルを横に６つ並べ、インスタンス名を左から、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番目の文字からｎ個の文字を抽出 | ||
| ２．アナログ時計 | ||
| ●ステージ（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の実施 １00ミリ秒間隔で、関数nowを実施 関数now 関数workを実施 関数work 短針の角度 長針の角度 秒針の角度 |
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
| HOME Flash講座総リスト flash action script 基本編(11) | ||
