Creating Basic Tween Examples in Flash CS5

Create a new Flash document. Follow the steps below to add different kinds of tweens to your Flash movie.

By the end of this tutorial, you should have something like this: [DEMO PAGE]

Movement - Classic Tween

1. Draw a circle on the upper-left corner of the stage using the oval tool. 
2. Select the whole shape using the selection tool, and then convert it into a graphic symbol named Circle.
3. On the timeline, right-click on the frame 40 box and choose Insert Keyframe.
4. Make sure you are still on frame 40 by clicking on the keyframe that you just added. 
5. Then use the selection tool to move the circle to the upper-right corner of the stage.
6. On the timeline, right-click anywhere between frames 1 and 40 and choose Create Classic Tween.
7. Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.
8. Save your work.

Scaling Animation - Classic Tween

1. Insert a new layer.
2. Make sure you are on frame 1 of this second layer by clicking on the blank keyframe on frame 1.
3. Use the rectangle tool to draw a square shape in the middle of the stage.
4. Select the whole shape using the selection tool, and convert it into a graphic symbol named Square.
5. On the timeline (layer 2), select frame 40 by clicking on it. Make sure that no other frames are highlighted except for frame 40 of layer 2.
6. Once it's selected, right-click on it and choose Insert Keyframe.
7. Make sure sure you are still on frame 40 of the second layer by clicking on the keyframe that you just added.
8. Then on the stage, right-click on the square and choose Free Transform. 
9. Make the square bigger by clicking on any of the corner handles and dragging outward.
10. On the timeline (layer 2), right-click anywhere between frames 1 and 40 and choose Create Classic Tween.
11. Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.
12. Save your work.

Color Changing Effect - Classic Tween

1. Insert a new layer (this will be the 3rd layer).
2. Make sure you are on frame 1 of this third layer by clicking on the blank keyframe on frame 1.
3. From the library, add another instance of the Circle symbol and place it on the lower-left corner of the stage.
4. On the timeline (layer 3), select frame 40 by clicking on it. Make sure that no other frames are highlighted except for frame 40 of layer 3.
5. Once it's selected, right-click on it and choose Insert Keyframe.
6. Make sure sure you are still on frame 40 of this third layer by clicking on the keyframe that you just added.
7. Then select this new instance of the circle symbol on the stage by clicking on it using the selection tool. Do this even if the instance already looks selected just to make sure that it's really selected. Make you sure you only click on it <b>ONCE</b>. Do <b>NOT</b> double-click on it. If you double-click on it, you will enter the symbol's timeline.
8. After selecting the instance, go to the Properties Inspector. If you don’t see the Properties Inspector, choose Window > Properties.
9. You should see the properties of the selected graphic instance in the Properties Inspector. Under Color Effect, click on the Style drop-down menu and choose Tint.
10. Click on the tint color box and choose a new color for the instance. Make sure that the tint amount slider below the drop-down menu is at 100%.
11. On the timeline (layer 3), right-click anywhere between frames 1 and 40 and choose Create Classic Tween.
12. Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.
13. Save your work.

Morphing Effect - Shape Tween

1. Insert a new layer (this will be the 4th layer).
2. Make sure you are on frame 1 of this fourth layer by clicking on the blank keyframe on frame 1.
3. Draw a circle on the lower-right corner of your Stage. DO NOT CONVERT IT INTO A SYMBOL. We are going to add a shape tween, and it will not work if you convert the shape into a symbol.
4. On the timeline (layer 4), select frame 40 by clicking on it. Make sure that no other frames are highlighted except for frame 40 of layer 4. 
5. Once frame 40 of layer 4 is selected, right-click on the frame and choose Insert BLANK Keyframe. You should see the circle disappear.
6. Make sure sure you are still on frame 40 of this fourth layer by clicking on the BLANK keyframe that you just added.
7. Then switch to the rectangle tool and draw a square shape on the same spot that the circle was on.
8. On the timeline (layer 4), right-click anywhere between frames 1 and 40 and choose Create Shape Tween.
9. Press ctrl + enter (PC) or cmd + return (Mac) to test your movie.
10. Save your work.

PART 4 - Creating and editing a symbol - Introduction to Flash Symbols

