author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff. Follow me on Twitter, GitHub, Facebook or LinkedIn

Distort MovieClip in Flash with AS3

As you probably know there is no simple way to distort a MovieClip in Flash. The solution that I've found uses AS3. Special thanks to Thomas Pfeiffer and Ruben Swieringa. They share their experience with this problem.
I successfully wrapped the code from here. As you can see in the example below I added a few properties to class that extends MovieClip. The usage:

    // just pass the MovieClip that you want to distort as a parameter of the DistortImageWrapper class
    var distortClip: DistortImageWrapper = new DistortImageWrapper(new TheClip());
    
    // setting the position of the top left corner
    distortClip.tlX = 120;
    distortClip.tlY = 75;
    addChild(distortClip);
The code of the example:
package {
      import flash.display.MovieClip;
      import flash.events.Event;
      import flash.events.MouseEvent;
      import ws.outset.display.DistortImageWrapper;
      import ws.outset.managers.tween.TweenManager;
      import ws.outset.managers.tween.TweenType;
      public class App extends MovieClip {
        private
        var _clip: DistortImageWrapper;
        public
        function App(): void {
          // adding the clip to the stage		
          _clip = new DistortImageWrapper(new TheClip());
          addChild(_clip);
          // distorting		
          distort();
          // adding buttons		
          addButton(new ButtonClip(), 400, 343, onButtonClick);
          addButton(new ButtonClip2(), 260, 343, onButtonClick2);
        }
        // distorting	
        private
        function distort(): void {
          // setting x of the top left corner	
          _clip.tlX = getRandomNum(0, 200);
          // setting y of the top left corner	
          _clip.tlY = getRandomNum(0, 200);
          // setting x of the top right corner	
          _clip.trX = getRandomNum(340, 540);
          // setting y of the top right corner	
          _clip.trY = getRandomNum(0, 200);
          // setting x of the bottom left corner	
          _clip.blX = getRandomNum(0, 200);
          // setting y of the bottom left corner	
          _clip.blY = getRandomNum(200, 400);
          // setting x of the bottom right corner	
          _clip.brX = getRandomNum(340, 540);
          // setting y of the bottom right corner	
          _clip.brY = getRandomNum(200, 400);
        }
        // tweening distortion
        private
        function tweenDistort(): void {
          TweenManager.tween(_clip, {
            tlX: {
              end: getRandomNum(0, 200),
              mtd: TweenType.OUT_EXPO
            },
            tlY: {
              end: getRandomNum(0, 200),
              mtd: TweenType.OUT_EXPO
            },
            trX: {
              end: getRandomNum(340, 540),
              mtd: TweenType.OUT_EXPO
            },
            trY: {
              end: getRandomNum(0, 200),
              mtd: TweenType.OUT_EXPO
            },
            blX: {
              end: getRandomNum(0, 200),
              mtd: TweenType.OUT_EXPO
            },
            blY: {
              end: getRandomNum(200, 400),
              mtd: TweenType.OUT_EXPO
            },
            brX: {
              end: getRandomNum(340, 540),
              mtd: TweenType.OUT_EXPO
            },
            brY: {
              end: getRandomNum(200, 400),
              mtd: TweenType.OUT_EXPO
            }
          });
        }
        // button	
        private
        function addButton(clip: MovieClip, xPos: Number, yPos: Number, callback: Function): void {
          clip.x = xPos;
          clip.y = yPos;
          clip.gotoAndStop(1);
          clip.buttonMode = true;
          clip.addEventListener(MouseEvent.CLICK, callback);
          clip.addEventListener(MouseEvent.MOUSE_OVER, onButtonOver);
          clip.addEventListener(MouseEvent.MOUSE_OUT, onButtonOut);
          addChild(clip);
        }
        private
        function onButtonClick(e: Event): void {
          // forcing distort		
          distort();
        }
        private
        function onButtonClick2(e: Event): void {
          // forcing distort with tween	
          tweenDistort();
        }
        private
        function onButtonOver(e: Event): void {
          e.target.gotoAndStop(2);
        }
        private
        function onButtonOut(e: Event): void {
          e.target.gotoAndStop(1);
        }
        // getting random number		public function getRandomNum(min:Number, max:Number):Number {			 var num:Number  = Math.floor(Math.random() * (max - min + 1)) + min;			 return num;		}	}	}
.
If you enjoy this post, share it on Twitter, Facebook or LinkedIn. Or maybe comment below: