# Quick Tip: How to Create Perfect Alpha Reflections

2010 will see several changes here on Activetuts+, one of which you’ll see implemented across all the Tuts+ sites: Quick Tips. Quick Tips tuts will be short, informative, simple, effective and will demonstrate something achievable during your lunch break!

Bruno is kicking off the Quick Tips here at Activetuts+, with a great tip on creating perfect reflections. Got 5 minutes? Off you go then..

### Final Result Preview

Let’s take a look at what we’re aiming for here..

## Introduction

This method allows you to take any kind of movieclips, even those containing video, and make a true reflection without worrying about the fading background.

## Step 1: Stage Setup

Open up Flash and create a new Actionscript 3 FLA.

## Step 2: Scene Setup

Create the following layers:

## Step 3: Object

In the Objects layer create the movieclip that you want to reflect.

## Step 4: Reflection

Copy the movieclip from the Objects Layer and paste it in the Reflections layer, scale it vertically at -100%, that will make it flip vertically

## Step 5: Cache as Bitmap

Check the cache as bitmap box.

## Step 6: Instantiate

Give it an instance name of “reflection_mc.”

Create a gradient filled rectangle with alpha.

Convert it to movieclip (F8) and give it an instance name of “mask_mc.”

## Step 9: Cache as Bitmap, Again

Check the cache as bitmap box.

## Step 10: Making Magic

Select the actions layer and type:

reflection_mc.mask = mask_mc


## Conclusion

If you want you can add an alpha to the relfection_mc, I applied one of around 60%. Hope you liked this Quick Tip, thanks for reading!

Tags: Tips
• Patrick

Excellent Tip Bruno!

That will save a lot of time trying to make reflections in Illustrator or Photoshop. I would be interested in taking this tutorial further into how to apply this via AS3 code.

Nice job!

• Flash And Art Devlopment

Ya very good (: im a flash teacher i would grade this as a A+

• Wesley

Just a simple thing but saves a lot of time!

• André

I remember that i searched for this a lot, and never found, so i thought that this was impossible in flash, but one day a friend told me this technique, it was really needed here, i know that will be one of the most usefull information.

• Tom Green

You could even skip the CacheAsBitmapin the properties panel step and add that in using AS. Sweet technique.

• http://www.campjohn.dk/wp/ felisan

this would be SO useful to me in an all ActionScripted version. anyone who can make an example of this being made in ActionScript?

• Bruno

reflection_mc.cacheAsBitmap = true;

cheers

• http://michaeljameswilliams.com/ Michael Williams

You can use “reflection_mc.scaleY = -1″ to flip it upside-down as well :)

Great tutorial, by the way.

• http://www.GamesFun.co.il Ian Lockhear

great tut. I never got good reflections in Flash, i would usually go make a graphic in photoshop.
But this sure is good for most cases.

Whats the diffrence between

to just right clicking on the layer and selecting mask?
because when you right click and mask, it doesn’t work for some reason.

( because its the layer and not the gradient itself? )

• Bruno

The reason for alpha masking not to work without actionscript is that the flash interprets the mask layer as a display object and not a bitmap data, meaning only the edges of that object will affect the masking (this happens to all symbols you create), when you cache as bitmap, you are caching an internal bitmap representation of the display object, meaning you can use the alpha values of that rgba bitmap data to mask.

• jmarreros

great Bruno, thanks for sharing this tip.

• LSA

Somehow this isn’t working while applying a 3d-action to the masked mc, like

Could it be that the 3d-”engine” interferes the cacheAsBitmap command?

• http://jpcordial.thinkcassis.com jpcordial

Actually, I think their might be a software restriction on it. If you look in the documentation, Adobe says that 3d tools can’t be used on masks, thus I’m assuming any AS DisplayObject with 3d properties has said properties ignored while the object is serving as a mask.

Either that, or the properties are ignored in rendering the mask. IE: maybe the property is still changing, but the 3d properties aren’t taken into account when calculating the alpha from the mask.

• http://www.bloggerzbible.blogspot.com/ Bloggerzbible

beautiful

• http://www.bloggerzbible.blogspot.com/ Bloggerzbible

Very beautifully created

• dijas

actually in wat software is dis work don?
:)p i donno

• dramaqueen

Hi,

I am doing an image slideshow like the 1 below. But i have a few image to mask over.