Flash
  Home arrow Flash arrow Page 7 - Animations and Interaction
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
FLASH

Animations and Interaction
By: Bill Sanders
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 3 stars3 stars3 stars3 stars3 stars / 14
    2004-07-07

    Table of Contents:
  • Animations and Interaction
  • Vector Graphics Versus Bitmap Graphics
  • Working the Timeline
  • Using Shape Hints to Morph Fonts
  • Tweening Imported Vector Graphics
  • Making and Using Guide Layers
  • Masking Layers
  • Echoing Layers
  • Timeline Effects
  • Choosing Positions for a Figure
  • Animating the Spearman and the Buffalo

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Animations and Interaction - Masking Layers


    (Page 7 of 11 )

    Like motion guides, the masking process requires two linked layers. The top layer is the mask, and any indented layers directly below the Mask layer are the masked layers. In Flash, the mask reveals a "mask hole" to the masked layers. Using a single object on the mask layer, the shape of the object shows a portion of the masked layer in the form of the mask shape. For example, if the object on the mask layer is in the shape of a star, all that is viewed on the layer below is the star-shaped portion of the masked layer.

    To create a mask layer, right-click the layer above the layer you plan to mask to open a context menu. Select the Mask option in the context menu, and the selected layer and the layer below are transformed into a mask layer and masked layer, respectively. Place a single object on the mask layer and then lock both layers. With locked layers, the mask effect is invoked.

    Project: Mask Parts of a Movie

    The best way to see how masks work is with an example. The following document is developed over several subsections so that all nuances of masking can be examined. Here are the steps to follow:

    1. Open a new document and create two layers with the top one named Mask and the bottom one named Background.

    2. In the Background layer, draw a scene to mask. In the example, the scene is composed of a river, a tree, and the surrounding earth.

    3. Place the mouse pointer on the Mask layer and right-click to open the context menu (Control-click on the Mac). Select Mask, as shown in Figure 4.22.

    4. Once the mask layer is complete, the appearance of both the mask and masked layers changes, as shown in Figure 4.23.

    5. Lock the Background layer, and in the Mask layer draw a circle and convert it to a Graphic symbol. Place the object directly over some discernable object on the Stage, such as the top of the tree, as shown in Figure 4.24.

    6. Lock both layers, and everything disappears except for the area on the Background layer covered by the mask, as shown in Figure 4.25. In the SWF file, this is the kind of effect you can expect.

    7. Finally, you can animate the mask so that it moves around the Stage revealing different parts of the masked layer. The Graphic instance is animated by using a motion tween. Figure 4.26 shows the mask over the background halfway through a motion tween.

    sanders

    Figure 4.22 - Creating a mask layer.

    sanders

    Figure 4.23 - The mask and masked layers.

    sanders

    Figure 4.24 - The object on the Mask layer with layers unlocked.

    sanders

    Figure 4.25 - View of mask effect.

    sanders

    Figure 4.26 - Animated mask.

    If you test the movie, the results are not very interesting. All you see is the different parts of the background as the mask moves across the Stage. More interesting effects are possible using a revealed text message or some other background or mask shape. However, even with the current document, we can make it more interesting, as explored in the next subsection.

    This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today.

    Buy this book now.

    More Flash Articles
    More By Bill Sanders


     

    FLASH ARTICLES

    - Organizing Frames and Layers
    - Using XML and ActionScript with Flex Applica...
    - Interfaces and Events with ActionScript and ...
    - Manipulating Data with ActionScript in Flex ...
    - ActionScript Syntax for Flex Applications
    - ActionScript in Flex Applications
    - A Closer Look at Apollo`s File System API
    - Using the File System API
    - ActionScript 101
    - Flash Buttons
    - Advanced Flash Animation
    - Creating Your First Animated Movie with Flas...
    - Flash: Building Blocks
    - Building Preloaders
    - Fun Things to Do with Movie Clips in Flash MX







    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway