1

Flex 3 では、次のようなグロー エフェクトを実行できます。

    <mx:Glow id="glowImage" duration="250"
             alphaFrom="0" alphaTo="1"
             blurXFrom="0.0" blurXTo="3.0"
             blurYFrom="0.0" blurYTo="3.0" strength="2"
             color="0xcc0000" target="{this}"/>

    <mx:Glow id="unglowImage" duration="250"
             alphaFrom="1" alphaTo="0"
             blurXFrom="3.0" blurXTo="0.0"
             blurYFrom="3.0" blurYTo="0.0" strength="2"
             color="0xaaaaaa" target="{this}"/>

そしてMXML:

<mx:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/>

Flex 4 では、AnimateFilter を GlowFilter と共に使用することになっています (Adobe が推奨)。これが私が思いついたものです：

    <s:AnimateFilter id="glowAnimation" 
                     target="{this}"
                     duration="250"
                     >

        <s:bitmapFilter>
            <s:GlowFilter color="#ff0000" strength="3" quality="3" />
        </s:bitmapFilter>

        <s:motionPaths>
            <s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurX"/>
            <s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurY"/>
        </s:motionPaths>

    </s:AnimateFilter>

そしてMXML:

<mx:Image rollOverEffect="{glowAnimation}" rollOutEffect="{unglowImage}"/>

問題は、これが一度アニメーション化された後、エフェクトが削除され、mx エフェクトがフィルターを適用して適用したままにすることです。

~~~更新~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~
Riastarの答えは正しいので、このビデオから私がつまずいた理由を追加したいと思います[1]。Animate と AnimateFilter の違いについて説明します。AnimateFilter は一時的です。フィルターを適用し、完了したら削除します。Animate は値をターゲットに永続的に適用します。

Flex 4 では、すべてのエフェクトがトリガーをサポートしているわけではないことにも注意してください。

AnimateInstance クラスから:

override public function startEffect():void
{  
    // This override removes EffectManager.effectStarted() to avoid use of
    // mx_internal. New effects are not currently triggerable, so
    // this should not matter
}

これが意味することは、rollOverEffect にバインドされたエフェクトをトリガーすることに依存できないということです。rollOver イベントで effect.play() を呼び出す必要があります。

つまり、Animate クラスを使用する場合は、これも変更する必要があります。 

<s:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/>

これに： 

<s:Image rollOver="glowImage.play()" rollOut="unglowImage.play()"/>

複数の関連するエフェクトを使用する場合は、関連するエフェクトで play() を呼び出す前に、再生中のエフェクトで end() を呼び出すことをお勧めします。

また、答えのように、単一の効果を使用する場合は、glowAnimation.play(null, true) のように終了するのではなく、逆にすることに注意してください。

<s:Image rollOver="rollOverAnimation.play()" rollOut="rollOverAnimation.play(null, true)"/>
4

2 に答える 2

4

についてはわかりませんがAnimateFilter、単純な効果を使用したこのソリューションAnimateはうまく機能するはずです。

<s:Animate id="glowAnimation" target="{glow}" duration="250">
    <s:motionPaths>
        <s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurX"/>
        <s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurY"/>
    </s:motionPaths>
</s:Animate>

<s:Image rollOver="glowAnimation.play()" 
         rollOut="glowAnimation.play(null, true)">

    <s:filters>
        <s:GlowFilter id="glow" blurX="0" blurY="0" />
    </s:filters>
</s:Image>

blurXとの初期値を に設定したことに注意してblurYください0。4そうしないと、画像をロールオーバーしない限りデフォルトが表示されるため、これが必要です。

于 2012-10-12T16:08:48.180 に答える