Skip Navigation

Ramblings from the team at zinc Roe

Metal Fish Eggs

Mirrored Video Object in Flash

When using the webcam in your flash applications, it can be handy to flip the video object so it acts like a mirror. Many of the flash webcam demos out there does exactly this, usually by setting the scaleX property of the video object to -1. Unfortunately, because the registration point of the video object is set on the top left corner, setting the scaleX property to a negative value moves the display object like flipping a page in a book from right to left.

Setting scaleX to -1 on a display object

Setting scaleX to -1 on a display object

Of course, you can easily place the video object back to where it was by compensating for the flip and adding the video object’s width to it’s current x value. While this solution works for most applications, there is one annoying thing about this method. If you ever want to move the video object around the stage or play with it’s scaleX value, there’s going to be a lot of compensating going on and it can get messy quick depending on the complexity of your application.

So to make it easier, here’s a class that extends the Video object and adds a “flipped” property. I don’t think I need to explain what the property does, but the class overrides the x and scaleX properties of Video so that it takes care of all the positioning when flipping the display object. Check out the demo [webcam required]:

Even when flipped, the x property always references the left side of the video object and the scaleX remains the same. Here’s the source: MirrorDemo.zip

Your Comment…

You can use these tags: <a> <blockquote> <strong> <em> <strike> <code> <pre> Use <pre lang="LANGUAGE"> for syntax highlighted code blocks.