Flex | Flash | Air | AS3
Mist effect in flash
August 4th, 2009 in FlashLearn how simply you can create a mist effect to apply to a photography. This tutorial requires absolutely no design skills and uses actionscript 3 and the Tweenlite engine.
(The photography used in the demo is titled “Winter Lake” and is the work of Aku-Aku
1. Create a new flash file (Actionscript 3.0) and save it as mist.fla.
2. Rename ‘layer 1′ to ‘photo’. Import a photography that could be credible when adding mist. Set the stage’s dimensions the same as the photography.
3. Create a new layer called ‘mist’. To create the mist, select the brush tool and set the brush shape to the round one and its brush size to a big one. Choose white as fill color.
Still within the layer ‘mist’, draw random strokes that cover the photography like you see below :
4. Select all the shapes and duplicate it. Move the copy to the left. Now the mist is twice larger that the photography :
5. Select all the shape that form the mist and convert it to a movie clip with registration point at the left. Set its instance name to mist_mc.
6. Now let’s write a bit of code to animate that.
First go to http://blog.greensock.com/tweenliteas3/ to download the Tweenlite engine. (Refer to this url for how to use the tweenlite engine)
Extract the zip file and get the gs directory. Place this directory at the same level of your mist.fla file.
7. Create a new ‘actions’ layer. With its first frame selected, open the actions panel.
In order to use TweenLite we need to import it. Write the following import statements:
import gs.*; import gs.easing.*;
8. So far the white shapes that we have drawn to create the mist are not realistic. To make it more real, change the alpha property of ‘mist_mc’ and add a blur filter:
mist_mc.alpha = .4; var blur : BlurFilter = new BlurFilter(80,80,1); mist_mc.filters = [blur];
9. Next create a moveMist function that will be called to make the mist moving from left to right. We want to create a tween for the mist_mc movie clip that will change its x property to 0. To do so use the Tweenlite.to method :
function moveMist():void{
TweenLite.to(mist_mc, 5, {x:0,ease:Linear.easeNone});
}
10. As we want to loop the animation we add an onComplete property to the tween that permit to call function when the tween has finished :
function moveMist():void{
TweenLite.to(mist_mc, 5, {x:0,ease:Linear.easeNone,onComplete:onFinishTween});
}
11. Now create the onFinistTween that reset the x property and recall the moveMist function.
function onFinishTween():void {
mist_mc.x = -stage.stageWidth;
moveMist();
}
12. Finally, don’t forget to call the moveMist function.
Here’s the final code. Test the movie to see it in action.
import gs.*;
import gs.easing.*;
mist_mc.alpha = .4;
var blur : BlurFilter = new BlurFilter(80,80,1);
mist_mc.filters = [blur];
function moveMist():void{
TweenLite.to(mist_mc, 5, {x:0,ease:Linear.easeNone,onComplete:onFinishTween});
}
function onFinishTween():void {
mist_mc.x = -stage.stageWidth;
moveMist();
}
moveMist();
Aug 7th, 2009
Nice effect
Thx
Aug 10th, 2009
Great tutorial, I don’t think I would have found that way of doing things.
Aug 14th, 2009
When I’m playing the file I’m getting this error:
Scene=Scene 1, Layer=actions, Frame=1: Line 1: ‘;’ expected
import gs.*;
Scene=Scene 1, Layer=actions, Frame=1: Line 2: ‘;’ expected
import gs.easing.*;
Scene=Scene 1, Layer=actions, Frame=1: Line 4: ‘;’ expected
var blur : BlurFilter = new BlurFilter(80,80,1);
Aug 14th, 2009
Hi. This effect is great. But when i made this effect show me errror in action :
(i download Tweenlite engine)
1120: Access of undefined property mist_mc. TweenLite.to(mist_mc, 5, {x:0,ease:Linear.easeNone,onComplete:onFinishTween});
1120: Access of undefined property mist_mc. mist_mc.x = -stage.stageWidth;
1120: Access of undefined property mist_mc. mist_mc.alpha = .4;
1120: Access of undefined property mist_mc. mist_mc.filters = [blur];
i have this error and i don’t now what i have to do. Please help.
Aug 17th, 2009
[...] Mist effect in flash [...]
Feb 5th, 2010
i have the same problem as PIXEL
((