facebook google plus twitter
Webucator's Free Adobe Flash CS6/CC Tutorial

Lesson: Getting Started

Welcome to our free Adobe Flash CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Flash CS5 Training course.

Adobe Flash is an extremely powerful and flexible work environment. Over the years, it has improved tremendously and Flash CS5 is no exception. The current version builds upon Flash's strengths and adds some interesting new features, including:

  1. TLF Text: a new text engine supported in Flash Player 10.
  2. New Deco Brushes: many additional new brushes.
  3. Spring for Bones: allows IK (inverse kinematics) to look more realistic.
  4. Additional Code Tools: including a Snippets panel for ActionScript.

Lesson Goals

  • Get to know the work area.
  • Learn to create a new document.
  • Learn to use workspaces.
  • Learn to work with panels
  • Learn to preview your project.
  • Learn to publish your project.

Starting Flash and Opening a File

When you first open Flash, you will likely see the welcome screen with the red bar at the top (shown below). This screen shows many common tasks including creating a new document, opening recently used files and using pre-built templates. It even includes links to training videos and documentation for some common items under the heading Learn.

Before creating a new Flash file, you will need to know a few things about your audience:

  • What device will they be using? (A computer or mobile device?)
  • What version of the Flash Player will you require? (ActionScript 3.0 requires Flash Player 9 or newer. The new TLF text engine requires Flash Player 10.)
  • What size will the document be? (Are you building a 200 x 600 banner ad? Should it fill the screen?)

In most cases, you will click on ActionScript 3.0 to create a new document using the default size and settings. We will examine publish settings and options in later sections.

Getting to Know the Work Area

Some of the most important elements in the Flash work area are labeled on the graphic below:

  1. Tools: Includes frequently used tools such as selection tools, drawing tools, and text tools.
  2. Panels: Flash includes more than 20 panels that offer detailed control of objects, animation, and more. Most are disabled until a document is open. Here are some of the most important panels:
    1. Properties: a context-based panel which that properties of any selected object.
    2. Library: a collection of reusable objects called "Symbols."
    3. Align: allows many ways to align objects to each other or the stage.
  3. Timeline: a set of layers similar to Photoshop plus frames that span time.
  4. Change Workspace: allows for quick changes between different layout options.

Creating a New Document

Unless you expect to publish for an older version of Flash, you will likely select ActionScript 3.0 in order to create a new document.

Once you have a document open, several items on the screen will change. First, the Stage is visible. It is the white box in the middle of the screen. Anything that is placed in the stage area will be visible in the final output. Animations might start off stage and fly in before leaving off the other side of the Stage. To see the content on the Stage better, you might want to zoom in or out.

Note: Even objects off stage can sometimes become visible to users.

The Timeline is the area to organize the layers of items, and when they happen during the animation. The Timeline will be covered in detail later in the lessons.

Using Workspaces

Flash now comes with preset Workspaces that organize the screen automatically. Individual designers and developers like to customize the Flash screen by moving the panels and other screen elements to different positions. All of these Workspaces are customizable. If you would ever like to go back to the default layout for a Workspace, select Reset.

You may even save your own favorite layouts by selecting New Workspace.

Below are screen shots of some common Workspace layouts (Essentials, Designer, and Classic). Notice the Properties, Tools, Stage, and the Timeline are located in various places in each one.

Essentials Workspace

Designer Workspace

Classic Workspace

Moving Panels

All panels may be docked in several places on the screen or they may float. Floating panels may be dragged anywhere on the screen and will appear on top of other items. To move a panel, left-click and drag it by its Title Tab (the name of the panel). As you drag it around the screen, watch for a blue line which indicates where it will be docked if dropped (release left-click to drop). When panels are docked to the screen, they may stay open at all times. The graphic below shows the Color panel when open at all times. Also, notice that the Swatches panel hidden. The name is just to the right of the Color panel. It may be opened by clicking on the name of the panel, "Swatches."

When collapsed, the panels become small icons (See below). The icon for the Color panel is the first icon on these screen shots.

Single-click on the small icon to temporarily open a panel;it will stay open as long as you are using it. It will automatically close when you click away.

The graphic below shows the Color panel expanded.

Demo: Changing Workspaces

