First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Frank Rue | Website: http://www.kanterinternational.com/

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!

» Level Intermediate

Added: 2006-03-19
Rating: 7 Votes: 27
» Author
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.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.