In our new edition of premium tutorials we will show you how to achieve a 3D button hover effect. First download our recently released Tick and Cross buttons or download slightly alterated version that is available in source files of this tutorial. You can see live example of what we will be creating below.
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/08/tickAndCross.swf” width=”570″ height=”260″ targetclass=”flashmovie”]
[/kml_flashembed]
[download id=”47″]
ASSETS USED
STEP 1: PREPARING ASSETS IN PHOTOSHOP
First open PSD file with your Photoshop. You have to slice images and get two forms of button (on mouse over and on mouse out). Choose Slice Tool (T) from your Tools panel. Now select both buttons and name them tickButtonOut and tickButtonOver. Screenshot below is showing how your Photoshop should look at this point.
Now go to File/Save for Web&Devices and under Preset choose PNG (we need images that are without background). Choose both images and click Save. You should now have both assets ready.
STEP 2: PREPARING ASSETS IN FLASH
Open Flash and create a new document in AS3. Go to File/Import/Import to stage and import both buttons. Convert them both to MovieClips (right click and then Convert to Symbol). Name first one tickButtonOut and second one tickButtonOver. Be sure to name instances of movie clips also.
Now put tickButtonOut on top of tickButtonOver so they are exactly at the same position. This is very important as it is the key part of our little trick. Now select both Movie Clips (you can do that by right clicking on the stage and choosing Select All). Now right click on them and choose Convert to Symbol. Name newly formed Movie Clip as tickButton and select Export for Actionscript (like shown in screenshot). Now delete tickButton from the stage (we will add it dynamicly).
[amazon_carousel widget_type=”SearchAndAdd” width=600″ height=”200″ title=”” market_place=”US” shuffle_products=”True” show_border=”False” keywords=”flash tutorial, learn flash” browse_node=”” search_index=”Books” /]
STEP 3: CODING IT UP
It is time to put our button to life. First you have to import Tweenlite classes that will take care of our animation.
import com.greensock.*;
import com.greensock.easing.*;
We will now define our button and put it on stage. Please note that we have created a custom class in previous step with Export for Actionscript and we can now use tickButton as a variable type.
var button:tickButton = new tickButton();
this.addChild(button);
Next step is just of decorative nature as it has no impact on actual animation. But since our Movie clip is actually a button we will apply a button mode with hand cursor on it.
button.buttonMode = true;
button.useHandCursor = true;
Adding of event listeners plays a vital part of our file. They »listen« when certain event happens and then act accordingly. We will add listeners for two mouse events (mouse over and mouse out).
button.addEventListener(MouseEvent.MOUSE_OVER, buttonOver);
button.addEventListener(MouseEvent.MOUSE_OUT, buttonOut);
Last step of our tutorial includes coding of functions that are called when certain event happens.
function buttonOver(e:MouseEvent){
TweenLite.to(e.target,0.3, {alpha:0});
}
function buttonOut(e:MouseEvent){
TweenLite.to(e.target,0.3, {alpha:1});
}
Our animation doesn’t really do much. It simply fades upper layer to zero opacity and reveals the lower layer at the same time. But it gives a nice clicking effect as if button is actually pressed down.
CONCLUSION
Thank you for reading our tutorial. Hopefully you can put this little trick to good use. Good luck!
[download id=”47″]
You must be logged in to post a comment.