Draggable Area with AS3
February 4th, 2010 in Flash | 8 CommentsHere’s a quick tip/tut that you might find useful to create a draggable area with actionscript 3.
1. Create a new flash file (Actionscript 3.0) and save it as drag_area.fla.
2. Rename “layer1″ to “Area” and import on the stage an image much bigger than your stage and convert it to a movie clip with registration point at the top left. Give it an instance name of area_mc.
3. Finally, create a new “actions” layer and open the actions panel. Type the code beneath. To create the draggable area, we use the startDrag method and specify its bounds parameter.
area_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);
area_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);
function dragArea(e:MouseEvent):void{
var bounds:Rectangle = new Rectangle(
stage.stageWidth - area_mc.width,
stage.stageHeight - area_mc.height,
area_mc.width - stage.stageWidth,
area_mc.height - stage.stageHeight
);
area_mc.startDrag(false, bounds);
}
function dropArea(e:MouseEvent):void{
area_mc.stopDrag();
}
4. That’s it, test your movie to see it in action.
Feb 5th, 2010
thanks a lot!
Feb 5th, 2010
Very simple but useful, Thanks.
Mar 18th, 2010
simply useful
Mar 18th, 2010
Hi everybody, can somebody help me with hit test in game.
My code:
var counter:Number = 0;
var startX:Number;
var startY:Number;
speak_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
speak_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
live_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
live_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
play_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
play_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
cook_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
cook_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
drink_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
drink_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
listen_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
listen_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
wear_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
wear_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
learn_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
learn_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
function pickUp(event:MouseEvent):void {
event.target.startDrag(true);
reply_txt.text = “”;
event.target.parent.addChild(event.target);
startX = event.target.x;
startY = event.target.y;
}
function dropIt(event:MouseEvent):void {
event.target.stopDrag();
var myTargetName:String = “target” + event.target.name;
var myTarget:DisplayObject = getChildByName(myTargetName);
if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
reply_txt.text = “Good Job!”;
event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
event.target.buttonMode = false;
event.target.x = myTarget.x;
event.target.y = myTarget.y;
counter++;
} else {
reply_txt.text = “Try Again!”;
event.target.x = startX;
event.target.y = startY;
}
if(counter == 8){ //pocet spravnych umiestneni
reply_txt.text = “Congrats, you’re finished!”;
}
}
speak_mc.buttonMode = true;
live_mc.buttonMode = true;
play_mc.buttonMode = true;
cook_mc.buttonMode = true;
drink_mc.buttonMode = true;
listen_mc.buttonMode = true;
wear_mc.buttonMode = true;
learn_mc.buttonMode = true;
I want new tab that show points how many are correct and how many are incorrect.
I want to add check button with function that show new little window with results (correct and wrong points or answers). Function with counter of correct and incorrect answers.
Thanks
Mar 18th, 2010
I don’t get it. I’m new to the whole AS3. I get errors when I execute de SWF.
1120: Acces of undifined property area_mc.
Can someone explain me how I can fix this…
Mar 22nd, 2010
Did you try changing all the “area_mc” references to your own movie clip’s instance name?
Apr 3rd, 2010
I need to do something similar to this.
Rather than drag the image, i want to drag the “camera” so to speak, over the image to create the illusion that the image is staying still, if this makes sense
Jun 10th, 2010
Chris : You could try to place an image on the stage and then use a draggable mask to emulate a camera’s viewfinder…not sure if that was the effect you were trying to get. This is basically like a draggable spotlight.