Flash Explained

Learn Flash easily.

Creating Movie Clips

October 8th, 2008 | Author: Luka | Category: Basics


This tutorial explains how to create a Movie Clip, what is the Library in Flash, what is an instance, how to modify a Movie Clip.

How to create a Movie Clip

1 Open a new Flash document. Draw something on the stage. Let’s say, an eye in a car :)

2 Select the drawing with the Selection tool (V) from the Tools panel, by clicking somewhere outside it, and dragging the mouse over it (see the image at left below). The drawing is now selected (see the image at right below).

Selecting the drawing. The selected drawing.

3 To create a motion tween animation, you need to convert your drawing to a symbol. Choose Modify > Convert to Symbol or press F8. This will bring up the Convert to Symbol dialog. Now, you can choose from three types of symbols: Movie Clip, Button and Graphic. Choose Movie Clip. Now, give your Movie Clip a name. Click in the Name field, and type eye in car or whatever. We’ll leave the Registration option for now. Click OK to create your Movie Clip. You will see a thin blue square marking your newly created Movie Clip.

Creating a Movie Clip was easy. What are the advantages of a Movie Clip? First, you will do most of the animations with Movie Clips. What is a very useful characteristic of Movie Clips and symbols in general is that they are reusable. To show what this means, we need to take a look at the…

Library

4 Press CTRL+L or F11 or choose Window > Library. The Library will now appear. Think of the Library in Flash as a storehouse. Every symbol you create, every image and sound you import in Flash are stored in the Library. You can see our movie clip, along with its name and a small icon of to its left indicating its a movie clip and not a button or graphic symbol.

5 Select your Movie Clip on the stage (not in the Library), and delete it. That’s right, press DELETE. You will notice that the stage is empty now, but your Movie Clip is still in the Library. So, if you want to have your Movie Clip again, just click on it in the Library, be it on its name or its image, and drag it to the stage. And there you have your Movie Clip again.

You can drag on the stage your Movie Clip as many times as you want. Try it. These copies of our Movie Clip (every single one on the stage) are called instances. You can delete all the instances on the stage and still have your symbol in the Library. However, if you delete the symbol in the Library (by selecting it there and pressing DELETE or clicking on the small trashcan at the bottom of the Library window) you will delete the symbol completely – from the stage and from the Library.

In the beginning, you probably won’t make complex movies, so your library will be easy to browse. However, as you become more proficient with Flash, you will have Flash documents with library full of symbols. To make life easier, when you have lots of symbols, use the folder icon with plus on it on the bottom of the library window to create folders and better organize your library.

The Library.

Modifying a Movie Clip

6 How to make changes to an existing symbol? To see how it is done and what are the consequences of it, drag again four or five instances of your movie clip on stage. If you try to draw or erase something on any of the instances, it won’t work. You will draw behind them, on the stage.

To change a movie clip, double-click on any of the instances on the stage. Look at the top left corner of the stage. Below and to the right of your Flash document name, you will see written “Scene 1″, and then, next to it “eye in car” or whatever you called your movie clip when you created it. You will also notice that all other instances on the scene look faded. Why is that? Because, when we double-clicked on one of our instances, we entered the movie clip. Now we are inside it and can edit it. With the selection tool (V) click anywhere on the scene (not on the drawing) once. We deselected our drawing. Now try and draw something, add a brush stroke, a line, a pencil drawing. What happened? You certainly noticed that ALL of the instances changed. That is completely normal. So, remember: by changing your movie clip, you are changing every instance of it.

7 But what if you want to change a single instance? Double-click anywhere outside your drawing to return on the scene or click “Scene 1″ on the top left corner of the stage. Your movie clip should still be selected. You can change its appearance using the Free Transform Tool (Q) or by changing its color, transparency, brightness, using the Color menu in the Properties panel below the scene. Notice that the original symbol in the library will be unchanged.

8 I hear you asking, “OK, but what if I want to change the drawing of the movie clip and leave the other instances unaffected?” That’s easy. Go to the library and right-click on the name of your movie clip “eye in car” in my case) and choose Duplicate from the pop-up menu. The Duplicate Symbol dialog will appear. Enter a new name and click OK. Now you have a second symbol in your library, which looks exactly the same as the first one. Drag an instance of this new movie clip on the stage, double-click on it, change it, and it won’t affect the instances of the first movie clip. Cool, huh?

No matter how many instances of a symbol you have on stage, your SWF file’s size on disk will not become bigger. So you can use your symbol as many times as you like, while retaining the same file size.

Be Sociable, Share!

Comments

Submit a comment

  • Andrew Aug 9, 2009 at 4:40 pm

    Thanks for the tutorial. I was wondering if there was a way to change an instance of the symbol without duplicating it. Maybe a way programatically using ActionScript 3.0. I’ve created a movieClip with some text within it. I would like to create several instances of this movieClip but with different text on the inside.

    Thanks,
    Andrew

  • Vijay Jan 12, 2010 at 11:12 am

    Hi Andrew,

    Thanks for explaining about duplicating the movie clip.Its very useful to me.

    Cheers,
    Vijay

  • jisho Jan 19, 2010 at 12:00 pm

    Super teaching

  • max Jan 27, 2011 at 1:18 pm

    heey Andrew…
    maybe it’s a stupid question, but in what kind of program do you make a Movieclip?
    i’m a a bit new with flash, and it won’t work with the program FlashDevelop.
    (in how i see it)

  • max Jan 27, 2011 at 1:18 pm

    sorry, i actually ment: Heey Luka :$

  • ger May 18, 2011 at 3:12 pm

    Hello. I have a specific question about updating a web gallery. I need to remove and add photos. I originally had the .swf, then exported it to a .fla. I can’t see which movie clips are which. Can you point me in the right direction?

    I am using flash cs3

    Many Thanks,
    J

  • [...] Movie Clips. Once you’ve developed some animation, consider creating movie clips that can be reused within a project or incorporated into different projects. For ideas about developing movie clips, go to Flash Movieclip Symbols from SmartWebby and Creating Movie Clips at Flashexplained. [...]

  • rowel Nov 29, 2011 at 1:23 am

    hi. Ive just created movieclip from image file. I imported the image file to the stage, then changed it to movieclip. And when I deleted the image file, in the library, my movie clip would disappear.. But, ive ever seen someone’s work that use image, but no image file in the library. How can I remove the image file and keep the movie clip? Thank before.

  • [...] between 5 to 10 seconds: it’s a message we’re posting not a story . So if you have several movie clips inside your timeline that plays again each time reached the last frame, you will definitely exceed [...]

Leave a comment