The Hidden Power of Flash Components

The Hidden Power of Flash Components

Paperback(Book and CD-ROM)


Temporarily Out of Stock Online

Eligible for FREE SHIPPING


The Hidden Power of Flash Components by J. Scott Hamlin, Jared Tarbell, Brandon Williams

Flash Components: The Key to Faster Development and Sophisticated Functionality

You don't have to be a programmer to achieve amazing effects with the hundreds of Flash components available from Macromedia and various third parties. Step by step, The Hidden Power of Flash Components shows you how—and the enclosed CD provides a library of powerful components ready for you to practice with, build upon, and use in your own projects.

For those of you with just a little programming experience, this book also demonstrates how to build your own components to use and share with other developers. Whatever your aims, and regardless of your experience, soon all the power of this incredible Flash feature will be within your reach. Coverage includes:

  • Determining the most effective ways to leverage components
  • Avoiding component pitfalls
  • Customizing external resources for use with components
  • Building your own components
  • Building a custom UI, Live Preview, and MXP file for a component
  • Customizing component artwork
  • Using components to build games
  • Understanding the difference between components and SmartClips
  • Troubleshooting component construction and application
  • Using multiple components to create more complex effects

Note: CD-ROM/DVD and other supplementary materials are not included as part of eBook file.

Product Details

ISBN-13: 9780782142105
Publisher: Wiley
Publication date: 04/16/2003
Edition description: Book and CD-ROM
Pages: 252
Product dimensions: 7.50(w) x 9.00(h) x 0.52(d)

About the Author

J. Scott Hamlin is author and co-author of several books, including Flash 5 Magic: with ActionScript, Flash 4 Magic, and Photoshop Web Techniques. His clients include Nabisco, Procter & Gamble, Sun, Nokia, and Nickelodeon.

Read an Excerpt

The Hidden Power of Flash Components

By J. Scott Hamlin

John Wiley & Sons

ISBN: 0-7821-4210-9

Chapter One

What Are Components and Why Should I Care?

Components are valuable resources for Macromedia Flash designers, whether you are a beginner or an advanced user. There is no reason to be intimidated by components. Most components are very accessible, easy-to-use resources. In fact, typically you can leverage the value of many components with little or no Flash experience.

Dive into this chapter. I'll show you what a component is, what it can do, and how to recognize one.

* The power of components

* What components are, in detail

* What to do with components

* Where to find components

The Power of Components

Probably the quickest and easiest way to understand what components are and why they are valuable is to compare them with a product you already know. In many ways, Flash components are similar to plug-ins for programs such as Adobe Photoshop or Discreet 3ds max. Components also have similarities to macros used by popular word processors like Microsoft Word. But to call components "plug-ins" or "macros" would be a disservice. They are much more powerful than that, as suggested by Figure 1.1.

Components are resources that have the Flash programming (ActionScript) encapsulated with any other required resources (graphics, text, audio, etc.). If you can use ActionScript to program something in Flash, you can turn that something into a component.

Components are particularly useful for automating any kind of repetitive or complex task that requires ActionScript. While we'll be looking at the value of components more from a user's perspective in this book, let's look at an example on the programming side to illustrate the usefulness of components.

Let's say you need a bunch of slick drop-down menus for a variety of Flash interfaces. You are a very good ActionScript programmer and can easily program the drop-down menu. Once you program the drop-down menu, you have useful code that you can use again and again.

While most programmers are in the practice of using their code repeatedly, it still takes a lot of time for even the quickest and most incredibly talented programmers to make modifications to their code. Often programmers only need to modify variables in their code. However, those variables might be buried in hundreds of lines of code, or the programmer might need to modify multiple references to the variables or to modify a large array of variables.

In fact, it's not uncommon for programmers to spend more time modifying their existing code than they did when they originally programmed the code. If a programmer comes back to their code six months after they originally coded it, they might easily forget a variable reference or something else important that could lead to hours and hours of bug hunting.

This often leads programmers to simply recode the item. Whether you're a programmer or not, you can probably appreciate the fact that it is very inefficient to continually recode something from scratch.

Components help you avoid such a fate. Developers can create components so that the variables for the code can be more easily modified through a much more accessible interface. This, in turn, allows programmers and nonprogrammers alike to leverage that code repeatedly without tediously rooting through the actual code to make modifications.

As mentioned earlier, if you can generate something with Flash and ActionScript, then you can make a component out of it. You can make components generate any sort of effect that can be created using Flash and ActionScript, including dynamic menus, programmatic animation effects, and audio or video controls. You can even use components to generate entire games.

Your Flash projects can even contain multiple components. You could, for example, create a Flash site that contains a component that generates the navigation system along with a component that controls what audio is playing in the background.

If you are relatively new to Flash, components let you add advanced functionality into your projects without requiring that you learn programming. If you are an advanced Flash designer or programmer, components save you time by automating repetitive tasks. You can then put that time towards making your projects all the more compelling.

