Flash Training: Learn how to create Displacement Map Filters with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Flash Tutorial - Displacement Map Filter & Animation


Free Flash Tutorial

Step 5    <<   Previous      Intro   1   2   3   4   5   6   7   8     Next   >>      


Step Five: The ActionScript


We have now set up our images and Stage. Now we will apply and animate the Displacement Map Filter using new ActionScript features in Flash 8 Pro. We will learn how to apply and animate displacement map effects using Actionscript. First we will create a new layer, and call it Actions. Placing actions in a different layer keep the .fla more organized.

  1. If the Timeline click on the Insert Layer Button:
  2. Name the layer: Actions
  3. Click on the first Keyframe of the Actions Layer: Select Frame 1
  4. Open the Actions Panel: Window > Actions (F9)
  5. If Script Assist is on, Switch it off:

    Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

  6. Type (or copy & paste) the following into the Actions Panel:

    // Import the filter and required classes.
    import flash.filters.DisplacementMapFilter;
    import flash.display.BitmapData;
    import flash.geom.Point;

    // Create an empty BitmapData variable with a width and height.
    // Notice that we assign the map's width and height to the object's width and height.

    var mapBitmap:BitmapData = new BitmapData(myMap._width, myMap._height);
    // Grab bitmap information from the map movie clip.

    // Creates a variables with info about the filter settings.
    var mapPoint:Point = new Point(0, 0);
    var componentX:Number = 4;
    var componentY:Number = 4;
    var scaleX:Number = 20;
    var scaleY:Number = 20;

    // Send all the above variables to the filter.
    var filter:DisplacementMapFilter = new DisplacementMapFilter(mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY);

    // Create a filter list array.
    var filterList:Array = new Array();
    // Add the displacement map filter to the array.
    // Apply the set of filters to the target movie clip.
    myTarget.filters = filterList;

    // Creates an animated effect.
    // Updates on every frame.
    onEnterFrame = function () {
    // This conditional moves the map to the left until it reaches its end.
    if ((myMap._x+myMap._width)>(Stage.width)) {
       myMap._x -= 1.5;

       // Calculate offsets between the map and the target clip.
       offsetX = myMap._x-myTarget._x;
       offsetY = myMap._y-myTarget._y;

       // Creates a new Point object based on the offsets.
       var newPoint:Point = new Point(offsetX, offsetY);
       // Updates the displacement map filter effect.
       filter.mapPoint = newPoint;
       // Applies the updated effect to the target clip.
       myTarget.filters = filterList;

  7. Test your Movie: Control > Test Movie (Ctrl Enter)


Step 5    <<   Previous      Intro   1   2   3   4   5   6   7   8     Next   >>      

48787 visitors to this page since 18 April 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.