Now, it is time for you to adjust your workspace. Open Flash and create a new ActionScript 3.0 document.

  1. Notice which Workspace is selected when you open Flash.
  2. Change to any of the other workspace options and notice the location of items on the screen.
  3. Try to move one or more of the panels by dragging the panel name to another part of the screen.
  4. When you are satisfied with the location of the panels, click on the top workspace drop-down menu, select New Workspace to save this layout. Name it anything you like when you are prompted.
  5. Change back to the original Workspace you selected. If you would like to go back to the default layout of that workspace, please choose Reset from the top workspace drop-down menu.

Opening Existing Files

You may open a Flash file by clicking File > Open. A dialog box will allow you to select a file. The following demo is saved as GettingStarted/demos/FirstAnimation.fla.

This demo has a simple animation in it so that we may examine a somewhat complicated timeline. You will find that some of the layers have sections in blue. These are animations called "Tweens" which will be covered in a later lesson.

Keyframes are represented by either hollow or solid circles. The solid circle means that frame has visible content. The hollow circle indicates a blank keyframe.

The red playhead shows one moment in time. By dragging the playhead, you will see what the animation will look like when it plays. Press the Enter key (on a PC) or Return (on a Mac) to play the timeline in place. This is called scrubbing the timeline.

Using the Properties Panel

The Properties panel (aka Properties Inspector) shows the properties of any selected object. This includes frames on the timeline or objects on the stage.

Identify the Properties Inspector and then single-click on different objects to explore properties of that object. The Properties Inspector is one of the most utilized and most important pieces in the Flash interface.

Undo in Flash

Flash allows you to undo even the smallest of steps. Therefore, some new Flash users think that undo is not working properly. You might have to undo several steps to go back far enough.

You also might want to increase the number of steps that can be undone. It is set to 100 by default, but it may be increased to 300. To increase the number of steps, Select Edit > Preferences > General Category and change the number of Document-level undo levels.

Previewing Your Movie

Sometimes looking at the Flash screen does not properly show you the real-life view of your animation, because some animations will not play unless you are looking at a published version.

You may preview the published version by selecting Control > Test Movie > Test (Command-Return on a Mac or Ctrl-Enter on a PC).

Publishing Your Movie

When you preview your movie, a SWF file is generated in the same folder as the .fla document. There are also additional publishing options that will be covered in a later lesson.

Select File > Publish Settings to change options like the version of the Flash player to be used as well as many other options that will affect the final SWF animation.

Some Important Keyboard Shortcuts

Many Flash developers use keyboard shortcuts to optimize workflow. Keyboard shortcuts can save you a great deal of time. More shortcuts will be introduced in later sections.

  • Move to a region of the stage: (Hold the space bar. Then, click and drag the Stage).
  • Zoom in/zoom out: (Ctrl/+ Ctrl/-).
  • Test movie (Ctrl+Enter).
  • Scrub timeline (Enter).
  • Undo (Control+z).
  • F5: Insert frames.
  • F6: Insert keyframe.
  • F7: Insert blank keyframe.
  • F8: Convert to symbol.

You may even create your own keyboard shortcuts by choosing Edit > Keyboard Shortcuts.

Note: When using TLF Text: Flash CS5 has a new text engine called Text Layout Framework or TLF. Because it is new, TLF text may only be used in the Flash Player 10.

Furthermore, when you preview or publish any file, you might receive the following warning about streaming. The file will have to wait to begin playing until the whole movie is downloaded. For now, this is no problem. However, if you do not want to see this warning each time you preview you have two options. First option, click Don't show again in the warning box.

Second option, you may change the ActionScript Settings by choosing File > ActionScript Settings and change the default linkage to Merge into code as shown below.

Previewing Your Movie

Duration: 10 to 15 minutes.

In this exercise, you will learn to preview a completed Flash project. In fact, this is the project that you will build in following exercises.

In the upcoming sections of this course, you will work on many different files that relate to a Park web site you have fictitiously been assigned. The decision to use Flash for the site has been made to allow you to be very creative. Also, a very interactive site for park-goers of all ages was the desire of the client you are working for.

  1. Open the file saved as GettingStarted/solutions/Website.fla.
  2. Test the movie by selecting Control > Test Movie > Test or Ctrl+Enter (on a PC) or Command-Return (on a Mac).
  3. You will see the published SWF file. Watch the animation and click on the buttons. We will be working on the different sections of this park web site throughout this course.