Resizing movies in Flash MX 2004

Background Information

Recently several of my students have created Flash animations or movies that needed to be resized after they created their Flash animations. I have developed this tutorial to outline the process of resizing a Flash document.

Objectives: Students will learn how to cut and paste frames, create movie clip symbols, delete layers, remove frames, and resize documents.

This tutorial assumes that the reader has a basic understanding of Flash and knows how to create a Flash document that includes multiple layers, symbols, and motion tweens.

Typical Scenario

When you create a new Flash document the default document or stage size is 550x400 pixels. A new Flash document includes a blank Scene called Scene 1. The definition of a scene is "the place where some action occurs". This definition is also true in Flash; all of the action or animation takes place in Scenes. This document also includes the stage, an empty timeline, and a single layer called Layer 1. The image below shows the Edit Bar which displays the current scene, the main Timeline which is where the animation is developed and finally a single layer used to organize the content.

When you start a Flash project you should have already drawn thumbnail sketches of your project ideas. You should also determine what the final dimensions of the movie to be. Unfortunately, you may not be sure of the exact dimensions. The mistake that many new developers make is that they start building the movie using the default canvas size expecting to be able to resize their movie when they have completed the projects. Unfortunately, Flash was not really designed to work this way; developers should know the desired movie dimensions before they start the project.

Another common mistake that is made is that movies are built in Scene 1 or the main movie timeline. If you start creating your animation as soon as you launch Flash the animation will be built in the main timeline, which is called Scene 1 (this is the default). Creating an animation in the movie's main timeline makes resizing the movie at a later date difficult. Instead animations should be created in Movie Clip Symbols. Before we go any further, you should be familiar with the some terms:

Stage: This is where you draw and assemble all of the objects that are a part of your Flash movie.

Objects: Elements that you place on the stage. Can include graphics, text, shapes, photos, sounds.

Scenes: If you are working with complex movies you can break the movies into smaller sections that are more manageable. When you create a new Flash document Scene 1 is the default scene. Scenes contain their own Timelines.

Timeline: The Timeline is used to create and control the timing of an animation. This is where you develop the animation. The Timeline is also used to add layers and insert frames into a movie. A movie may contain several Timelines. When you create a new Flash document a timeline will appear above the stage. This timeline is frequently referred to as the Main Timeline. The Main Timeline is used to coordinate all of the movie clips and symbols in your movie and is usually found in Scene 1. I recommend that you do not develop your animations in the Main Timeline, create a Movie Clip Symbol (explained next) instead.

Symbols: Symbols are object containers; they keep objects compartmentalized. Objects are graphics, sounds, text, buttons, photos, shapes, etc. There are several types of Symbols: Graphic, Button, Movie Clip, Sound, and Font. In order to animate or apply special effects to an object it must first be converted into a symbol. Special effects include: Adjusting the tint and alpha settings, rotation, easing, and motion tweens. Symbols should also be used any time an object will be used multiple times in a movie. In essence if you plan to move an object on the stage it should be converted to a symbol first. To my knowledge, almost all objects should be converted to symbols; the only time you don't want to convert an object to a symbol is when you plan to use shape tweening on the object. Another positive thing about symbols is that converting an object to a symbol reduces the overall file size of a movie. Symbols are stored in the Flash Library. For a more detailed description of Symbols read this tutorial at the University of Texas Austin. Tutorial 2 of the Macromedia Flash MX 2004 book covers Symbols.

Graphic Symbol: Used to contain graphics without animation. They are essentially still images. Any time you import a photo, add text, or shapes to the stage it should be converted to a graphic symbol. After converting an object to a graphic symbol it can then be animated using motion tweening. Page 30 of your Flash book shows some sample objects would be converted to Graphic Symbols. To convert an existing object to a Graphic Symbol select the object on the stage and select Modify > Convert to Symbol.
Button Symbol: Used to contain buttons. If you want to create a button in your Flash movie, select Insert > New Symbol.
Movie Clip Symbol: Used to contain graphics that are animated and other symbols. Movie clips contain their own Timelines and can function independently of the main timeline. A movie clip can and will contain other symbols including graphic, sound, font, and button symbols. You can have many movie clips in a Flash document. The great thing about using a Movie Clip Symbol to hold animation is that the symbol can then be reused in the same document or in other documents. Typically when you are creating a Flash animation you want to begin the process by creating a movie clip symbol. To create this type of symbol select Insert > New Symbol.

Edit Bar: The Edit Bar is just above the Timeline and it shows which scene or movie clip you are currently editing. It is very important to pay attention to the Edit Bar because Scenes and Movie Clip Symbols start to look alike because they both contain a Timeline, Layers, and a Stage. The image below shows the Edit bar. The current scene being edited is indicated with the red rectangle and the current symbol being edited is indicated with the blue rectangle. A Movie Clip Symbol inside Scene 1 called isanimation is currently being edited in the image below.

Animations should be created in Movie Clip Symbols not in the Main Timeline. By using a Movie Clip Symbol to contain your animation the animation is independent of the rest of the document. This means that the animation can be easily placed anywhere in a movie and it can also be reused in other movies. The other benefit of using a Movie Clip Symbol is that the document can be resized easily. If you plan to use animation in your Flash movie you should insert a Movie Clip Symbol by selecting Insert > New Symbol then start building the animation in the Movie Clip Symbol's Timeline rather than in the Main Timeline.

