Creating a Simple Button Effect Using the MC Tween Prototypes

Not so much a tutorial, as a mini technique with attached code. I added this recently to the Phireworx blog, but thought it would be a good idea to add it within the tutorial section so it doesn’t get lost.

Using the ubiquitous MC Tween prototype library which has been around and I’ve been using for a while (found here), I needed to create some quick buttons which had a funky sliding effect complete with alpha fading, so I thought I’d share it with you

Subtle Button source code downloadable from here >>

Download MC Tween Prototypes here >>

The result of which was this little animation (try rolling your mouse over and away)

…all tweened via ActionScript, simple to modifiy to allow external variables to populate the text areas, and resusable, with this tiny snippet of code

Code

#include "mc_tween.as" //******************** //* Set Text Content //******************** holder.overMC.over.text = "View More..."; holder.outMC.out.text = "View More..."; //******************** //* Set Alpha //******************** holder._alpha = 0; holder.alphaTo(100, 0.5, "easeinquart", 0.1); //******************** //* Functions //******************** over = false; holder.onRollOver = function() { over = true; if (over) { this.outMC.alphaTo(0, 0.2, "easeinquart", 0.1); this.overMC.alphaTo(100, 0.2, "easeinquart", 0.1); this.slideTo(this._x, 1, 0.2, "easeoutsine", 0.1); } }; holder.onRollOut = function() { over = false; if (!over) { this.overMC.alphaTo(0, 0.2, "easeinquart", 0.1); this.outMC.alphaTo(100, 0.2, "easeinquart", 0.1); this.slideTo(this._x, -16, 0.2, "easeoutsine", 0.1); } };

Downloads

Subtle Button source code downloadable from here >>

Download MC Tween Prototypes here >>