Barry Webber. Freelance flash html and css developer from Southampton, Hampshire. Specialising in HTML, CSS, Flash, Animation and Design.

flame effect

This tutorial will show you how to make the flaming text effect shown here on the right. It’s quite versatile and can be used over any sort of shape/image to create all sorts of different effects.

Ok, well let’s get going…

document settings

1. Setting Flash up
First thing we need to do is set up our document. To match the original I’ve used 300px width and 150px height. I’ve also set the background to black. Make sure to change your fill and ink colours to white before you start.

go crazy

2. Time for some drawing
You can be as random as you like here, but try and keep it in a circlular area (we’re going to rotate it later). There’s no need to copy mine exactly, just a rough estimation should work just as well. Once you’re happy, select the shape and hit F8 to create a new symbol. Make sure it’s set to MovieClip, the registration point is in the middle and call it “theShape”.

rotating

3. Rotation animation
With your shape roughly in the middle of your stage, select it and hit F8 again. This time call it “spinner” and also give it the instance name of “spinner”. Now double click the shape to go back inside the spinner MovieClip. Place a keyframe on frame 300, then go back to frame 1, right click on the frame and choose classic tweening. In the frame properties panel, under tweening set the Rotate property to CW (clock wise) and make sure it’s set to x1. Hit return to test. If it’s working fine and you’re happy then select the 1st frame again, right click and choose “select all frames”, once selected, right click again and choose “copy frames”. Now add a new Layer, right click on the first frame and paste those frames into it. You will have to go to the end of timeline and delete the extra 300 frames that Flash decides to put on. When you’ve done that go back to the 1st frame and select it. In the properties just change the rotation property to CCW (counter clock wise). The last thing to do (just to add a bit of randomness) is to select the shape on frame 1 and 300 and do a modify/transform/flip vertical on it. Test again and if all looks cool then go back to scene 1 with your spinner clip in it.

using the gradient transform tool

4. Adding some masking
Select the spinner clip and hit F8 to make it a movieClip and call it spinMask. Go back into spinMask and create a new layer above your spinner clip. Now we’re going to create a gradient mask. On the new layer draw a big ellipse over the whole stage. You can always adjust this later. Fill it with a radial gradient of white to black (with white in the centre), and make the black transparent using the color panel . Use the fill transform tool to make it look like the image on the right. When you’re happy, select it, hit F8 to create a movieClip and call it gradMask and also give it the instance name of gradMask. Normal masking won’t work with gradient masks so we have to use a bit of code to make the magic happen. Create a new layer above your new gradient mask (gradMask) and label it “actions”. Insert the following code into this 1st frame.

gradMask.cacheAsBitmap=true;
spinner.cacheAsBitmap=true;
gradMask.setMask(spinner);

use these settings

5. Time for some Text
Go back to the main scene. You should have your spinMask on frame 1. Make sure it has the same instance name. Create a new layer and make some text. It can be whatever you like but use a light colour. I’m using white. I also find the narrower fonts tend to look better. With the text still selected add a glow filter using the settings shown on the right. Blur:5, Strength:100%, Color: #FF0000 and Inner glow ticked. Now hit f8 to turn it into a movieClip and call it flameText (instance name as well).

Make sure you’re on scene 1 still and select the new flameText movieClip. We’re going to add a few more glow effects to it.
First off an outerglow using Blur: 14px, Strength: 460%, Quality: High and Color: #FF6600. Finally add an inner glow using Blur: 14px, Strength: 106%, Color: #CC0000 and Inner glow ticked. See image for screenshot.

final text filters

You can of course experiment with different colours and blur amounts, in fact depending on the font used you might have to. Ideally you want the stems of the characters to be glowing white. So, these settings are best for a flame effect but please muck about with them and see what else you can come up with.
Now select your spinMask clip and under the display tab change the Blending mode to Screen. Still with the spinMask selected add a new Blur filter using Blur: 30px. You can play around with the blur to get something that you like. We’re nearly there!

Here is a link to the FLA.

Tags: animation, effects, Flash, tutorial

This entry was posted on Wednesday, December 9th, 2009 at 2:37 pm and is filed under Developer Blog, Flash, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.