Final Result

First, a quick peek at what we're aiming for:

Introduction

This is a beginner level tutorial during which I'll explain in detail how to create this logo and its animation. Along the way I'll mention a few words about gradient masking, bitmaps and shapes within flash, and the ActionScript it requires. Initially we'll briefly deal with some Photoshop techniques, but most image editing software should suffice.

Let's get started!

Step 1: Initial Design

Make sure you start off by downloading the source files. Open Logo.psd in the zip file.

You can also download and install the font used in this example, Lubalin Graph Bold. This is optional, as when you open the file, Photoshop will give you a warning that the font is missing, but for this exercise you can still follow along perfectly without it.

Opening up Logo.psd you should see this:

As you can see, we have a gray background layer and a text layer named "Text". If you have the Lubalin font installed you'll be able to change the text to something more personal, or you could change the font to your liking. The gray background layer is very superficial and I only chose it to help with illustrating the end result.

Step 2: If You Don't Have Photoshop

(You can skip this step if you use Photoshop.)

Here I'll briefly explain the layer styles used in Photoshop, so that those of you who want to copy the logo as verbatim as possible have a chance to do so in your own image editing software. It's not important that your logo looks alike, however.

• Drop shadow, distance 6 px, spread 23%, size 10 px.
• Inner shadow, distace 5 px, size 5 px.
• Outer glow, yellowish, size 6 px.
• Inner upwards bevel, size 32 px, 21% depth.
• Contour, straight, 50% range.
• Texture, simply a 4x4 pixel diagonal line pattern.
• Color overlay, #A84D4A on the text.
• Stroke, size 2 px, color #E5C477.

Hopefully this will give you an idea of how to create something similar. Again, it's not important for the sake of understanding the technique explained in this tutorial.

Step 3: Creating the Effect Outline

Before we jump into Flash we might as well do the one last thing needed in Photoshop; that is to create an outline for the effect we're about to make. Don't worry if it doesn't make sense yet, you'll see the whole picture very soon!

• Turn off the layer styles on your text layer for now. Make sure this layer is selected.
• Ctrl-click the text layer to select it.
• Go to Select > Inverse, or hit Shift+Ctrl+I
• Go to Select >Modify > Expand, choose 2 pixels and hit OK.
• Hit Ctrl-C to copy your selection.
• Create a new layer named "Outline" and select it.
• Hit Ctrl-V to paste into it.

You should end up with this:

Select the Outline layer and hit "V" to select the move tool. Using your keyboard, align the outline so that it sits perfectly on top of the original text, like this:

Make sure the outline is fully white.

Step 4: Exporting the Images for Flash

Hide the Outline layer and the Background layer. Go to "Save for web and devices" and save as a PNG file. Name it logo.png. It should look like this:

Next, hide the Text layer and bring back the Outline layer. Save as "outline.png". It should look like this:

Make sure you save as high quality, transparancy enabled PNG!

Step 5: Preparations in Flash

Start up Flash and create a new AS3 file. Since the logo we're creating is 580 by 170 pixels in Photoshop, we'll use the same dimensions for our Flash file. Leave the FPS and background color as is.

Create and name these layers:

• Shine
• Mask
• Outline
• Logo
• Background
• Actions

