logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Using Masks for Special Effects in Flash CS3


Many of the great FlashR special effects that we see every day look very complicated but they are really created with a simple masking technique. What is a mask? Traditional artists use a masking medium to protect certain areas of a painting from the next layer of paint when it is applied. The areas covered by the masking medium do not have the new layer of paint applied and therefore, the first layer of the painting shows through these areas or openings.

Masking techniques in Flash work much the same way. When you apply a mask to an area of the stage, only the area covered by the mask will show through and the rest of the stage will not be seen. It will take on the document's background color. One example of this technique that is commonly seen is the spotlight effect where the entire stage is blank except for a small circle. As this circle moves over the stage, you can only see what is revealed by the circle. Let's try to create that effect in this tutorial.

  1. Start a new Flash CS3 project.

  2. You will need to start with a background layer in the Timeline. Rename Layer 1 to "Background". We will place an image on this layer so that we have something for the spotlight to illuminate. You might need to resize the stage to fit the dimensions of your image. Import your image to the Library (File, Import to Library) and then drag an instance of the image onto the stage.

  3. Add a new layer to the Timeline and name it "Mask". Draw a circle on the left side of the stage with the Oval tool (Fill set to White, Stroke set to Null).

  4. Right-click on the Mask layer in the Timeline and choose Mask from the menu. As you can see, when you do this, only the part of the stage that is covered by the circle is visible and the rest of the stage is now the white default background color.

    Now let's animate the spotlight with a simple Motion Tween. We already have the circle in the beginning position for the animation. Now we need to move the circle to an end position for the Tween. Let's make the animation 20 frames in length.

  5. Click on Frame 20 in the Timeline on the Mask layer and choose Insert Keyframe from the menu. Did the circle disappear? No, but the background layer did because we did not extend that layer to Frame 20. So, right-click on Frame 20 on the Background layer and choose Insert Frame from the menu. Now the background image is visible through the circle again.

  6. Click on Frame 20 on the Mask layer and then use the Selection tool to drag the circle to another position on the stage. Wait! You can't move the circle. Why? When you created the Mask layer in the previous step, Flash automatically locked the Mask layer. We need to unlock the layer. Click on the Lock/Unlock icon to unlock the layer. As you can see, when you unlock the layer the background image becomes visible and the circle is solid white. Click on the circle and drag it to a second location at the right side of the stage. This will be the end position for the Tween animation. Right-click on any frame between 1 and 20 and choose Create Motion Tween from the menu.

  7. Click Control, Test Movie to test your spotlight animation.




Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Twitter Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Facebook Add Using+Masks+for+Special+Effects+in+Flash+CS3 to MySpace Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Del.icio.us Digg Using+Masks+for+Special+Effects+in+Flash+CS3 Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Yahoo My Web Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Google Bookmarks Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Stumbleupon Add Using+Masks+for+Special+Effects+in+Flash+CS3 to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor