Flash 5 f/x and Design helps Web Designers create aesthetically pleasing, interactive web sites. Animation, tweening, using the timeline, coordinating sounds, shape, color, scenes, movement, and sequences, as well as scripting actions and interfaces are covered. Readers gain an understanding of Flash's underlying conceptual framework for creating movies. This book includes a CD-ROM with Flash files, sample photos, and professionally created drawings which readers can incorporate into their movies.
Read an Excerpt
Chapter 1: Flash OverviewIn this chapter, you'll find out what's new in Flash 5 and what it's all about. For new users, the chapter explains what Flash 5 does and why it is a valuable animation tool.
For new and experienced Flash users, the panel environment is explained.
What's New with Flash 5?First the good news. Flash 5 has many great new features that provide enhancements over previous versions. And now for more good news! Experienced Flash users will find the same general model for creating animation quickly and easily. The following sections spell out what you will find to be significantly different from Flash 4 and earlier versions.
If you have some experience with one of the earlier versions of Flash, you'll find plenty of differences in Flash 5. The new ActionScript has the most extensive changes. However, the user interface has changed a great deal as well. If you're familiar with other Macromedia products, like FreeHand and Fireworks, you'll recognize the panel interface. The user interface places many of the old dialog boxes and windows into the panels, and so you should take a look at where and how information is entered in the different panels. The Objects and Frame windows are both now in panels. The Info panel has the sizing information that used to be in the Objects window, and the Text Options panel handles the Text Field modification icon that was on the Toolbox.
I found that getting used to the differences between Flash 4 and Flash 5 took little time. Moreover, once I adjusted to the differences, I found that I liked using the panels better than fishing through menus and submenus for what I needed. Some of the old shortcuts have changed, but using the custom keyboards controls, you can modify Flash 5 to better fit the way you like to create movies. Managing the panels is going to require some adjustments, but for a quick tip, use the Tab key to quickly remove and recall them.
PanelsInstead of requiring that you fish through menus or memorize a set of keyboard strokes, Flash 5 makes extensive use of panels. A panel is a small window, usually with more than a single tab, that puts tools and settings right in front of you on your computer screen. What used to be a dialog box or a pop-up window now can sit on the desktop until you put it away, much like the Object and Frame controllers in Flash 4. Each tab on a panel is essentially another window that's clicked for easy access. Later in this chapter, I'll (formally) introduce all of the panels.
Customized Keyboard ShortcutsIf you want to use your own key combinations rather than the ones supplied, you can now do so. You can now customize the keyboard shortcuts that are easiest for you to work with and remember. (The last sections of this chapter will show you how.)
Bezier Pen ToolIf you are familiar with Macromedia FreeHand or Adobe Illustrator, you will welcome the Bezier tools to Flash. With the Bezier tools, not only can you draw Bezier curves with a familiar pen, but you can also edit existing artwork or art imported into Flash. The other drawing tools in Flash, such as the Brush, can be used to create drawings and then edited with the Bezier Pen.
Shared Symbol LibraryFor larger projects involving designers and developers working together, Flash now has shared symbol libraries. The library is external to the file under construction, and once the library has been downloaded, it doesn't have to be downloaded again. So in projects where many different people need the same shared assets, no time is wasted downloading an instance of a symbol every time you want to add another instance of a symbol to your movie. Other benefits include sharing a sound file across a site, sharing a font symbol over multiple sites, and having a single source for animation elements across multiple scenes or even movies and the ability to create a central resource for tracking and controlling revisions.
Web Native PrintingIf you have ever had trouble printing Web pages in the format you want, you're going to really like Web native printing. You can set up your page so that the Web viewer can issue a print-to-my-printer command and a printed-page format comes out of the printer rather than a Web-page format. If you're involved in e-commerce and you or your client wants portable output to take away from the Web site, this new feature makes the setup for printing very simple.
Movie ExplorerRemembering where everything is in a large, complex movie is made far easier with the Movie Explorer. The Movie Explorer provides an outline of your movie so that you can see at a glance where all of your graphics, symbols, and other materials are located in a structured hierarchy. You can now, without a great deal of frustration, drill down into a movie clip that contains another movie clip with a button containing a script that tells a movie clip in another hierarchy to turn blue. Figure 1.2 shows how Movie Explorer reveals the contents of a movie.
Improved Import and SupportFlash 5 now supports Extensible Markup Language (XML) transfer. XML is one of the primary languages for developing Web databases, and sites that use XML to transfer data between clients' browsers and their server can offer users a much more interactive and dynamic experience. XML objects in the new ActionScript help make the connection between XML and the Flash movie. Likewise, with HTML text support, you can incorporate HTML text formatting and links into a Flash movie. This means that HTML files can be dynamically loaded for contextual updates. Finally, FreeHand 7, 8, or 9 files can be directly imported and manipulated in Flash.
There's still more, and the features mentioned so far represent only the more dramatic and sought after. Flash 5 is a far more powerful tool than its predecessors. Experienced Flash 4 users will see the many subtle improvements as they work through the projects in this book. Users new to Flash will discover a powerful animation tool.
An Invitation to FlashFlash is an animation tool, and a Flash movie can be run on your desktop or on a CD-ROM using a Flash player. However, the important feature of Flash is that it gives you the ability to put together objects that normally have high bandwidth requirements and crunch them down into media that can quickly be transferred over the Web inside a Web page. When I first encountered Flash in an impressive format, it was sent from a site in Munich, Germany (www.eye4U.com). An animated flying saucer appeared, making flying saucer sounds over a landscape that slowly went from predawn to daylight. Then the flying saucer popped out four eyeballs that were to be used as navigation buttons. After dropping off the buttons, the flying saucer flew off. I was impressed because of the nice graphics, smooth animation, and sound. However, I was thinking that the little movie must have gobbled up a jillion megabytes of bandwidth. It was done with 74K. Now even on a slow modem, 74K is not going to take long.
What Flash Does WellFlash 5 does Web animation with sound, including music, in a more compact fashion than any other software tool available. After I stuffed a Flash movie with a 10MB music file, several graphics files, dancing baloney, lots of symbols, and ActionScript, it compressed to 141K. I know 141K is getting a bit weighty for the Web, so I revised the music down to an 884K loop, and the Flash file compressed to 16K. That'll do the job.
Don't use a hammer to saw a board, and don't use a saw to hammer a nail. Flash 5 is becoming a better drawing tool than previous versions were, and it has some range of text manipulation. However, if your primary goal is to draw, you're better off with Macromedia FreeHand or Adobe Illustrator. If you want to create text for the Web, you can probably make better use of Microsoft Word or Adobe InDesign. For animation for CD-ROMs, you've got Director and AuthorWare from Macromedia. For developing Web sites, use Macromedia Dreamweaver or Adobe GoLive. But when you want to focus on animating rich media on the Web, Flash 5 does that better than any other tool available.
How Flash WorksFlash specializes in using vector graphics instead of bitmapped graphics, so instead of needing a piece of code for every single pixel on the screen, vector points suffice to provide the information necessary for getting an image where you want it. For example, a bitmapped graphic of a line between point A and point B needs data for each bit between points A and B. Flash just needs the points. What's more, no matter the distance between A and B, vector graphics only need the two points. Therefore, a long line and a short line take the same amount of bandwidth (information sent over the Internet) and the line looks the same.
Stable AppearanceA related advantage to using vector graphics in Flash is how the graphics look in different sizes. An enlarged bitmapped graphic looks "blocky" because the size of the bitmap is set to a certain number of pixels on the screen. If the pixels used for a one-square-inch image are enlarged to fit in a two-square-inch image, the same bitmap is spread over double the space, giving it the blocky appearance. Conversely, when a large bitmap is made smaller, the image can blur with too much information. It's like trying to move all the furniture from a five-bedroom house into a one-bedroom apartment. You've got a mess on your hands as five bedrooms' worth of furniture is crammed into a single bedroom.
Vectors, on the other hand, retain their appearance because the drawings are created by vector points and not bitmaps. That means a big vector is going to look the same as small one and vice versa. That in and of itself is important, but for animation, it is vital. In animation, as in all drawings, a larger object appears to be closer and a smaller object appears to be farther away. An object must be made progressively larger when it's animated moving from a distant point to a closer point. With bitmapped graphics, a lot of bitmapped images would need to be streamed into the movie sequentially or you would risk having blurry and blocky images. If you use vectors, though, the animation can move seamlessly from one size to another with a single set of graphic information sent over the Internet.
The plug-in is also compatible with older Flash movies (ones made with Flash 2, 3, or 4). However, a Flash 4 plug-in cannot read a Flash 5 movie unless the movie has been saved in Flash 4 format. When you publish a movie for the Web, Flash 5 places the necessary code in the HTML file so that if the wrong plug-in is present in the browser, a link to the Macromedia Web page appears; the Web page includes a link to the updated plug-in, which can be downloaded for free.
What Flash Can Do for YouWith Flash 5, you can make anything from compelling Web pages to a full-fledged game that can be played over the Internet. You can make your own cartoon show and present it over the Web if you want, or you can make an interactive classroom where students can learn anything from chemistry to psychology. In short, you can create a virtual reality for a Web environment. The Internet has become a superhighway of communication between people, and the Web is its biggest attraction. Flash has become the tool of choice for creating lively and interactive media for the Web. Flash is an application that brings together active elements that extend well beyond HTML, and it's far less complex and time-consuming to use than Java and related programming environments.
Flash 5 is also stratified in its complexity. By the end of the second chapter, you will have created an animation in Flash. However, Flash 5 has a very deep structure. On a basic level, it is a simple animation, drawing, and sound tool. By gradually using more and more of Flash's powerful tools, you will be able to put your ideas into a format that more closely approximates the virtual reality you intend. A seamless graduation from Flash 4 makes adding the new and more powerful Flash 5 elements intuitively simple. For Experienced Designers New to Flash
Flash 5 is quite robust and has many new features, but don't be intimidated by the more advanced features such as ActionScript. You can create great Flash pages without having to learn a bit of ActionScript. However, if this is the first time you've ever used Flash, you need to get into the right mindset and understand the workflow to effectively use Flash. Start off slowly and gradually add more and more Flash elements to your skill set. Pay attention to detail in organizing the parts and go over the concepts of the timeline, layers, keyframes, frames, and symbols. Don't try to learn it all at once; get one operation clearly under your belt before going on to the next level. Remember, Rome wasn't built in a day, and you can't expect to master Flash overnight....
Table of Contents
- Chapter 2: Flash Drawing
- Chapter 3: Animation Concepts in Flash
- Chapter 4: Text and Forms
- Chapter 5: Coordinated Animations
- Chapter 6: Sound and Music in Flash
- Chapter 7: Movie Editing and Navigation
- Chapter 8: ActionScript
- Chapter 9: Flash 5 in QuickTime Movies
- Chapter 10: Using Data from External Sources in Flash
- Appendix Flash 5 Menus
- Chapter 3: Animation Concepts in Flash
Flash 5 continues to provide tools to create stunning animation. It is revolutionary in that it gives you the ability to create motion graphics that can be sent over the Internet and around the world. I still find jaw-dropping animations on the Web created with Flash 3, and with the far more robust animation environment in Flash 5, I expect the revolution in motion graphics to take a giant leap forward. What was once possible only in multimillion-dollar animation studios can now be created on the desktop, and the animated movies created on the desktop can be sent around the world in the blink of an eye.
A far more intriguing aspect of the question is "Why bother with Flash at all?" From the time our ancestors emerged from the primordial ooze (or Garden of Eden-your choice), motion has been a key to survival. As predator or prey, movement and the detection of movement draw our attention in ways that static objects do not. Static communication has been a matter of necessity more than a matter of choice. From the cave walls to this book, humans have attempted to translate what is in their memory or imaginations so that others can see what they see. However, the depictions have been only partial because language must select a motion and break it into parts using the static media of words. Even abstract concepts of fluid and moving environments (such as in quantum physics) have had to be described with words and formulas. Flash frees developers and designers from this static world.
A final reason to consider Flash is a more practical one. Clients want Flash in their Web sites. Whether clients want an entertaining introduction to a Web site or a fully interactive site, the market for Flash talent is huge, growing, and pays very well. Everything from music videos to online games are made with Flash, and if you add Flash to your portfolio of talents, your clients will be better served, you will discover a new medium in which to express your creativity, and your bank account will thank you profusely.
Who This Book Is ForThis is an intermediate-level book for two types of developers. The first type consists of Flash 4 users who want to move briskly into Flash 5. As such, the book begins by introducing the new key features in Flash 5. The menus are similar to Flash 4 menus. (They are summarized in the Appendix.) However, in Flash 5, you'll be working with panels instead of the array of dialog boxes and windows you worked with in Flash 4, so I've included a thorough examination of how to work with panels. I also introduce you to some shortcuts, the preferred way to accomplish most tasks. For example, I always use the F8 key to transform a drawing into a symbol rather than fumbling through a series of menus. Likewise, to cut and paste in Flash 5, and in just about every other computer application in the universe, I use the Ctrl+C and Ctrl+V (Cmd+C and Cmd+V on the Mac) keyboard shortcut. These shortcuts are preferred because using them is ultimately more intuitive than breaking up the work flow by opening menus and submenus to accomplish a task. However, some designers like the menu system and have their own rhythm that includes the menus, and so the menus are presented along with the menu sequences.
The book is also for experienced designers and developers who want to include proficiency with Flash 5 in their array of skills. Designers and developers who are familiar with Web development tools and who understand graphic design, drawing, and the computer techniques associated with the artistic side of digital rendering do not need lessons in design and artwork. This group needs to understand what Flash 5 can do and how to get things done with the work environment and tools provided in Flash. The text, illustrations, and examples all show how to start from the beginning in Flash 5 and create movies. I have included design considerations such as color combinations, object arrangements, and use of all the tools Flash 5 offers to create art, not to demonstrate how to create certain kinds of artwork, but to show you how to use Flash 5 tools to accomplish your own design and artistic goals.
Some materials may appear too basic and others too advanced, but like Goldilocks, my goal is to find the level of materials deemed "just right." Because the skills of intermediate Flash users are quite varied, feel free to skip around and focus on the materials that best fit your needs.
Getting StartedIf you are new to Flash, look at the section in Chapter 1 that explains the mind-set required to use Flash effectively. It's an explanation of how to think about using Flash as a tool. I included this section because, initially, most people don't quite grasp what Flash really is. Once you get the concept of Flash straight, learning how to use it effectively is much easier. The idea of using frames, layers, timelines, and objects needs to be grasped clearly before forging ahead. It's not difficult to learn, but it is necessary. For those of you who regularly use Flash, you can skip the conceptual material, but do go over the sections in the first chapter on using the panels and other new features of Flash 5. The use of panels requires that you approach Flash differently than you approached the earlier versions. I believe what you will find most useful are the descriptions of how Flash 4 tools have changed in Flash 5. For example, the instance name of an object is entered into the Instance panel instead of a dialog box, and all tweening is now accomplished in the Frame panel. So although you may know Flash 4 well, look to see what the step up to Flash 5 involves so that you can get back to work producing great Flash movies.
Once you have the basics down, play with Flash 5. Don't be afraid to experiment with different tools just to see what happens. In the long run, the most productive use of your time will be to play with Flash 5 to discover what you can do with it. I tried to have fun with every example movie and project the book contains, and you should too. (Consider the alternative.)
The Projects and CD-ROMThe examples, learning utilities (little movies that show you how some feature of Flash 5 works), and projects used in this book can be found on the CD-ROM. You can use them in any way you want, but they are intended to show you how to accomplish different tasks with the different parts of Flash 5. Each example focuses on one of the many Flash 5 features. The learning utilities are little projects that are designed to show you how elements of Flash 5 work together, and the projects are sample applications you may have occasion to use in your own work.
You might want to take a shortcut when you're working with the learning utilities and projects. If you open a movie from the CD-ROM as a library, you'll get all the symbols and sounds you need for your movie. Then you can just focus on developing the movie without having to create movie files and many of the objects. Just select File|Open As Library from the menu bar.
If you have a Macintosh, you may find that some of the SWF files are in QuickTime format and do not do what you would expect them to do. If you do experience that phenomenon, load the FLA file for the movie into Flash 5 and press Cmd+Return to create a Mac SWF file. All of the files were developed jointly on an iMac DV SE running on OS 9 and a Dell with an 866 Pentium III running on Windows ME just to make sure both platforms run the movies as advertised. Screen shots are made up of both Mac and Window images, and the differences are miniscule. The Windows version of Flash 5 has an additional icon toolbar running just beneath the menu bar and a status toolbar along the bottom, and although I found these additional toolbars nice to have, they weren't crucial to anything in the book. Also, in tests with OS X on the Mac and Windows 95/98 on the PC, everything seemed to work and look pretty much the same. Mac OS X takes up more memory than OS 9, and I would suggest getting 256MB of memory for the larger files.
If you are one who is especially partial to your Mac or Windows PC, here's a piece of advice: Get over it! To paraphrase Will Rogers, "I never met a computer I didn't like." In this day and age of cross-platform development and the Internet, you should respect both Windows and Macintosh platforms (not to mention Linux and Unix platforms). If your client's customers cannot read a Web page with an embedded Flash movie because they have a Windows PC or a Mac, that's a customer your client has lost.
In addition to checking the movies on both major OS platforms, I also checked the movies on the latest versions of Internet Explorer (IE) and Netscape Navigator (NN). As this book was being written, IE was in version 5.5 and NN version 6 had just come out of beta. So, you should have no problem using either platform or browser with the movies on the CD-ROM or in the book. You may have to upgrade your browser plug-in to Flash 5, but that's easy and free at www.macromedia.com.
This Book Is for YouWith the aid of capable editors, I wrote this book in expository English. I never have been a great fan of so-called technical writing, and I have reservations about whether anything should be written that way. (My engineering friends tell me otherwise.) So, you will find no special jargon except the terms that Macromedia has imparted on the elements in Flash 5. My goal in this book, and every other book I've penned, is to clarify technology. All of the examples, the steps, the tips, and asides have been to help you get as much out of Flash 5 as I have. If you have any questions or comments, you can contact me through my Web site at www.sandlight.com. And I hope to hear from you.