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; } } }
.