Thought I would show you how to create a simple button animation created totally in actionscript, which recreates a button animation I saw posted on a Cartoon Smart.com tutorial which was originally created on the time line. This method is very simple and easily customizable.
The artwork for the button is created in the Flash authoring tool, although it could easily be created with code as it is just a rectangle with rounded corners with a simple gradient fill.
This is exported for actionscript once it is converted to a movieclip and then in the class file I have added a ROLL_OVER event listener, you'll also notice I have added a drop shadow just to make it look cool.
-
private function init():void
-
{
-
drop = new DropShadowFilter(5, 45, 0x000000, .75, 10, 10, 1);
-
this.addEventListener(MouseEvent.ROLL_OVER, over);
-
this.filters = [drop];
-
}
Now the cool blurring animation is created by defining a variable which sets out my target blurX, this is defined in the variable targetX, which I have set to 80. Now as I want the animation to last one second, which in this case is 40 frames, I have created a variable called bx which is defined by targetX divided by the frame rate. An ENTER_FRAME event listener is added once the mouse rolls over the button and in this loop, bx is added to the blurX each frame thus increasing the amount of blur until it reaches its target blur.
-
private function overloop(e:Event):void
-
{
-
blurX += bx;
-
if(blurX> targetX){
-
blurX = targetX;
-
removeEventListener(Event.ENTER_FRAME, overloop);
-
blurring = false;
-
}
-
blur = new BlurFilter(blurX, blurY, 1);
-
this.filters = [blur, drop];
-
}
Then for the Roll out animation, I have just done the opposite by starting the blur y at 50 and then each frame reducing it by a set amount until it rests back at its starting point. Nice and simple and lots of fun to play with.
Source is here
![[Valid RSS]](http://www.ultravisual.co.uk/blog/images/valid-rss.png "Validate my RSS feed")
