Heat haze (fata morgana) effect for images

Summary

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.

Drag component into library

Step 2 – Import image and convert to Movieclip

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

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

Convert image to Movieclip

Set name of image Movieclip

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

Set instance name of Movieclip

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

Create shape

Convert shape to Movieclip

Set name of Movieclip

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.

Set instance name of Movieclip

Step 4 – Apply effect and set parameter

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

Drag component onto shape Movieclip

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.

Check component inspector

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.

Result

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.

No comments:

 
(c) grefex