Open Flash File
- there will be several, containing the broken down steps of my technique
Creating background graphic
- in my example, i already have a background layer
- create a new layer above the background named "face"
- on that layer place the image you wish to reveal (show graphic i used)
- convert graphic to symbol - movie clip named "face"
- in the property inspector give the new movie clip the instance name of "test"
-
also in property inspector, next to Blend, check on the option of "use runtime bitmap caching"
Creating Mask
- create a new layer named "mask"
- on that layer create new symbol - movie clip named "mask"
- in the property inspector give it the instance name of "masker"
- again, next to Blend, check on the option of "use runtime bitmap caching"
- then decide how you want your background image to be revealed - in this example the eyes are revealed first
-
go into movie clip of mask, show frame one - section revealing eyes.
- this is where the masking becomes difficult (shape tweens = hell)
- i found it easiest to use circles as the mask grew to reveal as it was easier to control the movement
- show steps of adding more circles as well as shape hints to control the shape tweens
- finally, apply a gradient radial gradient to mask animation, giving one end of the gradient a transparency of zero
- alter the gradient at separate keyframes until the desired effect is created (i sometimes altered the transparency at both ends as more of the background image was revealed)
Coding the Mask
- create a third layer
named "code"
- select the first empty keyframe on that layer
- open the action script window and type "test.setMask(masker);"
- this short line of code uses the instance names you have provided for your two movie clips, and tells the movie clip "mask" to act as the mask for the movie clip "face"
- now you can test the reveal and alter the shape tween and gradient to better achieve your desired effect.
THE END
