Hi all,
I have been developing a scrolling menu for a while and am almost there with it, just two things to sort out.
The principal of the menu is this:
It is made up of a container MC (container_mc) This container holds 6 buttons, which fill the entire dimensions of the container MC. The Container MC is actually bigger than the stage so you have to drag the container MC horizontally to see all of the buttons. When you hover over the container, the mouse cursor changes to a custom cursor. When you mouseDown the cursor and the mouse pointer are hidden. When you mouseUp the custom cursor returns.
This works fine, however the 1 slight issue i am having is that, if you click and then drag the mouse off of the container MC and then release the button the custom cursor becomes visible (when the button is released) at the point it left the MC.
It is quite hard to explain so if you take a look at the attached files in the zip you will see the problem. I have attached a compiled SWF and the corresponding CS4 FLA.
Here is the AS3 code i have:
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 would be appreciated!!!
Thanks
Matt