Many people have read the simple reflection tutorial for AS2 that I wrote a while ago. Many also had a lot of questions about how to make this more dynamic, with more objects and so on. Rather than answering case after case, I decided to write a new tutorial exploring the reflection concept deeper. I then eventually created a new easy-to-use class. Of course this tutorial is for AS3 but the basic principles that I will show are applicable to AS2 as well.

So let’s start by showing the basic principles behind a simple reflection in Flash. So let’s say we have an object that we want to add a reflection effect to:



Step number 1 is to create a copy of the object:



Step number 2 is to flip the copy. Here the reflection will be at the bottom so we flip the copy vertically:



Step number 3 is to create a gradient:



Step number 4 is to set one color of the gradient to transparent:



Finally set the gradient on top of the flipped copy and set the gradient as a mask for the flipped copy:



So to resume creating a reflection involves a few steps: Create a copy, flip the copy, create a gradient, set one color of the gradient transparent, and then set the gradient as a mask for the flipped copy. Now to translate that into code all we need to do is write a code that does all these steps for us.

It’s important also to notice that the way the reflection looks is completely dependent on the way the gradient is made. The second color of the gradient is fully transparent but what happens if I make the first one 50% transparent?



What happens if I move the gradient up?



So the gradient is the centerpiece of a nice reflection effect. We can move it, set different transparencies for its colors; we could also put the gradient at an angle to get interesting effect and so on. So now it’s time to apply what we learned and get into some coding.