カスタムエフェクトトリガを作成することにより、標準の Flex トリガでは実現できないような特殊な要件を満たすことができます。エフェクトトリガは、トリガを呼び出す対応するイベントと組み合わせて使用します。例えば、Button コントロールには、mouseDown イベントと mouseDownEffect トリガの両方が存在します。イベントは、ユーザーがコンポーネントをクリックしたときに、対応するエフェクトトリガを起動します。mouseDown イベントは、ユーザーがコンポーネントを選択したときに実行されるイベントリスナーを指定する場合に使用します。mouseDownEffect トリガが、エフェクトとトリガを関連付けます。
ユーザーの操作に対する応答として、コンポーネントの明度レベルを設定するエフェクトを適用するとします。次の例は、新しい bright プロパティを使用し、この bright プロパティの変化に基づいて、darken と brighten という 2 つのイベントを送出するカスタム Button コントロールを示しています。コントロールは、2 つの新しいエフェクトトリガ darkenEffect と brightenEffect も定義します。これらは、それぞれ darken イベントおよび brighten イベントと組み合わされます。
<?xml version="1.0"?>
<!-- effects\myComponents\MyButton.mxml -->
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Metadata>
<!-- Define the metadata for the events and effect triggers. -->
[Event(name="darken", type="flash.events.Event")]
[Event(name="brighten", type="flash.events.Event")]
[Effect(name="darkenEffect", event="darken")]
[Effect(name="brightenEffect", event="brighten")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import flash.events.Event;
// Define the private variable for the bright setting.
private var _bright:Boolean = true;
// Define the setter to dispatch the events
// corresponding to the effect triggers.
public function set bright(value:Boolean):void {
_bright = value;
if (_bright)
dispatchEvent(new Event("brighten"));
else
dispatchEvent(new Event("darken"));
}
// Define the getter to return the current bright setting.
public function get bright():Boolean {
return _bright;
}
]]>
</mx:Script>
</mx:Button>
[Event(name="eventName", type="package.eventType")] の形式でイベントを宣言する場合は、[Effect(name="eventnameEffect", event="eventname")] の形式で対応するエフェクトも作成できます。前の例の <mx:Metadata> タグで、2 つの新しいイベント darken および brighten を定義するメタデータステートメントと、新しいエフェクトトリガ darkenEffect および brightenEffect を挿入し、Flex コンパイラに渡します。
メタデータの使用について詳しくは、カスタムコンポーネントのメタデータタグを参照してください。
次の例のアプリケーションでは、MyButton コントロールを使用します。darkenEffect プロパティと brightenEffect プロパティにそれぞれ FadeOut エフェクトと FadeIn エフェクトが設定されています。2 番目の Button コントロールの click イベントによって MyButton コントロールの bright プロパティが切り替わり、対応するエフェクト(FadeOut または FadeIn)が実行されます。
<?xml version="1.0"?>
<!-- effects/MainMyButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*" >
<!-- Define two fade effects for darkening and brightening target. -->
<mx:Fade id="FadeOut" duration="1000" alphaFrom="1.00" alphaTo=".20"/>
<mx:Fade id="FadeIn" duration="1000" alphaFrom=".20" alphaTo="1.00"/>
<!-- Define custom button that defines the
darkenEffect and brightenEffect. -->
<MyComp:MyButton
label="MyButton" id="btn"
darkenEffect="{FadeOut}"
brightenEffect="{FadeIn}"
darken="debugW.text='got darken event';"
brighten="debugW.text='got brighten event';"/>
<!-- Define button that triggers darken event. -->
<mx:Button
label="set bright to false"
click="btn.bright = false; myTA.text=String(btn.bright);"/>
<!-- Define button that triggers brighten event. -->
<mx:Button
label="set bright to true"
click="btn.bright = true; myTA.text=String(btn.bright);"/>
<!-- TextArea displays the current value of bright. -->
<mx:TextArea id="myTA" />
<!-- TextArea displays event messages. -->
<mx:TextArea id="debugW" />
<!-- Define button to make sure effects working. -->
<MyComp:MyButton id="btn2" label="test effects"
mouseDownEffect="{FadeOut}"
mouseUpEffect="{FadeIn}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
EffectInstance クラスは、カスタムエフェクト内でオーバーライドする initEffect() メソッドを定義します。このメソッドのシグネチャは次のとおりです。
public initEffect(event:Event):void
ここで、event はエフェクトをトリガしたイベントによって送出される Event オブジェクトです。
例えば、ユーザーはエフェクトのインスタンスを作成できても、エフェクトを再生するために必要なすべての設定情報を提供できない場合があります。エフェクトクラスの定義内ですべてのプロパティにデフォルト値を割り当てることができますが、場合によっては、実行時にデフォルト値を判別する必要があります。
このメソッドでは、実行時に event オジェクトとエフェクトターゲットを調べて、値を計算することができます。カスタムイベントとエフェクトトリガの作成方法について詳しくは、カスタムエフェクトトリガの定義を参照してください。例の一部として、dispatchEvent() メソッドに渡される event オブジェクトにプロパティを追加できます。その後、initEffect() メソッドから、その event オブジェクトおよび追加のプロパティにアクセスできます。
また、initEffect() メソッドをオーバーライドすることにより、Event オブジェクトの target プロパティにアクセスし、エフェクトの対象のコンポーネントを参照できます。例えば、コンポーネントの現在の x および y 座標、または現在の高さと幅を判別する必要がある場合は、initEffect() メソッドのオーバーライドからそれらの情報にアクセスできます。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート