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

» 2007年07月19日 00時00分公開

[成瀬勉，クラスメソッド]

　前回は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&uuot; 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>