Components do not increase the download time of a Flash movie. Flash components are made from the same resources you would use if you didn't use a component. A drop-down menu made with a component usually uses the same resources as a drop-down menu created without a component. The only difference is that the component is easier to use and modify.

This book is about showing you how to leverage the incredible value of components. In the following chapters, you will learn how to use, manage, and even create components. The book's companion CD gives you all of the components featured in this book as well as many additional sample components.

When you are finished with this book, you will be able to "save the world before bedtime" and leap tall deadlines with a single bound. You'll feel compelled to think of a cool super hero name for yourself, and you'll soon be making sketches for your new costume, all the while wondering how good you'll look in spandex and tights.

Well okay, you may not find yourself hiding your secret identity with a pair of cheap glasses while fighting off a sudden crush for anyone named Lana Lang, but learning to utilize components will certainly empower you to do more things in much less time with Flash.

All Right, Already!! So What Is a Component Exactly?

A component is a movie clip in Flash that has been prewired to generate some sort of functionality. As you will see later in the book, you begin generating a component by creating a standard movie clip. You then transform the movie clip into a component with a few relatively simple steps.

Components were introduced in Flash version 5 as smart clips. The name indicated a movie clip with smarts added to it. Macromedia changed the name from smart clips to components in Flash MX. If you see something referred to as a smart clip, you can treat it exactly as you would treat a component.

Smart clips developed in Flash 5 work perfectly well in Flash MX. Components that are programmed in Flash MX can be made to work in Flash 5. However, if you use code that was introduced in Flash MX in your components, they will not work in Flash 5.

So if a component is like a movie clip, how can you tell a component apart from a movie clip? The easiest way is by looking at its icon in the Flash Library. Figure 1.2 shows the library of a component called Link Scroller from Eyeland Studio's Flash Foundry ( The item highlighted, named "link scroller," is a component. Several other elements are visible in the library, all of which are actually used by the component and contained within the component.

Many of the components featured in this book are from Eyeland Studio's Flash Foundry product. Similar components can be found at or

The default component icon is this: ?? The standard movie clip icon is this: ?? If you see the default component icon, then you know you're dealing with a component.

However, Macromedia has provided several icons that you can use for components and has introduced the capability to create custom component icons. Any resource that displays one of the following icons will also be a component. Fortunately, both the alternative icons and custom icons are not used very frequently. Most components simply utilize the default component icon.

Identifying a Component on the Stage

See Chapter 11 for information on how to create a custom icon for your components.

When you see an item on the stage, it can be difficult to determine if it is a component or some other type of Flash resource (movie clip, button, graphic symbol, etc.). As with any Flash resource, if you are in doubt about what kind it is, you can always select it and look at the Properties panel. For example, Figure 1.3 shows the Properties panel for a movie clip. You can tell at a glance that the object is a movie clip because of its icon and its Movie Clip label.

When a component is selected, the Properties panel can take on several appearances. Figure 1.4 shows the Properties panel for a component that comes with Flash MX. On the top left, you can see the default component icon and the Component label-both of which, of course, indicate that a component is selected. Notice the two tabs on the top right: Parameters and Properties.

The Parameters tab is displayed in Figure 1.4; this tab is only visible when a component is selected. Also, notice the area within the Properties panel that looks like a small database field. This is probably the most noticeable indication that a component is selected: these are the parameters for the component.

This area is referred to as the component user interface (UI). In Figure 1.4, this is the default user interface. Component parameters allow you to customize a component. If you think of a component as a sort of machine or engine that can be used to create something, then the component's user interface is like the machine's control panel (see Figure 1.5). The UI allows you to adjust specific characteristics for whatever the component is making.

So if a component is like a machine that makes a doohickey, then the component UI is like the machine's control panel that lets you tell the machine to make a red doohickey rather than a blue doohickey.

Figure 1.6 shows the Properties panel for a selected component with a different type of parameter user interface-in this case, a custom user interface. We will look at component UIs and parameters, including custom UIs, in detail in Chapter 2 (and, really, throughout this book).

What Can I Do with Components?

You can use components to generate almost anything you can imagine (anything that Flash is capable of creating, that is)-games, dynamic menu systems, interactive buttons, audio controls, video controls, transition effects, database systems, interactive mouse effects, animation effects, and much, much more. This might be a little bit of a surprise if you have noticed the components that come with Flash MX.

Figure 1.7 shows the included components. You can open this panel by selecting Components from the Windows menu. If you drag a few of these onto the stage and then publish your movie, you won't exactly receive the thrill of a lifetime. The components that come with Flash generate relatively humble things like radio buttons.

If you care to inspect the code of some of these components, such as the ComboBox component, you'll see that the ActionScript used to create the component is actually somewhat complex. Nevertheless, these standard Flash MX components merely scratch the surface of what is possible with components.