You can create a symbol out of any artwork that you draw or import onto the stage. In this tutorial, we'll draw a simple circle shape, convert it into a symbol, and then edit that symbol.

Step 1

Create a new Flash document.

Step 2

Select the oval tool and draw a circle on the stage. It can be in the merge drawing mode or object drawing mode. But I'll be drawing in the merge mode.

Step 3

Switch to the selection tool and use it to select the circle on the stage. Make sure that you select the ENTIRE shape.

Step 4

Once it's selected, right-click on the shape and choose Convert to Symbol.

This will bring up the Convert to Symbol dialog box.

Step 5

In the Convert to Symbol dialog box, change the name of the symbol to Circle. For the symbol type, click on the drop-down menu and choose Graphic. For the registration point, you can click on any of the nine tiny squares to select a point. We won't be discussing what the registration point is for in this tutorial, but for now, choose the center registration point by clicking on the tiny square that's in the center of all the tiny squares. The chosen registration point will turn black.

Then click OK.

The shape on the stage should now be converted into a symbol.

Step 6

Open up the library to check that your new symbol is there. If you can't find the library, you can go to Window > Library or you can press ctrl + L (PC) or cmd + L (Mac) on your keyboard.

Step 7

Add a few more instances of the symbol by clicking and dragging the symbol from the library down to the stage. In the image below, I've added a total of five instances to the stage.

Step 8

Let's make some changes to the symbol by editing it. In the library, right-click on the symbol and choose Edit.

Step 9

After clicking on Edit, take a look at the edit bar to make sure that you are inside the Circle symbol. The edit bar should say Scene 1 > Circle.

Step 10

In the timeline, let's add another layer by clicking on the new layer button. So we should now have two layers.

Remember! We are inside the Circle symbol so this means that the layer was added to the symbol's timeline and not the main timeline.

Step 11

Select the brush tool and choose a color that's different from the color of the circle. Then make sure that the new layer that you just added is the active layer, and then draw a smiley face on top of the circle.

Step 12

Go back to the main timeline by clicking on the Scene 1 link. You should see that all of the instances on the stage now have smiley faces.

Congratulations! You've just created and edited your own symbol.

Try this on your own

• Draw two circles on the stage.
• Convert each circle into a graphic symbol.
• Go inside each symbol's timeline and draw a face on the circle.
• Use multiple layers to separate the parts (eyes, nose, lips, etc...) of each face.

And that concludes this tutorial series on an Introduction to Flash symbols.

<< PREV: The 3 types of symbols - Introduction to Flash Symbols PART 3

PART 3 - The 3 types of symbols - Introduction to Flash Symbols

The three types of symbols in Flash are:

Graphic
Use graphic symbols for static artwork and animation that you do not plan on adding any interactive functionality to. The reason for this is that you'll need ActionScript to add interactivity, and graphic symbols are not designed to work with ActionScript.

Button
Use button symbols if you want to add mouse-related interactivity such as clicks and roll overs to your Flash movie. For example, you could create a button that plays a song whenever it is clicked.

Movie Clip
The movie clip symbol is like a combination of graphics, buttons and more. It can be used for static artwork and animation, but it can also be used with ActionScript so that interactive functionality can be added to it. But unlike buttons, movie clips are capable of much more than mouse-related interactivity.

There's a lot more to learn about each type of symbol, but I will be covering them in later tutorials. For now, let's move on to the next part of this series where we will learn how to create a symbol from scratch.

<< PREV: Going inside a symbol's timeline - Introduction to Flash Symbols PART 2

Creating and editing a symbol - Introduction to Flash Symbols - PART 4: NEXT >>

PART 2 - Going inside a symbol's timeline - Introduction to Flash Symbols

Whenever you create a symbol, it's automatically going to have it's own timeline. Inside a symbol's timeline, you can also add layers and frames the same way you would on the main timeline.

Let's go ahead and take a look at the Car symbol's timeline.

Step 1

Before we access the Car symbol's timeline, let's first take a look at the edit bar found at the top of the document window.

The edit bar tells you where you are in your Flash document. Right now, the edit bar says Scene 1, which means that we are on the main timeline.

Step 2

To access a symbol's timeline, we'll need to edit it.

Go to the library, right-click on the Car symbol then choose Edit.

After you click on Edit, take a look at the edit bar again. You should now see that it says Scene 1 > Car.

