2 Replies Latest reply on Nov 21, 2006 10:37 AM by droopy6

    synchronize rollOutEffect and rollOverEffect

    droopy6
      try this:

      <?xml version="1.0" encoding="utf-8"?>
      <!-- Simple example to demonstrate the Glow effect. -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

      <mx:Glow id="glowImage" duration="1000"
      alphaFrom="1.0" alphaTo="0.3"
      blurXFrom="0.0" blurXTo="50.0"
      blurYFrom="0.0" blurYTo="50.0"
      color="0x444444"/>
      <mx:Glow id="unglowImage" duration="1000"
      alphaFrom="0.3" alphaTo="1.0"
      blurXFrom="50.0" blurXTo="0.0"
      blurYFrom="50.0" blurYTo="0.0"
      color="0x444444"/>

      <mx:Panel title="Glow Effect Example" width="75%" height="75%"
      paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">


      <mx:Image id="img" source="@Embed(source='img.jpg')"
      rollOutEffect ="{unglowImage}"
      rollOverEffect="{glowImage}"
      />

      </mx:Panel>
      </mx:Application>


      if the mouse move out of the image before rollOverEffect is ended, the blur level is not 50.0
      so rollOutEffect begin with wrong blur value (50.0) and the result is not smooth :-/

      is there a way to fix this ? I mean, for example, bind the blurXFrom value of rollOutEffect to the current
      blurX value of rollOverEffect ?

      I don't know how to retreive the current blurX value of rollOverEffect ...
        • 1. synchronize rollOutEffect and rollOverEffect
          droopy6 Level 1
          I found the solution. using tweenUpdate event.
          there is sometimes a little flickering moving mouse very quikly on image border but it works.

          <?xml version="1.0" encoding="utf-8"?>
          <!-- Simple example to demonstrate the Glow effect. -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
          <mx:Script>
          <![CDATA[
          import mx.events.TweenEvent;

          [Bindable] public var glowAlpha:Number = 1.0;
          [Bindable] public var glowX:Number = 0.0;
          [Bindable] public var glowY:Number = 0.0;

          private function onTweenUpdate(event:TweenEvent):void
          {
          var glowValues:Array = event.value as Array;
          var glowColor:uint = glowValues[0];
          glowAlpha = glowValues[1];
          glowX = glowValues[2];
          glowY = glowValues[3];
          }

          ]]>
          </mx:Script>

          <mx:Glow id="glowImage" duration="1000"
          alphaFrom="{glowAlpha}" alphaTo="0.3"
          blurXFrom="{glowX}" blurXTo="50.0"
          blurYFrom="{glowY}" blurYTo="50.0"
          color="0x444444" tweenUpdate="onTweenUpdate(event)"/>
          <mx:Glow id="unglowImage" duration="1000"
          alphaFrom="{glowAlpha}" alphaTo="1.0"
          blurXFrom="{glowX}" blurXTo="0.0"
          blurYFrom="{glowY}" blurYTo="0.0"
          color="0x444444" tweenUpdate="onTweenUpdate(event)"/>

          <mx:Panel title="Glow Effect Example" width="75%" height="75%"
          paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">


          <mx:Image id="img" source="@Embed(source='img.jpg')"
          rollOutEffect ="{unglowImage}"
          rollOverEffect="{glowImage}"
          />

          </mx:Panel>
          </mx:Application>
          • 2. Re: synchronize rollOutEffect and rollOverEffect
            droopy6 Level 1
            I found the cause of the flicker tracing burX and burY values:

            blurXFrom="{glowX}" blurXTo="250.0"
            blurYFrom="{glowY}" blurYTo="250.0"

            here my traces:

            Glow 0,0
            Glow 0.2984367048468467,0.2984367048468467
            Glow 1.4185319077607423,1.4185319077607423
            Glow 3.7341754387367754,3.7341754387367754
            Glow 7.3899038807218185,7.3899038807218185
            Glow end 250,250

            the "tweenEnd" event force to the final value(here 250), this is certainly a bug ?