0 Replies Latest reply on Jan 14, 2008 9:14 AM by lkingman

    Fade effect question

    lkingman
      I can implement a fade in effect with a single image, but I cannot get the same code to work with the arrayed images generated in the "photoDemo" tutorial on the Adobe site. Sho Kuwamoto has a fade in working in his tutorial ( http://labs.adobe.com/technologies/flexbuilder2/tutorials/#) though with different syntax (that I can't make work either), so I know the array isn't the issue. Why does this work in one, but not the other, example?

      Any help would be greatly appreciated. I'm using the FB3 Beta for the moment.

      Thanks in advance.


      1) In this example, the fade out works fine ...

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

      <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
      <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

      <mx:Panel title="Fade Effect Example" width="95%" height="95%"
      paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

      <mx:Text width="100%" color="blue"
      text="Use the Fade effect to show or hide the text and image. Use an embedded font when applying the Fade effect to text."/>

      <mx:Image source="photo.png"
      visible="{cb1.selected}"
      hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

      <mx:CheckBox id="cb1" label="visible" selected="true"/>

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


      2) In the itemRenderer ("thumbnails" here) of the "photoDemo" tutorial on the Adobe site ( http://learn.adobe.com/wiki/display/Flex/1b.+Code+Files), it does not. It compiles and runs, but seems to ignore the effect call. Why?

      "thumbnails" ...
      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="125" height="125"
      horizontalAlign="center"
      paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">

      <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
      <mx:Image source="{data.thumbnail.url}" showEffect="{fadeIn}" />

      </mx:VBox>


      main ...
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.rpc.events.ResultEvent;

      [Bindable]
      private var photoFeed:ArrayCollection;

      private function requestPhotos():void {
      photoService.cancel();
      var params:Object = new Object();
      params.format = 'rss_200_enc';
      params.tags = keywords.text;
      photoService.send(params);
      }

      private function photoHandler(event:ResultEvent):void {
      photoFeed = event.result.rss.channel.item as ArrayCollection;
      }
      ]]>
      </mx:Script>
      <mx:HTTPService id="photoService" url=" http://api.flickr.com/services/feeds/photos_public.gne" result="photoHandler(event)" />
      <mx:states>
      <mx:State name="panel1Zoomed">
      <mx:SetProperty target="{panel1}" name="width" value="831"/>
      <mx:SetProperty target="{panel1}" name="height" value="455"/>
      <mx:AddChild relativeTo="{panel1}" position="lastChild">
      <mx:TileList x="9" y="55" width="791" height="353" dataProvider="{photoFeed}" itemRenderer="thumbnails"></mx:TileList>
      </mx:AddChild>
      </mx:State>
      </mx:states>
      <mx:Panel x="10" y="10" width="542" height="75" layout="absolute" id="panel1" resizeEffect="Resize">
      <mx:Label x="10" y="10" text="Keyword:" width="63"/>
      <mx:TextInput x="116" y="8" id="keywords"/>
      <mx:Button x="307" y="8" label="search" id="keywordButton" click="requestPhotos();currentState='panel1Zoomed'"/>
      </mx:Panel>

      </mx:Application>