Give your Flash Movie Clip Buttons some Class, Part 1

Flash buttons are useful and quick to implement but they’re also very limited. More often than not I found myself making a movie clip to use as a button rather than using Flash’s button symbol. One of the main reasons is that a button doesn’t have a “selected” or “disabled” frame.

For example, let’s say I want to use a series of buttons as a navigational menu with each button taking me to a different section of the application. When the user clicks a button I can navigate to the appropriate frame in my app but there’s no easy, canned way to then make that button stand out from the rest of the buttons to indicate that it’s now the “selected” button.

Or, say my buttons reflect a menu of category options but certain options aren’t available for all categories. In this case, I’d want to gray out, or “disable” that button.

In both cases I need to use a movie clip as my button. But coding the Movie Clip to act as a button can be time-consuming. First I have to code my onRollOver, then onRollOut then OnRelease. I also have to keep track of which one is selected. It really became a burden that I was sick of dealing with.

I created a simple class takes care of a lot of the grunt work associated with making your own movie clip buttons.

Here’s a demonstration:

Download the sample fla and McButton class here

To use the class, first place the McButton.as file in the same folder as your fla. Next, create a set of movie clip buttons with five frames. Label each frame as follows: active, over, down, selected, and disabled. Design your button look for each state with "active" being the default view. Look at my demo for an example.

Now, assign each of the buttons in your set to the McButton class. To do so, right-click the movie clip in your library and click properties. If Advanced properties are not shown, click the Advanced button. Check the "Export for ActionScript" checkbox and type McButton in the AS 2.0 class box.

Now the only mouse event you need to write for each button is the onRelease. The only catch is that you must remember to call the releaseCheck function inside your onRelease code. For example:


btnHome.onRelease = function() {
	this.releaseCheck();
	gotoAndStop("Home");
}

The releaseCheck function takes care of tracking which button is currently selected. If your buttons don't seem to be working properly, check that the releaseCheck call is in all of your onRelease functions.

To disable a button, simply call the disableBtn function for the button you want to disable:


btnPersonal.disableBtn();

Disabling a button will move your movie clip to the disabled frame and set its enabled property to false so it cannot be clicked.

To re-enable a button, call the enableBtn function:


btnPersonal.enableBtn();

That's about all there is to it. I know this is a simple class but it's been invaluable to me so I thought I'd share it.

So why is this part 1?
Well, at the moment, it will only work for one set of buttons per application. The reason is that the variable I use to track the selected button is static and therefore the same value for any button that uses the class. To hack around this limitation, all you need to do is copy the class file to McButton2.as and link a second button set to the duplicate class.

I am currently working on a class that will eliminate that limitation which will be posted as Part 2 when I finish it anytime within the next 10 years 😉

-rG

17 thoughts on “Give your Flash Movie Clip Buttons some Class, Part 1

  1. I tried your class file, but the buttons work, but on the selected state for some reason. the rollover doesnt seem to work.
    I have the over,down,selected states all the same colour

  2. Hi sorry, I didnt make myself clear there, basically the onrollover doesnt work on any of the 8 buttons i created. When you press on any button it works as it is supposed to, and the selected state stays on. Its just the over state that doesnt seem to work.

  3. Hi Kamran,
    Are you saying that the onRollover doesn’t work at all, or just when a button is selected?
    The onRollover state was designed to indicate when the mouse is over a selectable button. When a button is in the selected state it is no longer selectable so I turn the onRollover functionality off.

    -Glenn

  4. Hi,
    the on rollover doesnt work on any of the buttons, regardless of state. The button functionality clearly works, as when I rollover any of the buttons the hand cursor appears, it just doesnt change the state of my button.
    the only state that seems to work is the selected state.

  5. Hi Kamran,

    Sounds like you’re missing something in your configuration. Here are some things to try:

    – Make sure the class file is in the same folder as your fla
    – Make sure you’ve entered the class name in the move clip properties (right-click the movie clip in your library and click properties, check the “Export for ActionScript” checkbox and type McButton [CASE MATTERS] in the AS 2.0 class box.)
    – Make sure the frames in your movie clip button are labeled properly and in all lower case: active, over, down, selected and disabled.
    – Make sure you have a “stop();” in the first frame of your movie clip button

  6. Hi glenn,

    Thank you very much for replying so fast, but I have done all of the things you have mentioned, im not a flash beginner so I understand all the points you just made. which is my problem, as I can’t seem to find the fault, button labels are correctly named, etc.

  7. hi glenn,

    just a quick questions, if im using this button class for say video player buttons, and calling external swf files, is there any code i need to change or add to make it work.

    i tried the release function u showed with the code i use to play videos didnt seem to work.

  8. Hi kamran,
    No special code is needed. Whatever functionality you put in your onRelease will be carried out when the button is clicked. You probably have a scope problem when referring to your loaded clip.
    Place a trace(“clicked”); inside your onRelease. If the trace appears in the output window then the button is working correctly. From there you can attempt to trace your video object to make sure your target reference is correct.

  9. Hi, thanks for that,

    but i dont understand whats going on, for some reason, my video buttons don’t seem to be recognised, and even after the onrelease function is attached to the movie clip, it doesnt seem to recognise it as a button.

  10. I don’t think the class is the problem but to make sure, remove the class from your movie clip properties and try again. If it still doesn’t work then your issue is probably with your scope. For example, your external swfs may be referring to _root, which will no longer work when loaded into another movie.

    -Glenn

  11. yea, thanks alot, but the button class didnt work for the video player, however you do have me worried about the swfs as i do have _root in some of my swfs which will be loaded into my main index. I have seperate swfs with video palyer, photo gallery, php message board, and php contact us.

  12. You should avoid using _root whenever possible. One method to get around that issue is to assign the _root of your swf to a global variable. Then, rather than referring to _root you can refer to the global variable name from anywhere in your application. What I do in the first frame of my fla is put in something like this:
    _global.vidPlayerRoot = this;
    Then, whenever I want to refer to the root of the video player, I can refer to _global.vidPlayerRoot when I want to get to the root of the video player swf.

    As far as your button problem is concerned, what I was trying to suggest in my last reply is to remove the class from the equation altogether. Use movie clips that do not have the McButton class defined and comment out the releaseCheck() call in your onRelease functions. Then see if your problem still exists.

    My guess is that the issue will persist because the McButton class just adds a few functions to the MovieClip class. It doesn’t change the functionality of the onRelease call in any way.

  13. Hi,

    Thanks so much for sharing this! I am a newbie to flash and am working on my first 6 page site. After a week of struggling with getting all my button states to work – i found your tutorial – and within 10 minutes I had a fully functioning nav! THANK YOU!

    I am wondering if you can help me though – I need my first button to be selected as soon as the site loads -indicating that’s the first page. Then of course it needs to function normally once the user clicks on a different button. Can you tell me how to do this?

    2ndly – I have a bottom navigation as well which consists of a “next” and “back button” How do I get those buttons to correlate with the top buttons so that as I click “next” or “back” the proper button is selected in the top nav?

  14. Thanks for the post. This is great.
    One Question: I am trying to get random buttons to show up as active each time the site loads. As in I don’t want one button to be the default each time someone enters my site. Can you help me figure out how it is done. I appreciate any help.

Comments are closed.