Learn how to create roll over events for the Displacement Map Filter with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Displacement Map Filter & Animation

 

Free Flash Tutorial

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

 

Step Eight: Expand Your Creativity - On Roll Over Event

Take the interactivity up a notch by using a onMouseMove or onRollOver event instead of the onEnterFrame event used in this example.

Example: Download the Flash file Draw 221c


Click and roll over the image to make it animate. Roll out and it will stop.

This the Movie Above is identical to the Movie that you already created in this tutorial except that it has a few additional lines of ActionScript to trigger the animation on roll over and stop the animation on roll out. Below is the ActionScript used. The additional code is in red:

// 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.
mapBitmap.draw(myMap);

// 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.
filterList.push(filter);
// Apply the set of filters to the target movie clip.
myTarget.filters = filterList;

// Creates an animated effect on mouse roll over.
myTarget.onRollOver = function() {
   // 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;

      
// Stops animation on mouse roll out.
      myTarget.onRollOut = function() {
         delete onEnterFrame;
      };

   };
};

This tutorial was an introduction to the DisplacementMapFilter now available in Flash 8 Pro and is intended to be used as a starting point to apply more realistic effects. It should be used in conjunction with other filters, such as the BlurFilter, and ColorMatrixFilter as well as alpha properties to create things as complex as realistic shadows, or something as simple as a flag waving in the wind. You might like to look at the example on my web site: www.wasimsingh.com Thanks, Wasim.

Have fun.

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

         

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


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