Homemade Tutorials

Gabriel here, with a new tutorial for you. Most of you have probably seen shining or sparkling text (maybe even both) on Flash websites and if you’re like me, probably wondered “hmm, how did they do that?”. If, however, you are a Flash or Photoshop guru, then you might want to skip this one, as it’s mostly beginner stuff for both. This tutorial will teach you how to create a shine and sparkle text effect, taking you from creating the text in Photoshop, to animating the effects in Flash.

This tutorial was created with Photoshop CS2 and Flash Professional 8, but I’m sure it can be done with newer versions of these programs as well, so don’t despair .

This is the effect we’ll be trying to achieve through this tutorial (click on the image below). If you’ve got a slower connection, wait a while until it loads the 200kb movie.

Step 1

Create a new Photoshop document of 1024×544 pixels. Fill it with #112538, then name the layer “Background”. Create a new layer (Ctrl+Shift+N) and fill it with #112538. Name this layer “Light”.

Create a new layer mask for the Light layer, then select the Gradient tool, Radial. With the layer mask selected, drag from the center of the canvas towards the top edge. Keep trying until you get a similar effect to the one below.

Step 2

Now let’s create a pattern which we will use. Create a new document, then grab the Pencil tool (B). Before you use it, create a new layer and hide the first layer under it to show just the transparency. Now “draw” one pixel using the Pencil tool anywhere on the canvas. Phew, exhausting, isn’t it? Grab the Rectangular Marquee tool (M) and create a selection of 1×3 pixels, like shown below. By the way, the document is zoomed in, that’s why the pixel is showing so large in the screenshot.

Go to the menu Edit › Define Pattern… and enter “Horizontal Line Pattern” in the input area (or whatever name you wish to give the pattern). Click OK. Now your pattern will show in the (oddly enough) Patterns list when you open the Layer Style window. But, we’ll see about that in a second.

