0 Replies Latest reply on Mar 2, 2008 7:20 AM by Bora Imamoglu

    Scroll Effect.... How?

    Bora Imamoglu
      Good day...
      I need to create the same effect that teknision used in their site for their navigation...
      You can inspect it here...
      As you can see when you click on a label ( tab like behavior but not tabnavigator I think ) The tilelist in the canvas scrolls with an animation ( itemrenderers do not scroll at the sametime and this is what I want to achieve )

      In my project I used a canvas and I put 4-5 tilelists in it, set the scrollpolicies to off and scroll through it by the click of another horizontallist...

      Here is the mxml code:

      <mx:AnimateProperty id="scrollFX" property="verticalScrollPosition" duration="1000" target="{menuCanv}"/>
      <mx:HTTPService id="menudata" url="assets/menudata.xml" resultFormat="e4x"/>
      <mx:XMLListCollection id="menudataCollection" source="{menudata.lastResult.*}"/>
      <mx:Canvas id="menuCanv" verticalScrollPolicy="off" width="100%" height="125" y="{Application.application.height-150}" borderThickness="10" borderColor="#8B8B8B" alpha="0.9">
      <mx:TileList id="cozumlerList" dataProvider="{menudata.lastResult.*.( Part == '1' )}" itemRenderer="comps.subjectRenderer" height="125" rowHeight="125" columnWidth="200" direction="horizontal" rowCount="1" allowMultipleSelection="false" backgroundColor="#000000" x="0" y="0" width="100%" alpha="0.8" borderStyle="none"></mx:TileList>
      <mx:TileList id="projelerList" dataProvider="{menudata.lastResult.*.( Part == '2' )}" itemRenderer="comps.subjectRenderer" height="125" rowHeight="125" columnWidth="200" direction="horizontal" rowCount="1" allowMultipleSelection="false" backgroundColor="#000000" x="0" y="125" width="100%" alpha="0.8" borderStyle="none"></mx:TileList>
      </mx:Canvas>
      <mx:HorizontalList id="menubar" change="{menuSelChange(event);}" x="0" y="{Application.application.height-185}" width="100%" alpha="0.7" itemRenderer="comps.menuRenderer" borderColor="#8B8B8B" backgroundColor="#000000">
      <mx:ArrayCollection>
      <mx:Object label="1"/>
      <mx:Object label="2"/>
      <mx:Object label="3"/>
      </mx:ArrayCollection>
      </mx:HorizontalList>


      and the function I use for scrolling:


      private function menuSelChange(event:ListEvent):void
      {
      var rect:Rectangle = menuCanv.scrollRect;
      var i:int=0;
      switch ( menubar.selectedIndex )
      {
      case 0:
      scrollFX.fromValue=menuCanv.verticalScrollPosition;
      scrollFX.toValue=0;
      scrollFX.play();
      break;
      case 1:
      scrollFX.fromValue=menuCanv.verticalScrollPosition;
      scrollFX.toValue=125;
      scrollFX.play();
      break;
      }
      }


      As you can expect this code scrolls the itemrenderers at the sametime... How can I achieve the scrolling effect?

      Any help will be greatly appriciated...