FMXIS Interface Component Library

Availability

Flash Player 6 r65.

Description

This component library contains a core of the basic types of elements you will find on device and equipment interfaces, such as knobs, displays, gauges, and sliders, as well as two elementary timing elements (timer and stopwatch). The original library was developed and distributed in the book, Flash MX for Interactive Simulation: How to Construct and Use Device Simulations.

The library consists of the following components:

Components Installed as FLA's

The distribution MXP installs the component FLA's into your Components folder directly, and installs the ActionScript files into Classes > mx > fmxis. This makes it easy to change the default graphics for each class, by simply opening the symbols in the Library and changing the graphics. All components, however, also provide properties to set Linkage ID's, so you can change the graphics on a per-instance basis by creating a new symbol, giving it a Linkage ID, and setting the element in the property panel.

Event/Listener Mechanism

These components, like our version 1 component described in our book for Flash MX, use an event/listener mechanism to communicate with other objects. In version 2, these components use Flash's new addEventListener() mechanism, for compatibility with other aspects of Flash MX 2004.

Listeners receive events by defining methods with the name of the event, and then registering with the components addEventListener() method. Alternatively, if the listener has a method named handleEvent, then the component sends the registered events to that method. For example,

myListener = {};

myButtonInstance.addEventListener("onPress", myListener);

myListener.onPress = function (eventObj) {
	// handle the onPress event, eventObj contains info on the event
}
// if myListener had a handleEvent method, that would take precedence
// in receiving the registered events

Important: each component instance defines a single event object that it reuses for each event. Therefore, if you need to preserve a value from the event, copy it during the event handling.

The FMXIS Component set features two extensions to Macromedia's EventDispatcher mechanism. First, you can use the method addListener() to register a listener to receive all events from that component. For example,

myListener = {};

myButtonInstance.addListener(myListener);

myListener.handleEvent = function (eventObj) {
	// event name is eventObj.type, possible value is eventObj.val,
	// component generating the event is eventObj.target
}
// instead of handleEvent, myListener could have the individual event
// handlers.  Note in the example above, myListener only received onPress
// even if it had handleEvent defined, since that was the only event
// registered to myListener.  With addListener(), the listener gets
// all the events.

Second, you can register a listener by string name rather than pointer, by using addProxyListener(). For example,

myButtonInstance.addProxyListener("myListener");
...
myListener = {};

myListener.handleEvent = function (eventObj) {
	// event name is eventObj.type, possible value is eventObj.val,
	// component generating the event is eventObj.target
}
// Notice, unlike addListener, the listener itself does not exist when the
// registration occurs.  However, at event generation time, the listener
// name resolves and the event is handled in the expected fashion.

It is called a "proxy listener" because it sets up internally a mechanism to forward the event to the listener you designate. This type of listener is determined at the moment the event is generated. Its main advantage over the conventional mechanism is that it allows you to specify the listener by name in the component property panel, rather than having to remember to programmatically add the listener at initialization. The proxy listener mechanism also recognizes absolute and relative path designations such as _parent, _root, and _level.

Addressing Event Naming Conflicts: Since we advocate a centralized event handling mechanism, we incorporated another feature not found in the default Macromedia v2 component architecture. You can change the name of the event in each component programmatically (via a component property) or via the component property panel. This avoids the situation in which two components have the same event name, for example, onChange. Each component help file will tell you the name of the property holding the event name.

Skinning

We have made all important graphics for the components skinnable by simple substitution by linkage ID. The process is much simpler than Macromedia's skinning architecture. The idea is that you create a movie clip to replace one or all of the elements of a component, assign it a linkage ID, and enter that linkage ID in the property inspector (or supply it as an initObject parameter to attachMovie/createClassObject). The elements usually cannot be changed once the component is on the stage. To change the skin for all components of the same class in your movie, you would simply change the Library item.

The disadvantage of this approach is that you will not see the final graphics until you publish your movie. Even the Macromedia components, though, cannot overcome this limitation.

How to Create Skins

The easiest way to create skins for is to use the Library item you want to change as a model for creating your own item, then assign it a linkage ID and set the property in the component to use your graphic instead of the default. In more detail:

1. Place the desired component on the Stage
2. Look in your Library to locate the appropriate movie clip
3. Duplicate and Rename the movie clip so it does not conflict with other movie clips
4. Most importantly, change the linkage ID so that it does not conflict with other clips
5. Edit the movie clip graphics as needed
6. Repeat steps 2-5 for all the elements you want to change
7. Leave all edit modes and open the property inspector for the component
8. Enter the linkage ID's you created for each element.

More Information

For more information, please visit www.FlashSim.com. The components were built by Jonathan Kaye, copyright 2002-2004, Amethyst Interactive LLC, all rights reserved.

You are free to use and modify the components, subject to Macromedia's End User Licensing Agreement (as relevant to the classes FMXIS Components depend on), in both commercial and non-commercial application so long as the source code comments regarding ownership remain intact (for the FLA's or compiled clips derived from them).

Version

2.0, April 2004