現場で使えるFlex実践テクニック（2）　1/2
FlexアプリにFlashの視覚効果を取り入れるには？

クラスメソッド
成瀬　勉
2007/7/19

　前回はFlexアプリケーションで使える多彩な画面遷移方法について解説しました。今回は、Flashの表現力をFlexアプリに取り入れ、さまざまな視覚効果を得る方法について解説します。

　実際に動かせるサンプルも掲載したので、その効果を“体験”してみてください。

　SWFならではの表現力でユーザビリティを向上する

　Flexアプリケーションの実行形式はFlashと同じSWFですので、FlexアプリケーションにFlashの表現力を取り入れることができます。

　派手な見掛けを重視したアニメーションをFlexで作る意義を見いだすのは難しいですが、よく練られた、適度な視覚効果はユーザビリティの向上に非常に効果があります。

■ ビヘイビア機能とは何か？

　特に、インタラクティブな機能を簡単に実装する仕組みとして、Flexにはビヘイビアという機能があります。「ビヘイビア」とは振る舞いの意で、ユーザーからのある入力や状態の変化に伴うオブジェクトの振る舞い（視覚上の変化）を指定できます。

　ビヘイビアを使うためには、トリガとエフェクトという仕組みを理解する必要があります。

　トリガとエフェクトによるビヘイビアの設定

■トリガとは何か？

　トリガとは、クリックや特定のプロパティの変化など、コンポーネントに対して行われた操作を指します。

　例えば、ButtonにはmouseDownEffectというトリガがあり、Button上でマウスを押下したときの視覚変化を設定できます。

表1　Flexで用意されているトリガの一覧

トリガ名 トリガ addedEffect コンテナにコンポーネントが子として追加された creationCompleteEffect コンポーネントが作成された focusInEffect コンポーネントがキーボードのフォーカスを取得した focusOutEffect コンポーネントがキーボードのフォーカスを失った hideEffect コンポーネントのvisibleプロパティがtrueからfalseに変化し、非表示状態に推移した mouseDownEffect ユーザーがコンポーネント上にマウスポインタを置いた状態でマウスボタンを押した mouseUpEffect ユーザーがマウスボタンを離した moveEffect コンポーネントが移動された resizeEffect コンポーネントのサイズが変更された rollOutEffect ユーザーがマウスポインタをコンポーネント外に移動した rollOverEffect ユーザーがマウスポインタをコンポーネント上に移動した showEffect コンポーネントのvisibleプロパティがfalseからtrueに変化し、表示状態に推移した

■エフェクトとは何か？

　エフェクトは一定時間に起こる、視覚または聴覚的な変化を定義するものです。コンポーネントの位置やサイズなどの変化を指定できます。

　エフェクトには、トゥイーンエフェクト、マスクエフェクト、サウンドエフェクトがあります。

• トゥイーンエフェクト
  Move、Resize、Fade、Blurなどコンポーネントの形状や視覚効果を変化させるエフェクト
• マスクエフェクト
  特に、showEffectとhideEffectに使用する、IrisやWipeなど表示・非表示が切り替わる際のエフェクト
• サウンドエフェクト
  サウンドの再生に関するエフェクト。ボリュームやパンを変化させることができる

■ビヘイビア機能のサンプルを動かすと？

　では、実際にサンプルを見てみましょう。

BehaviorSample1.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 layout="vertical">     <mx:Resize id="resize" widthFrom="80" widthTo="120"                heightFrom="80" heightTo="120" />     <mx:Button id="button" mouseDownEffect="resize" width="80"                height="80" /> </mx:Application>

　まず、Applicationタグの直下にエフェクトを定義します。

　エフェクトごとに、変化するプロパティの初期値と最終的な値や変化の割合、変化している時間などを設定できます。例では、widthとheightをそれぞれ80から120まで変化させるようなリサイズエフェクトを定義し、idをresizeとしています。

　続いて、ButtonのmouseDownEffectトリガに対するエフェクトをidで指定します。

図1　トリガのコードヒント上の表示

　サンプルを実行してボタンを押下すると、アニメーションしながら拡大する様子が見て取れるはずです。

サンプル1　ボタンをクリックすると拡大

　エフェクトが実行されると、実際に対象のコンポーネントのプロパティが変化します。そのため、エフェクトの実行後はコンポーネントの状態はアニメーションの最後の状態になります。

　複数のエフェクトの組み合わせ

　複数のエフェクトを数珠つなぎに連続して実行したり、同時に実行したりするようなエフェクトを定義することも可能です。SequenceとParallelがそれです。

BehaviorSample2.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 layout="vertical">     <mx:Sequence id="sequence">         <mx:Resize widthFrom="80" widthTo="120" heightFrom="80"                    heightTo="120" />         <mx:Rotate />     </mx:Sequence>     <mx:Parallel id="parallel">         <mx:Rotate />         <mx:Resize widthFrom="80" widthTo="120" heightFrom="80"                    heightTo="120" />     </mx:Parallel>     <mx:Button mouseDownEffect="sequence" width="80" height="80" />     <mx:Button mouseDownEffect="parallel" width="80" height="80" /> </mx:Application>

　<mx:Sequence>または<mx:Parallel>をエフェクトと同じようにApplication直下に定義し、その子として複数のエフェクトを記述します。トリガには<mx:Sequence>または<mx:Parallel>のidを指定します。

　<mx:Sequence>では、定義したエフェクトが順番に実行されます。<mx:Parallel>では定義したエフェクトが同時に実行されます。

サンプル2　ボタンをクリックすると……

1/2

INDEX
現場で使えるFlex実践テクニック（2） FlexアプリにFlashの視覚効果を取り入れるには？
	Page1 SWFならではの表現力でユーザビリティを向上する／トリガとエフェクトによるビヘイビアの設定／複数のエフェクトの組み合わせ
	Page2 ステートを移行する際の視覚効果：トランジション／エフェクトの変化の速さを変える：イージング／ユーザーへの誘導を直感的に伝えるために

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）