This means that we are now inside the Car symbol's timeline. So whatever changes that we make here will apply to the Car symbol. If we draw something on the stage, it will become a part of the Car symbol. If we add layers to the timeline, then those layers will belong to the Car symbol.

If you look at the symbol's timeline in our exercise file, you'll see that it already has a couple of layers.

When this symbol was created, the artwork was separated into different layers within the symbol's timeline. This means that the layers that you see here, they belong to the Car symbol's timeline and NOT the main timeline.

It's not a requirement to use multiple layers inside a symbol's timeline, but you do have that option if you wish to make things more organized. Managing layers inside a symbol's timeline is no different from managing layers on the main timeline. You can add, delete, rename, move, hide, and lock layers just like you would on the main timeline.

Step 3

Let's make a small change to the symbol. Using the paint bucket tool, change the color of the car's body.

First, select the paint bucket tool, and click on the fill color box to select any new color that you like.

Then position the paint bucket tool over the car's red body and click on it to apply the new color. You don't have to worry about accidentally editing the contents of the other layers, because the other layers are currently locked.

So now, you should have a new color for the car's body.

Step 4

After we've made changes to the symbol, let's now go back to the main timeline. To go back to the main timeline, click on the Scene 1 link in the edit bar.

When you go back to the main timeline, you'll notice a few things:

1. The edit bar now says Scene 1, which confirms that we are back on the main timeline.
2. The timeline no longer shows the layers of the Car symbol's timeline, because we are now back on the main timeline.
3. All three instances of the Car symbol have the new color applied to them. Because we edited the Car symbol and changed the color of the car, all the instances will reflect the same changes as well. Since the symbol is the master copy of all the instances, making changes to the master copy affects all the instances that exist in the Flash document.

This is another benefit of working with symbols, if you decide to make changes to the symbol by editing it, then all the instances will reflect the changes, thus helping you save more time.

In the next part of this tutorial series, we'll take a quick look at the different types of symbols.

<< PREV: What is a symbol? - Introduction to Flash Symbols PART 1

The 3 types of symbols - Introduction to Flash Symbols PART 3: NEXT >>

PART 1 - What is a symbol? - Introduction to Flash Symbols

This article comes with exercise files. Click on the link below to download:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

In this tutorial series, we're going to learn about Flash symbols.

What is a Flash symbol?

In Flash, a symbol is a reusable object that is stored inside a Flash document's library. For example, you can draw a shape and then convert it into a symbol. Once converted, it gets stored in the Flash document's library. Then from the library, you can easily make multiple copies of the symbol without having to recreate it. You can turn anything that you draw into symbols. You can also import graphics from other sources and turn those into symbols as well.

Let's learn more about symbols by working on an existing example. In this first part, we'll take a look at a symbol that's already been created for you.

Step 1

Open up the intro-to-symbols.fla file. When the file launches, you won't see the symbol yet. Just move on to step 2.

Step 2

Switch to the Small Screen workspace so that your layout becomes similar to the layout in the screenshots in this tutorial. This will help you follow along more easily.

To switch to the layout, go to Window > Workspace > Small Screen.

Then go to Window > Workspace > Reset 'Small Screen'.

Step 3

Open up the library by clicking on the library panel icon.

This will bring up the Flash document's library. Inside it is a symbol named Car. Click on the name in order to see the symbol in the library's preview window (the preview window is that white area below the Library tab, and it's where you'll be able to preview what the symbol looks like). DO NOT DOUBLE-CLICK ON IT. JUST CLICK ON IT ONCE IN ORDER TO SELECT IT.

This symbol was created from artwork that was drawn on the stage using the drawing tools. The artwork was then converted into a symbol and it was given the name Car.

Step 4

To use the symbol, click and drag it from the library down to the stage.

Once you release the mouse, you should see the car on the stage.

This car that you see on the stage is simply a copy of the symbol from the library. It is referred to as an instance of the symbol. If the instances on the stage are copies, then you can think of the symbol in the library as the master copy. So if you delete the master copy in the library, then all the instances will disappear. However, if you delete an instance on the stage, the master copy in the library remains.

Step 5

You can add multiple instances of one symbol onto the stage. This is what it means when we say that symbols are reusable. You only need to draw them once, and then you can add them to your Flash movie as many times as needed.

