エフェクトの操作
エフェクトの継続時間の設定
すべてのエフェクトは duration プロパティを備えています。このプロパティを使用して、エフェクトが発生する時間の長さをミリ秒単位で指定できます。次の例では、WipeLeft エフェクトをカスタマイズし、新たに 2 つのエフェクトを作成しています。SlowWipe エフェクトには 2 秒のデュレーションが、ReallySlowWipe エフェクトには 8 秒のデュレーションが設定されています。
<?xml version="1.0"?>
<!-- behaviors\WipeDuration.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:WipeLeft id="SlowWipe" duration="2000"/>
<mx:WipeLeft id="ReallySlowWipe" duration="8000"/>
<mx:Button label="Slow Wipe"
mouseDownEffect="{SlowWipe}"/>
<mx:Button label="Really Slow Wipe"
mouseDownEffect="{ReallySlowWipe}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
エフェクトでの埋め込みフォントの使用
Fade エフェクトと Rotate エフェクトは、埋め込みフォントを使用してレンダリングしたテキストでのみ機能します。システムフォントを使用しているコントロールにこれらのエフェクトを適用しても、そのテキストは変化しません。
システムフォントを使用してレンダリングしたテキストに Zoom エフェクトを適用すると、そのテキストはすべてのポイントサイズの範囲で拡大または縮小されます。テキストに Zoom エフェクトを適用する際に埋め込みフォントを使用する必要はありません。しかし、埋め込みフォントを使用すれば、滑らかな Zoom エフェクトが得られます。
次に示す例では、2 つの Label コントロールを使用しています。一方には埋め込みフォントを使用し、他方には使用していません。そのため、システムフォントを使用している Label コントロールに Rotate エフェクトを適用しても何も起きません。
<?xml version="1.0"?>
<!-- behaviors\EmbedFont.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
@font-face {
src:url("../assets/MyriadWebPro.ttf");
font-family: myMyriadWebPro;
}
</mx:Style>
<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.5"/>
<mx:Fade id="fadeIn" alphaFrom="0.5" alphaTo="1.0"/>
<mx:VBox>
<mx:Label fontFamily="myMyriadWebPro"
mouseDownEffect="{fadeOut}" mouseUpEffect="{fadeIn}"
text="This Label control uses the MyriadWebPro embedded font
and the text will fade."/>
<mx:Label
mouseDownEffect="{fadeOut}" mouseUpEffect="{fadeIn}"
text="This Label control uses the system font
and the text will not fade."/>
</mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
組み合わせたエフェクトの作成
Flex では、エフェクトを結合、つまり「組み合わせる」方法として、次の 2 種類の方法がサポートされています。
パラレル処理
エフェクトは同時に再生されます。
シーケンス処理
1 つのエフェクトが完了してから、次のエフェクトが開始されます。
Parallel エフェクトまたは Sequence エフェクトを定義するには、<mx:Parallel> タグまたは <mx:Sequence> タグを使用します。次の例では、Zoom エフェクトと Rotate エフェクトをパラレル処理で組み合わせる Parallel エフェクト ZoomRotateShow、および Zoom エフェクトと Rotate エフェクトをシーケンス処理で組み合わせる ZoomRotateHide を定義します。
<?xml version="1.0"?>
<!-- behaviors\CompositeEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Parallel id="ZoomRotateShow">
<mx:Zoom id="myZoomShow"
zoomHeightFrom="0.0" zoomWidthFrom="0.0"
zoomHeightTo="1.0" zoomWidthTo="1.0"/>
<mx:Rotate id="myRotateShow" />
</mx:Parallel>
<mx:Sequence id="ZoomRotateHide">
<mx:Rotate id="myRotateHide"/>
<mx:Zoom id="myZoomHide"
zoomHeightFrom="1.0" zoomWidthFrom="1.0"
zoomHeightTo="0.0" zoomWidthTo="0.0"/>
</mx:Sequence>
<mx:VBox id="myBox" height="100" width="200">
<mx:TextArea id="aTextArea"
text="hello"
hideEffect="{ZoomRotateHide}"
showEffect="{ZoomRotateShow}"/>
</mx:VBox>
<mx:Button id="myButton1"
label="Show!"
click="aTextArea.visible=true;"/>
<mx:Button id="myButton2"
label="Hide!"
click="aTextArea.visible=false;"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
Button コントロールの click イベントのイベントリスナーにより、VBox コンテナの表示と非表示が切り替えられます。VBox コンテナが不可視状態になるとき、その hide エフェクトとして ZoomRotateShow エフェクトが使用されます。また、不可視状態であるとき、ZoomRotateHide エフェクトが使用されます。
VBox コンテナでは、autoLayout プロパティが false に設定されます。この設定により、エフェクトの再生中にコンテナのレイアウトが更新されなくなります。詳細については、エフェクトによって生じるコンテナレイアウトの無効化を参照してください。
<mx:Parallel> タグと <mx:Sequence> タグは相互にネストできます。例えば、2 つのエフェクトをパラレルに実行し、続けて 3 番目のエフェクトをシーケンシャルに実行することも可能です。
Parallel エフェクトまたは Sequence エフェクトでは、duration プロパティによって各エフェクトのデュレーションが設定されます。例えば、Sequence エフェクトの duration プロパティが 3000 に設定されている場合、Sequence の各エフェクトの再生には 3000 ms かかります。
複数のエフェクトを組み合わせたエフェクトとして合成し、さらにそれを再生するイベントリスナーを作成することもできます。次にその例を示します。
<?xml version="1.0"?>
<!-- behaviors\CompositeEffectsAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="createEffect(event);">
<mx:Script>
<![CDATA[
// Import effect classes and create effect variables.
import mx.effects.*;
public var myZoomShow:Zoom;
public var myRotateShow:Rotate;
public var ZRShow:Parallel;
private function createEffect(eventObj:Event):void {
// Create a Zoom effect.
myZoomShow=new Zoom(aTextArea);
myZoomShow.zoomHeightFrom=0.0;
myZoomShow.zoomWidthFrom=0.0;
myZoomShow.zoomHeightTo=1.0;
myZoomShow.zoomWidthTo=1.0;
// Initialize a Rotate effect.
myRotateShow=new Rotate(aTextArea);
// Initialize a Parallel effect.
ZRShow=new Parallel();
ZRShow.addChild(myZoomShow);
ZRShow.addChild(myRotateShow);
}
]]>
</mx:Script>
<mx:VBox id="myBox" height="100" width="200">
<mx:TextArea id="aTextArea" text="hello" visible="false"/>
</mx:VBox>
<mx:Button id="myButton1"
label="Show!"
click="aTextArea.visible=true; ZRShow.end(); ZRShow.play();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、Parallel.addChild() メソッドを使用して各エフェクトを Parallel エフェクトに追加し、その後 Effect.play() メソッドを使用してエフェクトを呼び出します。
AnimateProperty エフェクトの使用
AnimateProperty エフェクトを使用して、コンポーネントの数値プロパティをアニメーション化します。例えば、次の例に示すように、このエフェクトを使用してコントロールの scaleX プロパティをアニメーション化することができます。
<?xml version="1.0"?>
<!-- behaviors\AnimateHScrollPos.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Sequence id="animateScaleXUpDown" >
<mx:AnimateProperty
property="scaleX"
fromValue="1.0"
toValue="1.5"/>
<mx:AnimateProperty
property="scaleX"
fromValue="1.5"
toValue="1.0"/>
</mx:Sequence>
<mx:Button label="Scale Button"
mouseDownEffect="{animateScaleXUpDown}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、Button コントロールをクリックすると、2 つの AnimateProperty エフェクトで構成された Sequence エフェクトの再生が始まります。最初の AnimateProperty エフェクトではコントロールの幅が 150% に拡大され、次の AnimateProperty エフェクトではコントロールがスクロールされて元の幅に戻ります。
エフェクト開始の遅延
Effect.startDelay プロパティには、エフェクトがトリガされてから開始されるまでの待ち時間の値をミリ秒単位で指定します。このプロパティには 0 以上の整数値を指定できます。Effect.repeatCount プロパティを使用してエフェクトの繰り返し回数を指定している場合、startDelay プロパティはエフェクトの初回再生時にのみ適用され、その後の再生時には適用されません。
Parallel エフェクトの startDelay プロパティを設定すると、各エフェクトの再生後に遅延が挿入されます。
エフェクトの繰り返し
すべてのエフェクトで、Effect.repeatCount プロパティと Effect.repeatDelay プロパティがサポートされています。これらを使用して、エフェクトを繰り返すかどうかを設定できます。
- repeatCount エフェクトの再生回数を指定します。値が 0 の場合、end() メソッドの呼び出しによって停止されるまでエフェクトが無期限に再生されます。デフォルト値は 1 です。エフェクトを繰り返す場合、duration プロパティにより、エフェクトの 1 つのインスタンスの継続時間を指定します。このため、エフェクトの duration プロパティが 2000 に、また repeatCount プロパティが 3 に設定されている場合、エフェクトの再生には合計で 6000 ms（6 秒）かかります。
- repeatDelay エフェクトを繰り返す間隔をミリ秒で指定します。デフォルト値は 0 です。
例えば、次の例では、ユーザーが Button コントロールをクリックするまで Rotate エフェクトが繰り返されます。
<?xml version="1.0"?>
<!-- behaviors\RepeatEff.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Rotate id="myRotate"
repeatCount="0"/>
<mx:Image
source="@Embed(source='../assets/myImage.jpg')"
mouseDownEffect="{myRotate}"/>
<mx:Button id="myButton" label="Stop Rotation"
click="myRotate.end();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
すべてのエフェクトは、完了時に effectEnd イベントを送出します。エフェクトを繰り返す場合、最後の再生が完了した後に、エフェクトから effectEnd イベントが送出されます。
Fade や Move などのトゥイーンエフェクトの場合、エフェクトが完了すると、tweenEnd イベントと endEffect イベントの両方が送出されます。トゥイーンエフェクトを繰り返すよう指定した場合、エフェクトが再生されるたびに tweenEnd イベントが発生し、最後の繰り返しが完了すると endEffect イベントが発生します。
ViewStack コンテナおよび TabNavigator コンテナはそれぞれ子コンテナのコレクションで構成され、これらの子コンテナを使用することで、現在表示されている子コンテナを選択できます。現在表示されている子コンテナを変更するときには、非表示にするコンテナの hideEffect プロパティおよび新たに表示する子コンテナの showEffect プロパティを使用して、子コンテナにまとめてエフェクトを適用できます。
ViewStack コンテナまたは TabNavigator コンテナは、非表示にする子コンテナの hideEffect が完了するまで待機し、その後で新しい子コンテナを表示します。エフェクトの再生中に ViewStack コンテナまたは TabNavigator コンテナの selectedIndex プロパティを変更する場合には、現在再生中のエフェクトを中断できます。
ViewStack コンテナおよび TabNavigator コンテナの詳細については、ナビゲータコンテナの使用を参照してください。
Panel、TitleWindow、および Accordion の各コンテナでの Dissolve エフェクトおよび Fade エ フェクトの使用
Fade エフェクトおよび Dissolve エフェクトは、Panel、TitleWindow、および Accordion の各コンテナのコンテンツ領域にのみ適用されます。したがって、Panel コンテナと TitleWindow コンテナのタイトルバー、および Accordion コンテナのナビゲーションボタンは、これらのエフェクトでは変更されません。
コンテナ全体に Fade エフェクトまたは Dissolve エフェクトを適用するには、コンテナと同じサイズの RoundedRectange インスタンスを作成し、その後、エフェクトの targetArea プロパティを使用してエフェクトの適用先の領域を指定します。次の例では、1 番目の Panel コンテナに Dissolve エフェクトを 適用し、さらに 2 番目の Panel コンテナの上部にある RoundedRectange インスタンスに Dissolve エフェクトを適用しています。
<?xml version="1.0" encoding="utf-8"?>
<!-- behaviors\PanelDissolve.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.graphics.*;
// Define a bounding box for the target area of the effect.
[Bindable]
public var tArea:RoundedRectangle;
// Size the bounding box to the size of Panel 2.
private function init():void
{
tArea = new RoundedRectangle(0,0, panel2.width, panel2.height, 5);
}
]]>
</mx:Script>
<mx:Dissolve id="dissolveP1"
duration="1000"
target="{panel1}"
alphaFrom="1.0" alphaTo="0.0"/>
<!-- Apply the effect to the bounding box, not to Panel 2. -->
<mx:Dissolve id="dissolveP2"
duration="1000"
target="{panel2}"
alphaFrom="1.0" alphaTo="0.0"
targetArea="{tArea}"/>
<mx:Panel id="panel1" title="Panel 1"
width="100" height="140" >
<mx:Button label="Orange" />
</mx:Panel>
<mx:Panel id="panel2" title="Panel 2"
width="100" height="140" >
<mx:Button label="Red" />
</mx:Panel>
<mx:Button label="Dissolve Panel 1"
click="dissolveP1.end();dissolveP1.play();"/>
<mx:Button label="Dissolve Panel 2"
click="dissolveP2.end();dissolveP2.play();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
サウンドエフェクトの使用
SoundEffect クラスを使用すると、MP3 ファイルとして表されたサウンドを再生できます。MP3 ファイルを指定するには、source プロパティを使用します。Embed キーワードにより MP3 ファイルを既に埋め込んでいる場合は、MP3 ファイルの Class オブジェクトを source プロパティに渡すことができます。それ以外の場合は、MP3 ファイルへの完全な URL を指定してください。
次の例では、両方の方法で MP3 ファイルを指定します。
<?xml version="1.0"?>
<!-- behaviors\Sound.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Embed MP3 file.
[Bindable]
[Embed(source="../assets/sound1.mp3")]
public var soundClass:Class;
]]>
</mx:Script>
<mx:SoundEffect id="soundEmbed"
useDuration="false"
loops="0"
source="{soundClass}"/>
<mx:Button id="myButton2"
label="Sound Embed"
mouseDownEffect="{soundEmbed}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、アプリケーションに sound1.mp3 ファイルを埋め込んでいます。つまり、ファイルは SWF ファイルにコンパイルされます。
SoundEffect クラスには useDuration や loops などの複数のプロパティがあり、これらを使用して MP3 ファイルの再生を制御できます。useDuration プロパティでは、duration プロパティを使用して MP3 ファイルの再生時間を制御するかどうかを指定します。useDuration プロパティが true の場合、MP3 ファイルは duration プロパティによって指定された時間の間再生されます（デフォルト値は 500 ms）。useDuration を false に設定すると、MP3 ファイルは最後まで再生されます。
loops プロパティでは、MP3 ファイルの繰り返し再生回数を指定します。値を 0 にするとエフェクトが 1 回再生され、1 にすると 2 回再生されるというようになっています。MP3 ファイルを繰り返す場合でも、再生時間は useDuration プロパティの設定で決まります。
duration プロパティは loops プロパティよりも優先されます。エフェクトのデュレーションがサウンドファイルの 1 回の再生時間に満たない場合、サウンドはループされません。
また SoundEffect クラスにより、次のイベントも定義されます。
complete
サウンドファイルのロードが完了すると送出されます。
id3
MP3 サウンドファイルで ID3 データを使用できる場合に送出されます。
ioError
サウンドファイルのロード中にエラーが発生した場合に送出されます。
progress
サウンドファイルのロード時に定期的に送出されます。イベントオブジェクトでは、現在ロードされているバイト数とロード対象の合計バイト数にアクセスできます。このイベントは常に送出されるとは限りません。progress イベントが送出されなくても complete イベントが生成されることがあります。
詳細については、『Adobe Flex リファレンスガイド』を参照してください。
マスクエフェクトの使用
マスクエフェクトとは、MaskEffect クラスのサブクラスである任意のエフェクトです。例えば、ワイプエフェクトや Iris エフェクトなどがあります。マスクエフェクトでは、マスクと呼ばれるオーバーレイによってエフェクトが実行されます。デフォルトでは、ワイプエフェクトのマスクは、ターゲットコンポーネントと同じ大きさの長方形をしています。Iris エフェクトでは、デフォルトのマスクは長方形であり、コンポーネントの中央に配置されます。
マスクエフェクトでは、エフェクト適用前または適用後のターゲットコンポーネントの状態を不可視にする必要があります。つまり、マスクエフェクトを適用すると、ターゲットコンポーネントが常に画面上に表示されるか、非表示になります。
マスクエフェクトを制御するには、MaskEffect.showTarget プロパティをコンポーネントのアクションに対応するように設定します。ターゲットコンポーネントが見えるように変化させる場合、showTarget を true に設定します。ターゲットが見えなくなるように変化させる場合、showTarget を false に設定します。デフォルト値は true です。
多くの場合、これらのエフェクトは showEffect および hideEffect トリガと共に使用します。コンポーネントの visible プロパティが false から true に変化してコンポーネントが可視状態になるときに、showEffect トリガが発生します。hideEffect トリガは、コンポーネントの visible プロパティが true から false に変更され、そのコンポーネントが見えなくなるように変化した場合に発生します。マスクエフェクトを showEffect トリガまたは hideEffect トリガと共に使用する場合、showTarget プロパティは自動的に設定されるため無視することができます。
マスクエフェクトを実行すると、showTarget プロパティの設定に基づいて、ターゲットコンポーネントが見えなくなる、または見えるように変化します。次の図に、showTarget プロパティの 2 つの設定における WipeLeft エフェクトのアクションを示します。
次に示すような MaskEffect クラスの複数のプロパティを使用して、マスクの位置とサイズを制御できます。
scaleXFrom、scaleYFrom、scaleXTo および scaleX
マスクの初期状態および最後の状態の倍率を指定します。値 1.0 を指定すると、マスクのサイズはターゲットコンポーネントと同じになります。2.0 を指定すると、マスクのサイズはコンポーネントの 2 倍になります。また、0.5 を指定すると、マスクのサイズはコンポーネントの半分になります。4 つのプロパティすべてを指定すると、どのプロパティも使用できるようになります。
xFrom、yFrom、xTo および yTo
ターゲットコンポーネントを基準にマスクの初期位置および最終位置の座標を指定します。（0, 0）はターゲットの左上隅を表します。4 つのプロパティすべてを指定すると、どのプロパティも使用できるようになります。
マスクの初期位置および最終位置の座標は、エフェクトのタイプと showTarget プロパティの設定（true または false）によって異なります。例えば、WipeLeft エフェクトの showTarget 値が false の場合、マスクの初期位置の座標は（0, 0）、つまりターゲットの左上隅になります。また最終位置の座標は（-width, 0）、つまりターゲットの右上隅になります。このとき、width はターゲットの幅です。
WipeLeft エフェクトの showTarget 値が true の場合、マスクの初期位置の座標は（width, 0）、最終位置の座標は（0, 0）になります。
カスタムマスク関数の作成
マスクエフェクトにカスタムマスク関数を指定するには、createMaskFunction プロパティを使用します。カスタムマスク関数を使用すると、アプリケーション要件に応じてマスクのシェイプ、色および他の属性を指定できます。
カスタムマスク関数には、次のシグネチャがあります。
public function funcName(targ:Object, bounds:Rectangle):Shape
var myMask:Shape = new Shape();
// Create mask.
return myMask;
}
カスタムマスク関数は、エフェクトのターゲットコンポーネントに対応する引数、およびターゲットのサイズを定義する 2 番目の引数を取ります。これにより、マスクのサイズを正しく指定できます。関数により、マスクを定義する 1 つの Shape オブジェクトが返されます。
次の例では、WipeLeft エフェクトでカスタムマスクを使用します。
<?xml version="1.0"?>
<!-- behaviors\CustomMaskSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
// Import the effect class.
import mx.effects.*;
public function createLargeMask(targ:Object,
bounds:Rectangle):Shape {
// Create the Shape object.
var largeMask:Shape = new Shape();
// Access the Graphics object of the
// Shape object to draw the mask.
largeMask.graphics.beginFill(0x00FFFF, 0.5);
largeMask.graphics.drawRoundRect(0, 0, bounds.width + 10,
bounds.height - 10, 3);
largeMask.graphics.endFill();
// Return the mask.
return largeMask;
}
]]>
</mx:Script>
<mx:WipeLeft id="customWL"
createMaskFunction="createLargeMask"
showTarget="false"/>
<mx:WipeLeft id="standardWL"
showTarget="false"/>
<mx:HBox borderStyle="solid"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10">
<mx:Button label="custom mask"
mouseDownEffect="{customWL}"
height="100" width="100"/>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート