Skip navigation
Currently Being Moderated

DisplacementMapFilter problem

May 10, 2011 12:46 AM

Did somebody's worked by DisplacementMapFilter? It don't work fine on iPhone, while on flashplayer is correct. In particular, on iPhone, the filter create a image with pseudo-random pixel, without apparent logic, why?


Maybe that filter isn't implemented?


I would create an app that deforms an image through finger got from a picture done by camera, do exist an alternative method without DisplacementMapFilter?



  • Currently Being Moderated
    May 12, 2011 7:54 AM   in reply to myoscaroxy

    Do you use CPU or GPU render mode ? You should use CPU to apply filter.


    Here a small exemple to deforme a picture when you touch screen. (I test it on my Samsung Galaxy S)


    *Sorry for french comment...


    The "Img" class is a Bitmap (your picture)

    The "Vague" class is a MovieClip Animation of wave (black and white).


    Main Class:


        import flash.display.Bitmap;
        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.geom.Matrix;
        import flash.sensors.Accelerometer;
        import flash.text.TextField;
        import modules.fx.Deformation;
        import modules.utils.FPSCounter;
         * ...
         * @author Michaël Chartrand
        public class Main extends Sprite {
            private var _img:Bitmap;
            private var deformation:Deformation;
            public function Main():void {
                //setup stage
                stage.scaleMode = StageScaleMode.NO_SCALE;
                stage.align = StageAlign.TOP_LEFT;


                //add handlers
                addEventListener(Event.ADDED_TO_STAGE, init);
            private function init(event:Event):void{
                    //removes listener
                    removeEventListener(Event.ADDED_TO_STAGE, init);
                    _img = new Bitmap(new Img);


            private function setupTransformBitmap():void{
                deformation = new Deformation(_img);
                this.addEventListener(Event.ENTER_FRAME, rappel);
                this.stage.addEventListener(MouseEvent.CLICK, ajoute);
                var fps:FPSCounter = new FPSCounter(0, 0);
            //FONCTION rappel
            private function rappel(event:Event):void{
            //FONCTION ajoute
            private function ajoute(event:MouseEvent):void {
                deformation.ajouteEffet(Vague, mouseX, mouseY);







    Deformation Class:


    package modules.fx{


         * ...
         * @author Michaël Chartrand.


        import flash.display.MovieClip;
        import flash.display.DisplayObject;
        import flash.display.Bitmap;
        import flash.display.BitmapData;
        import flash.filters.DisplacementMapFilter;
        import flash.filters.DisplacementMapFilterMode;
        import flash.geom.Point;
        import modules.forme.Rectangle;


        //CLASS Deformation
        public class Deformation extends MovieClip {


            private var _imageBitmap:BitmapData;
            private var _displacementMap:DisplacementMapFilter;
            private var _contenant:MovieClip;
            private var _rectangle:Rectangle;
            private var _objet:DisplayObject;
            //FONCTION Deformation
            public function Deformation(objet:DisplayObject) {
                _objet = objet;
                //Création d'un bitmap d'après les proportion d'une image.
                _imageBitmap = new BitmapData(_objet.width, _objet.height, false, 0x000000);
                //Contenant de l'effets et du rectangle
                _contenant = new MovieClip();
                _contenant.x = _objet.x;
                _contenant.y = _objet.y;
                _contenant.visible = false;
                //Forme un Rectangle
                //Arguments    :: couleurFond, transparenceFond, couleurContour, pixelContour, transparenceContour, largeur, hauteur, coinLargeur, coinHauteur
                _rectangle = new Rectangle(0x000000, 1, 0x000000, 0, 1, _objet.width, _objet.height, 0, 0);
                _rectangle.x = _objet.x;
                _rectangle.y = _objet.y;
            //FONCTION ajouteEffet
            public function ajouteEffet(classe:Class, posX:int, posY:int):void{
                var effet:MovieClip = new classe;
                effet.x = posX;
                effet.y = posY;
            //FONCTION appliqueEffet
            public function appliqueEffet():void{
                //Reproduit l'image sur le bitmap
                //Crée le filtre de déformatiom
                _displacementMap = new DisplacementMapFilter(_imageBitmap, new Point(0, 0), 1, 1, 10, 10, DisplacementMapFilterMode.CLAMP);
                //Applique le filtre de déformation
                _objet.filters = [_displacementMap];

    Mark as:
  • Currently Being Moderated
    Jun 7, 2011 1:47 AM   in reply to myoscaroxy

    I have the same problem, I tried also Pixel Bender on CPU and GPU but the image isn't filtered.


    Does anybody know if filtering will be possible with AIR 2.7 for iOS ?

    Mark as:
  • Currently Being Moderated
    Aug 10, 2011 11:59 PM   in reply to myoscaroxy


    @myoscaroxy I tried your code and I am not able to see any difference in output on desktop and iOS. Could you please attach a screenshot, or file a bug at with an example?




    Mark as:
  • Currently Being Moderated
    Aug 23, 2011 1:43 AM   in reply to myoscaroxy

    Thanks for the screenshot. I am able to reproduce the bug. It is currently under investigation.




    Mark as:
  • Currently Being Moderated
    Aug 23, 2011 2:16 AM   in reply to myoscaroxy

    You could report the bug yourself at along with the app sources. The bug will be visible publicly, so you will come of any updates on the bug.




    Mark as:
  • Currently Being Moderated
    Aug 31, 2011 2:40 PM   in reply to myoscaroxy

    Looks like perhaps an authoring error?  Its not the filter that's the problem, its the inputs to the filter.   the code is using stage.mouseX / stage.mouseY to see where to apply the filter; and also previous.x/y - current.x/y to see how much to apply.


    On desktop, stage.mouseX/Y are updated per pixcel changes while mouse is moving. But on mobile, with touch input, they don't. So what happens on mobile is that previous.xy - current.xy could be a large value if the two touches are far way on screen. So that leads to a large filter to apply.


    So I think this is a UserError one.


    On mobile:



    previous=221,186 & current=149,311



    previous=221,186 & current 221,186



    Mark as:
  • Currently Being Moderated
    May 9, 2012 1:42 PM   in reply to myoscaroxy

    myoscaroxy, do you can help me, showing your code with solution? I've the same problem. I see that problem is the x,y of Touch position, but I could not to solve this.  Thanks!!!

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points