Flash CS3 Tutorial – 'Hit States' for Movie Clip Buttons
Flash Tutorial August 30th, 2008For the most part, the button symbol has gone the way of the dodo for many Flash developers. Because movie clip symbols are so much more flexible than button symbols, most developers have completely stopped using button symbols. Instead, they opt to use movie clip symbols AS buttons.
But What About the Hit State?
With a button symbol, if you have a complex graphic with a bunch of white space, you can easily make that white space clickable by adding a shape to the "hit" state of the button symbol's timeline.
In the "up" state of the button symbol above, you'll notice a little bit of white space between the blue/orange dot and the text. Without the big blue rectangle in the "hit" state, the user wouldn't be able to click in that white space in order to activate the button.
But what if you wanted to use a movie clip as a button? How do you add a hit state?
Well, let me show you...
1. First of all, simply create the graphics for your movie clip button, and select the graphics and hit F8 to convert the graphics into a movie clip symbol.
2. Double-click on the movie clip symbol to enter the movie clip's timeline.
3. Create a new layer inside the movie clip symbol, name the new layer "hit", and drag the "hit" layer to the bottom of the layer stack. We'll put our "hit" shape on this layer.
4. Lock all of the layers in your movie clip symbol's timeline except for the "hit" layer.
5. Draw a rectangle (or any other shape) that covers the area of your button that you'd like to be clickable. For example, take a look at the green rectangle in the following image.
6. Select the shape you drew on the "hit" layer and hit F8 to convert it to a Movie Clip Symbol.
7. Select the Movie Clip symbol that contains your "hit" shape. In the Properties Panel, select the "Color" dropdown menu, and change it from "None" to "Alpha". In the percentage slider that shows up, drag the slider down to 0%. This will make your "hit" shape invisible.
Your movie clip button is now complete! When you add the appropriate code to make your movie clip button clickable, you'll find that the new invisible shape serves as a perfectly functional "hit" state!
October 28th, 2008 at 10:45 pm
Aren’t you forgetting some actionscript for the hit symbol?
February 10th, 2009 at 10:19 am
No he’s not… You simply place that symbol underneath the movieclip, no actionscript is required…
February 24th, 2009 at 11:51 am
Here’s a tougher question.
My movie clip button grows and shrinks on MouseOver and MouseOut. I only want the original size of the button to be the hit state – not the larger size because this affects the other buttons on the stage.
Any ideas?
March 9th, 2009 at 11:26 am
Yes I want to know the same thing. I have a movieclip button than on rollover plays a movie larger than the original button but that movie becomes an extension of the button. I dont want that – How can I make it so that when the mouse leaves the original button area it is detected. Its there a way to set constraints for the hitarea?
March 25th, 2009 at 9:31 am
gents, if you want to assign a hit area that’s smaller than your movie clip button use the .hitArea property. so create a movie clip for your hit area as described above, give it an instance name of “hit” (for example), and add “this.hitArea = hit;” to the first frame of your movie clip button.
May 20th, 2009 at 9:02 am
exactly the property i’ve been looking for, thanks chris.
February 16th, 2010 at 9:20 pm
Great help! Thank you, Chris!