Put them in the order as in the list, so that "Actions" is at the lowest Z-level and "Shine" at the highest. Now select the Background layer and create a rectangle covering the stage. Make its color a gradient going from dark gray (#222222) to light gray (#AAAAAA). Use the Gradient Transform Tool (hotkey F) to align it like this:

Lock the Background layer as we'll not be changing it any more.

Step 6: Importing the Logo into Flash

Select the Logo layer. Go to File > Import > Import to Stage, or hit Ctrl+R. Select the logo.png you previously exported from Photoshop. The image should line up perfectly in your Flash file. You can now lock the Logo layer as well.

Select the Outline layer and once again hit Ctrl+R, this time importing the outline.png. It too, should line up just right. Since the outline is currently selected, now would be a good time to hit F8 and turn it into a MovieClip. Name the MovieClip "Outline", then go ahead and insert an instance name of "outline" inside the properties panel. You should see something similar to this:

Now, head over to the Library panel and check the properties of your logo.png. Personally I'd set this to lossless quality, since this logo is something that is likely to be used as a header or something similar and I feel that in those cases you can afford to not skimp on the quality. It's your call, but it will look the best at lossless quality for sure!

Step 7: A Minor Adjustment

Have your outline instance selected and add a blur filter. Set it to 2 pixels in both X and Y blur properties, and choose high quality. This will make the end result much better looking.

You can go ahead and lock this layer too. Also, now would be a great time to save your Flash file!

Step 8: Creating the Mask

Select the Mask layer and then the rectangle tool. Deselect the stroke color if you have one currently applied.

Draw a rectangle, make it close to 60 pixels wide and 320 pixels tall. Then, with your shape selected, go into the colors panel and give it a linear gradient with three points evenly spread out (by points I mean the small handles that define the colors of a gradient). Choose any color for the points, but make sure you have the middle one at 100% alpha and the outer ones at 0% alpha. It should look like this:

Hit F8 with the shape selected and make it into a MovieClip called "Mask". Name the instance of the mask "theMask". Lastly, rotate the mask 45 degrees clock-wise. An easy way to do this is to first hit Q for the transform tool, then hold shift while rotating so it snaps to 45° stops.

Step 9: Animating the Mask

Go to frame 70 of the Mask layer in our main timeline and hit F5 to insert frames to this point. Right-click any previous frame and create a motion tween. Hold shift and then drag the mask to the right side of our stage. Also, create frames to frame number 70 for the layers Backround, Logo and Outline. The mask should go from here:

To here:

Step 10: Understanding Alpha Gradients

As you've probably figured out by now, we'll use the masks alpha gradient shape to gradually fade the outline in and out. Usually when you have a mask in Flash, you have it on one layer and turn that into a mask layer. The mask layer then has "child" layers whose content will be masked. Now, what happens if we do this with our current setup? This is the result:

As you can see, it's far from a smooth transition. There's no gradient behaviour whatsoever.

Why is this, then?

For alpha gradients to work, Flash must render your objects as Bitmaps, not shapes. Our current mask is definitely a shape (albeit inside a MovieClip) and is rendered as such. That can be fixed in two ways:

• The Flash IDE way:

  In Flash CS4, have your mask selected. Under the Display section in the properties panel, check the "Cache as bitmap" checkbox.
  In Flash CS3, you can find it right under the blend modes labeled as "Use runtime bitmap caching".

• The ActionScript way:

  My prefered approach is by using ActionScript. Mainly because as a developer (more than a designer), I want control over all aspects via code so I can apply any effect to any dynamically created object. Any object subclassing DisplayObject has a cacheAsBitmap boolean property. So in our example with the instance named "theMask" it is simply:

theMask.cacheAsBitmap = true;

Go ahead and create a keyframe in the Actions layer and insert that line of code.

Step 11: "But it's Still Not Working!"

For some mysterious reason, Flash cannot achieve the desired effect we're going for without ActionScript. Masked layers in the Flash timeline simply don't allow alpha gradient masking!

The solution is luckily very simple:

outline.mask = theMask;

As you can literally read from the code, this sets our instance "theMask" as the mask for our outline instance. Go ahead and put it in the actions layer.

Please take the following into consideration:

There is a bug within Flash regarding mask instances and the timeline. I've noticed the bug in the following hypothetical scenario:

Our mask instance spans from frame 1 to 70. Our other asset (the logo) spans up to frame 90. When Flash plays back between frame 71 and 90, the mask instance is not on the stage. If you're viewing the logo in a Firefox tab for example, then switch to another tab, then back again to the logo. You'll see the bug. You'll see it, if the playback is between frame 71 and 90, that is. The bug will show itself as the outline popping out and being unmasked. When the playback returns to frame one it returns to normal.

The conclusion we can draw from this is that if you mask something by ActionScript, make sure you keep the mask on the stage at all times to avoid the object being masked showing itself.

Step 12: Finishing Touches

Go ahead and test the movie now. It should look like this:

The effect is slightly too strong, so you can reduce the alpha of the outline instance to 75% and it will look a bit more subtle.

As a last finishing touch, we'll add a little sparkling shine effect to the logo.

• Look in the source zip file and you'll find a shine.png.
• Go ahead and import this to the stage onto the Shine layer on frame 59.
• Place it on the upper right corner of the "g" character of our logo.
• Convert it to a symbol so we can tween it.
• Go to frame 69 of the same layer and hit F5 to insert a frame.
• Right-click the relevant section and choose Create Motion Tween.
• Zoom in around the area you're working with:

• Go to frame 59 and transform the image to a barely visible size.
• Go to frame 64 and transform it to its original size (or close to).
• Go to frame 69 and transform it to a barely visible size.
• Add a yellowish tint on the shine MovieClip in the properties panel.
• Set the alpha to about 70%.
• Add a yellowish glow filter as well.

Step 13: Summary

Your logo should now be 99% complete. You will still probably want to adjust when the animation restarts by inserting more frames after the mask has animated. Just remember what I mentioned earlier; make sure you keep an instance of the mask on the stage all the way to the end of the animation loop to avoid the mask display bug!

Here at the end of this tutorial you will hopefully realize how easily you can make changes to the logo, or apply the effect to any text logo with a satisfying result. Try experimenting by changing the thickness of the outline (Remember? We made it 2 pixels thick). Changing the text, font and colors can easily be done as well. Change the colors in the color overlay and stroke, or even better; experiment with your own layer styles!

The heart of the animation lies in the alpha gradient outline that lies within the typeface, so when you experiment on your own you should try to have some sort of stroke or outer border to keep this effect. Of course, anything goes, whatever is pretty to you is good!

I hope you liked this tutorial, thanks for reading!