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 トリガのコードヒント上の表示

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

サンプル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>

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

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

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

       1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。