Five steps to learning Flash Professional

Quick jump:

This learning guide will help you achieve a greater understanding of building projects and applications using Adobe Flash Professional CS5 and later. Read the featured articles and watch the video presentations provided in this learning guide to become familiar with the following Flash concepts:

• Importing elements, arranging them on the Stage, and controlling the playback sequence by editing the Timeline
• Organizing project assets in the Library
  
• Creating engaging presentations that include interactive buttons and digital video

Note: To make the most of these resources, be sure to watch the videos and read the articles for each section. Follow along with the tutorials by downloading the sample files and completing the instructions.

Introducing Flash Professional CS5

In this quick overview, titled Getting started with Flash CS5 (video), you'll learn about the different types of interactive, rich media content you can create with Flash, including animations, applications, photo galleries, and digital video presentations.

Understanding the Flash workspace

Learn how to identify the elements of the Flash workspace (video) so you'll have a better understanding of the Flash authoring environment (video). Become more familiar with the interface and how it works by watching this beginner tutorial (video).

Creating and saving files

Begin by creating your first Flash document (tutorial) and then move on to creating an animated banner ad (tutorial). Find answers to your questions (help docs) if you get stuck as you follow along with the step-by-step instructions.

Organizing assets with the Library

Bring images into Flash and begin working with the Library panel (video). You can use the Library to manage, organize, and preview the reusable assets in your file. Learn how to switch between the libraries of open files (help docs) to swap library items between multiple projects.

Setting attributes in the Property inspector

Read about the Property inspector (glossary) and then see how to use this contextual panel to set properties (video) of selected objects. Usually, you'll always keep the Property inspector open, but you can relaunch the panel (help docs) if it is closed.

Placing objects on the Stage

The Stage (glossary) defines the visual area of the Flash project. After becoming familiar with the Stage and the Pasteboard (video), you can start importing artwork (help docs) onto the region that will be displayed. As you work, it is helpful to zoom in and use the Hand tool (help docs) to change the view of the Stage.

Testing the movie to preview a sequence

After adding graphic content to the Stage, you can preview the sequence in the workspace (video). To see how the final presentation will be displayed in Adobe Flash Player, choose Control > Test Movie. Once you're familiar with the basics, learn alternate ways to test a project and best practices for debugging issues (PDF, 725 KB).

Publishing files

When you're ready to deploy the Flash project to the web, choose the Publish Settings to create the HTML page with the embedded SWF file (video). Experiment with exporting alternate file formats and adding Flash Player detection (help docs).

Drawing and editing vector shapes

Use the drawing tools, such as the Oval tool (video), to draw vector shapes on the Stage. After selecting a tool and setting the fill and stroke colors, choose between object and merge drawing mode (video). By creating overlapping shapes (help docs), you can edit and cut paths. Then adjust the stroke and fill colors (help docs) to finalize the drawings. Vector artwork created in Flash Professional CS5.5 can be converted into a bitmap file (video) and then edited in Adobe Photoshop.

Selecting, manipulating, arranging, and grouping vector objects

By editing and manipulating vector shapes (video), you can create complex patterns and designs. Change the stacking order by arranging objects (help docs) to appear in front or behind other objects. Group objects (help docs) to keep sets of vector shapes together.

Scaling, rotating, and skewing objects

Use the Free Transform tool (video) to refine vector shapes further. Resize selected vector shapes by dragging the control handles or entering numeric values (video) in the Property inspector. Reposition a vector's transformation point to specify the axis an object turns around before rotating, skewing, and flipping vector shapes (help docs).

Importing image files

Add graphics to the project by importing and editing bitmap images (video). You can import a wide variety of file formats to bring in artwork created in other applications (help docs), including Adobe Fireworks, Adobe Illustrator, and Adobe Photoshop.

Creating symbols

Convert graphics into symbols (video) to optimize projects when reusing common assets. Create movie clip symbols (video) to encapsulate animations in their own timeline and reference them with ActionScript code. You can nest symbols inside other symbols (video) to organize them and make them easier to update. As new bitmap image files are imported (tutorial), you can automatically convert them to symbols. Streamline production by duplicating existing symbols and editing them (help docs), rather than recreating each similar symbol from scratch.

Applying filters and effects

Create interesting visual effects by applying filters to text, buttons, and movie clips (tutorial). Experiment with animating the filters you apply using motion tweens (help docs).

Drill down (optional): Graphic effects learning guide for Flash

In the Graphic effects learning guide for Flash, you will learn much more about creating special effects using Flash features like filters and blend modes to enhance the look and feel of your projects.

Working with the Timeline

Begin by learning how the Timeline works (video) to get a better understanding of frames and keyframes. Add frame labels (video) to refer to each frame by name instead of by frame number. You may find it convenient to change the appearance of the Timeline (help docs) as you start animating objects on the Stage.

Manipulating keyframes in the Timeline

To control animations, you'll insert, move, and delete frames and keyframes (tutorial). As you work, you can edit frames in the Timeline (video). Become familiar with the visual cues that represent frames and keyframes (video) to understand how the Timeline dictates when objects will appear and disappear.

Creating animation with motion tweens

