Is Good Stuff

ActionScript 3.0 : Buttons and Drag & Drop

10 Jun, 2008 Articles Submits, Tutorials, Useful Scripts

In ActionScript 3.0, buttons and interactive movieclip stuff is scripted differently. To understand in depth about how ActionScript 3.0 works for interactivity see the diagram beside.

Diagram besides show, a pin with a tag attached to it. In Action Script 3.0, all events such as mouse clicks, mouse move, mouse over, keyboard inputs, even movieclip’s frame movement is controlled using event listeners. You can attached this event listeners to any movieClip, components, stage or sprites to add interactivity features to it. Just like how the pin works…just attach the pin to the object.

Each event listeners has a trigger function. Trigger function is a script which triggers because of the specific event for example, a mouse click. This means if you attached an event listener for mouse click on a button, the trigger function itself will be the script for the button. This is how you make button scripts in Action Script 3.0. Similar to our old on(Press) function.

If you have a button with the instance name of Button1, try attaching an event listener for mouse click, to it like example below.

Button1.addEventListener(MouseEvent.CLICK,ButtonClick);
function ButtonClick(event:Event){
      trace("This button is Clicked!");
}

For drag and drop of a MovieClip, we use two event Listeners. The Mouse_Down and Mouse_Up. For script below you can use MovieClipName.startDrag as trigger function to have a more precise control over it. Sometimes if there’s more than one movieclip inside event.target will specifically target the one the user is clicking - making tat movieclip to be dragged instead of the whole thing

See Example of Flash Below

MovieClipName.addEventListener(MouseEvent.MOUSE_DOWN,DragStart);
MovieClipName.addEventListener(MouseEvent.MOUSE_UP,DragStop);
function DragStart(event:Event){
	trace("Drag Started!");
	event.target.startDrag(false);
}
 
function DragStop(event:Event){
	trace("Drag Stoped!");
	event.target.stopDrag();
}

Scripts are available for download here.

Start Slide Show with PicLens Lite

Other Cool Related Stuff

11 Comments so far »

Is Good Stuff » Drag & Drop and Import Library MovieClip in DocumentClass said

am June 15 2008 @ 8:03 am

[...] post is the extension of the previous one here on how to add Event Listener to control buttons, and MovieClips when there is [...]
Is Good Stuff » AS3: Scripting OnClick Play Sound said

am June 22 2008 @ 9:59 pm

[...] tutorial in we going to create a simple movieClip , attach an click event listener on it and it triggers the function to play a sound object from the [...]
Is Good Stuff » AS 3 : HitTest Checks on ActionScript 3.0 said

am August 6 2008 @ 8:42 am

[...] For those new in EventListener in ActionScript 3.0 here’s a good tutorial for it. [...]
Flash tutorials | AS3 Drag and Drop | Lemlinh.com said

am September 3 2008 @ 12:15 pm

[...] Read more [...]
Bob Pinecreek (Who am I?) said

am October 18 2008 @ 2:05 am

Thank you for the tutorial, but I still have a question.

When I click on the pin at the top of the tutorial, the image of the pin is moved to the center of the page, How do you do that? I am creating my first flash site and I want that effect for the contact page but I no idea what it is called or how to make it.

Thanks again.
Mr.GoodStuff (Who am I?) said

am October 18 2008 @ 8:53 am

Bob if u click any of my picture it’s called a javascript lightbox it’s not an actionscript but a javascript. You might wanna do a research on actionscript 3.0 lightbox version.

Lightbox is the effect of dimming the surround,centerizes the focus picture.

If you wanna centerize somthing in flash. Try creating a movieclip containing the form of contact page…when u convert into movie clip make sure the whitespot is centerize. Then exporting into actionscript via linkage. Then in actionscript call out a library movieclip, addChild(movieClipname) make sure u this script like this …movieClipname.x = stage.width/2; movieClipname.x = stage.height/2; that way ur movieclip is always centerize.
Simon (Who am I?) said

am November 9 2008 @ 11:04 am

Great site. Is there any way to make buttons that can be dragged and dropped?

Basically I want button effects and scripting occuring when I drag it.
Mr.GoodStuff (Who am I?) said

am November 10 2008 @ 10:22 am

Either u make yourself a button or a movieclip with 4 frames and make it track as button. Then key in 2 more event listeners for this button for e.g.

MovieClipName/ButtonName.addEventListener(MouseEvent.MOUSE_OVER,MouseOverEffect);
function MouseOverEffect(evt:Event){
//MovieClip.gotoAndPlay(”EffectOn”);
}

MovieClipName/ButtonName.addEventListener(MouseEvent.MOUSE_OUT,MouseOffEffect);
function MouseOffEffect(evt:Event){
//MovieClip.gotoAndPlay(”EffectOFF”);
}
Uday (Who am I?) said

am December 11 2008 @ 7:31 pm

Hi All,
Can any one tell me how can I call the btn1 action on click btn2?
E.g. There are tow buttons on the stage named btn1 and btn2.
btn1.addEventListener(MouseEvent.CLICK, btn1_clicked)
function btn1_clicked(e:MouseEvent):void{
trace(’you have clicked’);
}
btn2.addEventListener(MouseEvent.CLICK, btn2_clicked)
function btn2_clicked(e:MouseEvent):void{
//???? Here I want to call btn1 action. Can you tell me???????
}

Thanks,
Uday
uday_sgh@yahoo.com
Mr.GoodStuff (Who am I?) said

am December 12 2008 @ 6:25 am

are you trying to simulate a double click event? if it is there’s actually a special double click listener in MouseEvent.

if not event listener always listens to a MouseEvent obviously if btn1 is far away from your mouse to listen to the event onclick on btn2 when it is clicked. Just write a general function for btn2 and btn1

e.g.

btn1.addEventListener(MouseEvent.CLICK, btn1_clicked)
function btn1_clicked(e:MouseEvent):void{
traceFunc(’you have clicked’);
}

btn2.addEventListener(MouseEvent.CLICK, btn2_clicked)
function btn2_clicked(e:MouseEvent):void{
traceFunc(’you have clicked’);
}
Uday (Who am I?) said

am December 14 2008 @ 5:53 am

Thanks Mr. Good Stuff for your quick reply.
In your reply that it not a correct answer as I asked.
My requirement was that I want call the action of btn1.

e.g.

btn1.addEventListener(MouseEvent.CLICK, btn1_clicked)
function btn1_clicked(e:MouseEvent):void{
traceFunc(’you have clicked’);
// Here can be a lot of code related to btn1
}

btn2.addEventListener(MouseEvent.CLICK, btn2_clicked)
function btn2_clicked(e:MouseEvent):void{
// Here I want all the funtionality of btn1
}

See in AS 2.0.
e.g.

btn1.onPress = function(){
traceFunc(’you have clicked’);
}

btn2.onPress = function(){
btn1.onPress();
}

So, I want only the above functionality in AS3.0.

Thanks,
Uday
uday_sgh@yahoo.com