flash cs3 animation 3 fx

7/28/2019 Flash Cs3 Animation 3 Fx

1/9

Flash CS3 animation basics: Animating effects

In this easy lesson, you will see how to animate effects in Flash. Youll learn how to animate a

filter and create a glowing effect and more along the way.

The animation that you are going to learn to create can be seen on the web page of this

tutorial.

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) toaccess the Document Properties.

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

www.FlashExplained.com
http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/http://flashexplained.com/http://www.flashexplained.com/http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/http://flashexplained.com/


2/9

animation.

1.3 Select the Oval tool (O).

Set the options for it as follows:

Turn off the stroke (outline) color.

Choose some shade ofred 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 (its next tothe litle magnet icon).

1.4 Hold down Shift on your keyboard, click and start dragging with the Oval tool to makea 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.

http://flashexplained.com/http://flashexplained.com/


3/9

1.5 Youll 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. Selectwhite for the outline color, with a thickness of4.

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 thelower half of it by clicking outside it with the Selection tool, dragging and releasing once youveencompassed the desired area. Press Delete or Backspace to erase the selected part.



4/9

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 redcircle so that it appears as a sort of shine on it. You can move it by pressing and holding downShift 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 movieclipas type, of course. Click OK.

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



5/9

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 motiontween animation technique one of the basic ways to set things in motion in Flash. So, beforeactually 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 PropertiesInspector.

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 changewill be reflected in the Properties Inspector instantly your movieclip is selected now.

http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/


6/9

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.

Effects in Flash can be applied only to movieclip symbols, button 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 thatdrawing 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.



7/9

A continuous, unbroken arrow should appear on a magenta background. I wont delve intodetails here, because I already explained in exhaustive detail the proper procedures to create amotion 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 fullbright red that you have applied to your movieclip in the second keyframe.

2.7 Now thats fine, but there is that abrupt jump at the end of your animation. There is nosmooth transition between the glowing effect at its most visible and the first keyframe wherethere 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 thatshows up.

http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-shape-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-shape-tween/http://flashexplained.com/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-shape-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-shape-tween/http://flashexplained.com/


8/9

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 createa 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 thistutorial. The rythmical glowing of your bulb movieclip. Yes, it is as easy as that. There is noeffect applied in the first keyframe, and there is the glow applied in the second one. Make themotion 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. Playand experiment to see what you can achieve!

I will make a lesson which will explain how to use what you have just learned, together withmotion tweens and shape tweens to create professional animations. So stay tuned! Subscribe

to Flash Explained below!



9/9

The source file for this lesson is included with this PDF. If missing, get it at

http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/.

Like this Flash lesson? Subscribe to FlashExplained.com to stay up to date on new lessons andtutorials!

http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/http://flashexplained.com/?feed=rss/http://flashexplained.com/http://flashexplained.com/?feed=rss/http://flashexplained.com/?feed=rss/http://flashexplained.com/animation/flash-cs3-animation-basics-animating-effects/http://flashexplained.com/

flash cs3 animation 3 fx

Documents