Flash CS5: The Missing Manual

Introduction

Flash’s evolution is unique, even for the fast-changing computer software world. First released in 1996 under the name FutureSplash, it was a tool for creating web-based animations. It’s still the “go to” application for that job; however, along the way it’s acquired new capabilities. Today, Flash powers video websites like YouTube and Hulu (Figure 1). It’s used to develop desktop applications like eBay Desktop. As you read this, Flash/ActionScript pros are developing the next generation of apps for handheld devices like the Droid and perhaps the iPhone. Flash has grown up with the World Wide Web and managed to carve out an important niche. In fact, there are a whole slew of programs that make use of Flash technology. They include Flex, Flash Builder, and Flash Catalyst. Still, if you want to learn Flash’s design and animation features as well as its programming and development features, then Flash Professional CS5 is the place to start.

Figure 1. Sites like Hulu and YouTube have made great use of Flash’s video abilities. You can check any site to see whether it’s using Flash behind the scenes. Just right-click (or Control-click) an image that you think might be Flash. If it says “About Flash Player” at the bottom of the pop-up menu, you guessed right.

Here are just some of the things you can do with Flash:

• Animate. You can create original artwork using Flash’s tools, or you can add images from your other favorite programs. Flash recognizes the most common image, video, and sound file formats. Once your artwork is in Flash, you can add motion, sound, and dazzling effects. Surely you’ve spent some quality time watching JibJab cartoons (Figure 2).

  

  Figure 2. With a little creativity, your Flash animations can capture the public’s attention. Just ask the folks at JibJab.

• Multimedia websites. Today’s websites aren’t static. They include motion, video, background music, and above all interactive objects. Flash’s built-in programming language, ActionScript, was designed to create interactive objects. You can create eye-catching, attention-grabbing websites with Flash. It’s your choice whether you sprinkle Flash bits on various pages or go whole-hog and develop a 100 percent Flash site.

• Tutorials. Web-based training courses, which often include a combination of text, drawings, animations, video clips, and voice-overs, are a natural fit for Flash. By hooking Flash up to a server on the back end, you can even present your audience with graded tests and up-to-the-minute product information. You don’t have to deliver your tutorials over the web, though; you can publish them as standalone projector files (Chapter 20) or AIR applications (Chapter 21) and deliver them to your students via CDs or DVDs.

• Presentations. PowerPoint presentations are fine…up to a point. With Flash, you can create self-running presentations that are more creative and have a higher degree of interactivity.

• Customer service kiosks. Many of the kiosks you see in stores and building lobbies use Flash to help customers find what they need. For example, photo kiosks walk customers through the process of transferring images from their digital cameras and ordering prints; kiosks in banks let customers withdraw funds, check interest rates, and make deposits.

• Television and film effects. The Hollywood set have been known to use Flash to create visual effects for TV shows and even small feature films. But where the TV and film industry is seriously adopting Flash is on promotional websites, where designers can wed Flash graphics to scenes taken from their movies and shows to present powerful trailers, interactive tours of movie and show sets, and teasers.

• Games and other programs. With support for runtime scripting, back-end data transfers, and interactive controls like buttons and text boxes, Flash has everything a programmer needs to create entertaining, professional-looking games.

What’s New in Flash Professional CS5

Adobe acquired Macromedia at the end of 2005, bringing Flash and Dreamweaver into the Adobe stable of creative software tools. Since then, there have been big changes in each new version. If you’ve used other Adobe programs, you’ll also welcome the consistency in drawing, text, and color-choosing tools. By the same token, if you’re new to the Adobe family, the skills you learn in Flash will come in handy if you move on to Photoshop, Illustrator, Dreamweaver, Premiere, or After Effects.

Flash Professional CS4 introduced a slew of new features, including a more powerful, yet easy-to-use motion tween, complete with Motion Editor. New 3-D capabilities opened up the world of motion, and IK Bones (inverse kinematics) made it easy for animators to link objects for realistic movement. Of course, all those tools are covered in this book, along with the latest batch of enhancements added to Flash Professional CS5:

• Text Layout Framework (TLF) brings a new text engine to Flash designers and developers. At last you get the kind of text control in Flash that you’d find in Adobe Illustrator or InDesign. If you prefer the old ways, don’t worry; you can continue to use the earlier text types, too.

• Font embedding in Flash was a bit of a mystery to many designers. Adobe has simplified the process by placing all font embedding tools and details in one place.

• Spring properties for IK Bones are an indication that Adobe plans to continue to build and improve bone features for Flash.

• Code snippets are great for when you need to build something quickly. Snippets are cut-and-paste bits of code that you can drop into your ActionScript programs. Organized by topic and function—like Timeline Navigation, Event Handlers, or Audio and Video—snippets are great learning tools.

