Flash Tutorial: Button using Movie Clip symbol.

Flash Tutorial: Button using Movie Clip symbol.

Flash Tutorial: Creating a button using a movieclip and ActionScript

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc..

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Demo:

This movie requires Flash Player 8

Description: In this tutorial, I will explain how to create a button as a movieclip symbol using ActionScript rather than using the button symbol.

Let’s get started!

Select “File > New” (command-“N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “button_tut1.fla”. Feel free to change the document dimensions to whatever you like (“Modify > Document or “command-J”), but for the purpose of this tutorial, I will use 250×100 pixels.

The first thing we will need to do is draw a simple shape for our button. Select the rectangle tool, set your fill color to whatever you would like (I chose red), and a stroke of none. In the property window (Window > Properties > Properties or command-F3), set the corners to rounded at 9 (Fig. 1). Draw out a rectangle approximately 100×20 pixels. Tip: You can use the up or down arrows on your keyboard when dragging out your rectangle shape to increase or decrease the roundness of your corners.

Button Tutorial figure 1

You should have a rectangle similar to the Fig. 2.

Button Tutorial figure 2

Select the rectangle, and convert to a movie clip symbol (Modify > Convert to Symbol or F8). Remember, we are creating a movie clip button, so be sure to select the “movie clip” radial. Give your symbol an appropriate name, I called mine “mc_button”.

—- ads by google —-

Now, let’s add a little styling to our button. Double-click on our new symbol to bring us into the symbol editing mode. Select the rectangle, and Edit > Copy (command-C). In the timeline, name your layer “button solid” and create a new layer called “button highlight”. Lock the “button solid” layer, and move it to the bottom layer. On the “button highlight” layer, do a paste in place (Edit > Paste in Place or shift-command-V). With this rectangle selected, change the width to 92 and the height to 5 in the Info pallette (Window > Info or command-I (Fig. 3)), and select a linear gradient fill. In the color pallete, set your gradient scale to be 100% white on one end and 0% white on the other. With the rectangle still selected, select the gradient tool (located with your transform tool in the tools pallette), and rotate your linear gradient to be vertical (Tip: Hold shift when rotating to snap to 45º angles), with the 100% white on the top and the 0% white on the bottom. Also, shrink the gradient tool so that it is the height of your rectangle. Now, position this rectangle slightly below the top edge of your solid rectangle, and centered from side to side. You should have a shape that looks like Fig. 4.

Button Tutorial figure 3
Button Tutorial figure 4

Create a new layer, and call it “text”. Add a text block centered on your button shape and type “button”. You will now have something that looks like Fig. 5.

We are now done with the first state of our button, and now we can add the functionality that maves our movie clip behave like a button. For that, we will need to add some labels and then modify our button on the different frames.

Still working in your button symbol, add a new layer and call it “labels”. On your timeline, add frames to your timeline so that it extends to frame 45 for all layers. Insert a new keyframe (Insert > Timeline > Keyframe or F6) at frame 15 and 30 of the “labels” layer. click on frame 1, and in the Properties window, type “btn_off”. Repeat the process at Frame 15, but label it “btn_over”, label frame 30 “btn_down”. Add a new keyframe to the “button solid” layer at frame 15 and frame 30. You should now have a timeline that looks similar to Fig. 6.

Button Tutorial figure 6

At frame 15, select the “button solid” layer, and change the color of your shape, I’ve used a green for this example. Do the same thing at frame 30 and use a third color, I’ve used a blue. These color changes are simply for illustrative purposes. You can modify the buttons however you like, I just wanted to show a drastic change for when we add the ActionsScript that gives our movieclip a button functionaily.

We are now ready to start adding some ActionScript. Still within your button symbol, create a new layer, move it to the top of the timeline and label it “actions”. Add keyframes at 15 and 30. Click on frame 1 of your “actions” layer, and in the Actions panel (Windows > Actions or alt-F9) and add the following code:

stop();

This simply stops our moviclip from playing automatically (remember, we want the changes to take effect when the mouse rolls over the rectangle, like a button). Add the same ActionScript to the “actions” layer at frame 15 and 30. Our button symbol is now complete, so we need to return to the main timeline (Scene 1) where we will be adding the ActionScript that controls the button functionality.

Click on the button symbol, and give it an appropriate instance name in the Property Window. I’ve used “mc_button”. With the symbol still selected (but NOT in editing mode), add the following code to the Actions panel:

on (rollOver) {
_root.mc_button.gotoAndStop(“btn_over”);
}

on (rollOut) {
_root.mc_button.gotoAndStop(“btn_off”);
}

on (press) {
_root.mc_button.gotoAndStop(“btn_down”);
}

on (release) {
_root.mc_button.gotoAndStop(“btn_off”);
getURL(“http://www.spitshine-design.com”);
}

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (“). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

That’s it, our movie clip as a button is now complete. Go ahead and test your movie and check the button state change when you roll on, roll off, mouse down or mouse release.

Now I will try and explain the code.

on (rollOver) {

This is saying when the user rolls their mouse over the button, perform the actions within the curly brackets.

_root.mc_button.gotoAndStop(“btn_over”);
}

This is telling flash to go to the instance of “mc_button”, and go to the frame labeled “btn_over” and stop.

on (rollOut) {
_root.mc_button.gotoAndStop(“btn_off”);
}

on (press) {
_root.mc_button.gotoAndStop(“btn_down”);
}

on (release) {
_root.mc_button.gotoAndStop(“btn_off”);
getURL(“http://www.spitshine-design.com”);
}

This code is basically doing the same thing as above for the various mouse events (roll off, click and release).

getURL(“http://www.spitshine-design.com”);

This is the destination URL for when a user releases the mouse button while over the button. You can set this url to whatever you like.

While this tutorial seems pretty lengthy, it’s really because I wanted to be as detailed as possible so users can understand what is happening. Once you do this once or twice, I think you will find that creating movie clip buttons is fast and simple, and as you learn more about Flash, you will be able to create more animated buttons rather than just a simple color change. I plan to do another tutorial in the near future that illustrates some of the advanced effects you can apply to a button when you create it using the movie clips symbol as opposed to the button symbol.

I hope this Flash tutorial was helpful, and as always comments, questions or feedback are always welcome!

Source files: Flash Button Tutorial: Source File

Be Sociable, Share!

25 Comments so far:

  1. fatma tawfik says:

    thank for your efforts……and i am beginer so this tutorial help me to anderstand how i can make buttons

  2. Richard says:

    Thanks for this tutorial, it has helped me to create a cool animated button, but could you please help me with a rolloff problem I have. When you click the button the animation plays but if you roll off the button the animation stops. What I need is the animation to continue to the end and stay on the last frame of the mc if clicked, but the rollover and rolloff effect has to remain if not clicked.

    Hope this makes sense!

    example swf http://www.realtimedesign.co.uk/dali-button-trans1.swf
    example fla http://www.realtimedesign.co.uk/dali-button-trans1.fla

    I would really apreciate your help on this.

  3. Mike says:

    Hi Richard,

    I took a look at your files here, very cool animation effect. I really like how you are thinking beyond the typical button states and adding animation to the button, which is what a movieclip button is really for.

    However, I think for this case, the best way to accomplish what you are looking for is to add your on click animation as a separate movieclip rather than adding it into the button mc.

    What I would do is take all the animation that you want to play after the mouse click and create a new movie clip symbol (Tip: You can select all the frames on your button movieclip, and choose “edit > Timeline > Copy Frames”). Add your new symbol to the main stage, give it an instance name (“mc_transition”), and then modify the following code to your button movie clip within the onRelease brackets:

    _root.mc_gallery.gotoAndStop(“btn-down”);
    _root.mc_transition.gotoAndPlay(“begin”);

    This stops your button movieclip at the “btn-down” frame, and then tells the “mc_transitions” timeline to play at the beginning.

    Here is an updated file:
    http://mikestickney.com/wordpress/wp-content/uploads/dali-button-trans1_Spitshine.fla
    it was just a quick mockup, so it might need a little tweaking, but hopefully you get the idea.

    Thanks for reading my tutorials, and if you have any other questions, hopefully I can help you out.

    – Mike

  4. Lisa says:

    Hi Mike,

    Thanks for the great tutorial! Question: I’m new to flash, how do you make more than one of these buttons, changing the text and colors, in the same document? Every time I try, it keeps modifying the original button. Many thanks!
    Lisa

  5. Mike says:

    Hi Lisa,

    It is important to note that when working with symbols, any edit you make to the actual symbol whether on the stage or from the library, you are changing ALL the instances of that symbol. You can change things such as size or alpha or overall color of symbol instances on the stage, but if you modify the symbol itself, you are changing every instance of that symbol throughout your movie (does that make sense). I’m guessing what you might be looking to do is have multiple buttons with different text for your movie. In that case, you would need to make a duplicate of the button.

    To make more than one of these buttons, click on the symbol in your library, right-click (ctrl-click) and select duplicate… and give the symbol a unique name. Then, add that to the stage, and give it a new instance name. Remember, for each button symbol, you will need to change the AS code to reflect the instance name. (hope that makes sense).

    Alternatively, if all you want to do is change the text and not the button itself, take a look at this tutorial, which is another way of creating buttons with movieclips.
    http://mikestickney.com/wordpress/flash-tutorial-animating-a-button-using-a-mask-effect/

    Thanks for reading, and if you have any other questions, feel free to ask and hopefully I can help you out.

    – Mike

  6. sowndar says:

    it is realy nice and creative work.tnx.bye.

  7. Nathan says:

    I am new to flash and I have done this tutorial twice now with no results.

    The “getURL” code keeps giving me the error:
    ‘)’ or ‘,’ expected

  8. Mike says:

    Hi Nathan,

    I’m sorry that you are having trouble with this tutorial…

    I would be happy to help you figure out your problem, but not sure where you are going wrong. If you could send me the file you are using to contact@spitshine-design.com or try pasting the code you are using here, I will try my best to trouble shoot for you.

    For starters, be sure your code looks like this, with the url (in double quotes) being the only thing that should be changed:

    on (release) {
    _root.mc_button.gotoAndStop(”btn_off”);
    getURL(”http://www.spitshine-design.com”);
    }

    You can also try downloading the source file (at the end of this tutorial) and take a look at that code and test and see if you get the same errors or if your code looks different.

    Thanks for reading, and let me know how if you still have problems.

    – Mike

  9. louis says:

    hi mike,
    thx for the tuto, it help me a lot to understand the thing

    unfortunatly for me, it doesn’t work :'(
    i dont know why but i just cant learn flash! might be my kurse. i’ve learn dreamweaver in a week but i work on flash for several weeks now n nothing’s working

    i copy n paste ure code n it give me error message
    i put a stop on the end of each of my anim but it keep looping

    coult u look at it please,
    i’ll be very gratefull

    http://www.corleonisworld.com/atemi2007/adp3.fla

    thx

    louis

  10. Mike says:

    Hi Louis,

    I took a quick look at your file… it’s going to take me a little time to get through it, but I’ll try and get back to you as soon as possible.

    And I hope you don’t get discouraged with Flash. It’s really a great program, and once you understand it, you’ll find it’s quite easy. It’s just a little finicky about proper coding… I’m sure you’ll get the hang of it soon enough.

    Thanks for reading, I’ll let you know what I come up with after looking at your file.

    – Mike

  11. louis says:

    thanks a lot mike
    you r very kind

    i wont dispair; i cant dispair
    flash is what i need to get my carrer started

    tell me what i did wrong, if the way i to do things i used wat too complex or if its fine.

    thanks again

    louis

  12. Mike says:

    Hi louis,

    Ok, I took a look at your file… Unfortunately, there’s quite a few things wrong here, so I’ll start with a few little things, and we’ll get through them all, I promise…

    First, when adding the code above, you are going to add them to the movie clip ONLY. In your file you have them added to the keyframe AND the movie clip. You can tell that it’s added to the keyframe because you will see a little “a” on the keyframe in your timeline. You need to remove the code here. You should still have the same code on the clip. So, when you click on the keyframe with the clip, you should not see any code in your Actions panel… when you click on the clip symbol on your stage, you should see the code in the Actions panel… does that make sense?

    Second issue… all those pesky errors! Where you have quotes in your code, you are using what are called smartquotes… They look like quotes, but are a little larger, and they have a little “tail” that curves… I apologize, since this may have happened from copying the code directly from the web and pasting into Flash. What you want to do is wherever you have quotes in your code, make sure you are using the double quotes key (next to the Return/Enter key on American keyboards). If you still need clarification, you can download the source file (at the end of this tutorial) and copy and paste the code from there rather than this page. Does that make sense?

    Go ahead and see if you can make those fixes, and then let me know how you make out. We’ll tackle the other issues from there, I just didn’t want to overwhelm you all at once.

    Thanks for reading, and hang in there, we’ll get it working properly!

    – Mike

  13. louis says:

    it work! its alive!

    thanks a lot master for helping me to solve it
    i’ll be in your dept

    result: http://www.agedepierre.com

    louis

  14. Randy says:

    I’ve aleady put alot of work into a fla that I am using as3 in (probably should have used as2). So I created the btn_mc and went in and edited the btn_mc and all the other states and scripts as per your instructions and went back out to the main timeline. But when I click on the btn_mc and f9 add the script I get an error that the current selection can’t have actionscript applied to it. Has something changed with as3 that is causing the error?

  15. Mike says:

    Hi Randy,

    Yes, things have changed in AS3. Actions are no longer supported on buttons or MovieClip instances. This tutorial is for AS 2.0.

    I’m not familiar with AS 3 yet (still learning), so unfortunately I’m not sure how to help you out.

    – Mike

  16. Sreenivasulu says:

    Thanks for giving good example for buttons and other things .anyway its good.

    Thanks,
    Seenu.

  17. Randy says:

    I managed to work it out and your tutorial got me on the right track so thank you.
    -Randy

  18. Mike says:

    Glad to hear you got it working Randy.

    – Mike

  19. mak says:

    This is a very cool turorial with this tutorial I learn how to creat a animated button I am very thank ful you if you send some professional button tutorial because I am new in flash my email id is asim_khans@hotmail.com

  20. Max says:

    Hi Mike, thanks a lot this problem has been bugging me for a while now and I’m very pleased you offered a working solution. I too encountered the same issue as Richard and the easiest solution was to take the roll out action from the as.
    Many thanks.

  21. Nick says:

    Hi Mike, thanks for this. I just wandered what the code would be to link to a different scene and/or place on a scene instread of a direct url?

    Thanks

  22. MrStick says:

    Mike,

    I’ve created a Flash file I was hoping to be able to use for a website. I’ve gotten to just about the end, and have run into a problem. When you try to click on the buttons on the menu, nothing happens, and I don’t know why. I was hoping you could take a look at it and explain what’s going on. I’m guessing there’s something wrong with the coding, but again, I don’t know. You can download the file here:

    http://www.box.net/shared/qiyydjkcyl

    Thanks.

    P.S. Once it’s all done, how would I go about getting it on the interent?

  23. pligg.com says:

    Flash Tutorial: Button using the movieclip symbol…

    In this tutorial, I will explain how to create a button as a movieclip symbol using ActionScript rather than using the button symbol. This is a great technique if you want to add advanced animation to your button symbols….

  24. ravi says:

    its super for basics but i try to animation some thing different like button movements……..
    tks for ur valuable information

  25. Mike says:

    Due to overwhelming response to this tutorial, comments for this post are closed. If you are having problems, please refer to other users comments above, as the issue may already have been addressed.

    Thanks for reading,
    Mike