Explore Countries Mask Tutorial

Author: Brian Judy
Date: October 27, 2006
Level: Beginner

Summary

Explore Countries uses layers to create the globe animation and add subtle effects.  The rotating globe effect in Explore Countries takes advantage of a mask layer capability in Flash.  Masking is used in many areas of digital graphics and animation and is an essential technique for the serious designer or artist.

Experience Needed
Software
  • Flash
Learning Topics
Files — Country_explorer.zip (776 KB)
  • country_explorer.fla
License — "Explore Countries" (c) 2007, World Wide Workshop Foundation

This software is licensed to the public under the CC-GNU GPL.

Description
A Review of Flash Layers

Similiar to Photoshop, Fireworks and other graphics program Flash uses layers to help organize a movie and determine what appears when graphic elements overlap.

Tips when using Layers

  1. Graphics on layers higher vertically on the timeline will appear on top.
  2. Animations should be organized on separate layers.
  3. A good practice is put any ActionScript on a separate layer. Many Flash authors use the top layer for ActionScript.
  4. Other Flash features that use layers are shape tweens. masks and motion paths.
An Example of a Mask

TimelineMasks allow a portion of an image, or images, to be hidden using a second graphic as the mask.  In Flash specific layers are designated as masks and all graphics on a mask layer will be part of the mask.  Graphic content on  layers dependent on the mask layer will only show through where there is a graphic on the mask layer.

When you open country_explorer.fla you’ll see the mask layer and the map layer which is dependent on it.  They should both be locked(pad lock graphic) to show what the final output will look like. 

To see what the mask layer looks like by itself:

  1. Click the padlock next to the 'mask' layer name. You should see a red circle with a dark ring around the outside of the circle and a long map. To see the mask in action make sure the mask layer and the layers under that are dependent on the mask all have the lock on. To edit a layer unlock it.
  2. The ring is from the shadow layer just above the mask layer. Click the dot under the eye in the 'shadow' layer to hide it. It should turn into a red X and the dark ring should disappear.
  3. The map moves from right to left when the movie is playing, but the mask shape only allows the part of the map under the circle to appear.
  4. Hide all the other layers except 'mask'. Now you can see the mask layer more clearly.
  5. Unhide all the layers.
  6. Now we're going to modify the mask. Make sure the 'mask' layer is unlocked. Click on the mask layer name it to make it current(it should turn color).
  7. Use the paint brush to paint outside the red circle. You can also use the erase tool to remove some of the mask.
  8. Now lock the mask layer and notice where the map shows through(remember, the map layer needs to be locked also).
  9. Publish the file and see how your changes effect the movie.

Other things to try with masks:

  • Animate the mask layer and see how it changes.
  • Add additional layers under the mask layer to make more sophisticated animations.