There were many design trends that emerged as part of the Web 2.0 movement such as glassy interfaces, pastel colors, and by far the most popular of them all, the reflection. Many of these trends were started by Apple years ago when they released their Mac OS X operating system, influencing a whole cadre of visual designers. The reflection, also known in the industry as a wet floor, is something that still gets clients very excited, particularly when they’re applied to video. It’s always been fairly simple to create a nice reflection inside of Adobe Photoshop, and with the release of Flash 8, we can create similar effects on video files with only a little extra effort. The best part is that these are “live” reflections that are constantly repainted as the video plays back.

[If you’d like to download the assets used in this tutorial to practice this technique, visit www.layersmagazine.com/downloads.html.]

STEP 1 Open reflection.fla in Flash
Unzip the tutorial files so that they’re all in the same folder on your hard drive. Open reflection.fla in Flash Professional 8 and take a look around. There’s a locked “actions” layer that will hold all of our ActionScript that we’ll need to create the reflection. Above that there’s a layer called “background” that simply contains a gradient that will act as our movie’s backdrop.

STEP 2 Importing the Flash Video (FLV) File
Click the Insert Layer icon to create a new layer above the background layer and name it “video.” Now we need to import the FLV file. Go to File>Import>Import Video to open the Import Video dialog. Click Choose (PC: Browse) and select the jiuJitsu.flv file that’s included in your tutorial files and click Continue (PC: Next). Select Progressive Download as your delivery option and click Continue (PC: Next). Choose None in the Skin pull-down and click Continue (PC: Next), and then click Finish to import the video file.

STEP 3 Encapsulate the Video in a MovieClip
After importing the video, select the video on the Stage and go to the Properties panel and position the video at X: 90 and Y: 50. In order for us to be able to create a reflection of our video, we first need to encapsulate it inside of a MovieClip. With the video selected, hit the F8 key to open the Convert to Symbol dialog. Choose MovieClip as the symbol type and name it “video.” Now go to the Properties panel and give the MovieClip an instance name of “video.”

STEP 4 Create the Reflection MovieClip
Create a new layer above the video layer and call it “reflection.” Hit the R key to get the Rectangle tool and draw out a rectangle at any size and color but with no stroke applied. Now go to the Properties panel and give it a size of W: 320 and H: 240. Hit F8 to turn it into a MovieClip called “ref” and then give it an instance name of “ref.” Position this clip underneath the video clip but leave a couple of pixels in between them. For example, I placed my ref clip at X: 90 and Y: 292.

STEP 5 Write the Reflection ActionScript
Now we need to add the ActionScript that will make our reflection work. Highlight the first frame of the actions layer and open the Actions panel by hitting Option-F9 (PC: F9). Type in the code that you see in the screenshot above. The BitmapData class allows us to copy the pixels from one MovieClip into another. In this code we create a new BitmapData object and attach it to our ref clip. Then we continuously draw the pixels from the video clip into the ref clip using the onEnterFrame event.

STEP 6 Test the Movie
Go ahead and test your movie by going to Control>Test Movie. You should now see an exact duplicate of the video playing directly beneath the original FLV file. While this is quite a nice accomplishment, it’s hardly a reflection yet. We need to flip the ref clip on its Y axis so that it becomes a mirror image of the original video, and we also need to fade the opacity out in order to make it a true reflection.

CREDIT: LEE BRIMELOW

STEP 7 Make a Mirror Image
It’s very easy to flip a MovieClip on its X or Y axis inside of Flash. Simply select the MovieClip and then hit Command-T (PC: Control-T) to open the Transform panel. You should be able to see this panel open in the right side of the application. Change the Height value from 100% to –100% and then hit the Enter key. You won’t see much happening on the Stage since there’s only a solid rectangle inside of the ref clip. Test your movie to see the perfectly mirrored reflection.

STEP 8 Create the Mask MovieClip
Create a new layer above the reflection layer and name it “mask.” Draw a rectangle with no stroke sized at W: 320 and H: 240. Place it directly over the ref clip. For the fill, create a linear gradient that starts at 40% Alpha and ends with 0% Alpha in the Color Mixer panel (the colors of the gradient aren’t important). Hit F to get the Gradient Transform tool and rotate the gradient 90° clockwise and shrink it down as shown above. Hit F8 to turn it into a MovieClip, name it “mask,” and give it an instance name of “mask.”

STEP 9 Enable Bitmap Caching
In order to create a true gradient mask in Flash 8 you’ll need to enable bitmap caching on both the mask and the MovieClip that’s being masked. Bitmap caching tells the Flash Player to take a snapshot of a MovieClip so that it can display and animate it as a bitmap, which is much faster than vector content. Select the mask clip and check the Use Runtime Bitmap Caching checkbox in the Properties panel. Do the same for the ref clip (you can temporarily hide the mask layer so you can select the ref clip below).

STEP 10 Add the Masking ActionScript
In order to get our gradient mask to work, we need to go back to our ActionScript and add a new line. Select the first frame in the actions layer and hit Option-F9 (PC: F9) to open the Actions panel. Enter the line of code shown above. This line simply tells Flash that the ref clip will be using the mask clip as its mask.

STEP 11 See the Finished Reflection
Now go ahead and test your movie to see the finished reflection. You’ll probably need to adjust the gradient inside of the mask clip to fine-tune the reflection (double-click the mask with the Selection tool to go into edit mode and edit the gradient in the Color Mixer panel). Remember that anything that’s transparent in the mask will be transparent in the reflection. So lowering the opacity in the gradient will lessen the opacity in the reflection as well. Our reflection looks nice but let’s add some finishing touches.

STEP 12 Add a Drop Shadow
One thing we can do to make things look more realistic is to add a shadow underneath the video. Thanks to the new filters in Flash 8, this is dead easy. Select the video MovieClip and go to the Filters panel (the tab for the Filters panel will usually be located directly next to the tab for the Properties panel). Click the plus sign and add a drop shadow using the settings shown above.

STEP 13 Stroke the Video
Now let’s add a black stroke around the video and a black rectangle behind it. Double-click the video clip to go into edit mode. Create a new layer above the video’s layer and hit the R key to get the Rectangle tool. Draw a rectangle with a black stroke and no fill along the outer edge of the video clip (the stroke needs to be within the bounds of the 320×240 video clip in order for it to be rendered in the reflection). Create another layer below the video’s layer and draw a black rectangle behind the video at the same size.

STEP 14 Admire Your Work!
It’s now time to sit back and see the finished project. Test the movie and you should see something similar to the example above. You can go on and add more finishing touches like reflecting the video onto surfaces such as tile or wood, or using the MovieClip blending modes in the Properties panel to make the reflection look as if it’s really a part of your scene.