To follow this guide, you just need to own a copy of Flash Professional CS5 or later—or download the trial version at right. Some familiarity with web design is recommended.
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:
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.
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.
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).
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.
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.
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.
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.
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).
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).
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.
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.
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).
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.
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.
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).
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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).
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.
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).
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.
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.