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.

Figure 1.7: The components that come with Flash MX

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.

Figure 1.8: The interactive elements in this Flash interface are generated using components.

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.9: Dragging the navigation bar around produces a bouncy or springy animation effect.

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.

Figure 1.10: One of the components is easier to pick out than the other.

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.

Figure 1.11: The user interface for Springy Thingy provides a quick and easy way for customizing the characteristics of the component.

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 (www.olives.com). The Olives site design and the artwork for the game was done by the Tesser agency (www.tesser.com). The game is a classic concentration or match game with four levels. Each level increases in difficulty and in the points earned for completion.

Figure 1.12: This concentration game for the Musco Family Olive Company was created using components.

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.

Figure 1.13: There is an instance of the concentration for each level of the game. Each instance has the parameters set differently.