Homemade Components

[ LiB ]

Homemade Components

In the preceding chapter, you learned how to use the second-generation (V2) components. They're useful, and you're likely to see even more handy components published over time. Although this chapter doesn't attempt to deconstruct the UI components, you will see how modest components that you build yourself can be very easy to make and useful throughout your projects. If nothing else, this section walks you through the first steps in making any component.

Designing a Component

Like any project, building a component starts with design. First understand what a component is: a movie clip for which initial values are assignedby the author using itvia the Parameters tab. Any movie clip can have contained variables, but each instance starts with the same initial values for those variables. Obviously, you can refer to a clip's instance name to change its variables using ActionScript, but sometimes it's more convenient for authors to set such variables in a similar manner as they set propertiesright in the Properties panel.

Components are just clips with code inside them. But so are movie clips. What makes a component different is that although each instance contains the same base features, each instance also has the capability to behave slightly differently. Take the Button component. Each one acts like a button, but one might be labeled "start" and another "stop," and they both result in a different behavior when clicked.

The component I designed for the example that follows is a title/ subtitle displaybasically, just two lines of text in a given font style and layout. The idea is that authors can place this on any page of an app and manually modify the words that appear. Although they could have done this with separate blocks of text, this will be better because the font and other formatting can be updated in one place (the master symbol). In addition, this is better than a regular movie clip because authors can set the displayed text by just typing into the Properties panel's Parameters tab (instead of writing code). Above everything else, this, and all components, insulates the using authors from the code. They don't have to worry about code, and you don't have to worry about them messing with your code.

Making a Component

Let me walk you through making the text component just described. First, create two dynamic text fields with nice large margins. Type title_txt into one and subtitle_txt into the other, name their instances the same, and then spend as much time as you want stylizing the text. (I just made my subtitle italic.). See Figure 13.1.

Figure 13.1. These two dynamic text fields will become a component.

Select both blocks of text and convert to a clip (press F8), call the symbol MyComponent, and make sure it's a movie clip. Double-click the instance of your symbol now onstage so that you can edit its contents. Put the following code in the first keyframe of the clip:

 title_txt.text=title; subtitle_txt.text=subtitle; 

Pretty simple; as long as the title and subtitle variables have a value, the two fields will be populated properly. Turning this clip into a component enables you to establish title and subtitle as variables (called parameters) the using author can edit via the Parameters tab. You can return to the main timeline (Ctrl+E) and then open the library (Ctrl+L). Select the MyComponent symbol from either the library's Options menu (top right), or right-click and select Component Definition. From the Component Definition dialog box, click the plus button twice, and then fill in the Name, Variable, and Value fields as follows.

Name	Variable	Value
Title	title	Title appears here
SubTitle	subtitle	Subtitle appears here

Name is what the using author will see, but Variable is the actual name of the variable they're setting. If you leave Variable blank, it will just use whatever you have under Name. The idea is that you can further insulate the using author from your potentially cryptic variable names . Finally, Value is really the default value. In this case, the using author will always change these. In any event, make sure these default values are acceptable in case the using author fails to populate the component.

This component is ready (although we'll add to it later). Take the instance onstage, and using the Properties panel Parameters tab, replace the values for Title and SubTitle. Test the movie and you'll see your values appear. If you build a simple paging app, you can put a new instance of this component on each page with different content. The cool part is you can later edit the master symbol ( perhaps change the font color ), and all instances will update despite the fact that they contain different words.

Although this isn't the next killer component, it's actually fairly useful. However, next we'll improve it by giving using authors a preview of their text (without the need for testing the movie) and also build in some alignment.

Enhancing Components

The component just built was pretty basic. Tons of additional features are available when building a component. Here's a list of the big ones:

• Live Preview enables you to present a separate SWF in place of any component instance onstage. This SWF runs code while authoring, so using authors can get a preview of how it will look when they test the movie.

• Compiled clips are a simplified addition to Live Preview. Basically, a compiled clip is like a minitest movie right inside the component onstage. Like Live Preview, this means you'll see the clip as it will look when publishedbut compiled clips are based on the same clip (making them identical); whereas because Live Preview is a separate file, it can optionally present a slightly different presentation. Compiled clips are also much simpler to produce.

• Custom UI is still another SWF that serves to replace the name/value pair interface found in the Parameters tab. It's misguided to use these to just spice up the Parameters tab. Use them only for guided wizard-type interfaces or for when a visual interface makes it easier for the using author to populate values. Imagine, for instance, if the Align panel looked like that shown in Figure 13.2 rather than the more intuitive graphic solution.

Figure 13.2. This mock-up of what the Align panel would be without a graphic interface emphasizes the value of images.

ActionScript 2 (AS2) isn't so much a feature of components but rather a new implementation of the ActionScript language. However, some specific features (such as associating your component symbol with an AS2 class definition) apply specifically to components. You'll read about just some of these in the last section of this chapter.

Making a Compiled Clip

Now it's time to make a compiled clip out of the title/subtitle component. The hooks to Live Preview and custom UIs are found in the Component Definition dialog box (although you also need to read up on how to make these). In addition, the Component Definition dialog box includes options for how your component is to appear in the Components panel when distributing (the next section's topic).

