Tutorio.com

Introduction

Flash is a vector program, it can't create distortions of pixel images. Flash animations that involve distorting pictures are generally created using a third party program and then imported into flash. There is an easy trick which can be used to create some pretty neat effects.

The first step is to open up the image that you want to use and open it up in an image editor like photoshop and blur it or distort it a bit.

Animate

Once you have completed creating a distorted version of the image import both the blurred and the original images into flash on different layers, with the blurred image on the top. Select the blurred image press F8 to convert it to a movieclip

Now its just a matter of creating a motion tween to change the alpha (transparency) value of the blurred movie clip to 0 and back to 100 to slowly reveal the original movie and then blur it back.

Tweening the alpha property is OK but to get more intresting results, try changing the settings in the advanced color settings.

Download: Look at the source files to see how the effect in the example above was created.

Via Actionscript

In the previous paragraph I gave an explanation on how to achieve this effect through manual animation, but that may not always be practical to implement, so heres how you achieve the same effect using actionscript.

This simple script just decreases the _alpha value of the blurred image till it equals zero.

onEnterFrame = function(){
blurred._alpha -= 5;
if (blurred._alpha < 0){
delete this.onEnterFrame;
}
}

You can also go beyond simple alpha, and take advantage of the features of 'advanced' color manipulation in actionscript by using the Color object with setTransform.

var myColor:Color = new Color(blur_mc);
var redtint:Object = {ra:100, rb:255, ga:100, gb:-255, ba:100, bb:-255, aa:100, ab:255};
myColor.setTransform(redtint);
onEnterFrame = function () {
	redtint.rb -= 5;
	redtint.gb += 5;
	redtint.bb += 5;
	redtint.aa -= 5;
	myColor.setTransform(redtint);
	if (redtint.rb<0) {
		delete this.onEnterFrame;
	}
};

Download: The .fla for the scripted version.