Flash CS3 Tutorial

COMM/CISS 271

Advanced Web Design

Fall 2008 – Class Session #6

Instructor: C. M. Sturgeon

P a g e | 2

Table of Contents Flash CS3 Interface ........................................................................................................................................ 2

Interface and Tools ....................................................................................................................................... 3

Flash CS3 Timeline (Basic Components) ................................................................................................... 3

Flash CS3 Toolbar (Left-hand) ................................................................................................................... 3

Create a New Document in Flash CS3 ........................................................................................................... 4

Naming / Saving the Flash File .................................................................................................................. 5

Set up the Document Properties .............................................................................................................. 6

Adding text in Flash CS3 ................................................................................................................................ 7

Graphic symbols in Flash CS3 ........................................................................................................................ 8

Layers in Flash CS3 ........................................................................................................................................ 9

Animating text in Flash CS3........................................................................................................................... 9

What you have learned ........................................................................................................................... 13

Flash CS3 Interface Unlike other applications, Flash offers unique ways of accomplishing animations as well as vector-base drawings. The tools that are built-in Flash are diverse in nature. With Flash one can simply design graphic images with all of the provided tools or they can design full-blown websites with complete animation, interactivity, and sounds. Flash is also a platfor frequently used for designing interactive games. The advanced power of ActionScript language for programming offers the user opportunities that are seemingly only limited to one’s creativity and knowledge. This handout is to help everyone attain an understanding as to how all of the various components come together in an animation, as well as introduction to the majority of the tools. This handout will start with the introduction to the most prominent components of the Flash interface. As previous handouts, this one is divided into several sections with a header dividing them and in some cases a sub-header for more focus.

P a g e | 3

Interface and Tools

Flash CS3 Timeline (Basic Components)