Before you make a compiled clip based on your component, add scripts that respond to the using authors making changes to the parameters. Specifically, there's an event triggered called onUpdate that enables us to update what the using authors see any time they make a change to the parameters. We'll add such a script to the MyComponent component built earlier. You can't just double-click a component instance (because that would increase the chances of your using authors messing up the code). To edit its contents, you must either select Edit from the library symbol or right-click an instance and select Edit in Place. Add the following code under the two lines currently in the first keyframe of the symbol:

 function onUpdate(){ title_txt.text=title; subtitle_txt.text=subtitle; } 

Basically, every time onUpdate triggers, we'll push the two variables ( title and subtitle ) into the text fieldand onUpdate triggers when the using authors edit the parameters.

Return to the main timeline (Ctrl+E) and select the MyComponent in the library. From the library's Options menu (or right-click), select Convert to Compiled Clip. Not only does this create an authortime SWF into the library, it also swaps any instances onstage. Now you should be able to edit the parameters and see the results while authoringthat is, no test movie required. You shouldn't Convert to Compiled Clip until you're really sure the component is complete, because you can't make any changes to the original (unless you compile it again).

By the way, your onUpdate handler doesn't have to be literal and direct. That is, this example showed both parameters having a direct visual result in the onscreen text. Often the parameters you give to the using author don't have an immediate visual result. Similarly, you can have as many variables and functions inside your componentsthey don't all have to be available to the using author. Although it's not quite the same, exploring your own components is a good introduction to object-oriented concepts such as private and public properties.

Distributing Components (MXI)

Obviously, this chapter cannot cover all the ways to enhance your component. Suppose, however, that you've built a great component that you want to share with the world. The way to distribute it is as an MXP file (Macromedia eXtension Package). You can download an MXP file and then use the free Extension Manager software to open it (see Figure 13.3).

Figure 13.3. The Extension Manager makes it easy to install, disable, and remove components.

The Extension Manager gives users a convenient way to install and manage multiple component sets. To create an MXP file, start with either an FLA containing your component or an SWC packaged version of your component. The new compressed SWC format (created via the Export SWC option in the library) enables you to distribute a component along with its AS2 class files (described later). An MXP is basically your component (either FLA or SWC) along with an XML file (.mxi extension) that provides instructions as to where the components are to be installed and descriptive information such as its name and instructions. Finally, the Extension Manager can combine the component and MXI description file to make an MXP that you can distribute and share. For complete details, refer to this document:

 http://download.macromedia.com/pub/exchange/mx1_file_format.pdf. 

Although the extra steps to make an MXP are worthwhile when you distribute your component, you can also install them manually so that they appear in the Components panel while you're authoring. After all, because we're talking about building a code library, it might be nice for you to have quick access to your favorite homemade components. It's really easy. First go back to the MyComponent's Component Definition dialog box and select the check box Display in Components Panel. Find the Components folder inside the First Run folder adjacent to your installed copy of Flash inside the en (for English) folder. Make a new folder: My Components. Finally, from the library select MyComponent and choose Export SWC and save it inside the My Components folder you just created. (Alternatively, just save the FLA containing your component in that same folder.) Restart Flash and you will see your beautiful component along with the components that ship with Flash (see Figure 13.4).

Figure 13.4. You can manually add components to the Components panel.

There you goeverything you need to know about components in a few pages. In fact, there's a lot more you can do, but this is a good start. Try to design components that are as generic as possible, especially with regard to look and feel (not so much the underlying code). For example, I recently built an interminable busy indicator (for operations that I don't want to show 0-100, but just "busy doing something"). I took the idea from macromedia.com (where they use a rotating circle). Anyway, it works great, but the second client for whom I used it wanted to change it from a circle to a square. Naturally, I could have planned for such changes, but it demonstrates that components tend to embed the visual elements with the code (although, of course, that is not a rule). The rest of this chapter focuses on building a library of pure code.

[ LiB ]