0 Replies Latest reply on May 27, 2006 2:48 AM by RajeshBhadra

    want to have effect like flickr.com

    RajeshBhadra
      hi, i am trying to build a efffect like flickr.com website has..the one in which you click on the next button the first image start sliding towards left side and the next image loads on the second frame.. i tried alot but was unable to do..The one which i tried is below.i want the sliding function to be called again again as soon as the move effect ends....
      The whole idea is to call move effect first then call sliding() function again move effect for the next image and sliding() ....like this....plzz help




      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">

      <mx:Script>
      <![CDATA[

      public var index:int = 0;
      public var i:int = 0;
      public var myArr:Array = new

      Array("one.jpg","two.jpg","three.jpg","four.jpg","five.jpg","six.jpg","seven.jpg","eight.j pg","nine.jpg","ten.jpg");



      public function enabling():void
      {
      previous.enabled = true;
      next.enabled = true;
      }
      public function disabling():void
      {
      previous.enabled = false;
      next.enabled = false;
      }
      public function sliding():void
      {

      var x:Image = new Image();
      var y:Image = new Image();

      x.source = myArr[i+1];y.source = myArr[i+2];
      x.height=90;x.width=120;y.x=120;y.height=90;y.width=120;

      myCanvas.removeChildAt(0);
      myCanvas.addChildAt(x,0);

      myCanvas.addChild(y);
      this.movea.play();

      }

      public function loading():void
      {
      idPic.source = myArr[index];
      enabling();
      }


      public function prepic():void
      {
      if(index <= 0)
      {
      idPic.source = myArr[index];
      }
      else
      {
      index = index - 1;
      idPic.source = myArr[index];
      }


      }

      public function nextpic():void
      {
      if(index >= myArr.length-1)
      {
      }
      else
      {
      index = index + 1;
      idPic.source = myArr[index];
      }
      }


      ]]>
      </mx:Script>


      <mx:Move id="movea" xTo="0" duration="5000" effectEnd="sliding()"/>

      <!-- <mx anel x="10" y="10" width="100%" height="100%" layout="absolute"> -->


      <mx:Image x="10" y="10" width="200" height="150" id="idPic"/>



      <mx:Button x="20" y="170" label="Previous" id="previous" click="prepic()"/>
      <mx:Button x="100" y="170" label="Next" id="next" width="77" click="nextpic()"/>
      <mx:Button x="180" y="170" label="Load Image" id="load" width="77" click = "loading()"/>





      <mx:TextInput x="437" y="10" height="108" id="txt"/>
      <!--
      <mx:HBox id = "myHBox2" x="49" y="365" width="240" height="90" horizontalGap="0" autoLayout="false">
      <mx:Tile id = "myTile1" width="120" height="90">
      <mx:Image source="one.jpg" id="img_1" height="90" width="120"/>
      </mx:Tile>
      <mx:Tile id="myTile2" width="120" height="90">
      <mx:Image source="two.jpg" id="img_2" height="90" width="120" />
      </mx:Tile>
      </mx:HBox>

      -->
      <mx:Canvas id="myCanvas" x="62" y="245" width="240" height="90" backgroundColor="#80ffff" alpha="0.8" horizontalScrollPolicy="off">
      <mx:Image x="0" y="0" width="120" height="90" source="one.jpg"/>
      <mx:Image x="121" y="0" width="120" height="90" source="two.jpg" rollOverEffect="movea"/>
      </mx:Canvas>





      <!-- </mx anel> -->

      </mx:Application>