Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

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.