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

What you’ll learn in this lesson: Using Flash’s key features and capabilities Exploring the Flash Player Saving and opening documents Examining the Flash workspace Understanding illustration and animation essentials

Flash CS3 Jumpstart

This lesson takes you through the basics you’ll need to get up and running with Flash CS3 Professional.

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.

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 fl02lessons 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 discussed in this lesson. Click here to view this lesson's training video

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 CS3 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 CS3 Professional:

Drawing environment. Flash features a complete set of drawing tools to handle intricate illustration and typography. Like its cousin, Adobe Illustrator CS3, Flash is a native vector-drawing application where you’ll create rich, detailed, and scalable digital illustrations. Flash now 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 via 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 websites, 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 6, “Creating Basic Animation.”

Layout. The Flash Stage gives you the flexibility to create extraordinary web site layouts without the design restrictions 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 CS3 Professional 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 10, “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.

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 96% 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 website, adobe.com.

Flash Player 9.0, including both a standalone application and browser plug-in, is automatically installed with the Flash CS3 Professional 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 by 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 CS3 Professional 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 CS3 Professional 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 CS3 Professional 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 of 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.

To create a new .fla document using the Welcome Screen:

1 Open Flash CS3 Professional. If the application is already open, close any files that are currently open using File > Close All.

2 From the Create New column in the middle of the Welcome Screen, select Flash File (ActionScript 3.0). Your workspace, including the Stage, Timeline, and Tools panel, appears.

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.

1 Choose File > New. The New Document dialog box appears.

2 Select Flash File (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 Title field, enter My Flash Movie. The document title is visible only within the Flash CS3 Professional application, and a smart, short name can be helpful to identify the file’s purpose.

3 Enter This is my first Flash movie in the Description field. A description, like the title, is optional. It is very useful for including notes about the document to anyone working on your project.

4 In the Width and Height fields, enter 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.

5 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. Set the background color to white (#FFFFFF).

6 Enter 30 in the Frame rate field to set your movie’s frame rate to 30 fps (frames per second). Frame rate determines the playback speed and performance of your movie. You’ll learn more about fine-tuning your frame rate in Lesson 7, “Diving Deeper into 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.

7 From the Ruler units drop-down menu, choose Pixels to define the unit of measurement used throughout your Flash movie, including rulers, panels, and dialog boxes.

8 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 if you’re trying to calculate sizes. 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 CS3 (.fla) format.

1 Choose File > Save.

2 In the Save dialog box that appears, type fl0201_work.fla into the Name text field. Navigate to the fl02lessons 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 earlier versions of Flash, you can choose to save your document in Flash 8 format. Flash CS3 Professional format files will not open in previous versions of Flash, unless you set the format to Flash 8 when saving the file. Flash CS3 Professional can open files created in older versions of Flash.

Opening documents

Knowing how to open documents is as important as knowing how to save them. In addition to files created in Flash CS3 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 fl0201_work.fla file you previously saved into the fl02lessons folder.

2 Select the fl0201_work.fla file, then press Open. Leave this file open. You will be using it in the next exercise.

The Open command works only with .fla files. 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 9, “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 10 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 10 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 eight 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 invisible in your final movie. Think of this area as 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. Artwork and objects can be placed outside the Stage in the work area, but items in the work area are not visible in your final movie.

1 2 3 | Next

Flash Training Instructors.