0 Replies Latest reply on Apr 3, 2013 5:54 AM by soul-mapp

    Swipe to next image? - xml - Spark List component

    soul-mapp

      Hi.. everyone

       

      i have a problem, can anyone help.. Ive made a gallery using xml and the sparks list component. that displays images in a horz list which ofcourse can be clicked to see the larger image, but then ofcourse to view the  next image you have to hit the back button and then select another.

      How can i swipe on the large image for move to the next item  without having to go back to list.    Thanks.

       

      here is what ive got so far..

       

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

      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              title="Page {id1}"

              destructionPolicy="never"

              actionBarVisible="true"

              viewActivate="init()">

         

          <fx:Script>

              <![CDATA[

                  import valueObjects.Bookpage;

                  [Bindable]private var id1:String;

                  [Bindable]private var thumbimage:String;

                  [Bindable]private var largeimage:String;

                 

                  private function init():void

                  {

                      pgImage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);

                      this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe );

                      var thisbpage:Bookpage = data as Bookpage;

                      id1 = thisbpage.id;

                      largeimage = thisbpage.largeimage;

                  }

                 

                  private function onZoom(event:TransformGestureEvent):void

                  {

                      var mySprite:Sprite = pgImage as Sprite;

                      if(mySprite.scaleY.valueOf() >= 1)

                      {

                          mySprite.scaleX *= event.scaleX;

                          mySprite.scaleY *= event.scaleY;

                      }

                      else

                      {

                          mySprite.scaleX = 1;

                          mySprite.scaleY = 1;

                      }

                  }

                 

                  private function handleSwipe(event:TransformGestureEvent):void

                  {

                      // Swipe was to the right

                      if (event.offsetX == 1 ) {

                          // push the PreviousView without any data using default

                        some help here. pls ..swipe to prev image if any

                         

                      }

                          // Swipe was to the left

                      else if (event.offsetX == -1 ) {

                          // push the NextView withour any data using

                          some help here. pls ..swipe to next in list

                      }   

                     

                      // Swipe was to the down

                      if (event.offsetY == 1 ) {

                          // push the PreviousView without any data using default

                          // ViewTransition

                          this.actionBarVisible = true;

                      }

                          // Swipe was to the up

                      else if (event.offsetY == -1 ) {

                          // push the NextView withour any data using

                          this.actionBarVisible = false;

                      }

                  }

              ]]>

          </fx:Script>   

         

          <fx:Declarations>

              <s:SlideViewTransition id="slideUp" duration="300" direction="up" transitionControlsWithContent="false"/>

          </fx:Declarations>

         

          <s:states>

              <s:State name="portraitPhone" stateGroups="phone,portrait"/>

              <s:State name="landscapePhone" stateGroups="landscape,phone"/>    

          </s:states>   

         

          <s:actionContent>

              <s:HGroup>

              <s:Button icon="assets/qsearch.png" click="navigator.popView(slideUp)"/>

              <s:Button icon="assets/prev.png"/>

              <s:Button icon="assets/next.png"/>

              </s:HGroup>

          </s:actionContent>

         

         

          <s:Scroller x="0" y="0" width="100%" height="100%" >

              <s:HGroup>

                  <s:Image id="pgImage" left="0" top="11" source="assets/gallery/{largeimage}"  />

              </s:HGroup>

          </s:Scroller>

       

      </s:View>