• Code hinting is another area where ActionScript has improved. Turn code hinting on, and the Actions panel offers truly helpful suggestions as you write your code. It’s easy to use the hints or to ignore them. It’s your call.

• Workflow improvements. Adobe wants you to use its entire suite of programs when you create your masterpiece, so with each version, it improves the way Flash works with other programs like Photoshop, Illustrator, and InDesign. Newer tools like Flex, Flash Builder, and Flash Catalyst make it easier for teams of designers and programmers to divvy up application development chores.

• AIR (Adobe Integrated Runtime) is used to develop desktop applications. It’s now easier to create and publish AIR applications in Flash. You’ll find the details in Chapter 21.

• Packaging applications for the iPhone. For years, developers have used Flash to build applications for handheld devices. Flash Professional CS5 includes a packager designed specifically for the iPhone. It turns out that Apple doesn’t want developers creating apps with tools like Flash, so at the time this was written, the usefulness of this feature was up in the air.

Animation ABCs

Animators used to draw each and every frame by hand. Sure, they developed some shortcuts, but that’s still hundreds or thousands of images depending on the length of the animation. Major animation houses employed whole armies of graphic artists, each charged with producing hundreds of drawings that represented a mere fraction of the finished work. What we chuckled at for a scant few minutes took weeks and dozens of tired, cramped hands to produce. One mistake, one spilled drop of coffee, and these patient-as-Job types would have to grab fresh paper and start all over again. When everything was done, the animation would have to be put together—much like one of those flip books where you flip pages real fast to see a story play out—while it was being filmed by special cameras.

With Flash on your computer, you have the equivalent of a design studio at your fingertips. You provide the inspiration, and Flash can help you generate pro-quality animations and full-blown interactive applications.

It’s pretty incredible, when you think about it. A few hundred bucks and a few hours spent working with Flash, and you’ve got an animation that, just a few years ago, you’d have had to pay a swarm of professionals union scale to produce. Sweet! Naturally, if you’re new to animation, it will go easier if you learn the basic terms, tricks, and techniques used by Flash animators.

Up To Speed: An Animation by Any Other Name

You may occasionally hear Flash animations referred to (by books, websites, and even Flash’s own documentation) as movies. Perhaps that’s technically accurate, but it sure can be confusing.

QuickTime’s .mov files are also called movies, and some people refer to video clips as movies; but to Flash, these are two very different animals. In addition, Flash lets you create and work with movie clips, which are something else entirely. And “movie,” with its connotations of quietly sitting in a theater balcony eating popcorn, doesn’t convey one of the most important features Flash offers: interactivity.

Here’s the most accurate way to describe what you create using Flash: a website or program with a really cool, animated interface. Unfortunately, that description is a bit long and unwieldy, so in this book, what you create using Flash is called an animation.

Flash in a Nutshell

Say you work for a company that does custom auto refinishing. First assignment: Design an intro page for the company’s new website. You have the following idea for an animation:

The first thing you want your audience to see is a beat-up jalopy limping along a city street toward the center of the screen, where it stops and morphs into a shiny, like-new car as your company’s jingle plays in the background. A voice-over informs your audience that your company has been in business for 20 years and offers the best prices in town.

Across the top of the screen, you’d like to display the company logo, as well as a navigation bar with buttons—labeled Location, Services, Prices, and Contact—that your audience can click to get more information about your company. But you also want each part of the car to be a clickable hotspot. That way, when someone clicks one of the car’s tires, he’s whisked off to a page describing your custom wheels and hubcaps; when he clicks the car’s body, he sees prices for dent repair and repainting; and so on.

Here’s how you might go about creating this animation in Flash:

• Using Flash’s drawing tools, you draw the artwork for every keyframe of the animation—that is, every important image. For example, you’ll need to create a keyframe showing the beat-up junker and a second keyframe showing the gleaming, expertly refurbished result. (Chapter 2 shows you how to draw artwork in Flash; Chapter 3 tells you everything you need to know about keyframes.)

• Within each keyframe, you might choose to separate your artwork into different layers. Like the see-through plastic cels that professional animators used in the old days, layers let you create images separately and then stack them on top of one another to make a single composite image. For example, you might choose to put the car on one layer, your company logo on a second layer, and your city-street background on a third layer. That way, you can edit and animate each layer independently, but when the animation plays, all three elements appear to be on one seamless layer. (Chapter 4 shows you how to work with layers.)

• Through a process called tweening, you tell Flash to fill in each and every frame between the keyframes to create the illusion of the junker turning slowly into a brand-new car. Flash carefully analyzes all the differences between the keyframes and does its best to build the interim frames, which you can then tweak or—if Flash gets it all wrong—redraw yourself. (Chapter 3 introduces tweens, and Chapter 8 gives you the lowdown on advanced techniques.)

