1 Reply Latest reply on Sep 8, 2007 11:07 AM by Ansury

    Dissolve image and textarea?

    Sterol
      Hi!

      I'm currently working on a small Flex-application that rotates ads on a web page. The concept is simple: an image is dissolved, followed by dissolving text on top of the image.

      I have no problem with the image but when I try to dissolve the text, the underlying image is also dissolved.

      Anyone know what I'm doing wrong or how I should go about making the ad-rotator work as intended?

      I'm a newbie on this, but I send along some of the MXML-code I have:

      <mx:states>
      <mx:State name="RotatingState"/>
      </mx:states>

      <mx:transitions>
      <mx:Transition fromState="" toState="RotatingState">
      <mx:Sequence>
      <mx:Dissolve target="{ImageCanvas}" alphaFrom="0.0" alphaTo="1.0" duration="3000"/>
      <mx:Dissolve target="{QuestionTextArea}" alphaFrom="0.0" alphaTo="1.0" duration="3000"/>
      </mx:Sequence>
      </mx:Transition>
      </mx:transitions>

      <mx:Canvas width="100%" height="100%">
      <mx:Canvas id="ImageCanvas" width="100%" height="100%">
      <mx:Image id="CampaignImage" width="140" height="240" x="0" y="0" source="1.jpg"/>
      </mx:Canvas>
      <mx:Canvas id="QuestionCanvas" width="100%" height="100%">
      <mx:TextArea id="QuestionTextArea" width="140" height="240" x="0" y="0" borderStyle="none" backgroundAlpha="0.0"
      wordWrap="true" text="Question text goes here!"/>
      </mx:Canvas>
      </mx:Canvas>

      I'd be grateful if someone could shed some light on this!

      //Marcus

        • 1. Re: Dissolve image and textarea?
          Ansury Level 3
          I think it's because you're setting the TextArea non-transparent at one point, and it is being displayed "on top" of the picture, overwriting it. If you move the text area over a little (set it's x value to 220 or something), you'll probably see what I mean (if the *overall* background color of your app is not white, because the TextArea's background color is white...)

          The text area consists of a big white background, initially transparent (as you specified in the tag), but you say alphaTo="1.0" which seems to make the backgroundAlpha="1.0".

          Does that make sense to you?

          (Below I changed the background color of the TextArea and moved it over so you can see what's happening, maybe this will shed some light on things.) I had to add a button to trigger the state change for me, too.


          <mx:states>
          <mx:State name="RotatingState"/>
          </mx:states>

          <mx:transitions>
          <mx:Transition fromState="" toState="RotatingState">
          <mx:Sequence>
          <mx:Dissolve target="{ImageCanvas}" alphaFrom="0.0" alphaTo="1.0" duration="3000"/>
          <mx:Dissolve target="{QuestionTextArea}" alphaFrom="0.0" alphaTo="1.0" duration="3000"/>
          </mx:Sequence>
          </mx:Transition>
          </mx:transitions>

          <mx:Canvas width="100%" height="100%">
          <mx:Canvas id="ImageCanvas" width="100%" height="100%">
          <mx:Image id="CampaignImage" width="140" height="240" x="0" y="0" source="assets/1.jpg"/>
          </mx:Canvas>
          <mx:Canvas id="QuestionCanvas" width="100%" height="100%">
          <mx:TextArea id="QuestionTextArea" backgroundColor="#882222" width="140" height="240" x="220" y="0" borderStyle="none" backgroundAlpha="0.0"
          wordWrap="true" text="Question text goes here!"/>
          <mx:Button x="193" y="49" label="Button" click="dis();"/>
          </mx:Canvas>
          </mx:Canvas>

          <mx:Script>
          <![CDATA[
          private function dis():void {
          currentState='RotatingState';
          }
          ]]>
          </mx:Script>