Fisheye effect to tween

Report · Jan 31, 2011

Hi All,

I am trying to apply a fisheye effect to a movie clip that has a tween along its "x" axis. Currently, everything is working.. ALMOST.

The fisheye effect is applied to the movieclip and the tween is applied to an object inside that movie clip, both the fisheye and tween work here. The problem is that when the object being tweened passes too far outside the "displacer" that is making the fisheye effect, it is dragging the displacer with it and causing an unwanted look.

does anyone have any suggestions?

below is the code that i am using:

Tween code located inside the movieclip that is being fisheyed:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween:Tween = new Tween(dial_graphics, "x", Strong.easeOut, -40, -300, 5, true);

Code that makes fisheye:

package
{
import com.greensock.TweenNano;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.DisplacementMapFilter;
import flash.filters.DisplacementMapFilterMode;
import flash.geom.Point;

/**
* ...
* @author Zach
*/
public class Main extends MovieClip
{

public var displacementSource:Sprite // the symbol that we use to create our displacement mapl
private var displacementData:BitmapData
private var displacementFilter:DisplacementMapFilter;
public var displacementAmount:Number = 0;

public var rpm_display:Sprite;

public function Main():void
{
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
   removeEventListener(Event.ADDED_TO_STAGE, init);
   // entry point
   displacementSource.visible = false;
   displacementData = new BitmapData(displacementSource.width, displacementSource.height, true, 0x00000000);
   displacementData.draw(displacementSource);
   displacementFilter = new DisplacementMapFilter(displacementData, new Point(10,-115),1, 2, displacementAmount, displacementAmount, DisplacementMapFilterMode.COLOR, 0, 0);
   startDistortion();//stage.addEventListener(MouseEvent.CLICK, startDistortion);
}

private function startDistortion():void
{

   if(displacementAmount == 0){
    TweenNano.to(this, 0, {displacementAmount:90, onUpdate:applyFilters} );
   } else {
    displacementAmount = 0;
    applyFilters();
   }

}

private function applyFilters():void
{
displacementFilter.scaleX = displacementFilter.scaleY = displacementAmount;
rpm_display.filters = [displacementFilter];
}

}

}

THANKS!

Report · Feb 01, 2011

It's hard to say but first I'd change the mode to CLAMP/IGNORE/WARP as sound like you're describing the distortion at the edge? Also it's a combination of what you have in the map and scaleX/scaleY, obviously.