◆OS風ディレクトリー構造のナビゲーション
参考雑誌(記事参照) :『2004年6月号ウェブ・クリエーターズ(Flashクリエイティブテクニック)』
OS風ナビゲーションということで、ブラウザをフォルダに見立てウィンドウ内にアイコンを配置、クリックで次のディレクトリへ展開するようなナビゲーションを作成しました。
Stageオブジェクトを使用して、「ムービーの表示位置・伸縮の設定」「ムービーが表示されているサイズを調べる」「リサイズされたときにイベントを実行する」等の機能をうまく組み合わせて設計しています。
又、ディレクトリー構造をもつ構成にXMLを組み込んで、XMLの各ノードにはファイル名・種類・URL等の属性が記述してあり、これをFlash内で読み取りアイコンやテキストでビジュアル化しています。
更に、これらの属性を配列化することで、ファイルのソート機能を実現し、3つのソート方法(属性値での並び変え・フォルダアイコンを優先させる等)のソート条件を関数として定義し、それをもとにファイルのソートを実行出来ます。
ディレクトリ移動の際には移動履歴を配列に記録し、ヒストリーバック等の機能も可能にしています。
◆画像ギャラリー
参考雑誌(記事参照):『2004年4月号ウェブ・クリエーターズ(Flashクリエイティブテクニック)』
製作したムービーは、サムネイル画像とメイン画像を用意すれば、外部テキストに記述された変数を書き換えるだけで更新出来るような構成になっています。このような構成にする上でポイントとなるのは、外部テキストと外部JPG画像から読み取ったデーターを最大限に利用する設計になっています。
外部テキストに記述した画像の枚数からは、必要なボタンの数やページ数がわかります。また、外部JPG画像からは、ファイルサイズを読み取ることでローディング表示がわかり、幅と高さを読み取ることで画像を配置する位置などが決定出来ます。
HTMLとの差別化を図る為に枠の大きさを画像の大きさに合わせてバネのような動きで変形するようにしました。
◆疑似3Dナビゲーション
参考雑誌(記事参照):『2003年9月号ウェブ・クリエーターズ(Flashクリエイティブテクニック)』
ユーザビリティを意識したナビゲーション作品の紹介です。
矢印と番号の2通りのナビゲーションを用意し、コンテンツからコンテンツへの場面転換に疑似3Dを用いることで触って楽しめるナビゲーションを製作しました。
コンテンツには画像を用いて、JPEGファイルを外部から読み込み、3種類のエフェクトをランダムに設定することでユーザーを飽きさせない工夫を凝らしています。
コンテンツが遷移する際、番号ナビゲーション上のピンク色のマスクがかった現在地が上下左右方向に遷移し、その都度ステージが3D回転する方向の決定をスクリプトにより設定されています。
今回の疑似3D表現は3次元情報(x,y,z)を、2次元(x、y)の面に投影したものを描画することで表現しています。
◆自動車レースゲーム
参考書籍:『ラーニングバイブルFlash MX ActionScript プロフェッショナルテクニック(ゲームの作成)』
キーボードでプライヤーを操作し、敵車を避けながらどこまで走れるかを競うゲームです。
得点を重ねる毎にゲームの難易度が上がり、徐々に難しくなっていきます。また、ジャンプすることで敵車を避けたり、燃料タンクを拾うことで燃料の回復が出来ます。
大きなポイントは、敵車の設定です 。1つの敵車MCから複製して、プレイヤーに与えるダメージ、作成間隔から敵車作成用タイマー、道路幅に対する移動範囲、三角関数を使った円運動、移動速度など、変数を用いてランダム関数を設定しています。
どのムービークリップが何をするのかを明確にし、それ以外の処理を行わないようにします。そういうスタンスでコンテンツ作成に臨めば、どんな複雑なコンテンツでもブロックを積み上げるようにスムーズに作成出来ると思います。
◆星と波を使ったランダムアニメーション
参考書籍:『ラーニングバイブルFlash MX ActionScript プロフェッショナルテクニック(ランダムなアニメーション)』
参考書籍:『テクニックバイブル ActionScript インターフェース:ワープコマンダー』
ランダム機能使ってのフレームスクリプトを利用したコンテンツ作品を紹介します。
このような風景をフレームアニメーションで作成しようすると、どうしても均一的な動きとなり不自然な風景となってしまいます。
そこで、ランダム機能を使って星と波の自然な動きを実現しました。
先ずは、星が瞬く夜空です。星々は不規則に瞬き、しばらく瞬くと別の場所に移動します。移動する時間はランダムです。また星の大きさもランダムに変化します。
もう2つ目は、波のある海面です。フレームアニメーションを利用した波をActionScriptで制御し、最後の上の方ほど波を小さく表示させて、擬似的に奥行きを表現しています。
◆ドラック&ドロップとワープコマンダー
参考書籍:『ラーニングバイブルFlash MX ActionScript プロフェッショナルテクニック(配列によるデータ管理)』
参考書籍:『テクニックバイブル ActionScript インターフェース:ワープコマンダー』
各カードは、ドラック&ドロップが可能なカードです。また、カート置き場にドロップするとカードはカート置き場に吸着します。
各カードにはActionScriptを書かずに、他のムービークリップのイベントハンドラに対してメゾットを割り当て、各カードのムービークリップに対し機能を割り当てています。
もう1つは、各カードがエリアに吸着することによって、上部のコンテンツがスライドし、該当するコンテンツまで移動します。
上部コンテンツをは、各カードがエリアに吸着のする時点で、操作するように設計しました。
その為、吸着の有無で、操作の指令判断を下し、複数の関数を呼び出しています。
◆閲覧履歴の記録と3つのエフェクト演出
参考書籍:『ラーニングバイブルFlash MX ActionScript プロフェッショナルテクニック(配列によるデータ管理)』
参考雑誌:『2004年5月号ウェブ・クリエーターズ(Flashで画像表示にエフェクトを使って心地よく見せる)』
配列の応用例として、ページを見た順番の「閲覧履歴」を記録することで、ウェブブラウザの「戻るボタン」のような機能を実現しました。
ページ移動ボタンを押すたびに要素が追加されていき、Backボタンを押すごとに要素が削除され、前にいたページに戻ります。
もう1つは、画像が現れる際にエフェクトを使っています。
84個の並んだ正方形のマスクが徐々に小さくなって消えるエフェクトなど3つのエフェクトをランダム使用することでユーザー飽きさせないような工夫を凝らしました。
又、これらは設定を少し追加することによってエフェクトの種類を増やすことが出来ます。
◆ナンバー入力メニュー
参考書籍:『テクニックバイブル ActionScript メニュー:ナンバー入力メニュー』
参考書籍:『ラーニングバイブルFlash MX ActionScript Webインターフェース(数学的な論理の利用)』
メニューに指定された3ケタの数字を入力して「ENTER」キーを押すと、該当するギャラリーが画面に表示されます。
メニューに無い数字を入力すると、エラー画面が表示されます。3ケタの数字を入力して確定させるまでの動作を4コマで構成していいます。
ユーザーがキーボードからナンバーを入力するたびに、次のコマへ進んでその場で停止します。
【fscommand】を利用して全てのキー入力を受付られるようにし、キーコードを取得するための関数を定義しています。
その定義した関数を実行させて取得した数字をもとに、その数字を表示させるコマへ移動します。このとき、フレームラベルを数字と対応出来るように設計しています。
◆ランダム表示ギャラリー
参考書籍:『テクニックバイブル ActionScript インタラクティブムービー:ランダム表示ギャラリー』
ムービーを表示させると、小さな画像がランダムな位置や大きさ、角度で配置されます。
さらに、画像を押すと、その画像が大きなサイズで表示され、再びランダムに配置されます。
インスタンスの複製には、【duplicateMovieClip】を使用して、ボタン画像を配列の要素で10枚複製しています。
又、引数を入れるランダム関数を設定し、画像の配置や大きさ、位置、角度の範囲を設定し、その範囲を変化させるようにしました。
◆ドラック&ドロップメニュー
参考書籍:『テクニックバイブル ActionScript メニュー:ドラック&ドロップメニュー』
メニューボタンをスクリーン上にドラック&ドロップすると、スクリーンには、画像が表示され、その右にはサブメニューが表示されます。
さらに、サブメニューをドラック&ドロップするとスクリーンの表示が入れ替わります。
ボタンをドロップした際に実行される関数を定義しました。
関数はドロップされたメニューやサブメニューのインスタンスによって外部ファイルの読込み画像を振り分け、さらにメニューがドロップされた場合はサブメニューの表示を切り替えるように、設計しました。
ボタン(Btn)が押されたことによって、ムービークリップ(mc)の重なり順を最上層にし、アニメーションの自動再生・自動ループを利用して、ボタンをドロップした瞬間だけ再生されます。
◆ビーチ写真セレクト拡大ルーペ
参考書籍:『テクニックバイブル ActionScript インタラクティブ・ムービー:拡大ルーペ』
参考書籍:『テクニックバイブル ActionScript メニュー:スクロールメニュー』
ビーチでの写真女性を使って、写真を虫眼鏡で見るような、拡大ルーペを作りました。
アピールポイントは、画面上でルーペを移動させると、その部分が拡大して表示します。
ルーペはドラックして画面上の任意の場所に動かすことが出来ます。
この作成では、もとの画像の上にさらに同じ画像を重ね、その画像を拡大させています。
その画像を拡大させたことにより、もとの画像との座標にズレが生じてしまいます。
そこで、本来の表示位置の座標から拡大によってズレた座標分だけマイナス方向に移動させて位置を合わせています。
又、読み込んだ画像を表示させるだけでは味気がないので、読み込んだ画像をバネのような動きで変形するようにして、フラッシュらしくHTMLとの差別化を図りました。
◆中華料理店お薦めメニュー
参考書籍:『テクニックバイブル ActionScript メニュー:プルダウン・メニュー』
参考書籍:『ラーニングバイブルFlash MX ActionScript Webインターフェース(数学的な論理の利用)』
参考サイト:コーヒーメーカーのネスレさんのトップ頁で使用しているFlashメニュー
プルダウンメニューとしての設計を応用した形で、横へ移動するメニュー設計に挑戦しました。
アピールポイントは、左を基点として、左右へ移動するズレ幅を算出し、それぞれの位置をフレームを読み込む毎に移動する関数を定義してします。
このようなメニューは、今回の中華料理店メニュー紹介をモデルとして、製作したのと同様に、レストランや喫茶店等のメニュー紹介等でも応用出来ると思います。
◆洋菓子専門店
参考書籍:『テクニックバイブル ActionScript メニュー:スクロールメニュー』
参考サイト:食品メーカーのキユーピーさんのトップ頁で使用されているFLASHメニュー
デザインコンセプトは、ケーキ店に相応しく、カジュアルで癒し系のイメージの雰囲気を作り出す為に、背景色を淡い色にして、食欲をそそるために、赤系の配色をメインに設計しています。
今回は、タイムラインでのアニメーションを使用せず、全てアクションスクリプトで設計したものとなっています。
アピールポイントは、スクロールしながら、端を越えるとループ出来るのと、カーソルの移動距離に応じて、スクロール速度が速くなるように、見事設計に成功しました。
◆ローテーションギャラリー猫編
参考書籍:『テクニックバイブル ActionScript インタラクティブ・ムービー:ローテション・ギャラリー』
可愛い猫ちゃん達のフォトギャラとして、立体的なギャラリーを作成して見ました。
私自身は、初のフラッシュでの立体的な作品です。
三角関数を利用しての立体的な回転を行いながら、画像を表示させ、円運動を反転させたり、回転速度を調節出来るように、設計しました。
他に水族館や海の中を魚が回遊しているような、ものにも応用出来ると思います。
かっこ良く見せる立体感のあるアクション的な動きや立体的な図形を動かすことにも、挑戦して行きます。
◆レストランビル紹介
参考書籍:『テクニックバイブル ActionScript インターフェース:ワープコマンダー』
続々とFLASH作品を紹介します。
レストランビルを仮定モデルとして、各エレベーター毎にお店を紹介する作品です。
エレベーターを中心として、ビルの背景画像を移動させることにより、各お店のコンテンツの表示を切り替える仕組みになっています。
今回は、アクションスクリプトの中で、2次元配列を使用して、各階毎に座標位置を設定しています。
今度は、サンシャイン60や六本木ヒルズなどの、スケールの大きい多様な目的別案内等にも挑戦して行きます。
◆選手紹介メニュー
参考書籍:『Macromedia Flash MX ポケットリファレンス』
参考サイト:『社会人ラグビーチームサイトのラグビー講座などのイラストを参考』
Flash作品を紹介します。
トップページではなく、ラグビーチームサイトの部員紹介ページに使われるメニューととして紹介します。
ラグビーは、経験者や専門的な知識がある人でないと敬遠されがちになってしまうスポーツです。
その為に 、ラグビーを知らない人でも、わかり易くポジションを説明出来る取っ掛かりとして、イメージし易いものを作成しました。
又、これを生かして、詳細なルール説明もイメージし易い様に、リアクションを使って楽しめるページにチャレンジして行きたいと思っています。
















