Quicktip: Flipping an image in Actionscript

Ever needed to flip a dynamically loaded image in Flash or Flex? Like for making mirror effects and so on..
There is no property in ActionScript 3 called "flipImage", but there is one easy way to do it.

In AS3, to flip an image horizontally, go like so:

var flipper:MovieClip = new MovieClip();
//Load your image into the flipper MC
flipper.scaleX = -1;

This works because you're actually resizing the image beyond zero, literately turning it inside out.
PS: This will not work with components, like the UILoader.

7 comments:

swetha reddy said...

i have tried a lot to get this example for flipping an image.

could you plz tell me how exactly to do it for an image

thanks

Unknown said...

Sure.. In my example I'm using a picture found in the same folder as the swf file loading it.

At startup the image will load, and at the click of button "test" it will flip and reset it's position.
------------

var imageHolder:MovieClip = new MovieClip();
this.addChild(imageHolder);
var mcLoader:Loader = new Loader();
mcLoader.load(new URLRequest("cow3.gif"));
imageHolder.addChild(mcLoader);
test.addEventListener(MouseEvent.CLICK, flip);

function flip(evt:MouseEvent):void {
var orgX:Number = imageHolder.x+imageHolder.width;
imageHolder.scaleX = -1;
imageHolder.x = orgX;
}

Ado said...

Thanks so much.

felisan said...

sooo simple, thanks :O)

naazim said...

Hey thanx a ton dude.. Ur tip simply helped me big time...

Ady said...

Ryan is right...

Tahir Alvi said...

Hi,

i able to flip the image but i want to adjust same x position that is original at startup.

How can i do that ?