Learn Flash CS5 Tutorial
 |
What you’ll learn in this lesson:
|
|
This site provides you with a foundation for working with Adobe Flash. It is the first lesson in the Adobe Flash CS5 Digital Classroom book. For more Adobe Flash training options, visit AGI’s Flash training classes. | |
Flash CS5 Jumpstart
Whether you are a novice web designer or an experienced developer, Flash is a comprehensive tool you can use for site design, layout, and management. In this lesson, you’ll take a tour of Flash’s key features and get a better understanding of how web pages work.
Starting up
In this lesson, you will set up a new Flash document and work with several prepared files to explore Flash’s tools and features. If you haven’t done so already, install Flash Professional CS5 and the Adobe Media Encoder. Instructions for installation, system requirements, and information on how to use lesson files from the included DVD are in the Starting up section on page 3 of this book.
Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Flash workspace” on page 3.
You will work with several files from the fl01lessons folder in this lesson. Make sure that you have loaded the fllessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” on page 3.
|
|
See Lesson 1 in action! Use the accompanying video to gain a better understanding of how to use some of the features shown in this lesson. The video tutorial for this lesson can be found on the included DVD. |
What is Flash?
You may have heard about Flash and seen it on eye-catching web sites, online games, and banner advertisements. But did you know that you can use Flash for more than creating animated graphics? With Flash CS5 Professional, you can also manipulate video and sound, and even connect to databases to build web-based applications, such as shopping carts, or display news feeds of continuously updated information.
There are four key feature areas in Flash CS5 Professional:
Drawing environment. Flash features a complete set of drawing tools to handle intricate illustration and typography. Like its cousin, Adobe Illustrator CS5, Flash is a native vector-drawing application where you’ll create rich, detailed, and scalable digital illustrations. Flash supports Illustrator and Photoshop files in their native file formats, .ai and .psd, making it easy to work with your favorite applications. All the content you create in Flash or these other programs can be brought to life through animation and interactivity.
Animation. Flash creates lightweight animation that incorporates images, sound, and video, and can be quickly downloaded through the web. It has become a favorite—and essential—tool among web designers and developers who want to take their creativity to a whole new level. Flash animation is featured on web sites, CD-ROMs, and interactive games, and has become very popular for developing interactive, web-based advertisements. Flash’s compact files make it the ideal application for creating animated content, games, and applications for mobile phones and PDAs.
Flash supports traditional frame-by-frame animation as well as its own method of animation, known as tweening. With tweening, you specify an object to animate, create starting and ending frames, and Flash automatically creates the frames in between (hence tween) to create slick motion, color, and transformation effects. You’ll design your own Flash animations in Lesson 5, “Creating Basic Animation.”
|
|
|
Flash’s animation tweening generates slick animation between starting and ending frames. |
Layout. The Flash Stage gives you the flexibility to create extraordinary web site layouts without the design restrictions that are typical of HTML-based web pages. You can position content anywhere on the Flash Stage with flexibility and precision, taking your layouts far beyond the limitations of static web pages. Flash movies can also include any typefaces you choose, allowing you to use fancy typography and unusual fonts freely on your web pages, which is typically difficult outside of Flash.
Programming. Hidden beneath the beauty of Flash Professional CS5 is the brain of ActionScript, a powerful, built-in scripting language that extends your capabilities beyond simple design and animation. With basic ActionScript, which you’ll learn about in Lesson 9, “Introducing ActionScript,” you can control movie playback or give functionality to buttons. If you venture deeper, ActionScript can turn Flash into a full-fledged, application-building environment to create shopping carts, music players, games, and mobile phone applications.
|
|
|
Flash can develop lightweight games for phones, PDAs, and other consumer devices. |
About Flash Player
The Flash Player is a standalone application found most often as a plug-in to such popular browsers as Internet Explorer, Safari, and Firefox. The Flash Player is required to play compressed Flash movies (.swf files), much like a movie projector is needed to play film reels.
The Flash Player is much more than just a playback machine, however. It reads instructions written in ActionScript to add rich interactivity to your movies.
As of this writing, the Flash Player is installed on more than 99 percent of Internet-enabled computers, so a majority of your online audience is already equipped to view your Flash creations. For users who do not have Flash Player installed, it is available as a free download from the Adobe web site, adobe.com.
Flash Player 10, including both a standalone application and browser plug-in, is automatically installed with the Flash Professional CS5 application.
Flash file types
You’ll work with two types of files in Flash: .fla and .swf. Each one has a very specific purpose in the process of creating your Flash movie.
When you create and save a new document, Flash generates an .fla (Flash authoring) document. These are the working documents you’ll use to design, edit, and store resources such as graphics, images, sound, and video. Additionally, each .fla document stores its own unique settings for final publishing. Because they are intended for designing and editing, .fla files can’t be viewed with the Flash Player—they’re used as the foundation to publish your final movie files in the .swf file format.
Shockwave Flash, or .swf, files are completed, compressed movie files exported from the Flash Professional CS5 application. These files, created from your original .fla authoring files, are the only format the Flash Player can display and play. Although you can import .swf files into the Flash Professional CS5 application, you cannot edit them; you will need to reopen the original .fla files to make changes or additions.
Now that you know what you’re going to be working with, it’s time to get your first Flash document started and begin exploring the Flash Professional CS5 workspace.
Creating a new document
Before you can draw or animate, you need to create a new document, or more specifically, an .fla file where all your work takes place. You can create and open documents from the Welcome Screen or from the File menu at the top of the screen.
The Welcome Screen is the launch pad for creating and opening files, including handy, built-in sample templates for common document types, such as advertising banners and graphics for cell phones. The Welcome Screen appears when Flash is first launched or when no documents are open in the application.
|
|
|
The Welcome Screen is the launch pad for new documents, including many templates for common projects. |
1 To create a new .fla document using the Welcome Screen, open Flash CS5 Professional. If the application is already open, close any files that are currently open using File > Close All.2
2 From the Create New column in the middle of the Welcome Screen, select ActionScript 3.0. Your workspace, including the Stage, Timeline, and Tools panel, appears.
3 Alternatively, you can create a new .fla document using the File menu. If you already created a new document using the Welcome Screen, this is not necessary.
To create a new document from the File menu, choose File > New. The New Document dialog box appears. Select ActionScript 3.0, and press OK to create the new document. Your workspace appears.
Setting up your new document
Now that you’ve created your new Flash file, take a moment to specify some important settings for it. These settings, or properties, will prepare your document before you get to work.
1 Choose Modify > Document or use the keyboard shortcut Ctrl+J (Windows) or Command+J (Mac OS) to open the Document Properties dialog box.
2 In the Width and Height text fields, type 500 and 300, respectively, to set the size of your movie. These dimensions set the width and height of the Stage, measured in pixels. The size of the Stage is identical to the size of your final movie, so make sure the size accommodates the design you want to create.
3 Click on the Background Color swatch (
) and the Swatches panel appears. This lets you choose the color of your Stage and, in turn, the background color for your final movie (.swf file) when it’s published. If necessary, set the background color to white (#FFFFFF).
4 Click on the Frame rate indicator and type 30 in the Frame rate field to set your movie’s frame rate to 30 fps (frames per second). The frame rate determines the playback speed and performance of your movie. You’ll learn more about fine-tuning your frame rate in Lesson 6, “Advanced Animation.”
|
The Match to Printer option sets your new document to match the paper size of your default system printer. This option is typically set to Default, requiring you to specify the width and height, or use the default Dimensions settings stored in Flash. |
5 From the Ruler units drop-down menu, choose Pixels, if it is not already selected, to define the unit of measurement used throughout your Flash movie, including rulers, panels, and dialog boxes.
6 Press OK to exit the Document Properties dialog box and apply these settings. Leave the new document open. You’ll save it in the next part of this lesson.
|
|
|
Use the Document Properties dialog box to specify settings. |
|
If you are new to designing for the web, the concept of pixels may feel a bit alien to you. It helps to remember that there are generally 72 pixels in one inch for size calculation. If you prefer, you can use the Document Properties dialog box at any time to change the Ruler units for your file to a different unit of measurement. |
Saving your Flash document
Your new document should be saved before starting any work or adding any content. By default, the application saves documents in Flash CS5 (.fla) format.
1 Choose File > Save.
2 In the Save As dialog box that appears, type fl0101_work.fla into the Name text field. Navigate to the fl01lessons folder, and press Save. Choose File > Close to close the document.
|
|
|
Use the Save dialog box to choose a name and location for your new file. |
|
Always include the .fla extension at the end of your filename to make it easy to identify the file format. |
To share your work with designers using Flash CS4, you can choose to save your document in Flash CS4 format. Flash Professional CS5 format files will not open in Flash CS4 or earlier. Flash CS5 Professional, however, can open files created in Flash CS4 or earlier.
|
Get started with sample templates |
|
Flash includes a variety of sample templates to streamline the process of setting up common Flash projects. Creating files from these templates will pre-configure options such as document size and ActionScript version. Choose File > New and click on the Templates tab to view Flash’s included templates. In the Advertising section, templates include common banner sizes. Be aware that creating files from these templates sets the Flash player and ActionScript versions extremely conservatively for maximum compatibility. If you were planning on using the latest and greatest techniques and features in your project, this may be constricting. New templates have been added for Animation, Banners, and Media Playback, and the Presentations templates have been enhanced for Flash Professional CS5. Sample Files, including animation examples, have been added as well. For more information on these new templates, see Lesson 15, “What’s New in Adobe Flash CS5?.” |
Opening documents
Knowing how to open documents is as important as knowing how to save them. In addition to files created in Flash CS5 Professional, such as those included with this book, you can open documents created in previous versions of Flash. The steps are simple.
1 Choose File > Open. Use the Open dialog box to locate the fl0101_work.fla file you previously saved into the fl01lessons folder.
2 Select the fl0101_work.fla file, then press Open. Leave this file open. You will be using it in the next exercise.
|
Don’t confuse the Open command with the Import options also found in the File menu. To access files created in other applications, such as Photoshop or Illustrator, you must use the Import menu. Importing files from other applications is explored in detail in Lesson 8, “Working with Imported Files.” |
If you want to reopen a document on which you have recently worked, there’s a shortcut. To list the last ten documents you’ve opened, and to reopen one, choose File > Open Recent, then select the file you need.
|
|
|
Choose File > Open Recent to access the last ten documents opened in Flash. |
|
You can also open files using the Open button ( |
) at the bottom of the Open Recent Items column on the Welcome Screen. Above this icon, you’ll see the last several documents you worked on; this is a useful alternative to the Open Recent menu option.The Flash workspace
Now that you know how to create, save, and open Flash documents, you’re ready to get familiar with the workspace where you’ll spend your time creating Flash content.
The Stage and work area
After you create a Flash document, the center of your screen, called the Stage, is where the action happens. The Stage is the visible area of your movie, where you place graphics and build animations. By default, the Flash Stage appears white, but, as you saw earlier, you can change this from the Document Properties dialog box using the Modify > Document command.
The gray area surrounding the Stage is the work area; artwork you place or create here is not included in your final movie. Think of this area as the backstage; for instance, you can animate a character to enter from the work area onto the Stage. The work area is also a good place to store objects that are not ready to appear in your movie. The Stage reflects the actual size of the movie you create when it is published.
|
|
|
A. Work area. B. Stage. |
The Flash Tools panel
The Flash Tools panel includes everything you need to create, select, or edit graphics on the Stage. You can use the double arrows at the top of the Tools panel to collapse the panel to icon-only view, or to expand the panel and see all of the tools.
|
|
|
The Tools panel. |
Selection tools
|
Icon |
Tool Name |
Use |
Where It’s Covered |
|
|
Selection |
Moves selections or layers. |
Lessons 1, 2 |
|
|
Subselection |
Selects and moves points on a path. |
Lesson 2 |
|
|
Free Transform |
Resizes, rotates, and skews objects. |
Lesson 5 |
|
|
Lasso |
Makes selections. |
Lesson 3 |
|
|
3D Rotation |
Rotates objects in 3D space |
Lesson 6 |
Drawing and Text tools
|
Icon |
Tool Name |
Use |
Where It’s Covered |
|
|
Pen |
Draws a vector path. |
Lesson 2 |
|
|
Text |
Creates a text box. |
Lesson 2 |
|
|
Line |
Draws straight lines. |
Lesson 2 |
|
|
Shapes |
Draws vector shapes. |
Lesson 2 |
|
|
Pencil |
Draws freehand paths. |
Lesson 2 |
|
|
Brush |
Draws freehand filled areas. |
Lesson 4 |
|
|
Deco |
Creates patterns using symbols |
Lesson 4 |
Color tools
|
Icon |
Tool Name |
Use |
Where It’s Covered |
|
|
Ink Bottle |
Applies or modifies strokes. |
Lessons 1, 2, 3 |
|
|
Paint Bucket |
Applies or modifies fills. |
Lessons 1, 2 |
|
|
Eyedropper |
Samples colors and styles. |
Lessons 1, 2 |
|
|
Eraser |
Erases artwork. |
Not referenced in this book |
|
|
Bone |
Creates Inverse Kinematic objects |
Lessons 4, 6 |
Navigation tools
|
Icon |
Tool Name |
Use |
Where It’s Covered |
|
|
Hand |
Navigates the page. |
Lesson 7 |
|
|
Zoom |
Increases or decreases the relative size of the view. |
Lesson 6 |
Stroke and fill color selectors
|
Icon |
Tool Name |
Use |
Where It’s Covered |
|
|
Stroke Color |
Selects stroke (outline) color |
Lesson 3 |
|
|
Fill Color |
Selects fill (inside) color |
Lesson 3 |
|
|
Default Stroke/Fill |
Sets stroke and fill to default colors: black and white. |
Lesson 3 |
|
|
Swap Colors |
Swaps stroke and fill colors |
Lesson 3 |
|
|
No Color |
Sets selected color to none |
Lesson 2 |
Tool options
|
Icon |
Tool Name |
Use |
Where It’s Covered |
|
|
Snap to Objects |
Enables snapping between objects on the Stage. |
Lesson 5 |
The Property Inspector
By default, the Property Inspector appears on the right side of your Flash workspace. Grouped with the Library panel, it displays properties and options for objects selected on the Stage, and also allows you to modify them. The Property Inspector is contextual, and so the information it displays is specific to the tool or object you select.
The Property Inspector is an essential part of the Flash workflow; it can display and set an object’s properties, including width, height, position, and fill color. Let’s take a look at the Property Inspector in action.
1 If the fl0101_work.fla file is not still open from the last exercise, choose File > Open to reopen it from inside the fl01lessons folder. Select the Rectangle tool (
) from the Tools panel.
2 At the bottom of the Tools panel, click the Fill Color swatch (
). When the Swatches panel appears, choose a yellow shade from the right side of the Swatches panel.
|
|
|
Choose fill and stroke colors using the swatches at the |
3 Move your cursor to the center of the Stage. Click and hold, then drag to draw a new rectangle. Release the mouse button after you have created a rectangle at the center of the Stage.
|
|
|
To draw shapes on the Stage, select a Shape tool, |
4 Choose the Selection tool (
) from the top of the Tools panel, and double-click the fill of the new shape to select it. If it’s not already visible, click on the Property Inspector on the right side of the workspace to open it, and notice that it now displays the selected shape’s width (W) and height (H) in pixels. Above the width and height, the object’s X and Y positions on the Stage are also displayed.
5 Click the underlined number next to W: to highlight the current value, then type 250 to set the rectangle’s width. Press Enter (Windows) or Return (Mac OS). Use this same method to set the height to 150.
|
|
|
You can set properties for a selected shape using |
6 Choose the Text tool (
) from the Tools panel. Click above the new rectangle you created and type the phrase Flash CS5. If it’s not already visible, click to open the Property Inspector, and notice that it now displays text options such as font and size.
|
|
|
When text is selected, the Property Inspector displays |
7 Click and drag inside the new text box to select all the text. In the Property Inspector, locate the Family drop-down menu and choose Arial (or, if that’s unavailable, Verdana). Click on the Size and set the type size to 45.
8 In the Property Inspector, click the Color swatch and choose a blue shade from the Swatches panel that appears to change the color of your type. In this exercise, the color #000099 was used.
|
|
|
Select and format type directly from the Property Inspector. |
9 Choose File > Save to save your work, then choose File > Close.
In addition to text and graphics, the Property Inspector also works with the Timeline, allowing you to set options and view information for specific frames. You will use this essential tool throughout the lessons to modify objects on the Stage, and frames in the Timeline.
|
|
|
The Property Inspector shows options for an active tool or information |
Panels and panel groups
The Flash workspace is extremely flexible. It is organized into a series of panels, many of which you’ll become quite familiar with, including the Library panel, Property Inspector, and Timeline. You’re free to arrange any of these panels however you like. You can also open panels that are not available in the default workspace and arrange, group, and resize them to suit your needs.
|
|
|
Panels can be freely repositioned, resized, and grouped. |
You’ll explore the workspace in more detail in Lesson 7, “Customizing Your Workflow,” but there are a couple of things that you should be aware of in the interim.
Eventually you’ll want to take control of your workspace and customize it to your preference, but for now, the flexibility of the workspace might be more confusing than advantageous. If you mistakenly drag panels around and start losing them, you can always reset your panels to their default positions by choosing Window > Workspace > Essentials. If you’re migrating to Flash CS5 from an earlier version, you may also be interested in the Classic option found in this menu. For the sake of consistency, this book uses the default CS5 workspace.
|
|
|
Choose Window > Workspace > Essentials, then choose Workspace > Reset Essentials |
It’s also important to note that each panel features a panel menu that can be accessed from the button in the top-right corner. This menu contains options that may or may not be available inside the panel. Sometimes this menu is superfluous; sometimes it’s integral. Just remember to keep it in the back of your mind. This menu is usually the first place to look if you can’t find an option that you’re looking for.
|
|
|
Panel menus are accessed using the button in the top-right corner. |
The Timeline
The Flash Timeline is the heart of the action, where you create animations and sequence graphics with sound, video, and controls. The Timeline comprises frames, each one representing a point in time, just like a historical timeline. Graphics and animations are placed at specific points, or keyframes, along the Timeline to create sequences, slide shows, or movies. You can place ActionScript on individual keyframes to control playback and add interactivity, or place sounds along the Timeline to add sound effects, music, and dialogue.
|
|
|
A. Click and drag to undock the Timeline from the document window. B. Frames. C. Timeline panel menu. |
The Timeline is comprosed of layers, which behave like transparent pieces of film stacked on top of one another. Each animation and piece of artwork can be placed on its own individual layer, which helps you organize and manage your work. If you’ve worked with other Adobe CS5 applications, such as Illustrator, Photoshop, or InDesign, you may already be familiar with the power and flexibility of layers.
Like all panels, the Timeline has a panel menu. Most of the options included in the Timeline’s panel menu relate to customizing its display. Here you can adjust the size of layers and frames and turn on Preview mode to display the objects included on each layer as a thumbnail in the Timeline.
|
|
|
Change the Timeline settings according to how you’d like it to appear. |
In this exercise, you’ll explore a Timeline with multiple keyframes, animations, and layers to see how a typical Flash document looks.
1 Choose File > Open, and select the fl0103.fla document inside the fl01lessons folder. Press Open to open it for editing.
2 Examine the Timeline below the Stage. You’ll see that it contains a layer, with a layer folder above it. Layer folders can contain layers and are used to organize the Timeline when layers start to add up. Click the arrow to the left of the Gears layer folder to expand it and reveal its contents. The three indented layers under the Gears name are the layers that are inside the folder.
|
|
|
Click the arrow to the left of a layer folder to expand it. |
3 Each of the three layers contains a separate animation that is marked at the beginning and end with a keyframe. Keyframes are special frames that are created along the Timeline where you want to introduce or remove a graphic, start or end an animation, or trigger something to happen with ActionScript. A blue background on frames indicates a Motion tween animation. Press Enter (Windows) or Return (Mac OS) to play the Timeline.
4 Look at Layer 4 in the Timeline, which contains several consecutive keyframes. Click once on each keyframe to jump to that frame and see what it displays at that specific point in time.
5 To shuttle through the Timeline, grab the playhead at the top (indicated by the red marker), and drag it in either direction.
|
|
|
Scrub back and forth in the Timeline by dragging the playhead. |
6 Choose File > Close to close the current document. If prompted to save any changes, press No (Windows) or Don’t Save (Mac OS).
|
Tabbing between open documents |
||
|
When you have more than one document open at a time, each document displays its own tab at the top of the document window. Click on a document’s tab to switch to it and bring it forward for editing. To close the active document, you can choose File > Close, or use the small x that appears at the top of the document’s tab. To close all open documents at once, choose File > Close All.
|
|
The Swatches panel |
||
|
You’ll see the swatch icon (
The six-character code at the top of the Swatches panel is hexadecimal code, the standard color-coding system for the Web. As you choose colors from the Swatches panel, you’ll see the hexadecimal value for the selected color displayed at the top. The Color Picker in Adobe CS5 applications such as Illustrator and Photoshop also features hexadecimal values, so you can easily match colors between applications by copying and pasting the code shown. |
) quite a few times in Flash—it opens the Swatches panel, which is used to set colors for backgrounds, fills, outlines, and type. You can choose from over 200 color presets and seven preset gradients, or create your own. You will learn how to add your own custom colors and gradients to the Swatches panel in Lesson 2, “Getting Started with the Drawing Tools.”
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 fl0102_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 Choose File > Open and open the fl0102.fla file located in the fl01lessons folder.
2 Choose File > Save As; the Save As dialog box appears. In the Name text field, type fl0102_work.fla, then navigate to the fl01lessons folder and press Save.
3 Choose 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, making sure that the registration circle appears on the lower corner as shown in the image below, until it joins with the body. Release the mouse button.
|
|
|
Use the Selection tool to select and move objects |
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.
|
|
|
Hold down Alt (Windows) or Option (Mac OS) and drag |
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 in the right direction.
|
|
|
The Transform menu features commands that flip, skew, and rotate a selected object. |
7 Still using 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, type 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 percent of its original size. If necessary, use the Selection tool to reposition the fin after reducing its size.
|
|
|
The Transform panel precisely resizes |
|
Notice the Constrain button ( |
) next to the Transform panel’s horizontal and vertical scale text fields. When you check this box, you can enter a size in only one field and Flash automatically resizes the selected object proportionally. A Reset button (
) is also included to allow you to reset the selected object to its original proportions.10 To add an eye to your fish, select the Oval tool (
) from 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 The Oval Tool Properties let you manipulate shapes even further; here, you’ll add an inner radius to ovals to create ring-style shapes. In the Property Inspector, type 50 in the Inner radius text field and press Enter or Return.
12 Select Layer 1 in the Timeline by clicking on the name, and click and drag on the left side of the fish to draw a small oval, which will serve as the fish’s eye. After you finish drawing the eye, make sure it is de-selected to avoid removing color from the fish below.
|
To create perfect circles, hold down the Shift key while drawing ovals. |
|
|
|
Use the Oval tool with an inner radius to add |
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.
|
|
|
Give your fish more depth by filling it with a gradient from your Swatches panel. |
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 that both are selected at the same time. 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, click and hold the Paint Bucket tool (
) and select the Ink Bottle tool (
) from the menu that appears. The Ink Bottle tool 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 (orange) into the hexadecimal field at the top-left corner of the Swatches panel that appears. Press Enter or Return to set this color.
6 Click on the Style menu that appears below the color swatches. Choose the ragged style from the drop-down menu. Click on the edge of the fish body to apply the new stroke color and style.
|
|
|
Choose a stroke color and style and apply them using the Ink Bottle tool. |
7 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.
|
|
|
The Selection tool can bend straight lines or distort shapes. |
9 Click and hold the Oval tool (
) in the Tools panel and select the Oval Primitive tool (
). Click the Fill color swatch at the bottom of the Tools panel, and choose a light blue color; #6699FF was used in this example. Click the Stroke color swatch and set your stroke color to No color (
). Set the Inner Radius to 50 in the Property Inspector.
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.
|
|
|
Use the Oval Primitive tool to draw bubbles in front of your fish. |
12 Choose File > Open, select the fl0102_done.fla file in the fl01lessons folder, and press Open to open it. Compare your work against the completed file fl0102_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 2, “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 Copy Motion and Paste Motion features.
1 Choose File > Open and, when prompted, select the fl0101.fla file in the fl01lessons folder. Press Open. Two tortoises appear on the Stage. In the next steps you’ll animate the big turtle crossing the stage.
2 Using the Selection tool (
), click on the big turtle. Notice that the Big Turtle layer in the Timeline is highlighted in blue, along with the 60 frames included in the Big Turtle layer. Right-click (Windows) or Ctrl+click (Mac OS) on the big turtle and choose Create Motion Tween from the context menu.
|
|
|
Right-click/Ctrl+click on the Big Turtle and choose Create Motion |
Motion tweens allow you to easily create animations by simply adjusting an object’s properties at different points on the Timeline. Flash takes care of all the heavy lifting.
3 Click and drag the playhead to frame 60.
|
|
|
Drag the playhead to frame 60. |
4 Click and drag the big turtle to the left side of the stage (just before the head reaches the edge). When you release the mouse, you will see a green motion spline appear between his old location and his new one.
|
|
|
The big turtle repositioned. |
5 Press Enter or Return to preview your first animation. It feels good, doesn’t it?
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 Support Center. The Support forum launches in your system’s default browser.
2 In the search text field in the upper-left corner, enter terms you want to explore, then press the arrow to the right of the text field to select your desired application from the Adobe Community Help drop-down menu.
3 To post topics, questions, or replies, click the Account menu 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.
|
Going beyond Flash with Silverlight & Expression Studio |
|
Many Flash designers are expanding their skills into designing user interfaces for software applications and mobile devices using Expression Blend, which lets you create Silverlight applications that run on Mac OS, Windows, and mobile devices. Adding Silverlight design capabilities to your Flash knowledge enables you to use your design skills on a wider variety of interactive projects. The Expression tools are built more for designing the interface of applications, while Flash is used primarily for creating animations and games. While Silverlight applications work on both Mac OS and Windows, the Expression Studio tools that are used to create Silverlight applications are available only for Windows. If you are a full time student, you may be eligible to receive Expression Studio at no cost through the Dreamspark program at dreamspark.com and the Expression design tools are also available at no cost to web design firms with fewer than 10 employees through the Website Spark program at microsoft.com/websitespark.. |
Self study
Create and save a new document in the fl01lessons folder. Use the Property Inspector to set dimensions, background color, and frame rate. Experiment with the drawing tools you’ve learned so far, to create artwork on the Stage, and use the Selection tool to move and adjust the artwork as needed.
To get a feel for the workspace, experiment with different panel setups and positions. The Workspace menu (Window > Workspace) features some presets that show how you can maximize the space in your work area.
Try animating the little turtle in fl0101.fla. Experiment with animating other properties using the Property Inspector.
Review
Questions
1 From what two locations can you open a document that was previously open?
2 What panel allows you to view information about a selected object, or set options for an active tool?
3 What method does Flash use to automatically create animation from a starting and ending point?
Answers
1 From File > Open Recent, or the Open a Recent Item column on the Welcome Screen.
2 The Property Inspector.
3 Tweening.
Adobe Flash Training Class Locations
AGI offers regularly scheduled and private Flash classes at our training centers. Adobe Flash Training in or near Boston, Chicago, New York City, Philadelphia, Orlando, and London. Visit our Flash training class locations pages.
- Boston Flash Training
- New York, NY Flash Training
- Philadelphia Flash Training
- Orlando Flash Training
- Chicago Flash Training
- London Flash Training
Additional Resources for Learning Flash
Dynamic Learning:
Flash CS5 Professional
AGI Instructors are the authors of the Adobe Flash Professional CS5 Digital Classroom book..
Adobe Flash CS4 Pro Digital Classroom
AGI Instructors are the authors of the Adobe Flash CS4 Professional Digital Classroom book..
Adobe Flash CS5
You can purchase the Adobe Flash Professional software or obtain a trial version of it at from the Adobe web site.
Related Links: Adobe Flash CS5 , Adobe Flash training videos , Adobe Flash Training book