Animating masks in Flash offers amazing cinematic effects when used with stills. Since Adobe Flash CS4, Adobe has rewritten the motion tween aspect and added the Motion Editor panel. By using the enhanced Motion Editor to add additional eases (acceleration and decelleration) to the animation, you can add fluid movement.

By animating one strip many times – moving across from left to right at various speeds and accelerations to gradually show more of the underlying image – you get a transition that is reminiscent of a cinematic title sequence. Compounding the strips then reveals the whole image for display. For variety, a couple of moving squares were used in our example, as opposed to strips, which bring the animation to its end.

1. Preparing image  Open the photo you wish to use in Photoshop CS5 or any image editor and crop it to the dimensions of the stage of your animation. The animation here used the default dimensions of 550 pixels by 400 pixels. This example will work with any dimensions necessary.


2. Import image  Import the cropped image into Flash by using File > Import > Import to Stage. Rename the layer as ‘Masked Photograph’, place the image and position it accurately on to the stage by setting the position of the image to x:0, y:0 in the Properties panel.


3. Create Mask  Create a new symbol, go to Insert > New Symbol and choose MovieClip. Name the MovieClip as Mask. Draw a square using any colour and no stroke. So that we can see the underlying image while creating the movements, pick a 50% Alpha for the colour.