To add more instances of the Car symbol, just click and drag more instances from the library onto the stage. Let's add two more instances.

This is one of the main benefits of working with symbols - you only need to create it once, but you can reuse it multiple times, so you end up saving time. Using symbols also helps save file space since multiple instances only come from a single copy. If, instead of using symbol instances, you decided to redraw the car three times, you would actually end up with a SWF file that has a larger file size.

And that concludes the first part of this tutorial series. In the next part, we'll learn about the symbol's timeline. Each symbol that you make has it's own timeline where you can also add layers and frames. We'll take a look at how to access that timeline in the next part.

Going inside a symbol's timeline - Introduction to Flash Symbols PART 2: NEXT >>

Working with layers - Flash CS5 Beginners Tutorial

The timeline, pictured below, allows you to separate your artwork into multiple layers. In the image below, you'll see that this timeline has 3 layers, each with a generic label - Layer 1, Layer 2, and Layer 3. In this tutorial, we'll learn what layers are all about.

What are layers?
Think of layers as separate sheets of transparent paper that you can draw on. Let's take a look at the images below and imagine that each image is a separate layer that has been drawn on.

The way layers work is that they are placed on top of each other to create the illusion that everything was drawn on one sheet. But in reality, they're all on separate layers. The image below shows how the layers above will look like if they were all stacked together.

It looks as if it's just one image, but in reality, we will be able to work on each layer separately. This is the benefit of working with multiple layers. Flash has features that allow you to lock and hide other layers so that you can focus only on the layers that you want to edit. Knowing how to work with layers will really help keep your Flash project more organized.

Adding layers

By default, your timeline will already have one layer when you create a new Flash document. To add another layer, click on the new layer button at the bottom of the timeline.

Each time you click on the new layer button, one layer is added to the timeline.

In the image below, there are 3 layers.

Deleting layers

To delete a layer, you must first click on it in order to select it. In the image below, I clicked on layer 2 in order to select it.

Once the layer is selected, click on the trash can at the bottom of the timeline in order to delete the selected layer.

Once you delete a layer, all of its contents are delete along with it.

Selecting a layer to draw on

To draw on a layer, you must make sure that it is selected by clicking on it. In the image below, layer 3 is selected and is therefore the active layer. You'll know that the layer is active because it's highlighted.

Once the layer is selected, you can then proceed to draw on the stage. Anything you draw will be placed in the active layer. In the image below, the circle was drawn while layer 3 was the active layer. So this means that the circle is on layer 3.

If you wish to draw on layer 2, then make sure that you click on layer 2 in order to make it the active layer. Then proceed to draw on the stage once the desired layer has been selected.

NOTE: Always be mindful of which layer is currently active. It's quite common for Flash users to make the mistake of drawing on the wrong layer, so always check the timeline to see which layer is highlighted.

Renaming layers

To rename a layer, position the mouse pointer on top of the layer name, and then double-click it in order to make it editable.

Once the text is editable, type in the new name and hit the enter (PC) or return (Mac) key.

It's a good idea to make the layer name descriptive of the layer's contents. If the layer contains a circle shape, then you might want to consider naming it circle as well. Using descriptive names will make layers easier to find and manage. Imagine having 100 layers named layer 1, layer 2, layer 3, all the way up to layer 100! That's going to make it difficult to find which objects are on which layers.

Reordering Layers

In the image below, there are two shapes on the stage - a circle and a square. The circle is at the back, and the square is in front of it.

Each shape is on its own layer. The square shape was drawn on the layer named square, while the circle shape was drawn on the layer named circle.

Here, you see that the circle layer is below the square layer. That is why the circle appears behind the square on the stage - the contents of the lower layer always appear behind the contents of the higher layer.

To move a layer, simply click and drag it. Drag up to move it higher or drag down to move it lower.

Once you start dragging, you'll see a black bar appear on top of the selected layer. In the image below, I clicked on the circle layer and began dragging upward.

If you keep dragging higher or lower, then that black bar moves higher or lower as well. In the image below, I continued to drag upward so that the black bar is now on top of the square layer.

So when I release the mouse, the circle layer will now be on top of the square layer. And on the stage, the circle will now appear in front of the square.