Again, when you create a new Flash document that you plan to animate you should create a Movie Clip Symbol before you begin to add elements to the stage. This can be done by selecting Insert > New Symbol from the Flash menu. Unfortunately, sometimes we forget to create Symbols before we begin our animations. This tutorial will demonstrate how to move an existing Flash animation into a Movie Clip Symbol and how to resize the Flash document.

Here is an example of Marcia's Flash animation that we will be working with. If you would like to practice with this file you can download it here.

This Flash animation, the beginning of a company logo, was created in the main movie timeline that is referred to as Scene 1. Notice that there is a lot of extra or dead space around the actual logo. We want to eliminate the extra space. With most graphic applications you can simply resize the canvas. Unfortunately it is not so easy in Flash. If you attempt to resize a Flash document after an animation has been created in the main timeline you may destroy your animation. Below is an example of my resizing the Flash movie using Modify > Document.

You can see that there is a problem in the image to the left. While the canvas has been resized, the animation did not move. Trying to select all of the frames and dragging them into place will cause the animation problems. To avoid this issue I would recommend that you place all animations in Movie Clip Symbols.

Notice the screen capture below; the entire animation has been created in Scene 1. Again, this makes the process for resizing the animation difficult.

In order to resize the animation to remove the dead space, we must place all of the layers and frames in a movie clip. Use the following steps to move the frames into a new movie clip.

Before you begin this process I would recommend that you work on a duplicate of your original file. With the original file open, select File > Save As and give the copy a new name.

First create a new movie clip symbol. Select Insert > New Symbol from the Flash menu.

The Create New Symbol Dialog box appears. In this dialog box you have three Behavior choices:

Movie Clip: Used to contain graphics that are animated.
Button: Used to contain buttons
Graphic: Used to contain graphics without animation.

I am going to select Movie Clip and I am naming the clip isanimation. After naming the clip and selecting the behavior, click OK. After clicking OK Flash will automatically open the isanimation clip for editing. Take a look at the image below. I have placed two arrows on this image to direct your attention to a couple of key elements. The first arrow points just above the timeline to the Edit Bar. The Edit bar displays the object that you are working on (scene, movie clip or other symbol). In this case it indicates that we are currently editing a movie clip called isanimation inside Scene 1.

The second arrow is pointing to Layer 1. When you create a new movie clip a blank stage appears with a single layer called Layer 1.

Next we need to return to Scene 1 to cut (move) the frames from the scene. In the Edit Bar, click the Scene 1 icon .

Flash will close the Movie Clip and re-display Scene 1 where all of the layers and frames are currently stored. If your layers are locked (notice the lock symbol on the layer), unlock them by clicking the lock symbol .

Select all of the layers and frames in the movie by clicking the first layer name in the timeline, then hold down the Shift key on the keyboard and click the last layer name on the timeline. The layer names should all turn blue and the frames should turn black. Your timeline should look similar to the image below.

From the menu, select Edit > Timeline > Cut Frames. It is important that you use the Cut Frames option found in the Timeline menu.

In the Edit Bar click the Edit Symbols icon and select the Movie Clip symbol you want to move the frames to (isanimation). This will re-open the movie clip for editing.

In the timeline click the first frame in Layer 1. The layer name should turn blue and frame 1 should turn black.

From the Flash menu select Edit > Timeline > Paste Frames. (Trouble: If the Paste Frames menu option does not appear you probably did not select the first frame of Layer 1.)

If the Resolve Library Conflict Dialog box appears, select Replace existing items and click OK.

All of the layers and frames should now be stored inside the Movie Clip. My isanimation timeline now looks like the image below.

Because the animation in now stored inside a movie clip symbol it can be used in other movies. The stage can be can also be resized easily.

If you open your Library by pressing CTRL+L or selecting Window > Library you should see the movie clip you created.

Take a look at my library to the left. It includes a folder called images which contains all of the original images and symbols and one movie clip called isanimation.

 

Now that all of the frames are stored inside the movie clip symbol, the document can be resized. Return to Scene 1 by clicking the Scene 1 icon in the Edit Bar.

You will notice that Scene 1 still contains all of the layers and some messy frames. Before we can continue we need to delete the extra frames and layers.

Clean up the Timeline by selecting all of the layers using the Shift + Click method described earlier. With the layers selected, drag them to the Trash icon at the bottom of the Timeline.

This will usually leave one layer (typically the bottom layer in the timeline). Here is what I was left with.

There were also some extra frames left in this layer that needed to be removed. Click the layer name and select Edit > Timeline > Remove Frames to clean up any last frame garbage.

Rename this layer movie or whatever you like by double clicking the existing layer name (network on the above image) and typing the new name. Press Enter.

Next resize the document by clicking Modify > Document.

I determined that my movie should be about 135x102 pixels. In the Document Properties I adjusted the width and height settings accordingly and clicked OK.

To actually use the new Movie Clip, drag an instance of the movie clip symbol from the library to the stage. Position it so it fits nicely on the stage.

Test the movie by clicking Control > Test Movie. The movie should be resized and ready to use on your web page. You can see a copy of my finished movie on a web page here. You can also download a copy of the FLA file to review.

Be sure to always use Movie Clip Symbols when creating animations. In the long run they will save you a lot of time and frustration.

You may also want to review the Cleaning Up a Flash Library to Reduce File Size tutorial.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.

Visit Robin's Blog for more web design and development resources.
©Copyright 2001-2006 - Robin Wood - Send Questions or comments to robin at tinkertech dot net.
Last Updated: December 19, 2006