4

I want to distort images (or FXGs) in Flex.

Basically just want to modify the edges of an image like the image below. I know how to make simple distortions but I can't find a way of doing that.

enter image description here

Santhosh Nayak
  • 2,312
  • 3
  • 35
  • 65
PCoelho
  • 7,850
  • 11
  • 31
  • 36
  • 4
    Try to distort the image using the [DisplacementMapFilter](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DisplacementMapFilter.html) – George Profenza Dec 07 '11 at 12:39
  • As George said... and [this might help](http://www.emanueleferonato.com/2007/12/03/understanding-flash-displacement-map-filter/) – keyle Feb 22 '12 at 23:26

1 Answers1

3

The answers were right... what you need is a DisplacementMapFilter!!

The displacementImage should be grey in general -> means no distortion, and add a white and a gray radial gradient to each lower and upper edgelike this:

Distortion map for this very effect

The image i used to be distortet

Final result after distortion

And with the Map you go like this:

package {
    import flash.display.BitmapData;
    import flash.display.BitmapDataChannel;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.filters.DisplacementMapFilter;
    import flash.filters.DisplacementMapFilterMode;
    import flash.geom.Point;
    import flash.net.URLRequest;

    public class DistortImage extends Sprite
    {

        private var sourceImage:Loader;
        private var distortMap:Loader;

        public function DistortImage()
        {
            super();


        // Loading the Image to be distorted
            sourceImage = new Loader();
            var requ: URLRequest = new URLRequest("text.jpg");
            sourceImage.contentLoaderInfo.addEventListener(Event.COMPLETE, loadMap);
            sourceImage.load(requ);
        }

        private function loadMap( E:Event = null ):void{

        // loading distortion map ( grayscale )
            distortMap = new Loader();
            var requ: URLRequest = new URLRequest("distortMap.jpg");
            distortMap.contentLoaderInfo.addEventListener(Event.COMPLETE, applyDistortion);
            distortMap.load(requ);
        }
        private function applyDistortion( E:Event = null ):void{

        // get jpg as BitmapData
            var bmpData:BitmapData = new BitmapData( distortMap.content.width,distortMap.content.height);
            bmpData.draw(distortMap);

        // create the filter - notice gray(128,128,128) means no distortion white is negative black is positive distortion
            var offsetOfMap:Point = new Point(0,0);
            var redChannelCode:uint = BitmapDataChannel.RED; // is not important cause you just need oneway distortion 
            var yDistortion:int = 20; // strength

            var distortFilter:DisplacementMapFilter = new DisplacementMapFilter(bmpData,offsetOfMap,0,redChannelCode,0,yDistortion,DisplacementMapFilterMode.COLOR,0xffffff,0);

        // filters need to be included in an array to add on display Object
            var filters:Array = new Array();
            filters.push(distortFilter);

        // adding filter to image
            sourceImage.filters = filters;
            addChild(sourceImage);
        }
    }
}
Sunil D.
  • 17,983
  • 6
  • 53
  • 65
Sidrich2009
  • 570
  • 1
  • 4
  • 11