This tutorial will show you how to build an MC that acts like a button that plays an animation on rollover, and plays backwards on rollout. Download the sample files here.
Instructions
1. Start a new Flash project and go to Insert, New Symbol.
2. Give the symbol a name — let’s call it "mc". Click Movie Clip, and then ok.
3. Now, let’s create the animation.
Create whatever animation you want your "mc" to display, whether it’s a shape tween, motion tween, or frame-by-frame animation. Create only the forward animation — there’s no need to create the backward animation.
Then click the first frame and press F2 (if you’re using Flash MX, or F9 if you’re using Flash 5). This will bring up the action window. Insert a stop(); command there. Then, place it into the timeline.
4. Once you’re done creating the animation, drag the "mc" symbol from the library onto the main timeline, and place it into the frame and layer of your choice.
5. Now click the "mc" and press F2 in Flash MX (or F9 in Flash 5), to bring up the actions window, and apply the following code. Note that you’ll have to do this every time the mc is placed on the main stage.
onClipEvent (enterFrame) { // runs a hit test
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
this.nextFrame(); // if true the mc plays forward
} else {
this.prevFrame(); // if not plays backwards to beginning
}
}If you test your movie, you’ll notice that it doesn’t bring up the hand like a button would.
6. For a real easy fix, go back and edit your "mc" and insert a top layer.
7. Now, create a shape (or other graphic element) in the new layer, which spans the length of your animation’s frames, and covers the animation.
8. Click the new layer to select the object you just made. Then click, Insert and Convert to Symbol. Call it "hidden" and select button, then Ok. Now your object is a button!
9. Double-click the "hidden" button to bring up its edit window.
10. Right-click the up state frame, click "cut frame", and paste it into the "hit" frame, making the button invisible.
11. Now, to make the "mc" act like a button:
- On the main time line, click on a frame that you’d like the play head to go to when the "hidden" button is clicked.
- Insert a frame label of "here".
- Now, back inside the "mc" movie clip, click your "hidden" button to bring up the action window, and apply this code:
on (release) {
_root.gotoAndPlay("here"); // _root. targets the main movie
}Note that placing the buttons near the edge of the movie can ruin this effect, as the movie animates backwards by detecting when the mouse leaves the mc.
If the user goes off the button edge after animation, and your button is placed too close to the edge of the mc, it won’t be able to detect the mouse leaving the mc area, and won’t play the backwards animation.
Georgina LaidlawGeorgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and sitepoint.com cemented her lasting interest in the media, persuasion, and communications culture.