• As you go along, you might decide to save a few of the elements you create (for example, your company logo) so you can reuse them later. There’s no sense in reinventing the wheel, and in addition to saving you time, reusing elements actually helps keep your animation files as small and efficient as possible. (See Chapter 7 for details on creating and managing reusable elements.)

• Add the background music and voice-over audio clips, which you’ve created in other programs (Chapter 11).

• Create the navigation bar buttons and hotspots and other ways for your audience to interact with your animation (Chapters Chapter 12–Chapter 18).

• Test your animation (Chapter 19) and tweak it to perfection.

• Finally, when your animation is just the way you want it, you’re ready to publish it. Without leaving the comfort of Flash, you can convert the editable .fla file you’ve been working with into a noneditable .swf file and either embed it into an HTML file or create a standalone projector file that your audience can run without having to use a browser. Chapter 20 tells you everything you need to know about publishing.

The scenario described above is pretty simple, but it covers the basic steps you need to take when creating any Flash animation.

The Very Basics

You’ll find very little jargon or nerd terminology in this book. You will, however, encounter a few terms and concepts that you’ll use frequently in your computing life:

• Clicking. This book gives you three kinds of instructions that require you to use your computer’s mouse or trackpad. To click means to point the arrow cursor at something on the screen and then—without moving the cursor at all—to press and release the left clicker button on the mouse (or laptop trackpad). To double-click, of course, means to click twice in rapid succession, again without moving the cursor at all. And to drag means to move the cursor while pressing the left button continuously.

• Keyboard shortcuts. Every time you take your hand off the keyboard to move the mouse, you lose time and potentially disrupt your creative flow. That’s why many experienced computer fans use keystroke combinations instead of menu commands wherever possible. Ctrl+B (⌘-B), for example, is a keyboard shortcut for boldface type in Flash (and most other programs).

  When you see a shortcut like Ctrl+S (⌘-S) (which saves changes to the current document), it’s telling you to hold down the Ctrl or ⌘ key, and, while it’s down, type the letter S, and then release both keys.

• Choice is good. Flash frequently gives you several ways to trigger a particular command—by choosing a menu command, or by clicking a toolbar button, or by pressing a key combination, for example. Some people prefer the speed of keyboard shortcuts; others like the satisfaction of a visual command array available in menus or toolbars. This book lists all the alternatives, but by no means are you expected to memorize all of them.

About This Book

Despite the many improvements in software over the years, one feature has grown consistently worse: documentation. With the purchase of most software programs these days, you don’t get a single page of printed instructions. To learn about the hundreds of features in a program, you’re expected to use online electronic help.

But even if you’re comfortable reading a help screen in one window as you try to work in another, something is still missing. At times, the terse electronic help screens assume you already understand the discussion at hand and hurriedly skip over important topics that require an in-depth presentation. In addition, you don’t always get an objective evaluation of the program’s features. (Engineers often add technically sophisticated features to a program because they can, not because you need them.) You shouldn’t have to waste your time learning features that don’t help you get your work done.

The purpose of this book, then, is to serve as the manual that should have been in the box. In this book’s pages, you’ll find step-by-step instructions for using every Flash feature, including those you may not have quite understood, let alone mastered, such as working with video or drawing objects with ActionScript. In addition, you’ll find clear evaluations of each feature that help you determine which ones are useful to you, as well as how and when to use them.

Note

This book periodically recommends other books, covering topics that might interest Flash designers and developers. Careful readers may notice that not every one of these titles is published by Missing Manual parent O’Reilly Media. While we’re happy to mention other Missing Manuals and books in the O’Reilly family, if there’s a great book out there that doesn’t happen to be published by O’Reilly, we’ll still let you know about it.

Flash CS5: The Missing Manual is designed for readers of every skill level, except the super-advanced programmer. If Flash is the first image creation or animation program you’ve ever used, you’ll be able to dive right in using the explanations and examples in this book. If you come from an animation or multimedia background, you’ll find this book a useful reference for unique Flash topics such as the motion tweens and the Motion Editor. The primary discussions are written for advanced-beginner or intermediate computer users. But if you’re a first-timer, special sidebar articles called Up to Speed provide the introductory information you need to understand the topic at hand. If you’re an advanced user, on the other hand, keep your eye out for similar shaded boxes called Power Users’ Clinic. They offer more technical tips, tricks, and shortcuts for the experienced Flash fan. The Design Time boxes explain the art of effective multimedia design.

The ActionScript programming language is a broad, complex subject. This book isn’t an exhaustive reference manual, but it gives you a great introduction to ActionScript programming, providing working examples and clear explanations of ActionScript principles.

Macintosh and Windows

Flash Professional CS5 works almost precisely the same in its Macintosh and Windows versions. You’ll find the same buttons in almost every dialog box. Occasionally, they’ll be dressed up differently. In this book, the illustrations have been given even-handed treatment, rotating between Windows 7 and Mac OS X.

