When animating with Flash, a mask can be used either to hide or to reveal elements, with the added complication of movement. As with static masks, an animated mask effect is created by integrating a Mask layer with one or more Masked layers. The Mask and the masked content can be moved at varied rates or in different directions the possibilities are endless.
Some obvious possibilities for masked animations include: spotlights, moonbeams, text that is progressively revealed, a view through a periscope (or binoculars), simulated x-ray vision, navigational devices, and many more. Aside from your imagination, the only limitations upon animated masks are that motion paths cannot be used to animate a mask, and that layers within buttons cannot be masked.
Animated mask text
Here’s how to create one of the simplest forms of animated mask:
This example of animated mask text is among the simplest uses for animated masks.
Position the red circle to the left, so that it’s next to the first M, almost touching the M.
Now you’ve probably succeeded with this example, but you might still be wondering how this animated mask text works. Well, here’s an explanation. The first layer that you created, MMF5 reveal, which is at the bottom of the layer stack, is a simple static text layer it just sits there showing text. The layer just above MMF5 reveal, which is named Spot, is a simple Motion Tween the red circle moves from the left of the Stage to the right. Nothing fancy about this, either.
The uppermost layer, MMF5 mask, is the Mask layer, and it’s responsible for the effect that you see. As a mask, this layer defines which portions of the Masked layer which is Spot will be seen. As Spot moves across the text beneath it, the text forms above Spot define where Spot will be seen: only within the shapes of letterforms. So, as Spot moves from left to right, it appears to be illuminating dimensional letterforms, and the “light” falls off the edges where there are no letters.
Masked moon phases
Here’s another way in which the phases of the moon might be animated with Flash: by using an animated mask. This is a little more complex because it involves the use of an inverse shape to obtain the desired effect. Consequently, it’s a lot less intuitive than the previous example. We strongly urge you to study the sample file on the CD-ROM until you understand why this works.
Figure below shows the setup for a masked animation of the phases of the moon. The background is black. Shown here are the Masked layer (A), the mask (B), the mask over the Masked layer but with the layers unlocked and masking consequently disabled (C), and finally, the composite effect with the mask enabled and at frame 30 (D).
Here’s the explanation. As shown below, the Mask layer begins in perfect alignment with the masked shape of the full moon which is the white circle shown in (A). Because the Mask layer is the inverse of the moon, it covers none of that shape and, consequently, the moon is not revealed. As the mask is moved to the right, a sliver of the mask covers the moon and causes it to be revealed. This continues until the moon is fully masked and, thus, fully revealed. Then the mask is reversed and the moon continues through the other half of its cycle.
The setup for a masked animation of the phases of the moon
Masked line progression
This is a relatively simple effect that’s simply repeated to create the effect of a line that appears progressively. Creating such an effect requires either a good bit of clarity before you set to work, or a willingness to tinker and tweak until all of the hiccups are smoothed out. When you decipher this file, and its variations, located in the masking animations folder of the ch11 folder on the CD-ROM, take care to notice how the entire effect was built with multiple instances derived from two symbols.
The animation shown below begins with a blank white screen. Starting at the upper-right corner, the first mask moves onscreen from right to left and progressively reveals the hatched line. The effect continues around the screen, until the complete line has been revealed.
This effect is accomplished by creating a stack of four pairs of mask and outline. The first pair is revealed above the others this mask is Mask 1, together with Outline 1. The only part of Outline 1 that will be revealed is this upper portion.
Next, beginning at frame 25, the left-side portion of Outline 2 is progressively revealed as Mask 2 slides down from the upper offscreen area. Following this, at frame 50, Mask 3 progressively reveals the bottom portion of Outline 3. Finally, the right side of Outline 4 is revealed. Each of these reveals is accomplished with a simple linear Motion Tween.
Progressively revealing a hatched line
Final notes about animated masks
If you find that these masked animations are a little hard to grasp, don’t panic. For most people, the logic of animated masks is slightly inverted. That’s because
Flash Related Interview Questions
|Adv Java Interview Questions||J2EE Interview Questions|
|Adobe Flex 3 Interview Questions||Dreamweaver Interview Questions|
|3D Animation Interview Questions||Adobe Flash CS6 Interview Questions|
|Dreamweaver CS3 Interview Questions||Adobe Flex Interview Questions|
|Adobe Flex Actionscript Interview Questions||Gif Animation Interview Questions|
|Adobe Fireworks Interview Questions|
Understanding The Flash Framework
Exploring The Interface: Panels, Settings, And More
Using Tools For Navigation And Viewing
Working With Selections And The Pen Tool
Working With The Drawing And Painting Tools
Working With Text
Exploring The Timeline
Checking Out The Library: Symbols And Instances
Drawing In Flash
Animating In Flash
Using Bitmaps And Other Media With Flash
Designing Interfaces And Interface Elements
Understanding Sound For Flash
Importing And Editing Sounds In Flash
Optimizing Flash Sound For Export
Understanding Actions And Event Handlers
Navigating Flash Timelines
Controlling Movie Clips
Sharing And Loading Assets
Planning Code Structures
Creating Subroutines And Manipulating Data
Understanding Movie Clips As Complex Objects
Sending Data In And Out Of Flash
Understanding Html And Text Field Functions In Flash
What Is Generator?
Revving Up Generator
Working With Third-party, Server-side Applications
Working With Raster Graphics
Working With Vector Graphics
Working With Audio Applications
Working With 3d Graphics
Working With Quicktime
Working With Realplayer
Creating Full-motion Video With Flash
Creating Cartoon Animation With Flash
Planning Flash Production With Flowcharting Software
Working With Authoring Applications
Publishing Flash Movies
Integrating Flash Content With Html
Using Players, Projectors, And Screensaver Utilities
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.