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

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

[成瀬勉,クラスメソッド]
前のページへ 1|2       

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

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

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

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

TransitionSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">

    <mx:Script>
    <![CDATA[
        private function selectForm(event:Event):void{
            switch(event.currentTarget.selectedItem.label){
            case "カレー":
                currentState = "curry";
                break;
            case "ハンバーグ":
                currentState = "hamburger";
                break;
            }
        }
    ]]>
    </mx:Script>

    <mx:states>
        <mx:State name="curry">
            <mx:AddChild relativeTo="{form1}" position="lastChild">
                <mx:FormItem label="カレーの具は?">
                    <mx:CheckBox label="チキン" />
                    <mx:CheckBox label="ポーク" />
                    <mx:CheckBox label="ビーフ" />
                    <mx:CheckBox label="ジャガイモ" />
                </mx:FormItem>
            </mx:AddChild>
        </mx:State>
        <mx:State name="hamburger">
            <mx:AddChild relativeTo="{form1}" position="lastChild">
                <mx:FormItem label="焼き加減は?">
                    <mx:RadioButton label="レア" />
                    <mx:RadioButton label="ミディアム" />
                    <mx:RadioButton label="ウェルダン" />
                </mx:FormItem>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition fromState="*" toState="curry">
            <mx:Move yFrom="0" yTo="{form1.y}" target="{form1}" />
        </mx:Transition>
        <mx:Transition fromState="*" toState="hamburger">
            <mx:Iris target="{form1}" />
        </mx:Transition>
    </mx:transitions>

    <mx:Form id="form1">
        <mx:FormItem label="好きな食べ物は?">
            <mx:ComboBox change="selectForm(event)"
                         prompt="選択してください">
                <mx:dataProvider>
                    <mx:Object>
                        <mx:label>カレー</mx:label>
                    </mx:Object>
                    <mx:Object>
                        <mx:label>ハンバーグ</mx:label>
                    </mx:Object>
                </mx:dataProvider>
            </mx:ComboBox>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

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

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

サンプル3 コンボボックスを選択すると、「カレー」と「ハンバーグ」でステートの動きが変わる

エフェクトの変化の速さを変える:イージング

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

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

ボタンをプルプル弾ませてみよう!

BehaviorSample3.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"
               easingFunction="{Bounce.easeOut}" />

    
<mx:Button mouseDownEffect="resize" width="80" height="80" />

    
<mx:Script>
    <![CDATA[
        import mx.effects.easing.Bounce;
    ]]>
    </mx:Script>
</mx:Application>

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

サンプル4 ボタンをクリックすると拡大してプルプル弾む!

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

ユーザーへの誘導を直感的に伝えるために

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

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

プロフィール

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

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

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



前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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