« ASP.NETでページの多言語化 Part2 | トップページ | Yahoo User Interface Libraryのエフェクトサンプル »

2006年8月11日 (金)

Flex2のエフェクト

Flashの魅力といえば、やはり動きのあるページだと思います。
ただ、私のようなプログラマーにはなかなか難しかったのですが、Flex2では動きもプログラムでコントロールしやすくなっています。
以下は、mx.effects パッケージに用意されているエフェクトのいくつかを簡単に使ってみるサンプルです。
サンプルページ
example.mxml

  • Resize
    スムーズにサイズを変更するエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    widthFromに初期幅を、heightToに初期の高さを指定します。指定しなければ、現在の幅・高さになるようです。
    widthToに最終的な幅を、heightToに最終的な高さを指定します。
    <mx:Resize id="openEffect" duration="1000" target="{panel}" heightTo="300"  />
  • Fade
    フェードイン・フェードアウトのエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    alphaFromに初期透過度を、alphaToに最終的な透過度を指定します。(1.0で不透明、0.0で透明)
    対象が文字を含む場合、なぜか文字だけ透過されないようです。
    <mx:Fade id="fadeOutEffect" target="{panel}" duration="500"
        alphaFrom="1.0" alphaTo="0.0" />
  • Blur
    残像のエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    blurXFromに初期のぶれ幅を、BlurYFromに初期のぶれ高を指定します。
    blurXToに最終的なぶれ幅を、BlurYToに最終的なぶれ高を指定します。
    <mx:Blur id="blurEffect" target="{panel}" duration="2000"
        blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" />
  • Move
    スムーズに移動するエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    xFromに初期X座標、yFromに初期Y座標を指定します。指定しなかった場合は、現在の座標が適用されます。
    xToに移動先のX座標、yToに移動先のY座標を指定します。
    <mx:Move id="moveEffect" target="{panel}" xTo="500" />

また、各エフェクトにはeasingFunctionというプロパティがあり、mx.effects.easingパッケージのクラスを使って値を適用すると さらに細かな動きを加えることが出来ます。
これについては、また後日サンプルを作成してみたいと思います。

|

« ASP.NETでページの多言語化 Part2 | トップページ | Yahoo User Interface Libraryのエフェクトサンプル »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11379490

この記事へのトラックバック一覧です: Flex2のエフェクト:

« ASP.NETでページの多言語化 Part2 | トップページ | Yahoo User Interface Libraryのエフェクトサンプル »