悩みに悩んだナビゲーション。ボタンにしたりあれこれ試したけど、「ユーザーが迷わないもの」を考えた結果シンプルな形に。見た目だけでなく使いやすさって考えると奥が深いなぁ。ユーザーインターフェース(以下UI)の解説で良い物があれば読んどかないと。
Flashで作った部分にバグがあったので修正。我ながらわけわからん作り。このままじゃイケナイと、昼休みにEssential Actionscript 2.0のサンプルを試す。この本は10月ぐらいに買って半分位まで読んでたんだけど、最近他の本を買ったりPHPばかりやっていてご無沙汰。この辺でしっかりAS2でOOPな作りが出来ないとこの先もっと複雑な物を作るのは無理っぽいので勉強勉強。今日のサンプルはCurrency Converterという為替レートを変換するプログラムなんだけど、UIコンポーネントの使い方とかも含まれていて色々ためになる。こういう内容を分かりやすく解説出来るのって凄い。Moock様に感謝。
ナビゲーションその後
ナビゲーション
特集の方はPHP部分とHTMLのテンプレート部分に着手。掲載する情報そのものの扱いは大して難しくもなくすんなりサクサクと進む。問題はナビゲーション。今までは東北、関東、甲信越などエリアごとにジャンプさせるだけでよかったが今回は沢山あるのでエリアを選択した後にさらに都道府県を選択させないといけない。実際には各エリアを押すとエリアボタンの下に選択したエリア内の都道府県の一覧が表示する。当然掲載するデータがある都道府県/エリアのみ表示される。現在はPHPの方でメニューをだしているがボタンを押すたびに画面全体を読み込むのはアレなのでJavascript+DOMで必要な部分だけ表示しようかと考え中。機能を実装することよりもナビゲーションそのものを考える方が難しい。
休日
奥さんが子供を連れ出してくれたのでのんびり独り。最近会社でもよく飲んでいるミルクココアを飲みながら国内外、年代、性別を問わずiTunesで音楽を聴いてます。ちなみに今かかっているのは C.C.R.のUp Around the bend。香港の友達とチャットしたり、意味も無くオックスフォードの英英辞典をパラパラとめくって見たり。端から見たら何が楽しいか分からないだろうけど結構楽しい。
今日の買い物
ビックカメラをブラブラしていたら人気のタイトルがバリューセレクションと名乗って値下げしている。11月にニンテンドーDSを購入してからすっかりゲーマーになったのでMOTHER 1+2をやってみたい。今回ビックに言ったのは先週壊れたヘッドフォンとTVで見てすっかりハマった映画ロック・スター
のDVDを買うため。B級映画ってことで評価もそれなりだけど、80’sヘヴィメタルファンにはたまらんのです。しかも690円。とってもお買い得。ヘッドフォンは前回と同じくPanasonicの耳栓みたいなやつ
。アマゾンのレビューは芳しくないけど俺好みなので迷わずこれに。
Flash Actionscriptで湯気の表現
以前のエントリに書いたActionscriptを使った湯気の表現を解説します。
→サンプルを見る
湯気のアタッチ時に湯気の移動スピードや、幅、高さ、それと移動しながら大きさやアルファを変化させるので、その目標値を設定。onEnterFrame で湯気の左右の移動と角度の変化、アタッチ時に設定した目標値へ近づける処理をしています。湯気そのものはPhotoshopのエアブラシでちょちょっと作ったものです。
//湯気クリップ参照用
var mcs:Array = new Array();
//湯気の数
var yugeMax:Number = 12;
//湯気のコンテナクリップ
createEmptyMovieClip("yuge", 1);
//湯気アタッチ
for (var i = 0; i < yugeMax; i++) {
var mc:MovieClip = yuge.attachMovie("yuge", "yuge" + i, i);
yugeInit(mc);
mcs[i] = mc;
}
//---------------------------------------------
// 湯気初期設定
//---------------------------------------------
function yugeInit(mc:MovieClip) {
//この辺りの数値を変えると動きが変わります
mc._x = Math.random() * Stage.width;
mc._y = Stage.height * (Math.random() * 1 + 1);
mc.step = Math.random() * 0.2 + 0.1;
//徐々にここで設定した幅、高さに湯気が変化していきます。
mc.xscale = 50 + Math.random() * 50;
mc.yscale = 100 + Math.random() * 100;
mc._alpha = 100;
//徐々にここで設定したアルファに変化していきます。
mc.alpha = Math.random() * 80;
//湯気の角度。
mc._rotation = Math.random() * 10 - 5;
mc.onEnterFrame = yugeEnterFrame;
}
//---------------------------------------------
// 湯気メイン
//---------------------------------------------
function yugeEnterFrame() {
for (var i = 0; i < mcs.length; i++) {
var mc:MovieClip = mcs[i];
mc._y -= mc.step;
//初期設定で指定した値に徐々に近づいていきます。
mc._x += (Math.random() * 0.2 - 0.05);
mc._alpha += (mc.alpha - mc._alpha) / 20;
mc._xscale += (mc.xscale - mc._xscale) / 3;
mc._yscale += (mc.yscale - mc._yscale) / 5;
//湯気が画面からでたら新しく湯気を設定します。
if (mc._y < -mc._height) {
yugeInit(mc);
}
}
}
***** おすすめの参考書 *****
macromedia FLASH ActionScriptスーパーサンプル集
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]