Flex クイックスタート： 簡単なユーザインタフェースの作成
目次
エフェクトの追加
エフェクトは、短時間に発生するコンポーネントの変化です。 エフェクトにはコンポーネントのフェード、サイズ変更、移動などがあります。 コンポーネント上でマウスをクリックする、コンポーネントにフォーカスする、コンポーネントを表示するなどのトリガとエフェクトを組み合わせて、ビヘイビアを作成することができます。 MXML では、エフェクトをコントロールまたはコンテナのプロパティとして適用します。 Adobe® Flex™ には、デフォルトプロパティを割り当てたエフェクトが用意されています。
ビヘイビアを使用して、ユーザやプログラムによるアクションに応答するアニメーション、動き、サウンドをアプリケーションに追加することができます。 ビヘイビアを使用すれば、ダイアログボックスにフォーカスが当たったときにボックスを微妙に振動させることや、ユーザが不正な値を入力したときにサウンドを再生するといったことができます。
Flex のトリガプロパティは CSS （Cascading Style Sheet）スタイルとして実装されます。 『Adobe Flex 2 Language Reference』の「Effects」という見出しの下にトリガが一覧表示されています。
ビヘイビアを作成するには、一意の ID で特定のエフェクトを定義して、それをトリガにバインディングします。 たとえば、次のコードでは 2 つのズームエフェクトを作成します。 1 つのエフェクトでコンポーネントをわずかに縮小し、もう 1 つで元のサイズに戻します。 一意の ID を使用して、これらのエフェクトを Button コンポーネントの mouseDownEffect および mouseUpEffect トリガに割り当てます。
すると、 autoLayout Panel コンテナの autoLayout プロパティが "false" に設定されます。■タグのみの文節を開けません■ "false". これは、ボタンのサイズが変更されたときに、パネルのサイズも変更されることを防ぐためです。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="170" height="140" > <!-- Define effects --> <mx:Zoom id="shrink" duration="100" zoomHeightTo=".9" zoomWidthTo=".9" /> <mx:Zoom id="revert" duration="50" zoomHeightTo="1" zoomWidthTo="1" /> <mx:Panel title="Bouncy Button" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" autoLayout="false" left="41" top="24" right="42"> <!-- Assign effects to target --> <mx:Button id="bouncyButton" label="Click me!" mouseDownEffect="{shrink}" mouseUpEffect="{revert}" /> </mx:Panel> </mx:Application>
結果
このコンテンツを視聴するには Flash が必要です
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
エフェクトメソッドとイベントの使用
エフェクトのメソッドを呼び出して、再生方法を変更することができます。 たとえば、エフェクトを一時停止するには、 pause() メソッドを呼び出し、再開するには resume() メソッドを使用します。■タグのみの部分を開けません■ resume() メソッドを使う必要があります。 エフェクトを終了するには end() メソッドを呼び出します。■タグのみの部分を開けません■ end() メソッドを使う必要があります。
さらに、エフェクトは開始時と終了時に startEffect および endEffect イベントを送信します。 これらのイベントを受信して、イベントのスタータスの変化に応答することができます。
次の例では、Move エフェクトのメソッドとイベントを使用して、簡単なゲームを作成します。 ゲームの目的はヘリコプターをダーツ盤にできるだけ近づけることです。ヘリコプターがダーツ盤にぶつかってはいけません。 近ければ近いほど得点が高くなります。
このゲームでは、SWF ファイルのライブラリにあるムービークリップのシンボルを使用して、ダーツ盤、ヘリコプターおよび爆発のアニメーションを表しています。 詳しくは、「アセットの埋め込み」を参照してください。.
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="525" height="450" viewSourceURL="src/EffectsChopperGame/index.html" > <mx:Script> <![CDATA[ // Easing equations have to be explicitly imported. import mx.effects.easing.Quadratic; // Embed movie clip symbols from the library of a Flash SWF. [Embed(source="assets/library.swf", symbol="DartBoard")] public var DartBoard:Class; [Embed(source="assets/library.swf", symbol="Helicopter")] public var Helicopter:Class; [Embed(source="assets/library.swf", symbol="Explosion")] public var Explosion:Class; // Event handler for the effectEnd event. private function endEffectHandler():void { helicopter.visible = false; explosion.visible = true; score.text = "0"; pauseButton.enabled = resumeButton.enabled = selfDestructButton.enabled = false; } // Event handler for the "Play Again!" button. private function playAgainHandler():void { // Call resume() to make sure effect is not // in paused state before it ends or calling // pause() on it later will not work. flyChopper.resume(); // End the effect flyChopper.end(); // Reset assets to their original states. helicopter.visible = true; explosion.visible = false; startButton.enabled = pauseButton.enabled = resumeButton.enabled = selfDestructButton.enabled = true; } private function pauseChopperHandler():void { // Pause the Move effect on the helicopter. flyChopper.pause(); // Calculate player's score based on the inverse of the // distance between the helicopter and the dart board. score.text = String(Math.round(1/(helicopter.x - dartBoard.x)*10000)); pauseButton.enabled = false; resumeButton.enabled = true; } private function resumeChopperHandler():void { flyChopper.resume(); resumeButton.enabled = false; pauseButton.enabled = true; } ]]> </mx:Script> <!-- Create a Move effect with a random duration between .5 and 1.5 seconds --> <mx:Move id="flyChopper" target="{helicopter}" xBy="-290" easingFunction="mx.effects.easing.Quadratic.easeIn" duration="{Math.round(Math.random()*1500+500)}" effectEnd="endEffectHandler();" /> <mx:Panel title="Effects Chopper Game" width="100%" height="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" horizontalAlign="right" > <!-- The game canvas --> <mx:Canvas width="100%" height="100%"> <mx:Image id="dartBoard" width="100" height="150.2" source="{DartBoard}" x="10" y="20" /> <!-- Hide the explosion animation initially. --> <mx:Image id="explosion" source="{Explosion}" y="50" x="0" added="explosion.visible = false;" /> <mx:Image id="helicopter" width="80" height="48.5" source="{Helicopter}" right="0" y="67" /> </mx:Canvas> <!-- Instructions --> <mx:Text width="100%" color="#ff0000" text="Pause the helicopter as close as possible to the dartboard without hitting it." textAlign="center" fontWeight="bold" /> <mx:HBox> <mx:Label text="Score:" fontSize="18"/> <mx:Label id="score" text="0" fontSize="18"/> </mx:HBox> <mx:ControlBar horizontalAlign="right"> <mx:Button id="startButton" label="Start" click="flyChopper.play(); startButton.enabled=false;" /> <mx:Button id="pauseButton" label="Pause" click="pauseChopperHandler();"/> <mx:Button id="resumeButton" label="Resume" click="resumeChopperHandler();"/> <mx:Button id="selfDestructButton" label="Self destruct!" click="flyChopper.resume(); flyChopper.end();" /> <mx:Button label="Play again!" click="playAgainHandler();"/> </mx:ControlBar> </mx:Panel> </mx:Application>
ヒント： エフェクトの end() メソッドを呼び出したときにエフェクトが停止している場合は、 pause() メソッドを呼び出しても、同じエフェクトをもう一度再生するときに影響しません。 この問題を解決するためには、メソッドに対して resume() メソッドを呼び出してから end() メソッドを呼び出します。■タグのみの部分を開けません■ end() メソッドを使う必要があります。 要するに、一時停止中のエフェクトを再開しないで、終了してはいけません。
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
詳細情報
コンポーネントへのスタイル適用について詳しくは、『Flex 2 Developer's Guide』の「Using Styles」を参照してください。
著者について
Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。 設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。 常に強固な意見を持ち、活気にあふれ情熱的。 いつも笑顔を絶やさず、ガムをかみながら歩くこともある。