Keyframes: The critical point in an animation, where an object begins and/or ends an action. Among other things, the object may move, fade, spin, or make sounds. A keyframe is inserted into a “blank” frame – as seen in the above image (all here are blank other than the first frame on “Layer 1.”

Timeline: This is where the keyframes are located and timed / positioned

FPS: The fps, specifies the rate of the animation. The higher the fps, the faster the object is in motion before completion; ultimately making the action shorter in time. High rate animations can make the file size larger.

Layers: The layers are within the timeline and can contain actions / motion for any given object. Layers allows the animator to separate parts of the animation, thereby giving them the unique option to “fly solo.”

Flash CS3 Toolbar (Left-hand)

The primary toolbar (stationary) contains the tools needed for most activities that take place in the designing of flash animations. The twelve specific items I selected and marked with an arrow below contain (usually) other tools within. These will be covered in more detail during class.

P a g e | 4

Create a New Document in Flash CS3

We will start this project by first creating a new Flash CS3 document. To do so, follow the numerical steps listed:

1. Open Flash CS3 (kind of obvious) 2. From the options that show on your screen, select “Flash File (ActionScript 3)

P a g e | 5

Now you have a new flash document on your screen; it should appear similar to the screenshot provided below:

Naming / Saving the Flash File

Before moving on to the next step, it is best to save your file first. As in most applications, just got to file then select save or Ctrl+S and name your file animation.fla.

P a g e | 6

Adobe Flash’s proprietary name extension is .fla however, this is not the extension that is used in your final production or movie as referred to in Flash. Viewers cannot see your creative animation with the .fla extension unless they have Adobe Flash CS3.

When you save your file, be intentional as to its location on your computer (i.e. desktop, My Documents etc.); this will save you a lot of time and headache in the future. This document will explain how to attain the extension needed for others to view on the web.

Set up the Document Properties

At the bottom of your screen, you will see properties options for your flash document.

1. First, change your background color by clicking on the palette located in properties.

2. I selected a dark gray for this particular animation tutorial. You may select your own color; just make sure you select either dark tones or light tones, as we want to have a contrast between the stage and the content.

3. As you can see in the screenshot above, we also have the option to see the stage size. The default setting is 550 x 400 pixels. We want to change this to a stage size of 950 x 700. This is done by clicking on the size option (i.e. 550x400 pixels).

4. After clicking on the numbers/dimensions, you will a dialogue box. The property changes will be Title, Description, Dimensions, & Background. All of these are seen on the screenshot shown on the following page.

P a g e | 7

Properties Dialogue Box 1

Adding text in Flash CS3

Let us start by adding text to the Flash document using the text tool; which is located on

the left-hand portion of tools and appears as the letter ‘T’.

Click on the text tool and then click on your Flash stage where you want your text to

appear; in this tutorial that will be on the upper portion of the stage. Avoid drawing out a

text box – this will cause problems later. Type a title for your document of your choice.

P a g e | 8

Note that while working on the text, their properties appear in the “Properties” window on

the lower portion of the screen.

From the properties settings you can:

1. Change the text color, size, and font face

2. Set it at static text or dynamic text (we will be using static text)

3. Set location of text based on the x and y location of your stage

4. Use filters to apply effects

Graphic symbols in Flash CS3

The concept and use of symbols in Flash CS3 is very important to understand. Within Flash there are three types of symbols; Movie clip, Button and Graphic. It is best to create symbols for everything that you put on the stage so that it is easy to manage and manipulate. All symbols will appear in the Library located on the right-hand side of the stage. If you do not see your library, press Ctrl+L and it will appear.

Now we need to convert the text we typed into a symbol. To do this:

Press F8 to convert your text to a symbol

You will now see a dialogue box appear for naming your symbol; it should appear as the image below, minus the name that I have given my text.

Properties Dialogue Box 2

P a g e | 9

Please note that I have select Movie clip as the type of symbol I have selected. In the same

box, give your symbol a name – I usually at _mc at the end of the name I give my Movie clip

symbol so I can recognize it quickly. In the naming, it is also a good practice to use the

underscore to connect words versus spacing.

Layers in Flash CS3

Layers in Flash CS3 is another important concept to understand. Using separate layers for separate symbols placed on the stage will allow you to manipulate each one differently.

You can also decide which ones come in front visually by placing them on a higher layer. You can lock layers and hide layers by clicking on the little dots below the eye and lock icons next to the concerned layer.

Give the layer that the text is sitting in, a name. To do this:

Double-click “layer 1” and change it to “Title” as shown in the image above.

Animating text in Flash CS3

We can animate the title, as it is a Movie clip.

Follow the steps in order to accomplish this goal:

1. Make sure the first keyframe is still selected as in the image below

2. Press the letter Q to execute the Free Transform Tool your text box of you title

should appear similar to the image on the following screenshot

P a g e | 10

The eight tiny squares on the edge of your text box are handles allowing use to resize,

reshape, skew, and more. In this tutorial, we want to simply resize the text to a smaller

size and keep it proportional. In order to do that, we will have to click on the corner of the

box on a handle and holding the shift key down, size the text inward (again, while on

keyframe 1). The holding of a handle should appear as the image provided below:

The final image in keyframe 1 should be similar to the result screen shot here:

While still in keyframe 1 we want to change the opacity of the text as well. Press the letter

V to change back to the selection tool. Click on your title as in the above screen image

showing the blue box around the text.

Once selected, go to properties where you will see an image as is shown below:

Click on the arrow next to color where the default is set as none and change it to be set on

alpha and to the right of that you will have the option to drop the alpha to anything

between 0 and 100. For this project we want to set it at 0. Screens #1 and #2 are

provided below:

1.

2.

P a g e | 11

In order to have an animation there must be multiple key frames involved as in an actual file type movie. On your timeline go to frame 20, as appears in the screen image below, and press F6 which is to insert keyframe.

After inserting a key frame on frame 20, go to your stage and you will see the image of your

transparent text with a blue frame around it. Click on this in order to make it visible and to

scale the text back to a larger size. The following image shows your text box once you click

on it, yet still invisible.

Now go to the properties section of the screen and increase the alpha to 100%.

To re-scale the text symbol to a desired size, again press the letter Q in order to use the free

transform tool. The image below shows how it should appear after you have rescaled the

image to a size of choice.

P a g e | 12

The motion portion comes at this point. Click on a frame between 1 and 20. In that frame, right-click and select Create Motion Tween. The corresponding image is below:

The timeline should now look like this: (NOTE: the line must be solid vs. dash)

After saving your project again (Ctrl+S); press Ctrl+Enter to see your animation.

As you can see from your preview of the animation, there is a small problem. The title

continues in a loop. The following steps will eliminate that problem.

1. Add a new layer and name it actions

2. Now go to the last frame on the Actions layer named and press F6 (insert keyframe)

P a g e | 13

3. While on this frame, which should be 20, press F9, which will open your Actions

dialogue box. In this box, type the command to stop the loop. That command is

Stop();

4. Press F9 again, and this will close your Actions dialogue box. Now you can test your

movie again by pressing Ctrl+Enter. Your animation should fade in and enlarge

now and come to a complete stop.

What you have learned

By going working through this tutorial, you have covered the following pieces of

information pertaining to Flash CS3:

F6 = Inserting Key Frames

F8 = Converting to Symbol

F9 = Opening ActionScript dialogue box

Ctrl+L = Opening library

Ctrl+Enter = View movie project

Q = Opening Free Transform Tool

V = Selection Tool (black arrow)

T = Opening Text tool

Tweening = inserting all frames in (be)tween in order to create animation

Alpha = Opacity settings

ActionScript command = the script to stop action – stop();

Assignment:

Based on this tutorial, create an animated title for your website, but personal, and one for your team. The one for the team can represent what your company intends on doing. The two will be treated as one assignment.