O'Reilly Network -- What Is a Flash MX Component?

What Is a Flash MX Component? by Colin Moock, author of ActionScript for Flash MX: The Definitive Guide, 2nd Edition 01/28/2003

Last March Macromedia released Flash MX with a compelling new vision for the product: the animation and design software would henceforth be groomed as a rich Internet application platform. Accordingly, some heavy changes were made to the authoring environment. Macromedia added an extensible library of user interface widgets, known as the Flash UI Components, for quickly creating common GUI applications. (Previously, Flash developers were expected to bake all UI in their own ovens.) Java developers accustomed to working with Swing or Visual Basic developers used to a drag-and-drop environment will appreciate this critical step in the direction of rich application development for the Web.

Flash UI Components are actually a specific example of the more general Flash MX component architecture. A component in Flash MX is a reusable, packaged module that adds a particular capability to a Flash movie. Components can include graphics as well as code (as do the built-in Flash UI Components), so they're neat little bundles of self-contained functionality that you can easily drop into your projects. For example, a component can be a radio button, a dialog box, a preload bar, or even something that has no graphics at all, such as a timer, a server connection utility, or a custom XML parser.

From a technical point of view, a component is Flash MX's version of Flash 5's smart clip, which is a movie-clip symbol that allows its variables (or "clip parameters") to be set via a GUI in the authoring tool. Flash MX components are typically subclasses of the built-in MovieClip class, but they're not required to be. As such, they have all the properties and methods of MovieClip, plus their own properties and methods. (For the uninitiated, a MovieClip is Flash's basic content container, something like a DHTML layer in a web page.)

Related Reading ActionScript for Flash MX: The Definitive Guide By Colin Moock Table of Contents Index Sample Chapters Author's Article

So the answer to "what is a Flash MX component?" depends partly on your point of view. From a traditional Flash point of view, components are effectively ready-made movie clips that you install and drag into your movies. From a programmer's point of view, components are customizable building blocks that can be added to an application visually or programatically and then wired into the application's logic and data.

Flash MX components are Macromedia's effort to provide visual programmers with a drag-and-drop development environment, much like Microsoft Visual Basic. Using components you can create a user interface visually in the Flash authoring tool and then easily hook that interface up to routines that perform some action. Figure 1 is a screenshot showing the creation of a fill-in form with checkbox, listbox, and pushbutton components.

Figure 1. A fill-in form with checkbox, listbox, and pushbutton components.

The component architecture is fully extensible. If you're an advanced Flash developer, you can create your own components and distribute them as binary files for other Flash developers to install. The extensible component architecture allows Macromedia to update the capabilities of Flash MX by shipping new component sets, without requiring an updated version of the core authoring tool. Some developers also use components to distribute code-only libraries such as basic game classes or data-handling utilities. While the use of components for code distribution is common practice, the jury is still out on whether it is the best practice. Flash MX does not impose a strict policy on code distribution. Code can be distributed in a component, in a .as file included in other .fla files, in a runtime or author-time shared library, or in a .swf file that is dynamically loaded at runtime. The distribution method you choose will depend on your situation.

Chapter 14, "Movie Clip Subclasses and Components" and Chapter 16, "ActionScript Authoring Environment," of ActionScript for Flash MX: The Definitive Guide describe how to create components and explain how components work under the hood. You can also check out Macromedia's online technotes:

• How to Build a Flash MX Component (shows how to subclass MovieClip)

• Creating Components (explains how to make a basic component without subclassing MovieClip)

Of course, the best way to learn about components is to try them out. The following sites all have plenty of components free for download:

• http://www.macromedia.com/exchange/flash/
• http://www.flashcomponents.net/
• http://componenthq.entclosure.com/

You'll need the "Extension Manager" to install components (which are distributed as .mxp files). You can get the Extension Manager at the Macromedia Flash Exchange.

Here are resources to learn how to use components to create a GUI application:

• Introduction to Components Tutorial
  In the Flash MX authoring tool, select Help > Tutorials > Introduction to Components

• Using Components
  In the Flash MX authoring tool, select Help > Using Flash > Using Components

• Building an Address Book with Components (by Colin Moock)
  http://www.macromedia.com/desdev/mx/flash/articles/addressbook.html

• Creating Forms with Components in Macromedia Flash MX
  http://www.macromedia.com/support/flash/applications/creating_forms/

Colin Moock has been researching, designing, and developing for the Web since 1995.

Building a Video Presentation with Macromedia Flash MX Professional 2004 Media Components

Imagine creating web applications that synchronize video with animation, text, and graphics—in minutes, without programming. Macromedia Flash MX 2004 Professional provides a suite of new streaming media tools that makes this possible. This article showcases these tools as you learn how to build an interactive video presentation.
These streaming media tools feature three new components: Media Display, Media Controller, and Media Playback. In addition to these components, Macromedia Flash MX 2004 includes several behaviors that help connect media components to each other and to the rest of your application. (For those of you who are new to Macromedia Flash MX 2004, behaviors are a new construct that automatically attach predetermined code to a movie clip or component instance.)
Here’s a short description of each of the three media components.

Skinning the Flash MX 2004 Components

The Macromedia Flash MX 2004 components have come a long way in functionality from previous versions. One of the areas that have been completely re-thought is the possible skinning mechanisms. Although the new components offer many options and are more flexible than in previous versions, it hasn’t been easy to realize the benefits.
In this article I explore skinning components using the many skinning options available. I cover skinning using the library and themes, and through code I explore skinning using the prototype method, subclassing a component class, and the initObject method. Armed with this, you will be able to take better control of your application's look and feel and have a good understanding of how flexible the new skinning architecture is in Flash MX 2004.

Stepping into the New Macromedia Flash MX 2004 Component Structure

Macromedia Flash MX 2004 introduces version 2 of the Macromedia Component Architecture, or "v2 components" for short. Naturally, this means you'll find new features, improved performance, and additional capabilities in this release. However, because of the changes to the underlining architecture, it also means you need to adopt new ways of scripting. Plus, updating your old applications that use v1 components raises a lot of questions. Will you be exporting to Flash Player 6 or 7? Will you be using ActionScript 1.0 or 2.0? Can you mix and match v1 and v2 components? There's no one answer and no one best practice because there are so many variables. In this article you learn the main differences between the old and new components. I also step you through your upgrade path options.