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

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 the DisplacementMapFilter. 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 the DisplacementMapFilter 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.

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 a DisplacementMapFilter 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.

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.

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.

Source code

The source code can be found here.
TweenLite source code and examples.
AS2 version of the effect on request.

Here a example of how to create a blur rollover effect in 30 sec.

Both for the AS2 and AS3 example make sure you have the TweenLite classes in the same folder as your fla (the first folder of the package “com”).

AS2 version:

import com.greensock.*; 

btn.onRollOver = btnRollOver;
btn.onRollOut = btnRollOut;

function btnRollOver()
{
	TweenMax.to(btn, .6, {blurFilter:{blurX:12, blurY:12}});
}

function btnRollOut()
{
	TweenMax.to(btn, .6, {blurFilter:{blurX:0, blurY:0}});
}

In line 1 the necessary TweenLite classes are imported (again, make sure, that the TweenLite package is in the same folder as your fla file).

The events are mapped to the designated function in line 3 and 4.

Inside the functions the tween behavior is applied to the Movieclip “btn” (which needs to be set in the fla file, please consult example fla if unclear). In the function “btnRollOver” a blur transition (both x- and y-wise) with the strength of 8 and a duration of 0.6 sec is applied, where the function “btnRollOut” goes the opposite direction and sets the blur back to 0.

Download source file

AS3 version:

import com.greensock.*;

btn.addEventListener(MouseEvent.MOUSE_OVER, btnRollOver);
btn.addEventListener(MouseEvent.MOUSE_OUT, btnRollOut);

function btnRollOver(e:Event)
{
	TweenMax.to(btn, .6, {blurFilter:{blurX:12, blurY:12}});
}

function btnRollOut(e:Event)
{
	TweenMax.to(btn, .6, {blurFilter:{blurX:0, blurY:0}});
}

Basically the same as in the AS2 is happening. However, the mouse event are handled differently in AS3.

Download source file

We’re not the only one who love to create amazing effects with Flash. From now you can find reviews, links and tutorials from all the interweb right here.

Also if you have a link that might be interesting to the readers of this blog, get in touch with us.

And by the way, new tutorials are just around the corner. Watch out!

Drain transition

Read complete tutorial

Swirl transition

Read complete tutorial

Wobble transition

Read complete tutorial

Burning paper transition

Read complete tutorial

3D tiles transition

Read complete tutorial

In this tutorial you will learn how to apply a waving flag effect on image Movieclips.

This is the final result:

Requirements

Flash 8, Flash CS3 or Flash CS4.

Note: The screenshot in this tutorial is made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is a ActionScript 2 Project (although no ActionScript is required). This effect is also available as ActionScript 3 version.

Step 1 – Install the effect component

Download the Waving Flag Effect here. Please follow the install instructions and drag the component from the component panel into the libary of your .fla file.

Step 2 – Import image and convert to Movieclip

