Flash AS3 Tutorial: 3D button hover effect

Tutorials No Comments

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”]

Get Adobe Flash player

[/kml_flashembed]

Download 3D button click effect source files (1618)

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.

photosop slicing images

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.

Naming instance in Flash AS3

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).

Exporting for Actionscript in Flash AS3
[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 3D button click effect source files (1618)
We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.
PremiumCoding
Written by PremiumCoding
We develop beautiful Wordpress themes with minimal and clean design.