Duplicate the Light layer and fill it with white (#ffffff). Make sure the layer is selected, not the mask before you fill it up. Rename this layer “Pattern”. Give it a Blending Mode: Overlay and set its Opacity to 20% (press 2 on the keyboard). Double-click on this layer inside the Layers window and select Pattern Overlay on the left. Set it up like below. Your pattern is now showing at the end of the list if you click on the little arrow next to the big pattern thumbnail. The result should look like below:

Step 3

Time to add some text. Press T to grab the Text tool and choose Adobe Garamond Pro if you have it, if not, you can use Comic Sans (just kidding) . I used Adobe Garamond Pro, Bold, 91px and placed it smack in the middle of the canvas. You should do that, too.

Step 4

Now let’s spice this text up a little. Bring up the Layer Style window for the text (double click the layer in the Layers window). Use the settings below:

Step 4

Got it? Cool. Time to export our stuff into Flash. Grab the Slice Tool (K) and draw a slice 570×96, or enough so that it includes the whole text, with shadows. Be careful not to cut off part of the shadow. Name the slice “shinytext”. Hide all other layers, then press Ctrl+Shift+Alt+S (I know) to export it. From the Preset box on the top right of the export window select PNG 24, so that we have full transparency in Flash, keeping our text lookin’ good. Press Save and go ahead and choose a folder where you want to save the image.

I usually choose the Desktop, because I’m lazy. Be aware that Photoshop will create an “images” subfolder in the one you chose and that’s where it will save the slice(s)..

Once you’ve saved the text, go back to your document and hide the text layer, but unhide the others. Press Ctrl+Shift+S to save the document, then browse to the folder where you saved the text image, choose JPG as the file format. Make sure it’s at its highest quality, name it “background” and save it.

Step 5

Now it’s time to open up… Flash! (*insert screams and creepy thriller violin music*). This is usually the part where spectators will scream “nooo, don’t go in there!”, but we’re gonna go ahead and do that anyway. Create a new Flash document 1024×544 pixels, make sure you set the Frame rate to 30fps for smoother animations.

Press Ctrl+R to bring up the Import window, then browse and select the background image and import it. Make sure that it’s set at 0px, both on the X and the Y axes. Name the layer “background” and lock it (see below).

Step 6

Create a new layer, then press Ctrl+R again and import the text image this time. Align it to the center of the document, by using the respective buttons inside the Align palette. Name this layer “text” and lock it.

Step 7

Create a new layer, name it “highlight”. Grab the Text tool and type your text anywhere on the canvas. It has to be the same text as the one you have imported from Photoshop, same font and size and of white color. We have to align it on top of the “text” layer (see image below).

Step 8

Select the contents of our “highlight” layer (the text) and press F8 to convert it to a symbol. A Flash symbol can be Graphic (static graphics or text), Movie Clip (animated graphics) or Button (behaves like a button, has only four frames in its “timeline” corresponding to its four states).

This time we’re choosing Movie Clip, because we want to create an animation that will play over and over (or only once, if we so choose). Give this Movieclip the name “shine”. I’ll be referring to the above symbol creating process again later in this tutorial, so keep it in mind.

Now, in Flash, symbols behave kind of like “groups” of objects (or layers) and can be “opened” in order to be edited, by double-clicking on them on the canvas or inside the Library.

Step 9

Go ahead and open the “shine” movieclip (unless it’s already opened from when you created it) and you’ll notice that inside there’s our Flash text. Click on it and press F8 again to convert this text to a symbol, this time choosing Graphic, and name it “shine_text”. Rename the layer it’s on “shine text”.

Step 10

Create a new layer and name it “highlight”. Grab the Rectangle Tool and draw a rectangle with an approximate shape of the one below:

With the Selection tool (V), click on the rectangle to select it, press Ctrl+C to copy it to the clipboard, then right-click anywhere on the canvas and select Paste in place from the menu. This pastes the rectangle in the exact same position as the one you just copied, which is handy when trying to align objects either horizontally or vertically.

Holding Shift and with the pasted rectangle selected, press the right arrow key to nudge it to the right, about 10px away from the old one (see image). Select the Free Transform tool (Q) and click on the second rectangle (the copy) and shrink it horizontally to about a third of its original size. You should have something like the image below.

Step 11

Select both rectangles, then in the Color Mixer palette, set Type as Linear. This gives your objects a linear gradient fill. Click on each of the two little color squares at the bottom and assign them both the color white. Click on the one on the right and select an Alpha value of about 40% for it. This makes the gradient go from white, alpha 100% (alpha meaning opacity) to white, alpha 40%. The process is illustrated in the image below.

Step 12

Select the rectangles again and press F8 to convert them into a Graphic symbol with the name “highlight”. Select this symbol you’ve just created and rotate it about 30 degrees clockwise. Make sure the “highlight” layer is above the “shine text” layer in the timeline, then right-click on the “highlight” layer and select “Mask” from the menu. This converts the respective layer into a mask for the layer right under it. A mask in Flash works just like it does in Photoshop (meaning the layer below will show only through the mask’s pixels), except that in Flash it can be animated! Woohoo!

Step 13

What we’re trying to do here is create the “moving highlight” or “shining” part of our animation, so we’re trying to move the mask from the left of the text to its right. Remember, the mask layer’s actual contents never show. They are simply a sort of filter for the layer they’re masking, if that makes sense, so the rectangles we’ve been messing with won’t actually show up in the animation.

Now let’s unlock the “shine text” and its mask layer. Right-click on the keyframe (the little rectangle with a dot inside) in the timeline and select “Create Motion Tween” from the menu. What this does is turn on the “animation switch”, so to speak, starting at that frame for that specific layer.

The way this works is it animates any changes in position, opacity etc. of that layer between two or more keyframes. Let’s go ahead and click on the frame 20 in the timeline and press F6 to create a keyframe. The layer contents at this keyframe automatically inherits its properties at the previous keyframe.

But, since we’re trying to create an animation, we need to move the layer contents at the second frame (the terminal frame, since this is where the animation ends). So let’s move the mask all the way to the right of the text, completely away from it, not overlapping at all. Now click on the 20th frame of the “shine text” layer and press F5 to insert frames from 1 to 20 for that layer.

Step 14

Now if we go back to frame 1 of our animation here and we press Enter we should see the mask layer moving from point A (the left of the text) to point B (the right of the text). What “Motion tween” did when we added it earlier was fill in all the missing animation frames in between point A and point B. Now let’s right-click on the Mask layer and select “Show masking”. This will hide the mask layer and now when we play our animation from the beginning we’ll see the actual “shine” effect that we’ve done all this for. Unlock the layers again and go to frame 100 in our timeline and press F5 for both “highlight” and “shine text” to add some more frames.

The effect of this is a small delay after each play of the shine effect, which is certainly easy on the eyes. Since we didn’t set a stop(); event at the any point in our timeline, and since we’re inside a Movie clip, our movie will loop ad infinitum. Go ahead and press Ctrl+Enter to test your animation. Or preview here the way it’s supposed to look.

Step 15

Next, we’re going to create our “spark”. Create a new layer and name it “spark”. Create a square of about 80×80px. Select the Free Transform tool, then holding Shift, rotate it 45 degrees (one step) either way. You should now have what looks like a rhombus. Now click outside the shape, then click on it again (with the Free Transform tool selected). Scale our shape to about 5-6 pixels wide, like the image, but really this is up to how thick you want the spark’s rays to be.

Once you’re done, click again outside the shape, then on it again. Press Ctrl+C, then right-click outside and select Paste in place. Rotate this shape to 90 degrees. You should now have what looks like a plus sign (see image below).

Same process as above, click outside the shape, then on it, Ctrl+C, then paste in place. Rotate this to 45 degrees and shrink it to about 40-50% of its size. These would be the spark’s “secondary” rays.

We need a little more work on our spark shape. Select it, then go to the Color Mixer palette and select Radial as the Type of fill. Repeat the same steps as you did with the linear fill (the two squares, white color, the one on the right make it Alpha 30-40%). You should have what looks like the bottom part of the above image.

Step 16

Select the spark shape and press F8 to convert it to a Movie clip symbol. Name this movie clip “spark”. Open it up (double click it) and inside there should be our spark shape again. Select it and press F8 to convert it to a Graphic symbol; name it “spark_graphic”.

Step 17

Let’s animate our spark. Go back to editing our “spark” movie clip. You should have our “spark_graphic” in it on its only layer. Right-click on the keyframe inside the timeline and select “Create Motion Tween”. I think you know where this is going

Click on our spark graphic and in the Properties window (should be docked at the bottom of your workspace) select color: Alpha and give it a value of 0%. Click on frame 20 on our timeline and press F6 to create a new keyframe there. Select our spark graphic at frame 20 and rotate it 180 degrees from the Transform window. Now go to frame 10 in our timeline and create a keyframe there as well. Select our spark graphic at keyframe 10 and give it Alpha of 100%, rotation of 90 degrees and scale it to 180%. Go to frame 100 and press F5 to add frames and a matching delay to our shine animation.

Step 18

Go back to editing the “shine” movie clip and duplicate the “spark” layer two times. Name the duplicates “spark2″ and “spark3″. Move the keyframe of the “spark” layer to frame 10. Move spark2’s to frame 5. Move spark3’s to frame 15. See image below for illustration and placement of the spark movie clips on the canvas. Once all this is done, make sure that all of the layers’ frames go all the way to 100, in order for the effects to synchronize.

Press Ctrl+Enter to test and export your movie and voilá! A sparkling and shining text.

That’s all, folks! Hope you guys enjoyed it. Be sure to please Digg it and leave a comment if you did (or not) or to show me your version! Thank you for reading.

Download Shining and Sparkling Text with Photoshop and Flash PSD and FLA sources (869 KB)

Post comment