Flash CS4 AS3 horizontal movieclip scrolling with mouse move

Question

I'm new to AS3 and have been working on an XML driven navigation system written in AS3.

At present, I've imported the contents of an XML file and plotted it inside a containing MovieClip created at root level dynamically on the stage. This MovieClip is called 'container'.

What I want to accomplish is a smooth, accelerating / decelerating effect which animates the container movieclip along the X axis depending on where the mouse cursor is in relation to the middle of the stage.

My code can be found here: http://pastie.org/521432

Line 87 onwards is the code I'm using right now to make the movieclip scroll left & right.

What I have does work but is clunky but does work - I just want it to be a little more polished and have drawn a blank with Google. Because I want the MovieClip to continue to scroll at the current relative speed even when the mouse stops moving, I used an instance of the Timer class.

Can anyone suggest improvements? Thanks in advance.

Answer 1

You should separate out you calculations and your drawing methods. So have it do all the calculations in an onMouseMove handler, but actually draw the changes in an onEnterFrame handler.

Also I think your algorithm could be much simpler and nobody would notice. I made a quick example of how you might do it. paste this code into an AS3 file called Main.as and make it the document class of a new FLA.

package 
{
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class Main extends Sprite 
    {
     private const boxCount:int = 10;
     private const boxWidth:int = 45;
     private const boxMargin:int = 5;
     private const startPoint:int = 150;
     private const boxesWidth:int = boxCount * (boxWidth + boxMargin);
     private const endPoint:int = boxesWidth + startPoint;
     private const zeroPoint:int = boxesWidth / 2 + startPoint;

     private var container:MovieClip;
     private var targetX:Number;
     private var speed:Number = 0;

     public function Main():void 
     {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
     }

     private function init(e:Event = null):void 
     {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      container = new MovieClip();
      addChild(container);
      container.x = 150;
      container.y = 300;
      for (var i:int = 0; i < boxCount; i++) 
      {
       container.graphics.beginFill(Math.random() * 0xFFFFFF);
       container.graphics.drawRect(i*(boxWidth+boxMargin), 0, boxWidth, boxWidth);
      }

      addEventListener(Event.ENTER_FRAME, enterFrameHandler);
      stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
     }

     private function mouseMoveHandler(e:MouseEvent):void 
     {
      var distanceFromCenter:int = stage.mouseX - zeroPoint;
      speed = distanceFromCenter * -0.01; // Bring number into a good range, and invert it.
     }

     private function enterFrameHandler(e:Event):void 
     {
      container.x += speed;
     }
    }
}

Answer 2

Im sorry, but I'm just adding to the problem here, askin another question, but what part of that relates to the actual movieclip on the stage? is it 'container'? so would I just make a mc the size of the stage called 'container'?

Also, how do i make this as file the 'document class' of my fla file

Answer 3

How could this code be modified so that it performs like a carousel - automatically drawing the first box after it has scrolled up to the last box? Could this also be made to automatically scroll when the mouse isn't inside the stage?

Answer 4

Interesting work here, ill take on your project. Are you still looking for an answer here? send a reply and I have a few questions

Answer 5

Hi there I found this code very helpful but wanted the scrolling to stop when at the extremities of the movieclip being scrolled (container) I'm new to as3 any help would be really appreciated