Flash術
Flashでサイトを制作する。これが当たり前のようになってきた。最近のブロードバンド化により、通信環境に対する問題が軽減され、今までHTMLベースでやってきたことがFlashにシフトし、より豊かな表現が可能になってきたのだ。表現の幅は確実に広がっている。オリジナリティあふれる表現を見つけだそう。
fujimaki 藤牧 篤   ATSUSHI FUJIMAKI
Web制作会社にてデザイナーとして経験を積む。
2001年、フリーで活動を開始し、現在、NON-GRIDにてアートディレクションから制作までをこなす。


NON-GRID >> http://www.non-grid.com/
ARCHI-TYPE >> http://www.archi-type.com/
■バックナンバーへ
■VOL.58 [SLIDE&BOUND : スライドしながら跳ね返る(4)]

■VOL.59 [MX tech 1 : ボタン機能を無効にする(1)]

VOL.60 [ MX tech 1 : ボタン機能を無効にする(2) ]

 Flash MXが登場してから大分経つが、プラグインの普及を考えるとまだプレイヤー5をターゲットとした制作が必要な場合も多々ある。しかし、MXになり作業が軽減されるような機能や、非常に便利だなと思える機能が多く追加され、出来ればバージョン6をターゲットとした制作に移行したいものだ。プラグインの問題などユーザの環境を考えて、より多くの人が見ることの出来るサイトにすることも非常に重要だが、制作側が最新のプラグインを必要とするサイトを制作し、プラグインのインストールを促していかなければ、普及率もなかなか上がっていかないのだとも思う。なので、この連載でもMXの機能も使用しながら紹介を行っている。今回からは、幾つかの新機能に焦点を当てて紹介していく。
 今回その一つ目は、ボタンを無効にするアクションだ。例えば、ナビゲーションボタンがありボタンを押すとモーションが始まり次の画面へ移り、ストップする。このモーションしている間に別のボタンを押すことが出来てしまうと、ものによっては誤動作をするおそれがあるので、ボタンをムービークリップにし、モーション中は別のフレームに配置したグラフィックを表示させるなどして対処していたが、MXからは今回紹介するアクションを設定するだけで済んでしまう。
今回の作品は、下部に配置したボタンをクリックすると、イメージが次々とスライドしていく仕組みだ。ここでは、スライド中にボタンを無効にしている。

 前回から、MXより追加された機能を幾つか紹介していく。ボタンを無効にする方法の2回目だ。今回は、前回作成したパーツを組み合わせて、主となるアクションを設定する。
1. パーツの組み合わせ

 それでは、前回作成したパーツを組み合わせていく。スライドするモーションを設定したムービークリップを開こう。
新規レイヤーを追加し、1フレーム目のみに1番目に表示させるタイポ用ムービークリップを配置する。

capture

1フレーム目にムービークリップを配置

 今度は、スライドが終わる40フレーム目に、2番目に表示させるタイポ用ムービークリップを配置する。

capture

40フレーム目にムービークリップを配置

 そして、80フレーム目に、3番目に表示させるタイポ用ムービークリップを配置する。

capture

80フレーム目にムービークリップを配置

 次に、余計な部分が見えないようにマスクを設定する。
マスクレイヤーを追加し、300*300pxの四角形を描画する。タイポレイヤー、イメージレイヤー共にマスクが反映されるように調整しよう。

capture

マスクレイヤーを追加

2. .アクションの設定

 次に、アクションを設定していく。ボタンを無効にするアクションがここで出てくる。
新規レイヤーを追加し、1フレーム目と2フレーム目に、図のようなアクションを設定する。「nav」は後に設定するボタンのインスタンス名で、「enabled」はインスタンスを機能させるかさせないかを判断させるアクションだ。「true」で機能し、「false」で無効になる。ちなみに「enabled」を「_visible」とすると、インスタンスを表示させなくすることが出来る。

capture

1、2フレーム目に設定したフレームアクション

 そして、40フレーム目と41フレーム目にも設定する。

capture

40、41フレーム目に設定したフレームアクション

 また、80フレーム目と81フレーム目にも設定する。

capture

80、81フレーム目に設定したフレームアクション

 120フレーム目には、1フレーム目に移動させるアクションを設定する。

capture

120フレーム目に設定したフレームアクション

[ NEXT→]