Welcome to the blog for Spitshine Design

Here you can find tips, tricks, tools and tutorials as well as other musings from Mike Stickney, Web Designer and Online Marketer.

Flash Tutorial: Button using Movie Clip symbol.

This entry was posted on Wednesday, March 12th, 2008 at 12:16 am and is filed under Flash, Flash Tutorial, Tutorials, Web Design.

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

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

Share and Enjoy:
  • LinkedIn
  • Twitter
  • Facebook
  • DZone
  • Digg
  • del.icio.us
  • Slashdot
  • Mixx
  • Google Bookmarks
  • Technorati
  • Internetmedia
  • Scoopeo
  • StumbleUpon
  • Add to favorites
  • FriendFeed
  • Propeller
  • Reddit

Tags: , , ,

25 Responses to “Flash Tutorial: Button using Movie Clip symbol.”

fatma tawfik on April 2nd, 2008 at 2:15 pm said:

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

Richard on April 6th, 2008 at 9:57 am said:

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.

Mike on April 6th, 2008 at 5:03 pm said:

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

Lisa on April 7th, 2008 at 8:34 pm said:

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

Mike on April 7th, 2008 at 9:03 pm said:

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

sowndar on April 11th, 2008 at 8:01 am said:

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

Nathan on April 17th, 2008 at 10:35 pm said:

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

Mike on April 17th, 2008 at 11:28 pm said:

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

louis on April 18th, 2008 at 6:50 am said:

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

Mike on April 18th, 2008 at 12:52 pm said:

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

louis on April 18th, 2008 at 1:44 pm said:

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

Mike on April 18th, 2008 at 9:57 pm said:

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

louis on April 19th, 2008 at 4:15 pm said:

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

Randy on April 21st, 2008 at 10:43 pm said:

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?

Mike on April 22nd, 2008 at 12:04 am said:

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

Sreenivasulu on April 23rd, 2008 at 4:40 pm said:

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

Thanks,
Seenu.

Randy on April 23rd, 2008 at 9:26 pm said:

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

Mike on April 23rd, 2008 at 9:52 pm said:

Glad to hear you got it working Randy.

- Mike

mak on April 24th, 2008 at 10:53 am said:

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

Max on August 13th, 2008 at 12:30 pm said:

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.

Nick on May 19th, 2009 at 8:14 pm said:

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

MrStick on June 16th, 2009 at 5:45 am said:

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?

pligg.com on July 11th, 2009 at 3:24 am said:

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….

ravi on September 18th, 2009 at 4:36 am said:

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

Mike on January 16th, 2010 at 6:24 pm said:

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