roll over button

Step 1 – Create Movieclips

First you need to setup the timeline (you can use the example fla file).
Create 4 layer according to the image above. In the “script” layer you will later place the ActionScript code. Layer “label 1″ and “label 2″ contain the label Movieclips for the default and rollover state. “bg” contains a background shape.
The Movieclip on layer “label 1″ looks like this:

On layer “text” you place textfield for the default state. Make sure, that the registration point is the center (both vertical and horizontal) of the Movieclip. Later you will apply a size transition (scaleX and scaleY) to the Movieclip and you want the transition to move to the middle and not the upper left corner.
The Movieclip on layer “label 2″ looks like this:

Pretty much the same here except the text of the label is different.

Step 2 – Set instance names

Set the instance name of the default state Movieclip to “label1″ and for the rollover state Movieclip to “label2″. You do not need the second Movieclip for now, so make the layer “label 2″ a guide layer (the layer will not be compiled into the swf).

Step 3 – Add DisplacementMap

Let’s get the party started. Copy to following code in the first frame of the layer “script”.

1
2
3
4
5
6
var perlinBd:BitmapData = new BitmapData(width, height);
perlinBd.perlinNoise(32, 32, 1, 2, false, true);
dpf = new DisplacementMapFilter(perlinBd, new Point(), BitmapDataChannel.BLUE, BitmapDataChannel.GREEN, 32, 32, "color");          
label1.filters = [dpf];
In line 1 and 2 you create a BitmapData object that will be used as map for theDisplacementMapFilter. In line 1 you initialize the object with the size of the button. In line 2 you apply a perlinNoise() on the BitmapData object. The perlinNoise()method creates a noise image. I won’t go into details what this does. The ActionScript reference to perlinNoise() is a good starting point, besides that you can find lots of examples on the web. If you want to see how the perlin bitmap actually looks like, add the following code to line 3: addChild(new Bitmap(perlinBd));
In line 4 you create the DisplacementMapFilter object. Again, for the sake of simplicity here please consult the ActionScript reference for DisplacementMapFilter to get more details to that filter. For now the important part is the first parameter, where you pass the perlin BitmapData object and parameter 5 and 6, where you set the x- and y-distortion-strength in pixel (they’re called scaleX and scaleY).
In line 5 finally you apply the filter to the label Movieclip. Export the fla. Now you might want to play around with the scaleX and scaleY parameter of theDisplacementMapFilter to understand the filter better, since you need to tween this properties later.

Step 4 – Animate DisplacementMapFilter

Now you will animate the filter by putting some TweenLite spice in the soup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import com.greensock.*;
import com.greensock.easing.*;
var perlinBd:BitmapData = new BitmapData(width, height);
perlinBd.perlinNoise(32, 32, 1, 2, false, true);
dpf = new DisplacementMapFilter(perlinBd, new Point(), BitmapDataChannel.BLUE, BitmapDataChannel.GREEN, 0, 0, "color");        
TweenLite.to(this, 3, {tween:1, ease:Sine.easeInOut});
var _tween:Number = 0;
function get tween() : Number
{
    return _tween;
}
function set tween(tween : Number) : void
{
    _tween = tween;
    dpf.scaleX = 48 * _tween;
    dpf.scaleY = 48 * _tween;
    label1.filters = [dpf];
}
If you already familiar with TweenLite you know, that you can animate a lot of things with TweenLite. x- and y-position, alpha and even some Papervision3D properties (to name only a few). However, to animate the properties scaleX and scaleY of aDisplacementMapFilter there is no build-in parameter. So you need your own custom tween method.
In line 11 you first create the variable _tween with the value 0. After that you create the getter and setter method for that variable. Note that the setter method not only sets the value but also sets the strength of the filter. In line 22 and 23 the magic happens. To put it simple: If _tween is 0 scaleX and scaleY are 0, if _tween is 1 they both are 48 (which you want to be the max strength of the animation). So how to get the values in between?
Simply by letting TweenLite do the work. In line 9 you tell TweenLite to animate the variable tween (you build getter and setter for that) with a duration of 3 seconds and the Sine ease (here you find the bullet proof documentation of TweenLite).
Make sure that the TweenLite package is in the same folder as your fla file and import the classes in line 1 and 2.
Export. Magic!

Step 5 – DisplacementMapFilter animation on mouse over

