Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Through several hands-on tutorials, instructor Todd Perkins shows how to best build dynamic, streamlined sites using Flash CS3 Professional. Learn how to create custom keyboard shortcuts, apply advanced text techniques such as animating scrolling text with custom easing controls, and using advanced animation techniques. Flash CS3 Professional Beyond the Basics covers many challenging features, including adding complex interactivity to a Flash CS3 project and getting Flash content on a phone. Exercise files accompany the tutorials.
Now our goal to finish our reflection is to make the reflection fade out. We'll talk about how to do that in this movie. If you're following along, I'm working in 09_Masking.fla in the Chapter 08 folder in the Exercise Files folder. Before we go to our code let's take a look at the mcOverlay movie clip in the library. I'm going to double-click the mcOverlay movie clip in the library to enter its timeline. Notice on the stage of this is a simple rectangle with a gradient applied. When you have the rectangle selected on the stage and look in the Color panel, you can find information about the gradient.
The left swatch of the gradient is a white color with an alpha value of 100%. The right swatch of the gradient is a white color with an alpha value of 0. So on the stage you see black, but in fact the gradient is actually fading to a transparent white. And this is what we're going use as a mask to fade out our reflection. Let's click Scene 1 at the bottom of the timeline to return to the main timeline. We're about to run into a few obstacles here, because we're creating our object that's going to be masked using ActionScript. What we'll need to do here is mask the object using ActionScript as well.
Select the video layer in the timeline and then drag an instance of mcOverlay from the library on the stage. Place it right below the video movie clip and align it to the center of the stage using the Align panel. I'm going to collapse the Color panel and open the Align panel and then I'm going to check the to stage option in the Align panel and click the Align horizontal center button. Now I'll make sure that our overlay movie clip is aligned with our video. Next we'll give our overlay an instance name of overlay_mc.
Now let's go to our actions. Select the first keyframe in actions layer and open up the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. To set a mask in ActionScript you use an object's mask property. On line 15 in my code where I set the alpha property of the reflection to .75. I'll go to the next line and type reflection.mask = overlay_mc; Now in a lot of cases this will work just fine. If you have any solid color mask, or any gradient mask that doesn't fade to a transparent color, the code here will be all that you need to create a mask.
But notice if you test the movie now the mask will not work properly. Let's take a look at what happens. Command+Return on the Mac Ctrl+Enter on the PC. Notice that the reflection movie clip doesn't fade out. Let's close the Preview window and talk about what we have to do in order to make it fade out. Now in order to apply a mask to an object when the mask fades out, or when the mask has a transparent value and fades out, you need to take one special step.
This special step is to tell Flash that both the mask and the object that's being masked are to be cached as bitmaps. Once you tell Flash to treat both of those objects as bitmap images, then Flash will use the gradient mask that you created properly. Above the line of code where we set the mask value, I'm going to type reflection.cacheAsBitmap = true; On the next line of code, I'll do the same thing for the overlay movie clip. So type overlay_mc.cacheAsBitmap = true; Now let's test the movie to see the reflection fade out. Command+Return on the Mac, Ctrl+Enter on the PC.
And now our reflection fades out. The very final touch would be to change the blend mode of our reflection to blend a little bit better with its background. So right below line 18 where we set the mask property of reflection to overlay_mc type reflection.blendMode = "overlay" that's going to be in quotes and all lowercase. That will set the blend mode of our reflection to overlay so it'll blend a little the better with the background. Command+Return on the Mac or Ctrl+Enter on the PC to test the movie.
And there is our reflection. Let's close the Preview window. And that's a look at how to apply a reflection to a video in Flash. You can use this same technique to apply reflections to other objects. And keep in mind you're not limited to applying a reflection to a video only. You can actually apply a reflection in the same way to any movie clip. And that's a look at how to create a reflection in Flash.
There are currently no FAQs about Flash CS3 Professional Beyond the Basics.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.