Use Flash 8 Pro's DisplacementMapFilter with ActionScript.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Displacement Map Filter & Animation

Free Flash Tutorial

Step Four: Preparing the Main Stage

So, we have our images in Movie Clips of their own. Let's bring them onto the Main Stage. First you need to make sure that the you are in the main Stage. Then place the new Movie clips into the correct position. Lastly they will need Instance names so that the ActionScript can reference them. This is particularly important.

1. If the Edit Bar is not open, open it: Window > Tool Bars > Edit Bar (Flash MX04 only)
2. Return to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
   
   Map Image: Time to set up the background image.
   
   
3. If the Library is closed, open it: Window > Library (F11)
4. Drag and drop onto the Stage: myMapMC
5. With the Movie Clip still selected change both the X and Y points in the Info panel to: 0.0

Note: Now there is an Instances of the Movie Clips on Stage. We can only reference it through Actionscript if it has an Instance Names.

6. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
7. Give your Movie Clip an Instance name: myMap

   
   Movie Clip's Instance Name: myMap.

   Warning: Instance Names are case sensitive and you should never use spaces!
   
   Size: You will now have a long Movie Clip on the stage:
   
   
   MC on the Stage.
   
   With this effect the background image moves slowly to the left and when the image gets to the end the animation stops. To make the animation last for a reasonable period of time I have used a long image. If you look in the Property Inspector you will see the width is: 2200 pixels wide.
   
   

   A filter is not applied if the image exceeds 2880 pixels in width (or height). Thus it is possible to stretch the image just as little further.

   Target Image: This is the foreground image. The target Movie Clip should be above the map movie clip. If you wish you can use separate layers for each of the Movie Clips.

8. Drag out from the Library and drop onto the Stage: myTargetMC
9. With the Movie Clip still selected change both the X and Y points in the Info panel to: 0.0
10. Give your Movie Clip an Instance name: myTarget

    
    Movie Clip's Instance Name: myTarget.