Introduction
Vectors on the Web! That was the early promise and excitement of Flash, back when the Internet was expanding exponentially and suddenly everybody wanted a Web presence, filled with color and motion. Flash gave Web designers an efficient way to send artwork and animation over the limited-bandwidth connections that most viewers had. Plus it offered a full set of natural-style drawing tools for creating graphic content and animating it. Another Flash advantage was its easy scripting for adding interactivity.
Ultimately, Flash’s efficiency at feeding graphics through the Internet’s bandwidth constrictions attracted Web-content developers seeking to create complex interactive and data-driven sites, developers who were more knowledgeable about coding and scripting. The ActionScript scripting language became available to fill their needs. As high-bandwidth connections became more common, Flash developers pushed to add longer, more-complicated animation. Flash added the ability to display video. With each new generation of Flash, the product’s capabilities have grown. Adobe Flash CS3 Professional addresses the needs not only of designers who want to create beautiful, low-bandwidth artwork and animation, but also of developers who want to create robust multimedia Internet applications.
About Flash
Flash began life as FutureSplash Animator, a nifty little program for creating and animating vector art. In 1997, Macromedia acquired FutureSplash Animator, changed the name to Flash, and promoted the program as a tool for creating graphic content for the World Wide Web. In 2005 Adobe acquired Macromedia and took up the Flash baton.
The early Flash excelled as an application for Web-site design, providing everything needed to create visually interesting (as opposed to text-only) Web sites: tools for creating graphic elements, for animating those elements, for creating interface elements and interactivity, and for writing the HTML necessary to display all those elements in a Web page via a browser. Flash CS3 continues to provide those tools, but also includes more-sophisticated graphics tools, specialized import features for working with Adobe Photoshop and Adobe Illustrator artwork, tools for importing and displaying video, user-interface and data-handling components, and ActionScript 3.0 for scripting complex interactivity. Flash has become a toolkit for creating what have come to be called Rich Internet Applications (RIAs). An RIA might be anything from an online store to a corporate training module to a video-clip-display site to a snazzy promotional piece describing this year’s hottest new car, complete with customizable virtual test-drives.
The data that creates vector graphics and the data that creates bitmapped graphics are similar, in that they’re mathematical instructions to the computer about how to create images onscreen. Bitmaps, however, are often lengthier and result in a less versatile graphic; vector graphics are compact and scalable. Bitmap instructions break a whole graphic into dots and describe each one; vector instructions describe the graphic mathematically as a series of lines and arcs (Figure i.1). Picture a 1-inch black horizontal line on a field of white. For a bitmap, the instructions would go something like this: make a white dot, make a white dot, make a black dot, make a black dot, make a black dot, repeating until there are enough black dots to make a 1-inch line. Then the white-dot instructions start again and continue to fill the rest of the screen with white dots. The vector instructions would be a formula for a straight line, plus the coordinates that define the line’s position onscreen.
Figure i.1. For a computer to draw a bitmapped graphic, it must receive a set of instructions for each dot (each bit of data) that makes up the image. Instructions for a vector graphic describe the lines and curves that make up the image mathematically. The bitmapped line (left) appears much rougher than the vector line (right). You can’t enlarge the bitmapped line without losing quality. But you can make the vector line as big as you like; it retains its solid appearance.
What Makes Flash a Special Web-Design Tool?
Flash’s early claim to fame was its ability to deliver vector images over the Web. What’s the advantage of using vector graphics? Vectors keep file sizes down, which keeps download times shorter. And vectors are scalable: this means you can maintain control of what a Web site looks like when your viewer resizes the browser window, for example, making the whole thing stay in proportion as the window grows or shrinks.
Another advantage that Flash provides is the use of progressive downloading and streaming. These delivery techniques allow some elements of a Web site to display immediately upon download while more information continues to arrive over the Internet. Both the use of vector images and the use of progressive download or streaming enhance the viewer’s experience.
Other facets of Flash’s appeal include its ability to create original artwork with both Bézier and natural-style drawing tools; its ability to handle imported artwork, sound, and video; and its ability to assist designers and developers in creating animation and interactivity. Over time, Flash’s tools for creating interactivity have become more robust. Flash CS3 contains a full-fledged object-oriented scripting language, in two versions: ActionScript 2.0 and 3.0. Both are compliant with the ECMA-262 specification, which is also the foundation for JavaScript, so they should feel familiar to anyone who already knows JavaScript.
How Flash Animates
Flash uses standard animation techniques to create the illusion of movement. You create a series of still images, each slightly different from the next. By displaying the images rapidly, one after another, you simulate continuous movement. Flash’s animation tools help you create, organize, and synchronize the animation of multiple graphic elements, sounds, and video clips.
Flash File Formats
Flash provides both an authoring environment for creating content and a playback system for making that content viewable on a local computer or in a Web browser. You create artwork, animation, and interactivity in Flash-format files. These files have the extension .fla and are often referred to as FLAs. To make that content viewable on the Web, you convert the FLA files to Flash Player format; Flash Player files have the extension .swf. Another name for the playable format is SWF (pronounced swif).
How Flash Delivers
Flash’s publishing feature creates the necessary HTML code to display your Flash content in a Web browser. You can also choose alternate methods of delivering Flash content—as animated GIF images, for example, or as a QuickTime movie. Flash creates those alternate files during the publishing process.
Flash CS3: What’s New?
Adobe has worked hard to integrate products from the Adobe and Macromedia lines, resulting in changes and improvements to the Flash user interface that make it more consistent with other Adobe programs. As part of the Adobe Creative Suite, Flash can more easily incorporate content from such programs as Photoshop and Illustrator. In addition, this release of Flash includes some new graphics tools, tools for reusing animation, and the latest version of ActionScript (3.0). Let’s look at the highlights.
Interface Improvements
Docking for all. Users on the Windows platform have always been able to dock panels; now Macintosh users can also take advantage of docking to optimize screen usage. Undocked panels become transparent as you drag them, helping you to position them precisely on screen.
Panel icons. To clear space on your desktop, you can collapse a docked panel (or panel group) to a small icon (Figure i.2). A single click opens the icon to a full-size panel. You set preferences to have the panel return to icon form automatically when you click outside it, or to stay open until you click a special close button.
Figure i.2. In Flash CS3, you can reduce docked panels (and panel groups) to a small icon (top). Clicking the icon opens the full panel (bottom). Preference settings let you determine whether the panel returns to icon form as soon as you click outside the panel, or if you must explicitly close the panel by clicking the double arrows.
Design Enhancements
Bézier-tool revisions. The pen tool in Flash CS3 works more like the pen tool in Illustrator. Changes to the pen tool’s behind-the-scenes mathematics mean it creates paths more accurately, using fewer points. Flash now provides specific Bézier tools for modifying existing paths (Figure i.3).
Figure i.3. Flash’s Bézier tools let you modify paths by adding, removing, and converting points. (The pen tool retains its old ability to modify the points on a path as well.)
Primitive shapes. Flash CS3 introduces two new shape-drawing tools: oval-primitive and rectangle-primitive (Figure i.4). While you could always modify some properties of rectangles and ovals after you created the shape (such as dimensions, or stroke weight and color), primitives make more properties accessible for editing. You can, for example, change the degree of roundness of a rectangle-primitive’s corners through the Property inspector or by dragging control points on the rectangle-primitive itself.
Figure i.4. The properties that define primitive shapes, such as this oval-primitive, remain editable even after you create the shape. You can modify these properties by entering values in the Property inspector and by manipulating control points on the primitive itself.
Enter new values for primitive properties
Bounding boxes reveal object types. You can identify what type of object you’ve selected (a drawing object, primitive-shape, symbol, group, or other) by the color of its bounding box. You assign bounding-box colors through Preferences settings.
9-slice visibility. Previously, 9-slice scaling was visible only in symbol-editing mode, or in Flash Player. In Flash CS3, you can preview 9-slice scaling for movie-clip symbols within the authoring environment.
Reusable filters. You can copy and paste filters and filter settings from one object to another.
Photoshop and Illustrator import. Flash CS3 provides special import tools for working with Photoshop and Illustrator content. The PSD and AI importers let you choose how to import individual layers from Photoshop and Illustrator files, preserving layer structure and editability of vector elements or converting layers and/or elements to bitmaps (Figure i.5).
Figure i.5. Using the PSD Importer, you decide how to deal with each layer of a Photoshop file. The import settings let you balance image quality with editability when you work with Photoshop files. The AI Importer works similarly for Illustrator files.
Animation Enhancements
Reusable motion tweens. You can quickly re-create motion-tween animations using various objects. You copy the changes that make up a motion-tween for a selected object using the Copy Motion command, then apply the same changes and motion-tween property to a different object using the Paste Motion command.
Motion tweens translated to script. Similar to the Copy Motion command, the new Copy Motion As ActionScript 3.0 command lets you copy an existing motion tween and apply it to a different object. This command, however, translates the Timeline animation to code, which you can paste into the ActionScript editor. The script then targets an object instance on the Stage.
ActionScript 3.0 and More
Flash CS3 includes the latest version of ActionScript 3.0, as well as the earlier ActionScript 2.0. A new QuickTime-export feature lets you deliver Flash content (both Timeline animation and ActionScript-generated animation) to end users as a QuickTime MOV file. Flash’s publishing templates now create a small JavaScript file that activates content to make it immediately available to viewers using Microsoft Internet Explorer.
How to Use This Book
Like all Visual QuickStart Guides, this book seeks to take you out of the passive reading mode and help you get started working in the program. The tasks in the book teach you to use Flash’s features. The book is suitable for beginners who are just starting to use Flash and for intermediate-level Flash designers. The initial chapters cover the basics of creating graphic elements by using Flash’s unique set of drawing tools. Next, you learn how to turn graphic elements into animations. After that, you learn to create basic user-interface elements, such as rollover buttons. To make your content interactive, you’ll work with the Actions panel to create ActionScript for basic interactivity. You’ll also learn about importing and working with various non-Flash content: artwork from other applications, sounds, and video. Finally, you’ll learn to use Flash’s Publish feature to create HTML for putting your Flash creations on the Web.
What You Should Already Know
In order to get you started quickly, this book makes a few assumptions:
• Adobe Flash CS3 is already installed on your computer.
• You’re familiar with the workings of your operating system.
• You can carry out basic tasks, such as opening, closing, and saving documents; opening, closing, resizing, collapsing, and expanding document windows and dialogs; using hierarchical menus, pop-up menus, radio buttons, and check boxes; and carrying out standard application commands such as copy, cut, paste, delete, and undo.
Cross-Platform Issues
The Flash authoring environment has a very similar interface on the Macintosh and Windows platforms. Still, differences exist where the user interfaces of the platforms diverge. When these differences are substantial, this book describes the procedures for both platforms. Illustrations of dialog boxes come from both platforms, but generally, there is no special indication as to which platform is shown. If a given feature differs greatly between platforms, the variations are illustrated. If a feature is available only on one platform, that is noted in the text.
Originally, Macintosh computers required Macintosh keyboards, and some key names were unique to that keyboard: for example, Return (instead of Enter) and Delete (instead of Backspace). This book generally uses Enter and Delete for these two key names.
Keyboard Shortcuts
Most of Flash’s menu-based commands have a keyboard equivalent. That equivalent appears in the menu next to the command name. When this book first introduces a command, it also describes the keyboard shortcut. In subsequent mentions of the command, however, the keyboard shortcut usually is omitted. You’ll find a complete list of these commands on Peachpit Press’s companion Web site for this book, http://www.peachpit.com/title/0321502914
Contextual Menus
Both the Macintosh and Windows platforms offer contextual menus. To access one of these contextual menus, Control-click (Mac) or right-click (Windows) an element in the Flash movie. You’ll see a menu of commands that are appropriate for working with that element. For the most part, these commands duplicate commands in the main menu; therefore, this book doesn’t generally note them as alternatives for the commands described in the book. The book does point out when using the contextual menu is particularly handy or when a contextual menu contains a command that is unavailable in the main menu bar.
Artwork and Scripts
The Flash graphics in this book are easy to draw. In most cases the examples are based on simple geometric shapes, which means you can spend your time seeing the Flash features in action instead of re-creating fancy artwork. To make it even easier for you to follow along, Flash files containing the graphic elements that you need for each task are available on Peachpit Press’s companion Web site for this book, http://www.peachpit.com/title/0321502914. In Chapter 13, you’ll learn to create scripts for basic interactivity. Flash files containing the completed scripts for these tasks are also available on the companion Web site.