b - Animating Effect

15/11/2010 11:46

 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.

Opening a new document in Flash CS3.

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

Accessing the document properties.

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

The Document Properties window.

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).

Setting up the parameters for the Oval tool.

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.

A 100 pixel circle drawn on the stage.

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.

Selecting the properties of the Oval tool in the Properties Inspector.

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.

An outline circle was just created.

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. PressDelete or Backspace to erase the selected part.

Selecting and erasing a part of your drawing.

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

Cutting away a quarter of the outline 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.

Shiny red circle.

1.10 Select the whole drawing now.

Selecting all the vectors.

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

Making a movieclip out of a vector drawing in Flash CS3.

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.

Inserting a keyframe where effects will be applied to a movieclip

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

A frame as it is seen 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.

A movieclip has been selected in Flash.

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

Accessing the filter effects in Flash CS3.

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.

Glow effect and its parameters.

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

The glow effect applied to a movieclip.

Effects in Flash can be applied only to movieclip symbolsbutton symbols and text fields. They cannot be applied to simple vector drawings, images or anything else other than the three aforementioned objects. If you want to apply an effect to a drawing, convert that drawing into a movieclip first and then proceed with the application of effects.

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.

Making a motion tween animation for effects.

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.

The motion tween for animating the glow effect is in place.

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.

Copying the keyframe where no effects are applied to your movieclip

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

Pasting a keyframe to complete the animation loop.

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

Adding the second motion tween animation - from glow to no effects.

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!

The blending and color-changing options for movieclips.

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.