Flash Explained

Learn Flash easily.

Flash CS3 animation basics: Animating effects

December 9th, 2008 | Author: Luka | Category: Animation


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. Click OK. 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. Press Delete 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 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 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. So stay tuned! Subscribe to FlashExplained to keep track of every new tutorial!

Download the source file for this lesson

Be Sociable, Share!

Comments

Submit a comment

  • mahafuz aziz Dec 11, 2008 at 7:17 pm

    its really helpful…..guys thanks a lot……i’ll try to submit some other tutorial to enrich the site…..
    thanks once again……
    aveek

  • Chris Hayes Dec 12, 2008 at 4:29 pm

    Thanks alot. I’m in multimedia in high school learning how to use flash, and this tutorial has helped thank you

  • SolReka Dec 13, 2008 at 1:15 am

    I am new to flash, I just wanted to say well done on all the hard work you have obviously put into these clear to follow instructions. Much appreciated

  • Aljosa iz Zagreba Dec 28, 2008 at 12:19 pm

    bravo Luka, super su ti post-ovi – vrlo edukativni i prilicno jednostavni za pratiti. Samo tako nastavi. 😉

  • Luka Dec 28, 2008 at 3:48 pm

    Hvala majstore 🙂

  • Angie Dec 30, 2008 at 6:15 pm

    These step-by-step tutorials are great! How do I save an animated give so I can post it on my website?

  • Higs Jan 13, 2009 at 6:26 pm

    So Easy! This is the very first thing I’ve ever attempted to do in Flash. I get that its basic-but for me I just jumped a big intimidation hurdle since my expertise has been in creative direction-not hands on!! Good times 🙂

  • S Jan 30, 2009 at 6:56 pm

    This is great stuff! Any chance you could do a tutorial on creating smoke/smokey effect?

  • Barbara Jan 31, 2009 at 1:50 am

    Thank you for saving me- This is my first animation, and with your very simple instructions, I will progress…

  • pooja Feb 11, 2009 at 11:51 am

    great…. very helpful for beginners…

    many thnx 🙂

  • sab Feb 12, 2009 at 1:55 am

    nice explanation. Easily understand how to handle flash interface.
    Thankyou

  • Imma Weiner Feb 20, 2009 at 12:57 am

    That was awesome. Ty 4 that.

  • zack mims 49 Apr 13, 2009 at 3:00 pm

    this was very hard idk what these people are talking about i suck at all of this, lord please help me pass this class

  • Prashant Singh Apr 28, 2009 at 11:11 am

    every example of this site is grt & easy to understand & learn.

  • Magdo Santana May 23, 2009 at 10:32 pm

    Excellent!!
    tanks

  • Vaughn Jul 12, 2009 at 11:56 am

    tnx guys.
    excellent job.

  • Werd Aug 19, 2009 at 8:55 pm

    Oh my GOD! It just doesn’t work!!
    No matter what I do!
    It’s a great tutorial, but seriously-
    My computer must be messed up or something.
    Thanks anyways.

  • JK Oct 15, 2009 at 2:35 am

    Thanks, useful.

  • Anurag Nov 11, 2009 at 1:57 pm

    nice simple and quick trick

  • Zabikhan Nov 17, 2009 at 6:36 am

    i have no understand but my language is Urdu.
    Thanks!

  • Stephanie Burke Nov 22, 2009 at 5:34 pm

    Hey there. I’m using Adobe CS4 and my filters tab is completely gone. I can’t find it under any drop down menus, not Window, not Properties, nothing. I’ve looked around a bit online, and this seems like an issue a lot of people have had, but all their solutions just involve finding it under a drop down menu. Anyone know of a CS4 bug? This is the first time I’ve used my Flash CS4. Thanks!

  • Mladen Mar 27, 2010 at 10:55 am

    Excellent and well explained lesson!

    @Stephanie: Try this keyboard shortcut: CTRL+F3

  • Andrea May 18, 2010 at 6:49 pm

    Great tutorial! Your instructions are so easy to follow.

  • manish Jun 23, 2010 at 11:08 am

    nice lesson
    very helpful for learning

  • Selina Jul 3, 2010 at 5:40 pm

    Very nice tutorial , as few others i read. Im bookmarking it since im gona need these tips very soon. Tnx

  • surya pratap Jul 12, 2010 at 6:07 am

    the lesson was nice!!
    i did almost everything but couldn’t find filter(i use flash 7). therefore i had to change the color to light red… that isn’t bad either!!
    can anyone tell me where can i find filter!???
    thanks

  • […] http://flashexplained.com//animation/flash-cs3-animation-basics-animating-effects/ Click here to cancel reply. Leave a Comment […]

  • Tracy Ingram Feb 1, 2011 at 8:27 pm

    Thanks for the tutorial, it will really help with the next project I have.

  • poznan Feb 14, 2011 at 5:33 pm

    Great tutorial, It was very helpful for me

  • Ferienparks Team Apr 18, 2011 at 6:01 pm

    Nice animation – this will become handy for our new site, where we also want to incorporate a lot of new flash features to make it look better.

  • Monami Saikia Oct 22, 2011 at 6:57 am

    very nice tutorial…!!!

  • David De Chavez Nov 18, 2011 at 6:19 am

    🙂 nice!

  • Kiran pandey Feb 17, 2012 at 9:07 am

    Thanks 4 help it’s nice..

  • amankeeroo Nov 20, 2012 at 5:17 pm

    hi,thanks.really helpful

  • Aamir Shahzad Apr 2, 2013 at 10:13 am

    great tutorial…best part is very easy to follow for beginners….

You must log in to post a comment.