Shortcut keys are probably the area where the Mac and Windows versions differ the most. Often where Windows uses the Ctrl key, Macs use the ⌘ key. You’ll find some other relatively minor differences, too.

Whenever this book refers to a key combination, you’ll see the Windows keystroke listed first (with + symbols, as is customary in Windows documentation); the Macintosh keystroke follows in parentheses (with - symbols, in time-honored Mac fashion). In other words, you might read, “The keyboard shortcut for saving a file is Ctrl+S (⌘-S).”

About the Outline

Flash CS5: The Missing Manual is divided into five parts, each containing several chapters:

• Part One: Creating a Flash Animation guides you through the creation of your very first Flash animation, from the first glimmer of an idea to drawing images, animating those images, and testing your work.

• Part Two: Advanced Drawing and Animation is the designer’s feast. Here you’ll see how to manipulate your drawings by rotating, skewing, stacking, and aligning them; how to add color, special effects, and multimedia files like audio and video clips; how to slash file size by turning bits and pieces of your drawings into special elements called symbols; and how to create composite drawings using layers. Text is an increasingly important part of Flash animations and applications, so this section introduces important text topics. In Part three, you’ll learn how ActionScript works with text. In this section, you’ll learn about the Motion Editor and how to use the inverse kinematics (“Bones”) feature (Chapter 9).

• Part Three: Adding Interactivity shows you how to add ActionScript 3.0 actions to your animations, creating on-the-fly special effects and giving your audience the power to control your animations. An entire chapter is devoted to predesigned components, like buttons, checkboxes, sliders, and scrolling lists. Powerful but easy to use, these components give your animation professional functions and style. This section includes lots of examples and ActionScript code. You can copy and modify some of the practical examples for your own projects. You’ll see how to loop frames and how to let your audience choose which section of an animation to play, and how to customize the prebuilt interactive components that come with Flash. You’ll find specific chapters on using ActionScript with text and using ActionScript to draw.

• Part Four: Debugging and Delivering Your Animation focuses on testing, debugging, and optimizing your animation. You’ll also find out how to publish your animation so that your audience can see and enjoy it and how to export an editable version of your animation so that you can rework it using another graphics, video editing, or web development program. The last chapter introduces Adobe AIR, a system for creating full-blown desktop applications using Flash.

• Part Five: Appendixes. Appendix A, Installation and Help, explains how to install Flash and where to turn for help. Appendix B, Flash CS5, Menu by Menu, provides a menu-by-menu description of the commands you’ll find in Flash CS5.

About→These→Arrows

Throughout this book, you’ll find instructions like, “Open your Program Files→Adobe→Adobe Flash CS5 folder.” That’s Missing Manual shorthand for much longer sentences like “Double-click your Program Files folder to open it. Inside, you’ll find a folder called Adobe; double-click to open it. Inside that folder is a folder called Adobe Flash CS5; open it, too.” This arrow shorthand also simplifies the business of choosing menu commands, as you can see in Figure 3.

Figure 3. When you see instructions like “Choose Text→Style→Italic,” think, “Click to pull down the Text menu, and then move your mouse down to the Style command. When its submenu opens, choose the Italic option.”

Living Examples

This book is designed to get you started animating faster and more professionally. As you read the book’s chapters, you’ll encounter a number of living examples—step-by-step tutorials that you can build yourself, using raw materials that you can download from this book’s “Missing CD” (www.missingmanuals.com/cds). You might not gain very much by simply reading these step-by-step lessons while relaxing in your hammock. But if you take the time to work through them at the computer, you’ll discover that these tutorials give you an unprecedented insight into the way professional designers create animations and applications in Flash.

About MissingManuals.com

At www.missingmanuals.com, you’ll find articles, tips, and updates to Flash CS5: The Missing Manual. In fact, we invite and encourage you to submit such corrections and updates yourself. In an effort to keep the book as up to date and accurate as possible, each time we print more copies of this book, we’ll make any confirmed corrections you’ve suggested. We’ll also note such changes on the website so that you can mark important corrections into your own copy of the book, if you like. (Go to www.missingmanuals.com/feedback, choose the book’s name from the pop-up menu, and then click Go to see the changes.)

Also on our Feedback page, you can get expert answers to questions that come to you while reading this book, write a book review, and find groups for folks who share your interest in Flash.

We’d love to hear your suggestions for new books in the Missing Manual line. There’s a place for that on missingmanuals.com, too. And while you’re online, you can also register this book at www.oreilly.com (you can jump directly to the registration page by going here: http://tinyurl.com/yo82k3). Registering means we can send you updates about this book, and you’ll be eligible for special offers like discounts on future editions of Flash CS5: The Missing Manual.

Safari® Books Online

Safari® Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cellphone and mobile devices. Access new titles before they’re available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.