4 Replies Latest reply on Jan 20, 2009 5:14 PM by flyingfishnm

    Not able to pause/resume a scrolling image

    flyingfishnm
      Hi All,

      I wrote a post a few days ago re trying to pause/resume a scrolling image. I still have the problem which is holding up development. I've attached the code snippet and be grateful for some help please. If the image is replaced with a text string, the pause/resume methods work. I've stepped through the code with the debugger and the method(s) are called but it still doesn't stop the scrolling!

      Any help is warmly appreciated or any suggestions, with example code, on a better way to do it. Thanks

      cheers!

      davej
        • 1. Re: Not able to pause/resume a scrolling image
          -Hob Level 1
          The first thing I would recommend trying is to stop listening to mouseOver and mouseOut events on your image and use rollOver and rollOut instead. mouseOver and mouseOut are dispatched each time the mouse passes over any children of the object to which you're listening, whereas rollOver and rollOut only dispatch once when the mouse passes over the object you're listening to and again when the mouse leaves your object. They're usually more in line with what you would generally expect from mouseOver and mouseOut.

          I'm not sure that it will solve your problem, but it may. You're listening to an image object, which may mean that mouseOver and mouseOut are firing as you pass over each pixel (that's a total guess). Give it a shot, and see if it helps.

          -Hob
          • 2. Re: Not able to pause/resume a scrolling image
            matthew horn Level 3
            You're mixing in a move effect with the example for the callLater() method that was meant to manually perform the steps necessary to mimic a movement effect. To add the move effect (so you can get the pause and restart working), you need to rewrite it a little like this:

            <?xml version="1.0"?>
            <!-- layoutperformance/CallLaterTicker.mxml -->
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApp()" mouseMove="onMouseMove(event)">
            <mx:Script><![CDATA[
            [Bindable]
            public var speed:Number = 5;

            private function initApp():void {
            callLater(moveImage);
            }

            public function changeSpeed():void {
            speed = speedSelector.value;
            }

            private var mouseXPos:Number;
            private var mouseYPos:Number;

            private function onMouseMove(e:Event):void {
            mouseXPos = e.target.mouseX;
            mouseYPos = e.target.mouseY;
            }
            private function moveImage():void {
            if ((mouseXPos >= theImage.x && mouseXPos <= theImage.x + theImage.width) && (mouseYPos >= theImage.y && mouseYPos <= theImage.y + theImage.height)) {
            trace("move over image");

            } else {
            myMove.end();
            var xpos:Number = theImage.x;

            if (xpos > c1.width) {
            xpos = 0;
            }

            myMove.xTo = xpos + speed;
            myMove.play();
            }
            callLater(moveImage);

            }
            ]]></mx:Script>

            <mx:Move id="myMove" target="{theImage}"/>


            <mx:Panel title="Ticker Sample" width="400" height="200">
            <mx:Canvas id="c1"
            horizontalScrollPolicy="off" width="100%">
            <mx:Image id="theImage" source="@Embed(source='C:/Documents and Settings/mhorn/My Documents/My Pictures/htlg.png')"
            height="100"
            width="100"
            />
            </mx:Canvas>
            <mx:HBox>
            <mx:Label text="Speed:"/>
            <mx:HSlider minimum="1" maximum="10" value="{speed}"
            id="speedSelector" snapInterval="1" tickInterval="1" liveDragging="true"
            change="changeSpeed()"/>
            </mx:HBox>
            </mx:Panel>

            </mx:Application>

            hth,

            matt horn
            flex docs
            • 3. Re: Not able to pause/resume a scrolling image
              matthew horn Level 3
              Here's a more elegant solution. Get rid of the callLater() calls entirely, and use a timer to invoke the move effect:

              <?xml version="1.0"?>
              <!-- layoutperformance/CallLaterTicker.mxml -->
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApp()">
              <mx:Script><![CDATA[
              import flash.utils.Timer;
              import flash.events.TimerEvent;

              [Bindable]
              public var speed:Number = 5;

              private var myTimer:Timer;

              private function initApp():void {
              myTimer = new Timer(1, 0);
              myTimer.addEventListener("timer", moveImage);
              myTimer.start();
              }

              public function changeSpeed():void {
              speed = speedSelector.value;
              }

              private function moveImage(e:Event):void {
              myMove.end();
              if (theImage.x > c1.width) {
              theImage.x = 0 - theImage.width;
              }
              myMove.xTo = theImage.x + speed;
              myMove.play();
              }
              ]]></mx:Script>

              <mx:Move id="myMove" target="{theImage}"/>

              <mx:Panel title="Ticker Sample" width="400" height="200">
              <mx:Canvas id="c1"
              horizontalScrollPolicy="off" width="100%">
              <mx:Image id="theImage" source="@Embed(source='C:/Documents and Settings/mhorn/My Documents/My Pictures/htlg.png')"
              height="100"
              width="100"
              mouseOver="myTimer.stop()"
              mouseOut="myTimer.start()"
              />
              </mx:Canvas>
              <mx:HBox>
              <mx:Label text="Speed:"/>
              <mx:HSlider minimum="1" maximum="10" value="{speed}"
              id="speedSelector" snapInterval="1" tickInterval="1" liveDragging="true"
              change="changeSpeed()"/>
              </mx:HBox>
              </mx:Panel>

              </mx:Application>


              hth,
              matt horn
              flex docs
              • 4. Re: Not able to pause/resume a scrolling image
                flyingfishnm Level 1
                Hi Matt,

                Thanks for both of your replies this does exactly what I want. I now need to understand the code and implement it into my project.

                Thanks again!

                Davej