前回はFlexアプリケーションで使える多彩な画面遷移方法について解説しました。今回は、Flashの表現力をFlexアプリに取り入れ、さまざまな視覚効果を得る方法について解説します。
実際に動かせるサンプルも掲載したので、その効果を“体験”してみてください。
SWFならではの表現力でユーザビリティを向上する
Flexアプリケーションの実行形式はFlashと同じSWFですので、FlexアプリケーションにFlashの表現力を取り入れることができます。
派手な見掛けを重視したアニメーションをFlexで作る意義を見いだすのは難しいですが、よく練られた、適度な視覚効果はユーザビリティの向上に非常に効果があります。
■ ビヘイビア機能とは何か？
特に、インタラクティブな機能を簡単に実装する仕組みとして、Flexにはビヘイビアという機能があります。「ビヘイビア」とは振る舞いの意で、ユーザーからのある入力や状態の変化に伴うオブジェクトの振る舞い（視覚上の変化）を指定できます。
ビヘイビアを使うためには、トリガとエフェクトという仕組みを理解する必要があります。
トリガとエフェクトによるビヘイビアの設定
■トリガとは何か？
トリガとは、クリックや特定のプロパティの変化など、コンポーネントに対して行われた操作を指します。
例えば、ButtonにはmouseDownEffectというトリガがあり、Button上でマウスを押下したときの視覚変化を設定できます。
| トリガ名 | トリガ | |
|---|---|---|
| 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など表示・非表示が切り替わる際のエフェクト - サウンドエフェクト
サウンドの再生に関するエフェクト。ボリュームやパンを変化させることができる
■ビヘイビア機能のサンプルを動かすと？
では、実際にサンプルを見てみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
まず、Applicationタグの直下にエフェクトを定義します。
エフェクトごとに、変化するプロパティの初期値と最終的な値や変化の割合、変化している時間などを設定できます。例では、widthとheightをそれぞれ80から120まで変化させるようなリサイズエフェクトを定義し、idをresizeとしています。
続いて、ButtonのmouseDownEffectトリガに対するエフェクトをidで指定します。
サンプルを実行してボタンを押下すると、アニメーションしながら拡大する様子が見て取れるはずです。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
エフェクトが実行されると、実際に対象のコンポーネントのプロパティが変化します。そのため、エフェクトの実行後はコンポーネントの状態はアニメーションの最後の状態になります。
複数のエフェクトの組み合わせ
複数のエフェクトを数珠つなぎに連続して実行したり、同時に実行したりするようなエフェクトを定義することも可能です。SequenceとParallelがそれです。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
<mx:Sequence>または<mx:Parallel>をエフェクトと同じようにApplication直下に定義し、その子として複数のエフェクトを記述します。トリガには<mx:Sequence>または<mx:Parallel>のidを指定します。
<mx:Sequence>では、定義したエフェクトが順番に実行されます。<mx:Parallel>では定義したエフェクトが同時に実行されます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Copyright © ITmedia, Inc. All Rights Reserved.