To begin to appreciate the real value of components, we need to look at a few examples of components in action. Figure 1.8 shows an interface that uses two different components. One component generates the navigation system on the left, and the other controls the scrollable text field.

The navigation is controlled by a component called Springy Thingy. It looks like a standard, vertically oriented navigation system. You can roll over the buttons, and each button changes color as you do. However, you can also drag a button, and the other buttons will move along with it in a fun bouncy or springy motion (see Figure 1.9). The scrollable text component controls the functionality that lets you click the up or down arrows or drag the bar to view all of the text in the field.

Figure 1.10 shows the interface within Flash MX. The gray box with the Springy Thingy label is the component used to create the navigation system. Since components are created from standard movie clips, they can look like just about anything when you are working with them in Flash. In Figure 1.10, the gray box with the component icon to the left is Eyeland Studio's standardized look for our components. This visual treatment helps to set it apart from other resources on the stage, but it is not representative of what all components will look like.

The scroll bar to the right of the "You Need a Vacation!" field is also a component. The scroll bar component is more indicative of the kind of component you are likely to find on the Web.

Components that you find on the Internet are commonly hard to identify as components when you are working with them in Flash. There is no standard for how components look when they are on the stage. See later in this chapter for some sites that distribute components.

Figure 1.11 shows the component user interface for the Springy Thingy component. The controls in the interface let you adjust various parameters in the component. In the case of Springy Thingy, different parameters allow you to specify the text for each button, the colors for the text, the colors for the various states of the buttons, the shape of the buttons, the size of the buttons, and much more.

Components that you find on the Internet are commonly hard to identify as components when you are working with them in Flash. There is no standard for how components look when they are on the stage. See later in this chapter for some sites that distribute components.

While the user interface might look a little intimidating at first, it's actually not that much harder to use than any dialog box or panel in Flash. If you are familiar with how to adjust font characteristics for text in Flash, then you should have very little trouble using a component UI like this. You will get plenty of hands-on experience using component UIs similar to this one, in later chapters.

The advantage of using components becomes clear when you consider what it would take to generate the same functionality by coding from scratch. Scott Balay from Eyeland Studio coded the Springy Thingy component. Scott has over 10 years professional programming experience and has been programming with ActionScript ever since it was introduced in Flash 5.

Programming the essential elements of the Springy Thingy navigation system took Scott about six hours, including testing and troubleshooting. This does not include time spent creating the actual Springy Thingy component or the component user interface. Scott readily admits that some programmers might be able to work faster; however, it would still take most Flash programmers several hours to program the overall navigation system from scratch.

When I created this Flash interface template for Eyeland Studio's Flash Foundry, it took me only 15 or 20 minutes to set the parameters for the Springy Thingy component so that it looked good in context with the rest of the artwork in the template. Much of this time was actually taken up by making an adjustment, testing to view the results, and then going back to make a few more adjustments.

Obviously, 15 to 20 minutes is better than six hours. Relatively inexperienced programmers might take days to program similar functionality. However, by using a component to generate the functionality, I was able to use those hours and days for other things (such as sleep, having a life, and other previously inconceivable things).

Let's look at one more example. Figure 1.12 shows a concentration game for the Musco Family Olive Company ( The Olives site design and the artwork for the game was done by the Tesser agency ( The game is a classic concentration or match game with four levels. Each level increases in difficulty and in the points earned for completion.

Brandon Williams did the programming for this game. Brandon is also an advanced programmer who has been published in several books. It took Brandon approximately 12 hours to program this game. Once again, it took me about 15 to 20 minutes to change the parameters for this game using the component.

This component, however, is a little different than the Springy Thingy example. The concentration game component works with art resources extracted from the library. The art that works with the component is used for the game pieces as well as the pictures that are revealed when the player makes matches. Although setting up these game pieces to work with the component takes some time, it is not nearly as cumbersome as it would be without the component.

Figure 1.13 shows the concentration game component in Flash with its user interface open. Notice that there are no game pieces on the stage for the game. The artwork for the game is not on the stage. This is because the component actually extracts the art resources from the library. Since there are several levels to the game, this helped keep the game nice, neat, and tidy during production. In other words, using the component, in this case, made this game easier to generate because I didn't have to go to the trouble of programming it and because it was more manageable.


Excerpted from The Hidden Power of Flash Components by J. Scott Hamlin Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Table of Contents


Chapter 1: What Are Components and Why Should I Care?.

Chapter 2: Using Components 101.

Chapter 3: Using Components with Custom User Interfaces.

Chapter 4: Button Components.

Chapter 5: Interface Components.

Chapter 6: Animation Components.

Chapter 7: Text Effect Components.

Chapter 8: Video and Audio Components.

Chapter 9: Game Components.

Chapter 10: Creating Components.

Chapter 11: Component Extras.

Chapter 12: Troubleshooting Components.


Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews