0 Replies Latest reply on Dec 17, 2009 10:25 PM by ellenchristine

    Issue with visibility and effects

    ellenchristine Level 1

      The following code displays a map. When you roll over the (hidden) picture of the US, the picture should fade in, resize, and change position, which it does. At the same time, a box with text should appear as a result of the same rollover event.


      Here's the issue: if I set no visibility or alpha parameters on the box, the effect works, but the box appears at the beginning and end of the animation, which it shouldn't. However, if I try to set a visibility=false or alpha=0 property to the box image tag, the effect for the box doesn't work at all. I'm very confused as to why this is, as I've set initial images to invisible and applied visibility effects to them without issues (see the firstRollover image tag). Can anyone see in my code what I'm missing? I've attached assets to this post.


      Any help would be greatly appreciated. Thanks!


      <?xml version="1.0" encoding="utf-8"?>

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" label="Map"

           verticalScrollPolicy="off" horizontalScrollPolicy="off" >


      <mx:Image id="firstBaseMap" source="../assets/graphics/1stWorld.gif" x="10" y="10" width="653" height="307" alpha="1"/>

      <mx:Image id="firstRollover" source="../assets/graphics/1stWorld_rollover.gif" x="7" y="30" width="194" height="113"

           alpha="0" rollOverEffect="{fadeIn}" rollOutEffect="{fadeOut}"/>

      <mx:Image id="box" x="350" y="43" width="232" height="229" source="../assets/graphics/box.gif"/>



      <mx:Parallel id="fadeIn" duration="1000">

           <mx:Fade target="{firstBaseMap}" alphaFrom="1" alphaTo=".20"/>

           <mx:Fade alphaFrom="0" alphaTo="1"/>

           <mx:Resize widthTo="324" heightTo="243"/>

           <mx:Iris target="{box}" showTarget="true"/>




      <mx:Parallel id="fadeOut" duration="1000">

           <mx:Fade target="{firstBaseMap}" alphaFrom=".20" alphaTo="1"/>

           <mx:Iris target="{box}" showTarget="false"/>

           <mx:Fade alphaFrom="1" alphaTo="0"/>

           <mx:Resize widthTo="194" heightTo="113"/>