Flash MovieClips Lesson 4

NOTE: Before reading this article make sure that you have read Part 1, Part 2, and Part 3. Topics are talked about that were mentioned in previous chapters.

Movie Clips are like Graphics with more options and ability to control those options. I will show you how to create and manage Movie Clips.

Getting Started

Begin by drawing a red square.

Image

Select the red square with the Selection Tool.

Image

Now on the Keyboard hit F8 to turn this shape into a symbol. Just like we did this before a dialog box will appear.

Image

Name your symbol and click Graphic as the type, then click OK.

Image

Now if you open up your Library, hit F11 on your keyboard, you will now see your red square in the Library. Notice that the icon to the left of the name states that it is a Graphic.

Image

Now draw a blue square, and repeat the steps of making your blue square into a symbol.

Image

Select your blue square with the Selection Tool, and hit F8 on the keyboard to turn it into a symbol.

Image

In the dialog box that appears, name your shape “blue_square”. This time however instead of making this into a Graphic, we will make this into a MovieClip. Click the MovieClip option, then click OK.

Image

Now you have two symbols in your Library. A MovieClip and a Graphic. Naming your symbols can be a pain in the ass at time, but if you name them with names that help distinguish what they are it will help you in the long run.

Image

Let’s rename “square” to “red_square”. Simply Double Click the name of “square” in the library and you will have the option to rename it.

Image

Just as you could with Graphic Symbols, you can have as many MovieClip Symbols on stage as well.

Image

Adding Filters

Movie Clips give you more options then a graphic. Movie Clips allow you to add filters to your object. Filters are special effects that help add detail to your drawing.

To add a Filter to a Movie Clip, click on your Movie Clip on Stage, then while it is still selected, go to the properties tab at the bottom of the screen. If you do not see your Properties Tab, hit Ctrl+F3 or go to the top menu of Flash and click on Window/Properties/Properties.

Image

What you are looking for is the Filters Tab. If you can not find this Filter tab, again go to the top menu of Flash and click on Window/Properties/Filters.

Image

Now that you have found the Filters Tab, click the + sign on the left. This will show you all the filters you can add to your current Movie Clip.

( Remember you must have the Movie Clip selected for these options to appear. )

As you can see there a few Filters you can add. Let’s start with Drop Shadows. Click on Drop Shadows in the list of choices.

Image

A Drop Shadow is useful for giving your objects a sense of depth. As you can see there are options for the Drop Shadow. You can adjust the color, distance, and strength of the shadow.

Image

Once you have added the Drop Shadow Filter to your Movie Clip you can see the effects.

Image

The next Filter is the Blur effect. This Filter allows you to blur the edges of your object. You can adjust how far in the X and Y direction it blurs.

Image

Once you have added the Blur Filter to your Movie Clip you can see the effects.

Image

The next Filter is the Glow effect. You can adjust the blur of the X and Y, strength, color.

Image

Once you have added the Glow Filter to your Movie Clip you can see the effects.

Image

The next Filter is the Bevel effect. You can adjust the blur of the X and Y, strength, color of highlight and shadow, angle, and distance.

Image

Once you have added the Bevel Filter to your Movie Clip you can see the effects.

Image

The next Filter is the Gradient Glow effect. You can adjust the blur of the X and Y, strength, color of highlight and shadow, angle, and distance.

Image

Once you have added the Gradient Glow Filter to your Movie Clip you can see the effects.

Image

The next Filter is the Gradient Bevel effect. You can adjust the blur of the X and Y, strength, color of highlight and shadow, angle, and distance.

Image

Once you have added the Gradient Bevel to your Movie Clip you can see the effects.

Image

The next Filter is the Adjust Color effect. You can adjust the Brightness, Contrast, Saturation, and Hue.

Image

Once you have added the Adjust Color Filter to your Movie Clip you can see the effects.

Image

You can also add more then one Filter to a Movie Clip. Just the same as adding one filter, just keep adding more. To adjust the different filters, click on their names, and the properties for each will appear.

Image

Once you have added the Filters to your Movie Clip you can see the effects. As you can see this Movie Clip has a Drop Shadow, Blur, and Glow effect added.

Image

Deleting Filters is just as easy as Adding Filters. Instead of + sign, click on the – sign on the left of the Filters.

Image

This Movie Clip now has only the Drop Shadow and Blur effect to it.

Image

Deleting again will take off the Blur effect. To delete an effect, click the name and click the – sign.

Image

Now the Movie Clip only has a Drop Shadow.

Image

Take some time to play with the filters and the options the filters have. Mess with some of the settings like Knockout and Inner and see what they do. Practicing with them will only get you more familiar with what they can and can not do. The best way to learn is to do it yourself.

Timeline in Movie Clips

Now that we have covered some of the basics of Movie Clips let’s get into the true value of a Movie Clip.

Movie Clips have the ability to have timelines within them. This feature allows you to put animations or loops within a container.

Let’s begin to start adding Frames and Keyframes into your Movie Clip. Double click the blue_square Movie Clip on the stage.

( If you need a bit of a refresher of the Timeline look back at Part 2. )

Once inside the blue_square Movie Clip. By default it has a Layer 1 and 1 Keyframe of your square.

Image

Start by Adding 4 more Keyframes, hit F6 on the keyboard, and change the color of the square in each Keyframe. You should have a total of 5 Keyframes with each square a different color.

Image

Double click anywhere to get back to the main timeline of the document and out of the blue_square’s timeline.

You will notice that the main timeline still only has 1 Layer and 1 Keyframe.

Image

When you publish your file, Ctrl+Enter you will see the red_square and blue_square. The blue_square will animate through the 5 Keyframes you set up and continuously loops.

Image

You can move the animated Movie Clip anywhere on stage and when you publish it will animate. Notice that in this version I have moved the blue_square over the red_square.

Image

This feature comes in handy when you want animations or loops to play in certain areas. You can have a Movie Clip repeat grass blowing in the wind, a goomba dancing back and forth, or a group of people doing various movements.

Image

Image

Image

The above animations are each in thier own Movie Clip. You can move these Movie Clips anywhere on stage and they will play when published.

Using Movie Clips to help you animate is useful because it saves time and processing power. If you wanted to have them loop you simply expand the timeline to the appropriate length. Without using Movie Clips you would have to copy the Keyframes over. This is wasteful and inefficient. If for any reason you need to change the animation I have to change it 10 times.

Using Movie Clips allows you to extend the timeline and the Movie Clip, by default, will automatically loop. Since I am using a Movie Clip any changes will be applied to the entire loop.

There are many uses for a Movie Clip just get familiar with what I’ve gone through here. We will be getting to some good stuff in the next few tutorials. Keep an eye out.

NOTE: Be sure to check out Part 5

Leave a Reply