Beginner's Guide to Adobe Flash/Filters and Blend Modes/Creating an Animated Alpha Blend

From Wikibooks, open books for an open world
Jump to: navigation, search

The following example uses an animated Alpha blend to selectively fade out a black and white image to reveal a color image. The trick for this effect is to use two instances of the same color image, with the Adjust Color filter applied to make one instance a grayscale version. There are a lot of steps, but the final file structure is straightforward and the effect is pretty cool, so let's get started:

1. Open a new Flash document.

2. Import a color bitmap and convert it to a Movie Clip (or place an existing Movie Clip instance on the Stage - preferably one with bright colors).

3. Place two instances of the Movie Clip on the Stage so that they are layered and aligned- select both instances and use the Vertical Center and Horizontal Center align commands.

4. Select the topmost Movie Clip instance and use the Adjust Color filter to set the Saturation of the image to -IOO-this will drain the color out so that it looks grayscale.

5. With the grayscale Movie Clip instance still selected, use the Blend menu in the Properties panel to apply Layer blend mode. You won't see any visible change yet.

6. Double-click the grayscale Movie Clip instance to access the Movie Clip timeline in Edit mode.

7. Create a new layer at the top of the layer stack in the Movie Clip Timeline. Lock the other layer(s) with the bitmap or graphics you plan to use as a base image.

8. Select the Oval tool (0) in the Tools panel and set the Fill color to use a default radial gradient. Use the Color Mixer panel to apply 0 percent Alpha to the right color anchor. This should create a circular gradient fill that has a transparent center that fades out to black. Set the stroke color to None.

9. Click and drag on the Stage to create a circle that covers only a small area in the center of the original image-in our file, the circle image was 100 x 100 pixels.

10. Select the new circle and convert it into a Movie Clip named alpha circle.

11. Use the Blend menu in the Properties panel to apply Alpha blend mode to the alp ha c i r c 1e Movie Clip instance. The circle Movie Clip will disappear, but don't panic. As you can see by the filled keyframe on the layer, the content is still there and you can select it to see the selection outline for the invisible instance.

12. Double-click the alp hac i r c 1e instance to access the Movie Clip timeline and insert frames (F5) to extend the span of the circle graphic to frame 20. Convert frame 20 into a keyframe (F6).

13. Select the circle graphic in keyframe 20 and use the Transform panel to increase the size of the circle so that it is larger than the bitmap base image. We scaled the circle up to 400 x 400 pixels.

14. Select keyframe 1 (still in the alpha circle timeline), and apply a Motion tween to ani- mate the small circle scaling up to the size of the larger circle in frame 20.

15. In order to see the Alpha blend applied as a mask, you have to return to the Main Timeline (click the Scene button).

16. The grayscale bitmap image should now have an area in the center that is "erased" in a soft, gradient circle that allows some of the color image to show through.

17. The animated effect will only be visible in the published .swf file or the Test movie environment. Use Ctrl + Return or 3C + Return to test the file and preview the animation.

You can always go back inside the nested symbols to modify the level of alpha in the blend image or change the style of fill from a radial gradient to a linear gradient or even a solid fill (with alpha set to less than 100 percent). The level of masking will match the level of alpha in the contents of the Alpha blend symbol instance. Alpha blends can be used to mask any type of image-even bitmaps or primitive shapes. The only requirement is that the Alpha blend must be applied to a symbol instance and that symbol instance must be nested inside a Movie Clip with a Layer blend applied. This is just one way of using a blend mode to create an inter- esting visual effect. There are many other possibilities, and once you understand the workflow for applying basic and compound blends, the rest is just a matter of experimentation!