Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – Animated Gradient Button

Posted on Aug 3rd, 2011 in Flash Tutorials | 0 comments

Implementation and tweening of gradients in AS3 with help of TweenLite is fairly simple. In this tutorial I will show you how to draw a shape, apply a gradient to it and then animate it using only actionscript (there will be no hand drawing at all). We will first make a simple shape and then apply gradient to it.

First don’t forget to download a copy of amazing tweening engine TweenLite. Make a new AS3 document and press F9 to open Actions menu. Now copy following lines at the start to activate Tweenlite.

import com.greensock.*;
import com.greensock.easing.*;

Our next step will be defining colors for our nifty gradient. Copy following lines right after the greensock implementation.

var color1:uint = 0x04618d;
var color2:uint = 0x379EE0;

We now define object that will hold both colors, also we will make a Sprite that will hold the object we are going to draw.

var colors:Object = {left:color1, right:color2};
var mySprite:Sprite = new Sprite();
addChild(mySprite);

Apply event listeners to your sprite object that will listen when mouse moves over and out of our sprite.

mySprite.addEventListener(MouseEvent.MOUSE_OVER, startAnimatingGradient);
mySprite.addEventListener(MouseEvent.MOUSE_OUT, resetAnimatingGradient);

We have now prepared everything that we need to draw a gradient and apply it to our sprite object. We have to create a gradient box with the same dimensions that our sprite object has. Last number of createGradientBox defines the angle of gradient (for instance “0″ will make a horizontal gradient and “1″ will draw a vertical one). All we have to do now is to draw a shape and apply our gradient to it. Please refer to function below to see how gradient filling and shape drawing is done. We have used a LINEAR gradient (RADIAL is the other option). Second variables define colors, third define transparency of each color, fourth represent range of colors, fifth is our gradient box and sixth define method of spreading (REFLECT, PAD).

function drawGradient():void {
var m:Matrix = new Matrix();
m.createGradientBox(530, 220, 0, 0, 0);
mySprite.graphics.beginGradientFill(GradientType.LINEAR,
[colors.left, colors.right], [1, 1], [0x00, 0xFF], m,
SpreadMethod.REFLECT);
mySprite.graphics.drawRoundRect(20,5,530,220, 10);
}

We are almost finished. the only thing left to do is make two functions that will animate our sprite object on mouse over and mouse out. We have already defined event listeners for it above.

function startAnimatingGradient(e:MouseEvent){
TweenMax.to(colors, 1, {hexColors:{left:color2, right:color1}, onUpdate:drawGradient});
}
function resetAnimatingGradient(e:MouseEvent){
TweenMax.to(colors, 1, {hexColors:{left:color1, right:color2}, onUpdate:drawGradient});
}

Now simply call function drawGradient() and object with animated gradient background will draw itself on stage. Below is an example of what we have created. Example with source file is also available for download.

Now that we have learned something potentially useful let us try and make something worthwhile out of it. Example below shows five buttons in different gradients. Please note that there is absolutely no drawing and everything is done with programming (in AS3). We have added gradient and a subtle bevel filter to create buttons that actually don’t look bad at all. Source file is included in download for you to use in any way you would like.

Thank you for reading and don’t forget to download source files.

Source: premiumcoding.com