[Tutorial : Advance] Rollover Smooth Button

Look at http://www.newmediaaward.com and http://www.manmeng.net's navigation. Have you ever wonder to produce smooth rollover effect in Flash? That a button that will shrink and grow according to your mouse rollover?? That it's so trendy out there? Here's below a tutorial that will briefly guide you through on how to setup your site with that kind of interaction in no time.

Difficulty : Basic / Advance
Topic : Rollover Smooth Button in Flash
Download : [ Rollover Smooth Button FLA ]


By looking through this tutorial below, provided with basic understanding on how to work on animation, and motion tweening, you'll find this is rather easy and wouldn't be a tough task for you to use this navigation system.


First you'll need to have a MOVIECLIP to act as button, unlike conventional button to make the effect, you'll need to have to use a movie clip instead. Inside the movieclip, what you'll need to do is :

1. Put a stop() only for the actions layer.
2. Make an animation that you'll want your user to experience, either it's a masking animation or a 'grow/shrink' effect

*p.s.* Of course a more complex interaction can be done with only actionscripting completely without needed to do animation and tweening, but this method are very encouraging to people in making interesting and creative navigation.


Next you'll only need to make sure the movieclip is properly named.
For this instance, i named it btn_home.



And by looking at the screenshot above, there's very little Actionscripting you'll need to modify, which is when you have tons of button like that, you only need to make sure :
1. The correct name is pointed to the correct movieclip, btn_home, btn_about, btn_contact...etc etc..
2. for the onPress action, you can change the action according and suite your flash movie, because it might be the case that you want to the user to change the scene of this flash movie instead of popping up a new website url.

All of the tutorial above is coded and controlled by the Flash Event Model, which i think i'll spend more time explaning it in a different article. And what makes this "navigation" system so versatile is because :

1. You only need to copy paste a lot and only change the name
2. We use "function" in it. Curious of what it can help you? Wait for the future article that i'll write
3. Remember of those awesome and stunning Flash website that you came across that DOESNT LAG or takes up your CPU power so much? I've optimized the code to run that way, but if you found any bug or problem running it, do not hesitate to contact me :)

Here's the FLA file, have fun Flashin'
Download : [ Rollover Smooth Button FLA ]