Since you want the effect to appear only on mouse over you need to set the corresponding event handlers.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import com.greensock.*;
import com.greensock.easing.*;
var perlinBd:BitmapData = new BitmapData(width, height);
perlinBd.perlinNoise(32, 32, 1, 2, false, true);
dpf = new DisplacementMapFilter(perlinBd, new Point(), BitmapDataChannel.BLUE, BitmapDataChannel.GREEN, 0, 0, "color");        
addEventListener(MouseEvent.MOUSE_OVER, btnRollOver);
addEventListener(MouseEvent.MOUSE_OUT, btnRollOut);
function btnRollOver(e:Event)
{
    TweenLite.to(this, 1.2, {tween:1, ease:Sine.easeInOut});
}
function btnRollOut(e:Event)
{
    TweenLite.to(this, 0.6, {tween:0, ease:Sine.easeInOut});
}
var _tween:Number = 0;
function get tween() : Number
{
    return _tween;
}
function set tween(tween : Number) : void
{
    _tween = tween;
    dpf.scaleX = 48 * _tween;
    dpf.scaleY = 48 * _tween;
    label1.filters = [dpf];
}
You add the mouse event stuff in line 9 to 20. Note that the btnRollOut function tweens the tween variable back to 0, so the effect runs backwards. Also note, that you adjusted the duration of the tween a little. The rollout tween runs only half as long as the rollover tween (1.2 vs. 0.6 seconds). Thats because the user generally expects the out-transition to be faster, so he can focus on other things. However, now that you know that rule, feel free to break it… ;)

Step 6 – Add rollover label and fine tuning

Almost done, now you add the rollover label Movieclip and so some fine tuning.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import com.greensock.*;
import com.greensock.easing.*;
label2.scaleX = 0.5;
label2.scaleY = 0.5;
label2.alpha = 0;
var perlinBd:BitmapData = new BitmapData(width, height);
perlinBd.perlinNoise(32, 32, 1, 2, false, true);
dpf = new DisplacementMapFilter(perlinBd, new Point(), BitmapDataChannel.BLUE, BitmapDataChannel.GREEN, 0, 0, "color");        
addEventListener(MouseEvent.MOUSE_OVER, btnRollOver);
addEventListener(MouseEvent.MOUSE_OUT, btnRollOut);
function btnRollOver(e:Event)
{
    TweenLite.to(this, 0.65, {tween:1, ease:Sine.easeInOut});
    TweenLite.to(label1, 0.65, {scaleX:1.5, scaleY:1.5, alpha:0.25, ease:Sine.easeInOut});
    TweenLite.to(label2, 0.5, {scaleX:1, scaleY:1, alpha:1, delay:0.15, ease:Sine.easeInOut});
}
function btnRollOut(e:Event)
{
    TweenLite.to(this, 0.5, {tween:0, ease:Sine.easeInOut});
    TweenLite.to(label1, 0.5, {scaleX:1, scaleY:1, alpha:1, ease:Sine.easeInOut});
    TweenLite.to(label2, 0.5, {scaleX:0.5, scaleY:0.5, alpha:0, ease:Sine.easeInOut});
}
var _tween:Number = 0;
function get tween() : Number
{
    return _tween;
}
function set tween(tween : Number) : void
{
    _tween = tween;
    dpf.scaleX = 48 * _tween;
    dpf.scaleY = 48 * _tween;
    label1.filters = [dpf];
}
First make the layer “label 2″ to a normal layer (no guide anymore).
So the rollover Movieclip is there, but it should be invisible until the rollover (line 6). Also you want the Movieclip to scale up on rollover, so you set the initial size to half the original size (line 4 and 5).
In line 20 and 27 you set the tweening for the rollover label Movieclip. On rollover it tweens to original size (scaleX:1 and scaleY:1) and gets visible (alpha:1). Also the tween has a tiny delay (delay:0.15) because you first want to animate the default state label Movieclip animate a bit, before the rollover Movieclip hits the scene.
Besides that you apply a additional tweening on “label1″ (line 19 and 26). On rollover “label1″ tweens to a size of 150% (scaleX:1.5 and scaleY:1.5) and it fades to 25% alpha (alpha:0.25). On rollout it tweens back to original values.

Step 6 – Yeah, done!

Now you have a cool rollover effect with the DisplacementMapFilter and TweenLite. And – of course – the fun just started. Play around with the values. Have a closer look (learn!) the DisplacementMapFilter and the perlinNoise() method.
You found a setting that looks even cooler? Let us know and post a comment.