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

[成瀬勉，クラスメソッド] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

ステートを移行する際の視覚効果：トランジション

　トランジションとは、ビューステートが、あるステートから別のステートへ移行する際の視覚効果です。

　以下は、前回と同じステートのサンプルです。コンボボックスで選択した項目に応じてステートが変化します。

　今回は、さらにトランジションを指定します。コード上ではApplication直下に<mx:transitions>タグを記述します。また、<mx:transitions>タグには<mx:Transition>タグを複数記述できます。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　<mx:Transition>タグでは、どのステートからどのステートへ移行したときに実行されるかをfromState、toStateでステートのnameを指定します。*（ワイルドカード）を指定することですべてのステートを対象とすることが可能です。

　<mx:Transition>タグには、実際のエフェクトを記述します。ここでは、エフェクトの対象とするコンポーネントをtargetにidで指定しています。複数のコンポーネントをエフェクトの対象とするにはtargetsに配列で指定します。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　通常では、エフェクトの変化の度合いは一定ですが、イージングを使うと、だんだん加速しながら目的の値まで変化したり、逆に減速しながら変化したり、途中でいったん戻ったりしながら変化したりと、複雑な変化を指定できます。

　イージングを使うには、エフェクトのeasingFunctionに変化の仕方を定義した関数を指定します。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　この例では、Bounceというイージングを定義しています。いったん目的の値まで変化した後に、ちょっとバウンドするような効果があります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　イージングを用いると、コンポーネントの動作に表情を付けることができます。

　このように、データの流れをうまくアニメーションで表現することによって、ユーザーが次に何をすればいいかなど、直感的に伝えることができます。ただ単に目立たせるためにというよりも、ユーザビリティ向上のためにFlashの表現力を取り入れてみてはいかがでしょうか。

　次回は、Flexアプリケーションにおけるドラッグ＆ドロップの実装方法について解説します。

成瀬　勉（なるせつとむ）
クラスメソッド株式会社　エンタープライズサービス部門アーキテクト

Macromedia FLASH MX 2004 Developer認定技術者
FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。

クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。
ブログ（C:\narun）も更新中。

「現場で使えるFlex実践テクニック」バックナンバー