Flash Explained

In this easy lesson, you will see how to animate effects in Flash. You’ll learn how to animate a filter and create a glowing effect and more along the way.

Take a peek at what you are going to learn to create below:

1. Creating a simple movieclip

1.1 Open a new document: choose File > New. Select Flash File (ActionScript 3.0). Click OK.

1.2 Double-click the fps field below the layers (you can see it in the screenshot below) to access the Document Properties.

Change the speed of your movie (to make your animation more smooth) by typing 24 in the Frame rate field. Click OK. This will speed up your movie to a decent level for a nice animation.

1.3 Select the Oval tool (O).

Set the options for it as follows:

• Turn off the stroke (outline) color.
• Choose some shade of red for the fill color (you will make something similar to a red alarm light).
• Check that the Object Drawing option is turned off and let it stay that way (it's next to the litle magnet icon).

1.4 Hold down Shift on your keyboard, click and start dragging with the Oval tool to make a circle. Make it about 100 by 100 pixels. Remember that holding down Shift enables you to make a circle right away, and not an oval.

1.5 You'll now use the Oval tool (O) again, but to draw an outline of a circle only. With the tool still selected, go to the Properites Inspector below the stage and block the fill color. Select white for the outline color, with a thickness of 4.

1.6 Draw a circle smaller than the previous one. Do it outside the stage, because you are using white - to see what you are doing.

1.7 Choose the Selection tool (V). You will cut out 3/4 of the outline circle now. Select the lower half of it by clicking outside it with the Selection tool, dragging and releasing once you've encompassed the desired area. Press Delete or Backspace to erase the selected part.

1.8 Repeat the same thing for the right quarter of the circle.

1.9 Select the remaining line by clicking on it with the Selection tool (V). Move it over the red circle so that it appears as a sort of shine on it. You can move it by pressing and holding down Shift on your keyboard and using the arrow keys to move it around. For more precise movement, release Shift and use the arrows only.

1.10 Select the whole drawing now.

1.11 Select Modify > Convert to Symbol. Name your new movieclip bulb. Select movieclip as type, of course. Click OK.

And now - save your work before proceeding to the second part (File > Save)!

Top of page

2. Applying effects to a movieclip and animating them

To be able to animate effects like blur, glow and others in Flash, you have to use the motion tween animation technique - one of the basic ways to set things in motion in Flash. So, before actually using the effects, you have to create an animation first, by adding a new keyframe and making some modifications. Let me show you how - it is easy!

2.1 Right-click on frame 20 of the first and only layer and select Insert Keyframe.

You will see that the new keyframe you have just inserted is displayed in the Properties Inspector.

This is because when you insert a new keyframe in a layer, it becomes selected automatically. But you need to have your movieclip selected. So...

2.2 Select your bulb movieclip by clicking on it once with the Selection tool (V). The change will be reflected in the Properties Inspector instantly - your movieclip is selected now.

2.3 Click on the Filters tab. Then click on the small blue cross to access the effects at your disposal.

2.4 Select the Glow effect from the menu. Select the following values for it:

• Blur X and Blur Y: 31
• Strength: 230
• Quality: Low
• Color: red (#FF0000)
• Leave the Konckout and Inner glow options unchecked.

This is the result you should see – a nice, red glow appearing around your movieclip.

2.5 You should create the animation now — to animate the glowing effect. Just right-click on the grey area between the two keyframes and select Create Motion Tween.

A continuous, unbroken arrow should appear on a magenta background. I won't delve into details here, because I already explained in exhaustive detail the proper procedures to create a motion tween animation. Check it out if you have any questions. Also check the shape tween animation lesson.

2.6 Select Control > Test Movie. You should see your glow appear, from nothing, to full bright red that you have applied to your movieclip in the second keyframe, like this:

2.7 Now that's fine, but there is that abrupt jump at the end of your animation. There is no smooth transition between the glowing effect at its most visible and the first keyframe where there is no glow visible at all. You are going to change this now, easily.

Right-click on the first keyframe and select the option Copy Frames from the menu that shows up.

2.8 You will paste this keyframe onto frame 40. Right-click there and select Paste Frames.

2.9 Do the same thing as you did before - right-click between the two keyframes and create a motion tween animation.

2.10 Test your Flash movie again by selecting Control > Test Movie.

You should see now an animation similar to the one demonstrated at the beginning of this tutorial. The rythmical glowing of your bulb movieclip. Yes, it is as easy as that. There is no effect applied in the first keyframe, and there is the glow applied in the second one. Make the motion tween and there you have animated effects in Flash!

You can do the same with the Color and Blend options. With filter effects thrown in too. Play and experiment to see what you can achieve!

I will make a lesson which will explain how to use what you have just learned, together with motion tweens and shape tweens to create professional animations. So stay tuned! Subscribe to FlashExplained to keep track of every new tutorial!

Download the source file for this lesson

Comments

Submit a comment