Learn Flash CS3 Tutorial

This site provides you with a foundation for working with Adobe Flash. Follow along with the tutorial, download the lesson files, and view the videos. For more Adobe Flash training options, visit AGI’s Flash training classes.

Excerpt from Dynamic Learning - Flash CS3 Professional

Practicing with the Flash tools

Now that you’ve had a tour of the Flash tools and workspace, it’s time to take them for a test drive. In the following exercises, you’ll complete the illustration shown in fl0202_fish.fla while getting the feel for the selection, drawing, and transformation tools. You’ll also use Flash tweening to create your first animation.

The drawing and selection tools in action

Your first steps will be to create and modify shapes and freehand artwork with the drawing tools, and then fine-tune your work with the selection tools. The selection tools work as a team with the drawing tools to position and modify shapes, illustrations, and type.

1 If you haven’t done so already, open the fl0202.fla file located in the fl02lessons folder.

2 Choose File > Save As; the Save As dialog box appears. In the Name text field, type fl0202_work.fla, then navigate to the fl02lessons folder and press Save.

3 Select the Selection tool () in the Tools panel. This versatile tool can select, move, and manipulate objects directly on the Stage.

4 On the Stage, click once on the fin above the fish’s body to select it. Click and drag it downward until it joins with the body. Release the mouse button.

5 You need to make a copy of this fin to use on the bottom of the fish. The easiest way is to clone it, or to drag a copy from the original. To do this, click the top fin once to select it, then, while holding the Alt (Windows) or Option (Mac OS) key, click and drag a copy away from the original fin.

6 Because the new copy will serve as the bottom fin, you’ll need to flip it around so it’s pointed in the proper direction. Click once to select the new fin copy, and choose Modify > Transform > Flip Vertical. This Transform menu command flips the fin so it’s pointed the in the right direction.

7 Continuing to use the Selection tool, click and drag the new fin copy to the bottom of the fish’s body, and leave it selected.

8 The new fin is almost there, but it’s a bit big. There are several places within Flash where you can resize an object, including the Transform panel; choose Window > Transform to open it.

9 With the new fin selected, enter 60 in the horizontal and vertical Scale fields at the top of the panel and press Enter or Return to commit the change. The fin is reduced to 60% of its original size.

The Transform panel precisely resizes objects by a set percentage.

Notice the Constrain checkbox next to the Transform panel’s Width and Height scale text fields. When you check this, you can enter a size in only one field and Flash will automatically resize the selected object proportionally.

10 To add an eye to your fish, select the Oval tool () on the Tools panel. You may need to click and hold on the Rectangle tool () to access this tool. At the bottom of the Tools panel, click on the Fill color swatch and choose black as the fill color.

11 Flash CS3’s Smart Shapes feature lets you manipulate shapes even further; here, you’ll add an inner radius to ovals to create ring-style shapes. If the Property inspector is not open, choose Window > Properties > Properties to open it. Enter 50 in the Inner radius text field and press Enter.

12 Select Layer 1 in the Timeline, and click and drag on the left side of the fish to draw a small oval, which will serve as the fish’s eye.

To create perfect circles, hold down the Shift key while drawing ovals.

Use the Oval tool with an inner radius to add an eye to your fish.

Congratulations! You’ve designed your first graphic object in Flash. However, this fish is rather basic.

Using gradient and color tools

Now you’ll add some depth and more vibrant color to your fish, using the gradient colors and artistic stroke styles.

1 Choose the Selection tool () from the Tools panel, and click once inside the body of the fish; a dotted pattern indicates the fill area is selected.

2 To change the body’s color, click on the Fill color swatch at the bottom of the Tools panel. In the resulting Swatches panel, choose the orange/yellow gradient located at the bottom of the panel to apply it to the selected area. Deselect the fish by choosing Edit > Deselect All or by clicking offstage in the gray work area.

3 The Eyedropper tool () enables you to sample a color from one object and transfer it to another. You’ll use it to apply the body color to the fish’s fins. Using the Selection tool (), hold down the Shift key and click once on each fin so both are selected at once. Select the Eyedropper tool from the Tools panel. Click once on the body of the fish to sample the new color and apply it to the selected fins.

4 Choose Edit > Deselect All to deselect all items on the Stage. In the Tools panel, select the Ink Bottle tool (), which lets you change an object’s stroke color. You’ll use the Property inspector to set a stroke color and style to apply.

5 In the Property inspector, click the Stroke color swatch and type #FF6600 into the hexadecimal field at the top-left corner of the Swatches panel that appears. Press Enter to set this color, then close the Swatches panel.

6 Click on the Stroke Style menu that appears to the right of the color swatch. Choose the rough pencil style from the drop-down menu.

7 Click on the edge of the fish body to apply the new stroke color and style. Click on the edge of the remaining two fins and the gill line to apply the same color and stroke style to all three. Choose Edit > Deselect All to deselect any active items on the Stage.