Animations created with motion tweens (glossary) display a motion path (glossary) that indicates the location of the tweened object on each frame. Using movie clips, you can create a motion tween with an animated symbol (video). When creating more complex animations, such as movie navigation, be sure to name layers to organize content (video). Learn about other organizational short cuts, such as distributing objects to layers (help docs). In addition to motion, you can tween other properties using the Property inspector (help docs).

Creating frame-by-frame animations

Add slightly different graphic content on individual frames to create a frame-by-frame animation (video). You can use onion skinning (video) to view two or more frames on the Stage at once; this feature helps you position the elements of a frame-by-frame animation.

Creating shape tweens

Use a shape tween (glossary) when you need to morph one vector shape into another (video). To make more complex shape tweens, put different shape tweens on separate layers. Add shape hints (tutorial) to identify points that should correspond in the starting and ending shapes.

Working with the Motion Editor and applying easing

Refine your animations with the Motion Editor (video). To make animations move at a non-consistent pace, apply easing (video). Set the Ease property (video) to make movement more realistic. Use the Motion Editor to precisely control the animated changes of multiple properties in a single tween (video) and apply different ease values to properties of a motion tween (tutorial). Choose from a variety of prebuilt ease settings (tutorial) to make your animations look more realistic.

Drill down (optional): Animation learning guide for Flash

In the Animation learning guide for Flash, you will learn much more about exploring the ways to create and control animation using the timeline and Motion Editor—from motion tweens to ActionScript 3 classes.

Making button symbols

Create interactive buttons (glossary) by editing the four-frame timeline of button symbols (glossary). Use text, bitmap images, or vector shapes (video) when creating buttons, such as nav bars (video). You can configure buttons to link to an external website (video). Explore the anatomy of a button and learn various ways to create custom buttons (tutorial). Be sure to test button functionality (help docs) before publishing.

Updating the appearance of button components

You can programmatically apply custom images to buttons (cookbook) as well as using the Flash interface to customize the included Button components (help docs) to ensure that they match your project's design.

Understanding mouse events

To control the action that occurs when a user clicks a button, create event handlers (tutorial) to react to various mouse events. You'll use the addEventListener method to associate event handlers with the specific mouse events that a button receives. Use the prewritten code in the Code Snippets panel (tutorial) to add interactivity to your projects without typing the code yourself.

Building Timeline navigation

Leverage the ActionScript 3 code snippets provided in Flash to create interactive Timeline navigation (video). Learn how to insert and edit code snippets to create presentations with imported Photoshop and Illustrator assets (video). If you are building an ActionScript 2 project, you can control symbol instances with behaviors (help docs).

Recording, editing, and importing audio tracks

Use Adobe Soundbooth to produce audio files for use on the web (tutorial). After prepping audio files, import the sounds and work with them in Flash (help docs). Use these tips when recording and preparing audio tracks (tutorial) to ensure that your Flash projects sound as good as they look.

Preparing video with Adobe Media Encoder

Use Adobe Media Encoder (tutorial) to encode and export video files (video) before bringing them into Flash. Learn how to find the best balance between quality and file size (help docs) to ensure that videos play back acceptably on the web.

Importing video clips

After prepping the video files, import them into Flash and set the video playback options in the Property inspector (video). Usually you'll import video as an external file that is progressively downloaded, but learn about the three different methods for using video in Flash (help docs) to choose the right option when importing your files.

Working with video

If you are importing smaller video clips with a playback time of less than 10 seconds, you may choose to embed the video in the Flash file (glossary). Regardless of the import method you select when bringing the video in, you can use these instructions to add video to a web page (tutorial).

Using video components

Use the FLVPlayback component (tutorial) to easily play progressively downloaded or streaming video files. Customize the look and feel of the video controls by skinning the FLVPlayback component (tutorial). Download and customize the prebuilt video templates (tutorial) to deliver complex, interactive video presentations.

Publishing online video

To deliver a seamless video experience on a website, you can also use the Open Source Media Framework (article). Add your video clips to the free Flash Media Playback video player (code, demo), copy the generated embed code, and paste it into a web page. Learn how the video player works (tutorial). To create more advanced video presentations with customizable controls, use the Flash OSMF Media Player template (tutorial).

Adding cue points

Add video cue points (video) to synchronize your project elements with the video footage. Learn the difference between encoded cue points and ActionScript cue points (help docs) and how you can trigger events to occur at specific times in relation to the video.

Drill down (optional): Video learning guide for Flash

In the Video learning guide for Flash, you will learn much more about how to capture and encode your video, bring it into Flash, and embed video on web pages. You'll also learn how to incorporate video synchronization and captioning, and deliver video and create playback controls for users to watch it.

Check out the ActionScript 3 samples, which demonstrate various features common in Flash Professional development. Some samples are complete applications, while others simply introduce a concept that you can use to build your own apps.

Also explore the Flash in detail pages to find other areas of interest to you.

Integrate Flash with other Adobe products

• Working with Fireworks and Flash
• Working with Illustrator and Flash
• Working with Photoshop and Flash
• Using Flash Professional and Flash Builder together

Browse the documentation

• Using Flash Professional CS5 & CS5.5
• Learning ActionScript 3
• Extending Flash Professional CS5
• Introduction to Runtime Shared Libraries (RSLs)