In this tutorial I will show you how to create an image fill effect.

Setting up the environment

1. Download an image that you want to apply the image fill effect.

2. Create a new Flash ActionScript 3 document. Use about the same stage size as the image’s size
(= leave some padding in the edges).

3. Import the image to the library (File -> Import -> Import to Library).

4. Drag the image to the center of the stage.

5. Convert the image into a movie clip by hitting F8. Name it “My Image”.

6. Set the alpha to 20% for the movie clip (this is the image that is seen to be filled…)

7. Create a new layer. On the new layer, drag a “My Image” movie clip to the center of the stage. The dragged movie clip should now be completely overlapping the other instance of the movie clip.

8. Give the dragged movie clip an instance name of “maskedImage”.

9. On the second layer, draw a rectangle of height 1px. The width should be larger than your image’s
width.

10. Convert the rectangle into a movie clip named “Rectangle Mask”. Set the registration point to the
bottom-center.

11. Position the rectangle mask just under your image.

12. Give the rectangle mask an instance name of “myMask”.

Moving into ActionScript 3

13. Create a new layer for ActionScript and type in the following code.

//Speed of the mask
var speed:Number = 6;
 
//Acceleration of the mask
var acceleration:Number = -0.05;
 
//Set the alpha to zero for the masked image
maskedImage.alpha = 0;
 
//Assign the rectangle to be the image's mask
maskedImage.mask = myMask;
 
//We need ENTER_FRAME to animate the mask
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
 
//This function is called in each frame
function enterFrameHandler(e:Event):void {
 
        //Update the speed
        speed += acceleration;
 
        //Assign a new height for the mask
        myMask.height += speed;
 
        //Update the alpha according to the mask's height.
        //So when we reach the top, alpha will be 1.
        maskedImage.alpha = myMask.height / maskedImage.height;
 
        //If the mask is higher than the image
        //we can stop the animation
        if (myMask.height > maskedImage.height) {
                removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
}

Go ahead and test your movie, we are done! I hope you find this tutorial useful. If you have any
questions concerning the tutorial, post it in the forum.

Related tutorials:

1. Shooting Masks via ActionScript 3
2. Image Mask Animation
3. Image Mask Eraser
4. Magnifying Glass Effect
5. Random Mask Circles on Image