8 Choose the Selection tool from the top of the Tools panel. Move the pointer slightly to the right of the gill line without touching it; a small curve appears below your pointer. Click and drag slightly to the right to bend the gill line into a curve.

9 Select the Oval tool () from the Tools panel. Click the Fill color swatch at the bottom of the Tools panel, and choose a light blue color. Click the Stroke color swatch and set your stroke color to No color ().

10 While holding down the Shift key, draw several ovals in front of the fish to create bubbles.

11 Choose File > Save to save your work.

12 Choose File > Open, select the fl0202_done.fla file in the fl02lessons folder, and press Open to open it. Compare your work against the completed file fl0202_done.fla. Choose File > Close All to close all currently open documents.

You’re off to a good start with the drawing tools. You will work with these tools in more depth in Lesson 3, “Getting Started with the Drawing Tools.”

Animation in action

Flash is known for powerful, yet easy-to-use animation that you create directly in the Timeline. The Timeline displays content over periods of time, represented on the Timeline in frames. Each frame can be set as a keyframe, where items can be placed and animation can start or end.

Flash can generate animation with little more than a starting point and ending point; this method is known as tweening. You tell Flash where you want an object to start and stop its animation, and it figures out the frames in between. To apply the same animation behavior to more than one object on the Stage, you’ll use the new Copy Motion and Paste Motion features.

1 Choose File > Open and, when prompted, select the fl0201.fla file in the fl02lessons folder. Press Open. Two tortoises appear on the Stage. In the next steps, you’ll apply an animation to one and then copy it to the other.

2 Click directly on the first frame in the Big Turtle layer in the Timeline; this will be the starting position for the first turtle. Click on Frame 60 on the same layer; on this frame, the turtle is positioned on the left side of the Stage. You’ll need to create animation between these two frames to get the turtle moving.

3 Choose Window > Properties > Properties to open the Property inspector. Click directly on Frame 1 in the Big Turtle layer to select it. Click on the Tween menu in the Property inspector and choose Motion.

4 An arrow on a blue-shaded area appears between Frames 1 and 60 to let you know that Flash successfully created the tween animation. Press the Enter (Windows) or Return (Mac OS) key to start the Timeline and play your movie. The turtle should move across the screen—your first animation!

Copying and pasting motion between objects

Now you’ll put the second turtle in motion to follow his big brother. Rather than recreating the same animation, you can copy the tween from the first turtle and apply it to the second, using Copy Motion and Paste Motion.

1 Double-click the blue-shaded area between Frames 1 and 60 to highlight the entire tween (animation).

2 Right-click (Windows) or Ctrl+click (Mac OS) anywhere on the selected area. From the Timeline menu that appears, choose Copy Motion.

3 On the Little Turtle layer, click on the first frame to select it. Right-click (Windows) or Ctrl+click (Mac OS) to open the Timeline menu. Choose Paste Motion Special, which enables you to choose specific aspects of the animation to apply before pasting.

4 In the Paste Motion Special dialog box that appears, uncheck the Horizontal scale and Vertical scale options. This ensures that the second turtle isn’t resized to match the first. Leave the rest checked, and press OK. Flash applies a tween to the second turtle, as indicated by the arrow and shaded area.

5 Press Enter (Windows) or Return (Mac OS) to play the animation.

6 Choose File > Open; locate the fl0201_done.fla file and press Open. Compare your work with the completed version of the lesson.

Tweening and animation are explored in more detail in Lesson 6, “Creating Basic Animation.”

Getting help

If at any point you can’t find a specific command, want to know how a tool works, or want to learn how to complete a certain task, you can always consult the Flash Help menu. The Help menu launches the Help viewer (an all-in-one glossary, troubleshooter, and reference manual), and also provides links to key Adobe forums and support centers.

The Flash Help viewer is a good source for quick answers.

1 Choose Help > Flash Help.

2 When the panel appears, use the categorized list on the left, or type in a search term to get help on a specific topic or keyword.

Support forums

Adobe’s Flash forums can be a rich source of answers, ideas, and tips from experts and other avid Flash users. You can search for answers to common questions or post your own topics and questions.

1 Choose Help > Flash Developer Center. The Support forum launches in your system’s default browser.

2 In the search field in the upper right corner, enter terms you wish to explore, then press the Search button.

3 To post topics, questions, or replies, click the Your Account link at the top of the page to log in with your Adobe ID.

You must register to post questions or replies to Adobe’s Flash forums.

Moving forward

In the next chapter, you’ll put pen to paper (or mouse to Stage, rather) to get your creativity flowing with the Flash drawing tools. Now that you’ve become familiar with the workspace, things should be just a bit easier. Don’t hesitate to reference this chapter again to refresh your memory.

Previous | 1 2 3

Order the Dynamic Learning: Flash CS3 book, authored by AGI Flash Training Instructors.