Import an images [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”.

Select the image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image”.

Select the just created Movieclip on stage and set the instance name to “image_mc”.

Step 3 – Apply effect and set parameter

Drag the component onto the Movieclip. The component snaps automatically.

Open the component inspector panel: “Windows” -> “Component Inspector”. Here you can set the parameters for the effect. All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you have only one Movieclip the component assumes that you want to apply the effect on the Movieclip “image_mc”. Here you can set the options for the effect.

Note: These settings are only applied to this one instance of the effect component. If you drag the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.

Step 4 – Export

Export the Movie Command -> “Test Movie” or press [Ctrl-ENTER] and see the result. If you’re not satisfied, go back and change the settings in the component inspector panel.

Step 5 – Play!

Now you can play around with the parameter, to customize you effect. You can also use this effect with ActionScript. Find the full documentation here.

Download

Click here to download the fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.

You can also download the Flash Waving Flag Effect Component here.

Here you can find a video tutorial of how to implement a different effect.

In this tutorial you will learn how to create a drain transition effect where one image “suck” to another. You can set the duration (in frames) of the transition, the point where the images drain to and other options. No ActionScript is required, you’ll work only on timeline and set the parameter of the effect inside the component inspector.

Here the final result:

Requirements

Flash 8, Flash CS3 or Flash CS4.
Two images (in this case 550×400, image available in the tutorial zip file)

Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same with Flash 8 and Flash CS4. This tutorial is an ActionScript 2 Project (the component is also available as AS3 version).

Step 1 – Install the effect component

Download the Drain Transition Effect. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.

Step 2 – Import Slideshow images

Import two images [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”.

Select the frist image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image1”.

Select the second image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image2”.

Step 3 – Set instance name of image Movieclip

Give the Movieclip of the first image the instance name “my_image_01” (You can choose a different name if you want. Make sure that the instance name is unique). Without an instance name the component is unable to detect the Movieclip. Set the instance name for the second image Movieclip to “my_image_02″.

Step 4 – Apply effect

Drag the component from the library onto the upper Movieclip. The effect component will snap automatically.

Step 5 – Adjust settings of the effect

Click on the component and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”. In the “Start Movieclip” select list, “my_image_01” should be selected.

All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you draged the effect on the Movieclip “my_image_01″, this is the frist Movieclip. As “End Movieclip” select “my_image_02″. Leave the other setting blank for now. Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie” and you’ll see that the image transition.

Step 6 – Play!

Play around with the other parameters inside the component inspector. The documentation of the settings can be found here. You can also use this effect with ActionScript.

Download

Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.

Here you can find a video tutorial of how to implement a different effect.

In this tutorial you will learn how to apply a fata morgana effect on image Movieclips. You can set the speed and angle of the haze. This effect works with animated content and video.

This is the final result:

Requirements

Flash 8, Flash CS3 or Flash CS4.

Note: The screenshot in this tutorial is made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is a ActionScript 2 Project (although no ActionScript is required). This effect is also available as ActionScript 3 version.

Step 1 – Install the effect component

Download the Heat Haze Effect here. Please follow the install instructions and drag the component from the component panel into the libary of your .fla file.

Step 2 – Import image and convert to Movieclip

Import an image [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”.

Select the image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image”.

Select the just created Movieclip on stage and set the instance name to “image_mc”.

Step 3 – Create shape Movieclip

Draw a shape on the canvas (use the pen tool to get a custom shape), select it and convert it into a Movieclip [press F8] or right click on the shape -> “Convert to Symbol…”. Give the Movieclip the name “shape”.

Note: Only the dimensions from the shape Movieclip are taken. The Movieclip will not be visible in the final swf. So color does not mater here.

Set the instance name of the Movieclip. Use “shape_mc”. Its important to set an instance name here, otherwise the component will not find the Movieclip. BTW, the naming is up to you, you can choose another name if you want. Just make sure the instance name is unique project-wide.

Step 4 – Apply effect and set parameter

Drag the component onto the image Movieclip. The component snaps automatically.

Open the component inspector panel: “Windows” -> “Component Inspector”. Here you can set the parameters for the effect. All Movieclips with instance names in this frame are listed in the select lists. Since you dragged the component onto the image Movieclip the component assumes that you want to apply the effect on the Movieclip “image_mc”. Set “Shape Movieclip” to “shape_mc”. Here you can also set the other options of the effect.

Note: These settings are only applied to this one instance of the effect component. If you drag the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.

Step 5 – Export

Export the Movie Command -> “Test Movie” or press [Ctrl-ENTER] and see the result. If you’re not satisfied, go back and change the settings in the component inspector panel.

Step 6 – Play!

Now you can play around with the parameter, to customize you effect. You can also use this effect with ActionScript. Find the full documentation here.

Download

Click here to download the fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.

You can also download the Flash Heat Haze Effect Component here.

Here you can find a video tutorial of how to implement a different effect.

Pixelation transition

Read complete tutorial

Mask transition

Read complete tutorial

TV fuzz transition

Read complete tutorial

3D shuffle transition

Read complete tutorial

Dream transition

Read complete tutorial

Wipe transition

Read complete tutorial

Splash transition

Read complete tutorial

Drip transition

Read complete tutorial

In this tutorial you will learn how to create a pixelation transition effect where one image “pixelates” to another. You can set the duration (in frames) of the transition. No ActionScript is required, you’ll work only on timeline and set the parameter of the effect inside the component inspector.

Here the final result:

Requirements

Flash 8, Flash CS3 or Flash CS4.
Two images (in this case 550×400, image available in the tutorial zip file)

Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same with Flash 8 and Flash CS4. This tutorial is an ActionScript 2 Project (the component is also available as AS3 version).

Step 1 – Install the effect component

Download the Pixelation Effect. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.

Step 2 – Import Slideshow images

Import two images [press Ctrl-R] or “File” -> “Import” -> “Import to Stage…”.

Select the frist image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image1”.

Select the second image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image2”.

Step 3 – Set instance name of image Movieclip

Give the Movieclip of the first image the instance name “my_image_01” (You can choose a different name if you want. Make sure that the instance name is unique). Without an instance name the component is unable to detect the Movieclip. Set the instance name for the second image Movieclip to “my_image_02″.

Step 4 – Apply effect

Drag the component from the library onto the upper Movieclip. The effect component will snap automatically.

Step 5 – Adjust settings of the effect

Click on the component and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”. In the “Start Movieclip” select list, “my_image_01” should be selected.

All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you draged the effect on the Movieclip “my_image_01″, this is the frist Movieclip. As “End Movieclip” select “my_image_01″. Leave the other setting blank for now. Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie” and you’ll see that the image transition.

Step 6 – Play!

Play around with the other parameters inside the component inspector. The documentation of the settings can be found here. You can also use this effect with ActionScript.

Download

Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.

Here you can find a video tutorial of how to implement a different effect.