Home Contact

[August 31, 2005]

Using the FIS Components

Filed under: ActionScript — @ 10:13 pm

In looking for ways to avoid Macromedia’s V2 user-interface components without writing my own, I’ve started using the FIS Components that come with the book Flash MX for Interactive Simulation by Jonathan Kaye and David Castillo. They are light-weight, good-looking, and smooth. The simple user-interface components include:

FISLamp: Simple indicator lamp
FISButton: Simple button
FISButtonToggle: Simple toggle button
FISSwitch: 3-position switch
FISRndDial: Simple round dial
FISSectDial: Simple sector dial
FISClickSelector: 3-position click selector
FISSlider

There are also more advanced interface objects as well as a nonvisual countdown timer and a stopwatch.

After a bit of trial and error, I’ve been able to use them pretty easily.

First I open FISCOMPS.FLA from the CD that came with the book, open the Library window, right-click -> Properties -> check "Export in first frame" on the desired components, and publish. The resultant swf is my library swf, which I incorporate into my main swf with swfmill. Say I named my library swf SLIDERSWF; then my .swfml file looks like this:

<?xml version="1.0" encoding="iso-8859-1" ?>
<movie width="630" height="580" framerate="31">
	<background color="#000000"/>
	<frame>
		<library>
		<clip import="SLIDERSWF" />
		</library>
	</frame>
</movie>

The components on the CD that accompanies the book are implemented in AS1. This is of no consequence once a component is in the library. However, the AS1 FIS components send notifications in an idiosyncratic way: a listener object must be on the same timeline as the component, and it must implement a method named ieh, which stands for “internal event handler.” (To be fair, at the time, Macromedia components were still using callbacks rather than event listeners.)

Since the book’s 2002 publication, the authors have come out with an AS2 component set ($39.95 for those who own the book) that uses EventDispatcher.

But it’s easy to wrap the internal event handler up with the AS1 component to rebroadcast the event in a more compliant way, too. "Compliant" for me means using my EventMgr class, which also uses EventDispatcher.

So here’s a bit of code demonstrating use of the FISSlider component:

	// theSliderMC is a MovieClip I've just created

	// create a proxy object to rebroadcast the slider's events
	theSliderMC.FISProxy = new Object();
	// "internal event handler":
	theSliderMC.FISProxy.ieh = function(msg:String, val:Number, target:Object) {
				EventMgr.dispatchEvent({type:msg, target:this, value:val});
				};

	// create the component
	var initObject = {
		lname:"FISProxy",	// name of object with same _parent whose ieh method will be invoked
		emsg:propName,		// first arg to send to ieh method: name of event
		val:initValue,		// initial value
		minVal:0, maxVal:100,	// you know what these are
		numDivs:100,		// number of discrete positions for discreteSteps and for showTicks
		discreteSteps:true,	// indicator should move in discrete increments only
		showHand:true,		// whether to show a hand cursor
		showTicks:false,	// whether to show tick marks along the slider
		clickSnd:""		// sound asset to play when clicked
			};
	var theSlider:MovieClip = theSliderMC.attachMovie("FISSlider", "slider",
							theSliderMC.getNextHighestDepth(), initObject);
	theSlider._x = 200;		// component's registration point is in the center
	theSlider._y = 0;

	// broadcast the initial value:
	theSliderMC.FISProxy.ieh(propName, theSliderMC.slider.getVal(), this);

Pretty useful. And I haven’t even got to the meat of what this book is about yet!
Amazon.com: 26 used & new available from $24.90

P.S. It can be quite instructive to write your own ScrollBar. The interactions among the scroll box, the left and right sections of the track, and the arrows, all competing for your click, make it a nice llittle challenge to program. You can use the ActionScript Dictionary method summary for the (V1) FScrollBar component as a spec to implement. This will require judicious use of onPress, onRelease, onReleaseOutside, onDragOut, the drawing API, set- and clearInterval, and possibly Object.watch().

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment


Contents copyright © Alan Shaw 2005-2008

25 queries. 0.215 seconds. Powered by WordPress version 2.5.1