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.”
Step 7: Gradient
Create a gradient filled rectangle with alpha.
Step 8: Mask
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Bruno Crociquia
Related Posts
Magma design - More
Active Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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!
Ya very good (: im a flash teacher i would grade this as a A+
Just a simple thing but saves a lot of time!
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.
You could even skip the CacheAsBitmapin the properties panel step and add that in using AS. Sweet technique.
this would be SO useful to me in an all ActionScripted version. anyone who can make an example of this being made in ActionScript?
mask_mc.cacheAsBitmap = true;
reflection_mc.cacheAsBitmap = true;
reflection_mc.mask = mask_mc
is that what your asking?
cheers
You can use “reflection_mc.scaleY = -1″ to flip it upside-down as well
Great tutorial, by the way.
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
reflection_mc.mask = mask_mc
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? )
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.
great Bruno, thanks for sharing this tip.
Somehow this isn’t working while applying a 3d-action to the masked mc, like
myMasked_mc.rotateY = 45;
Could it be that the 3d-”engine” interferes the cacheAsBitmap command?
Thanks for any advise..
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://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS9388626D-B940-43f3-87BB-7C3159F5EDE4.html
beautiful
Very beautifully created
actually in wat software is dis work don?
p i donno