Featured FLA
» Author: Sphere
» Title: Reacting Waves
» Description: Small red waves on a plane react when the mouse pointer nears them.
» More by Sphere
BBM.net is designed to save you time and deliver the highest quality royalty-free music for your multimedia projects. Features include: over 450 Music Loop Packages from some of the best composers in the business, our music search engine to speed your selection process, alternate music versions & bonus sounds to use for rollovers or transitions, free technical support and free consulting.
Create a "Burn-In" Effect with Filters and Masking
By Frank Rue (frank@therues.com)
This tutorial will use the masking feature in Flash combined with a new filter available in Flash 8
that creates a glow around an object. When completed, you'll have a graphic of your choice that
"burns in" like so (requires Flash 8 to work!)...
Step 1: Set the Stage
I know you'll never guess the first step, so I'll just tell you. You'll need to create a New Document.
Specify (as shown) the following in Document Properties (CTRL-J): 400px wide, 300px tall, a solid black
(#000000) background, and 18 frames per second (fps).
Step 2: Choose a Logo
Choosing a logo has some level of consideration. The object you import will look best with this effect if it
is available as "vector art" (EPS, AI, etc.), rather than a "bitmap" (JPEG, GIF, TIFF,
etc.). Optionally, a PNG (which does happen to be a bitmap) that is saved as 24-bit with transparency will
also work well. This is not to say that other file formats will not work, but the results may be less
"snazzy". In my case, I'll pull in the company logo for Kanter International from an EPS file.
Once the artwork is on the stage, I'd recommend immediately selecting the Free Transform Tool (shortcut
of "Q") and resizing the object to a reasonable size on the stage (see the example). As any
graphic designer will preach, you should maintain your aspect ratio (most easily accomplished by holding
SHIFT as you drag the corner nub of the Free Transform Tool to resize the artwork).
If you're happy with the size of the artwork, it's about time to make it into a Symbol. Do so by
activating the Modify menu and selecting Convert to Symbol (or press F8). I'm going to use my own naming
convention so we can all understand this tutorial, but you can substitute whatever you'd like. Name it
gLogo. Convert this artwork to a "Graphic" type symbol.
Once the artwork is a graphic symbol, go to the Modify menu and select Convert to Symbol again, this
time selecting "Movie" as the type. Name this mBurnInLogo—this will be the movie that
masks-in the logo and furthermore contains the glow movie.
Step 3: Edit the Mask-In
Edit the movie called mBurnInLogo by double-clicking it on the stage. Create two more layers,
naming the layers as such: AS, MASK, and ACTUAL LOGO. The layer ACTUAL LOGO should contain the symbol
we recently named gLogo.
Select gLogo on the stage. In the Properties window, drop down the Color menu and select
Brightness. Set the value to the right to 100%.
On the same layer, right-click frame 20 and select Insert Key Frame. On the same layer again,
right-click frame 30 and select Insert Key Frame.
Select the logo that appears on the stage in frame 30. In the Properties window, drop down the Color
menu and select None, which should revert the logo to its normal colors.
On the MASK layer, right-click frame 20 and select Insert Key Frame.
Using the Rectangle Tool (shortcut "R"), draw a rectangle that will encompass the entire logo
(be generous–this will be a mask, so you don't want it to be too small or it will cut off some of
your logo when you don't want it to!). I remove the stroke from mask artwork–it keeps things much
easier to edit later.
Using the Subselection Tool (shortcut "A"), click on the upper-right corner of the
newly-drawn rectangle. Move this point to the right to create a nice slant on the boundaries of the
original rectangle (actually making it a polygon). I use the large "nudge" feature
(hold SHIFT and press the RIGHT ARROW) to maintain the nice straight line along the top of the polygon.
Now we can make this polygon into a symbol. Use the Selection Tool (shortcut "V") and click
the polygon to select it. Press F8, select Graphic type, and name it gMask.
We'll need to copy this artwork to the first frame. Click and hold the key frame on this layer at frame
20. Press and hold the ALT key (for copying). Now drag your mouse to frame 1 of the same layer, and
release the mouse button and then the ALT key. A duplicate of frame 20 should now exist in frame 1,
covering your logo.
Right-click on frame 1 of the MASK layer and select Create Motion Tween. Adjust the easing in the
Properties window to 100 out. This will cause the mask to slow down as it approaches frame 20.
Move the polygon in frame 1, constraining the vertical axis by holding SHIFT, until the right edge lines
up with the left edge of the underlying logo (a dotted line should appear indicating that position). The
mask should now reside directly to the left of the logo.
Right-click frame 30 of the MASK layer and select Insert Frame. This will fill the mask layer up where to
where the logo finishes tweening.
Right-click the name "MASK" in the layers and select Mask. This will lock both the ACTUAL and
MASK layers and create a mask.
In the AS layer, right-click frame 30 and select Insert Blank Key Frame. Use the Actions window (F9) to
add "stop();" to the frame's actions.
If you play this portion of your work, you should see the logo appear, in white, as the mask reveals it
with a slant. Once fully-appeared, the logo will fade to its original colors.
Step 4: Create the Glow Movie Clip
The trick in making this look real is the duplication of the mask we've already created—if we use a
different masking, the mask on the glow and the mask on the logo will not be synchronized and the effect
will be lost (or, at least, it will seem much less "snazzy").
Create a new layer between AS and MASK and call it LOGOGLOW.
Click and hold the first frame of the ACTUAL LOGO layer. Press and hold the ALT key and drag the copy
up to the LOGOGLOW layer. This should create a white version of your logo in the first frame of the
LOGOGLOW layer.
Convert this new copy of your logo to a symbol by pressing F8. Make it a Movie type symbol and call
it mLogoGlow.
Click the first frame of the MASK layer and drag your mouse to highlight up to frame 20 of the same
layer. Right-click on frame 20 and select Copy Frames. We'll need a duplicate of this mask shortly.
Double-click on the white logo on your stage to edit mLogoGlow.
Name the only layer in this Movie Clip "actual logo".
Create a new layer (no need to name it!). In the first frame of this new layer, right-click and select
Paste Frames. This should create a MASK layer with the MASK property turned on and the same tweening
you already created in the previous Movie Clip up to frame 20.
Right-click frame 20 of the ACTUAL LOGO layer and select Insert Frame. This should fill the layer up to
frame 20 to match the MASK layer.
Create another new layer and call it AS.
Right-click frame 20 of the AS layer and select Insert Blank Key Frame. Use the Actions window to add
"stop();" to the frame's actions.
Grab the ACTUAL LOGO layer in the left portion of the timeline (not a frame but the name of layer) and
"tuck" it under the MASK layer. You'll see that it a bold line will appear with a thicker
portion of line indented under the MASK layer to signify the "tuck".
Step 5: Modify the New Mask
We've duplicated our mask and the white version of our logo. But in order for the glow to work really well
when we finally apply it, we'll only want a "sliver" of that duplicated mask to glow. We can
accomplish this by duplicating the mask in the library and adjusting it, then swapping our new sliver mask
for original mask in the mLogoGlow Movie Clip.
In your Library (CTRL-L), right-click on the gMask symbol and select Duplicate. Name this new
symbol (still a graphic type) gSliverMask.
Double-click on gSliverMask in the Library to edit it.
Though there are several ways to do this, the way I'll show you prevents any guessing or math, it just
requires sleight of hand ?. Using the Selection Tool, click the polygon to select it. Copy the polygon
(CTRL-C) and paste it in place (CTRL-SHIFT-V). Immediately move it all the way to the left so it's
alongside (but not touching) its sister, holding SHIFT to maintain the vertical position (the tops of
the polygons should always be aligned).
Change the color of the new polygon to anything besides the original polygon's color (now Flash will not
merge the two shapes when we put them back together—it will subtract the moved shape from the
static shape).
Move the new polygon back over top of the original, holding the SHIFT key again, so that only a
"sliver" of the original polygon shows through.
De-select the new polygon by clicking on an empty part of the stage.
Re-select the new polygon and press DELETE. This should leave only a sliver of the original polygon.
Double-click the mLogoGlow movie clip in the Library (CTRL-L) to edit it.
Click the first frame of the MASK layer and then click the original symbol on the stage of the
original mask.
In the Properties window, click the Swap button. Double-click the gSliverMask to replace the
original mask with the one we just built.
Repeat the above step for the symbol in frame 20 of the MASK layer so that both frames now contain the
gSliverMask symbol.
Step 6: Apply the Glow Filter
Double-click on mBurnInLogo in the Library (CTRL-L) to edit it.
On the LOGOGLOW layer, click the first frame, and then click the cross-hairs that appear on the
stage (this takes a little precision—make sure you see "Instance of: mLogoGlow" in the
Properties window to insure that you've selected it successfully).
Click the Filters tab in the Properties window.
Click the plus (+) sign and select Glow.
Adjust your properties to match mine: Blur X and Blur Y set to 5, Strength set to 500%, Quality
set to High, and Color set to White (#FFFFFF).
Now you can Publish (Shift-F12) or Test Movie (CTRL-ENTER) to see the results!
Frank Rue is the Director of Technology for Kanter International, a business and brand building firm in Philadelphia, PA. He specializes in the use of new and relevant technologies to improve the performance and success of business objectives, including the enhancement of the brand experience through interactive mediums.
Tutorials Home
Tutorials » Special_Effects
Burn-In Effect in Flash 8
