One
of my favorite features of Macromedia Flash MX is definitely components.
The built-in ones have already saved me more development time
than I thought possible, and adding my own components has proven
to be quite successful. However, I've noticed that it's taking
a little time for the Flash community in general to get up to
speed with components and use them in real world projects. As
someone who is currently working on not one, but two separate
component based projects for clients, I'm here to help!
Misconceptions
First, let's clear up some of the misconceptions about components.
Yes, components are complex, but basic use of them is not. Just
about anyone can use a well-designed component--programmer or
not. Just a simple trip through the reference panel combined with
this article will give you more than enough information to get
started with components.
Now, a number of people have accused the built-in components
of being too complex, saying that they are sure that someone could
build the same functionality so they are smaller and easier to
use. Since I don't believe there's such a thing as the best or
fastest code, I agree with these arguments. However, I do feel
that the built-in components are close to the ideal version of
a component. They consistently provide the same kind of functionality
programmers have come to expect in OS level programming like VB
or VC++, while being very approachable. Think about it, you've
got both code and symbol-based skinning, focusing, and keyboard
control for each and every one of the built-in components. That
functionality alone makes them invaluable. For almost all projects,
the built-in components will provide what's necessary for your
application perfectly, and if you need to add more, the source
is fully available to you.
Preloading
Components definitely weigh in on the heavy side, but what most
people don't realize is that components share a lot of the same
symbols. For example, a movie with nothing in it but a scrollbar
component is 6.5K, but putting a scrollbar component in a movie
that already contains a PushButton component increases the size
of the SWF by less than 3K. Including all of the built-in components
in a movie will only make the movie 23K in total. (If you're checking
my numbers make sure you check out the actual SWF file sizes,
not just the bandwidth profiler—Macromedia Flash MX compresses
SWFs. The bandwidth profiler doesn't account for this in most
of its numbers.)
While the small size of components is a wonderful thing, many
people have noted that because components have a linkage ID set,
they have to be fully loaded before the first frame of a movie
displays. The problem is that 23K equates to more than 5 seconds
of "dead air" on a standard 56K modem. The good news
is that there are two easy-to-implement solutions to the problem.
First, you can go through your components and open their linkage
option. Uncheck the "Export in first frame" option.
This ensures that most of your components won't have to be loaded
before other elements of your movie display. In fact, the remaining
code portions of the components that must be loaded before will
account for less than 7K, which is approximately 1.5 - 2 seconds
of loading time on a 56K modem.
Secondly, you could simply create a second SWF that loads your
main movie into a level or a movie clip. Loading into a level
has the advantage of keeping your main movie's paths all the same
(it's _root will stay the same), but loading into a movie clip
is more flexible in the long run (you can move your main movie
around, resize it, and so forth). Your loading movie can refer
to the amount of bytes loaded in your main movie so you can quite
easily create a preloader that will load instantly and give the
user feedback on the status of your main movie.
Customizing
The artwork for the built-in components is a bit bland and unless
you're using them only for internal use or prototyping it's probably
best to spruce them up. It turns out that this is an easy process
for both coders and artists alike.
Each element of components can be colorized in simple manner
in one of three ways. First, after you give a component an instance
name, you can simply use:
myListbox.setStyleProperty("face",
0x330000);
This will make the face of the scrollbars inside of the myListbox
component a deep red hue. For a full list of the available properties
and descriptions about them, look in the reference panel at Flash
UI Components/FStyleFormat/Properties. As with all programmatic
colors in Macromedia Flash, ensure that you specify the color
with the preceding 0x and not a # (pound sign) as you may be accustomed
to.
The second way you can change the colors of a component is
to create a new FStyleFormat object, set a property in it, and then subscribe
all of the components you'd like to use this color scheme to your new FStyleFormat
object:
myStyle = new FStyleFormat();
myStyle.face = 0x330000;
myStyle.applyChanges();
myStyle.addListener(myListbox);
Finally, you can modify the colors of a component by setting
any properties of the globalStyleFormat object. Doing this will
affect any and all components in your movie:
globalStyleFormat.face = 0x330000;
globalStyleFormat.applyChanges();
Any time you have any of the built-in components in your movie,
you automatically have access to globalStyleFormat and can modify
its properties at any time.
If you need and want a slightly more granular control over the
look of components in your movie you can re-skin them quite easily.
Just dig around in your library in the Flash UI Components/Components
Skins folder. Unless you need your custom skins to be colored
dynamically (which is seldom the case) you can simply remove anything
in any of the movie clips and replace it with your own.
When doing this you can deviate from the original size
of the components, just ensure that all of your skins pieces match
up properly.
Changing dynamically
One
of the most important differences between components and the old smart clips is
that components support a huge library of methods that you can use to modify them
at run-time.
One of the obvious things you can do is change the data being
displayed in the components as if it's a label or the items in
a list. Respectively, the setLabel and addItem methods will handle
this for you.
You can also do more high-level things. For example, you can
sort the contents listbox and combobox components any time you
wish by simply calling the sortItemsBy method. Those two components
also let you set your own custom movie clips for the items in
the list. (I plan on writing another Flash Extreme article on
the nitty gritty details of doing this soon) Also, all components
support a setSize method that lets you resize components easily.
Make sure you take some time to get to
know all of the methods that components support, you may be surprised at how much
you can do! Gotchas
A lot of the complaints about the complexity of components originates
from developers not being able to get them to work properly. I've
yet to see a case though where this isn't due to user error. Read
all of the information about a component before you try to use
it. I promise it will make your life much easier.
One of the most common problems is that people can't get the
scrollbar component to work properly. Usually people say that
it functions well with static text but does not update when they
modify the value of the textfield with code. Most of the time,
this problem is because people use a variable for the textfield
as they would have in Macromedia Flash 5. Using it in this way
just won't work now. With Macromedia Flash MX and scrollbars,
you must give your textfields an instance name and modify
its contents by referring to its text property:
myField_txt.text
= "This is a test";
Another common problem is that after users place dynamic textfields
inside of scrollpanes or change the font for the tree control
component (available in component set #2 up on the the Flash Exchange),
their text does not appear. In both of these cases iis that text
that's being masked (as is the case with both of these components)
must have its font included in the SWF file in order to work properly.
The easiest way to ensure this is to do the following: Open your
library. Select the menu on the top right and choose "New
Font." Once you've created your font symbol in this manner,
open its linkage option and give it a linkage ID. Now, you can
use this font symbol like you would any other font, and it will
show up fine in the components that utilize masking.
Conclusion
Components are a powerful and important part of Macromedia Flash
MX that are worth learning. Hopefully you now have the tools to
help you use components in production-level projects. With this
knowledge you can easily get started using components in your
own work. | 