Hiding layers

If you want to hide a layer and all of its contents, look for the eye icon and click on the dot that corresponds to the layer that you want to hide.

Once you click on the dot, it's going to be replaced with an X.

This means that the contents of that layer are no longer visible. To make them visible again, click on the X to bring back the layer's visibility. The X will turn back into a dot.

To hide all your layers at once, click on the eye icon itself. Then click on the eye again in order to make all the layers visible again.

TIP: If you hold down the alt (PC) or option (Mac) key while clicking on a dot, it's going to make all the other layers invisible instead, so that only the layer that you clicked on will be visible.

Locking layers

Beside the eye icon is a lock icon.

Clicking on the dots under this column will allow you to lock the layers. When a layer is locked, you won't be able to edit its contents. They will still be visible but they will be protected from any form of editing. You won't even be able to select the contents of a locked layer.

Working with multiple layers may take a bit of getting used to, but the benefits of working with layers will help keep your Flash project more organized.

The fill color vs the stroke color - Flash CS5 Beginners Tutorial

In the toolbar, you'll find two color boxes - one for the stroke color and one for the fill color:

The stroke color is for the pen, pencil, line and ink bottle tools:

So if you want to choose a color for any of the tools pictured above, make sure that you're choosing one from the stroke color box, and NOT the fill color box.

The fill color, on the other hand, is for the brush and paint bucket tools:

And if you are using any of the shape tools, then BOTH the fill and stroke colors can be used.

For shapes, the stroke color is for the outline of the shape, while the fill color is for the color inside the shape. In the image below, we see a circle with a black stroke and a red fill color.

To choose a fill or a stroke color, click on the fill or stroke color box to bring up the color swatches.

Then click on the desired color in order to select it.

Once you have your color selected, you can then choose the desired tool and start drawing.

To choose NO fill or stroke color, click on the fill or stroke color box to bring up the color swatches. And then click on the white square with a diagonal line that can be found at the top-right of the swatches.

PART 3 - Saving your Flash document and knowing the difference between the FLA and SWF files - Getting started with Flash CS5

• PART 1: Creating a new Flash document and choosing a workspace layout
• PART 2: The document window, the toolbar, and drawing on the stage with the brush tool
• PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files

Now that we have some artwork on the stage, let's go ahead and save our work. And in the process, we'll also learn about the two main file types associated with a Flash project.

Step 1

Let's first create a folder in which to save our document. Name this folder my-flash-project-[insert-your-name-here]. You can place this folder anywhere in your hard drive.

Step 2

Let's now save our Flash document.

To save your Flash document, go to File > Save As.

A dialog box for saving will come up. Let's name the file my-flash-document-[insert-your-name-here].fla. For format, make sure it says Flash CS5 Document. And then for the location in which to save the document, make sure you've selected the folder that you created in step 1. Then click on Save.

Step 3

After you've saved your document, open up your my-flash-project folder and take a look at the file you just saved.

This is your Flash document, commonly referred to as the FLA file (pronounced ef-el-ey) because it uses the .fla extension name. This is your main document. From this main document, you can export your Flash project into a variety of different formats. Let's take a look at one of those formats in the next steps.

Step 4

Go back to the Flash workspace where you have your Flash document open.

From the main menu, choose Control > Test Movie > in Flash Professional.

What we just did here is we previewed the movie. So you should see a preview window of your Flash project pop up.

The keyboard shortcut for testing a movie is ctrl + enter (PC) or cmd + return (Mac).

Step 5

Whenever you test a movie in Flash, you're actually generating a new file from that preview. Let's go back to the my-flash-project folder and open it up to view its contents. You should now see a second file inside the folder.

This new file that you see here is commonly referred to as a SWF file (pronounced swif). The SWF file is the compiled version of the FLA file. This is the format that can be embedded on a webpage. The SWF file is automatically generated whenever you test your Flash movie. If you make changes to the FLA file and then test the movie again, then the existing SWF file automatically gets updated with the new changes.

So these are the two main file formats associated with each Flash project that you create. The FLA file is your main file, which you can edit using the Flash authoring application. And the SWF file is the compiled version of your FLA file, which you can embed on a web page.

And that concludes this short tutorial series on Getting started with Flash CS5.

<< PREV: The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5 - PART 2