Horizontal Menu - Easing

Content
1

Hello,

I have been working on a horizontal AS3 draggable menu for some time now and i am almost there with it. I am basically trying to replicate the menu at www.newcruelty.com.

So far i have got everything to work apart from the easing movement when the menu is dragged. The menu is quite simple, it is made up of a container mc. Inside this container there are 6 buttons which fill the dimensions of the container. The container itself is bigger than the stage and the user must click and drag the menu horizontally to see the rest of the menu. This is working. However, i am still after an easing effect when the menu is being dragged as it stops dead (because it is using the startDrag and stopDrag commands). If anyone could show me using the attached FLA (or code below) how to implement an easing effect on the dragging of this menu i would be so grateful as i cannot manage to do it! (perhaps using tweenlite or tweenmax if its easier, or by using simple physics - just anyway its possible!!!)

I have attached a zip file that contains a compiled SWF and a CS4 FLA file.

This is the AS3 i have so far:


stop();

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
import flash.ui.Mouse;

// MENU LINKS BUTTON CLICKS
container_mc.linkbtn1.addEventListener(MouseEvent.CLICK,mouseClick1);
container_mc.linkbtn2.addEventListener(MouseEvent.CLICK,mouseClick2);
container_mc.linkbtn3.addEventListener(MouseEvent.CLICK,mouseClick3);
container_mc.linkbtn4.addEventListener(MouseEvent.CLICK,mouseClick4);
container_mc.linkbtn5.addEventListener(MouseEvent.CLICK,mouseClick5);
container_mc.linkbtn6.addEventListener(MouseEvent.CLICK,mouseClick6);

function mouseClick1(mEvent:MouseEvent):void {
  if(mode == DRAG_MODE) return; 
  holder_mc.gotoAndPlay(2);
};

function mouseClick2(mEvent:MouseEvent):void {
  if(mode == DRAG_MODE) return; 
  holder_mc.gotoAndPlay(2);
};

function mouseClick3(mEvent:MouseEvent):void {
  if(mode == DRAG_MODE) return; 
  holder_mc.gotoAndPlay(2);
};

function mouseClick4(mEvent:MouseEvent):void {
  if(mode == DRAG_MODE) return; 
  holder_mc.gotoAndPlay(2);
};

function mouseClick5(mEvent:MouseEvent):void {
  if(mode == DRAG_MODE) return; 
  holder_mc.gotoAndPlay(2);
};

function mouseClick6(mEvent:MouseEvent):void {
  if(mode == DRAG_MODE) return; 
  holder_mc.gotoAndPlay(2);
};

// MENU DRAGGING
const DRAG_MODE:String = "drag_mode";
const CLICK_MODE:String = "click_mode";
var mode:String;

container_mc.addEventListener(MouseEvent.MOUSE_DOWN, onContainerMouseDown);

function onContainerMouseDown(event:MouseEvent):void{
 container_mc.addEventListener(MouseEvent.MOUSE_MOVE, onContainerMove);
 container_mc.addEventListener(MouseEvent.MOUSE_UP, onContainerMouseUp);
 mouseovermenu.visible = false;
 Mouse.hide();
 cursorhand.visible = false;
}

function onContainerMove(event:MouseEvent):void{
  container_mc.removeEventListener(MouseEvent.MOUSE_MOVE, onContainerMove);
  container_mc.removeEventListener(MouseEvent.MOUSE_UP, onContainerMouseUp);
  container_mc.stage.addEventListener(MouseEvent.MOUSE_UP, onContainerDragUp);
  var dragBounds:Rectangle = new Rectangle(-950, 120, 960, 0)
  container_mc.startDrag(false, dragBounds);
  mode = DRAG_MODE;  
}

function onContainerMouseUp(event:MouseEvent):void{
  container_mc.removeEventListener(MouseEvent.MOUSE_MOVE, onContainerMove);
  container_mc.removeEventListener(MouseEvent.MOUSE_UP, onContainerMouseUp);
  mode = CLICK_MODE;
}

function onContainerDragUp(event:MouseEvent):void{
 container_mc.stage.removeEventListener(MouseEvent.MOUSE_UP, onContainerDragUp);
 container_mc.stopDrag();
 cursorhand.visible = true;
}

// CURSOR CHANGE FOR CONTAINER MC
container_mc.addEventListener(MouseEvent.MOUSE_MOVE, follow);

function follow(evt:MouseEvent):void{
	Mouse.hide();
	cursorhand.mouseEnabled = false;
    cursorhand.x = mouseX;
	cursorhand.y = mouseY;
}

//MOUSEOVER EFFECTS FOR CONTAINER MC
container_mc.buttonMode = true;

container_mc.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler);
container_mc.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler);

function onRollOverHandler(myEvent:MouseEvent){
mouseovermenu.visible = true;
mouseovermenu.gotoAndPlay(1);
mouseovermenu.x = mouseX;
mouseovermenu.y = mouseY;
mouseovermenu.startDrag();
cursorhand.visible = true;
}

function onRollOutHandler(myEvent:MouseEvent){
mouseovermenu.visible = false;
Mouse.show();
cursorhand.visible = false;
}

Any help is appreciated!

Thanks

Matt