Creating Help with Flash and ActionScript3


I just finished making the support document for Dive Admin, I did it in Flash by replicating the interface of the application and adding a lot of elements explaining it, as well as navigational interactivity. This approach should be easier for the end user to work with than having a 200 page manual where the feature he wants help with is on page 143, paragraph 5.

Download working file or take a look at the result.

Some ActionScript was necessary, let’s walk it, starting with frame 1 in the root:

var helpButtons = new Array('invoices_', 'overdue_', 'triplist_', 'facilities_');

for each (var cName:String in helpButtons){
	var cTxt 		= getChildByName(cName+'txt');
	cTxt.alpha 		= 0;
	cTxt.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent){
		cTxt = getChildByName(event.currentTarget.name.split('_').shift()+'_txt');
		cTxt.alpha = 1;
	});
	cTxt.addEventListener(MouseEvent.MOUSE_OUT, function(event:MouseEvent){
		cTxt = getChildByName(event.currentTarget.name.split('_').shift()+'_txt');
		cTxt.alpha = 0;
	});
}

stop();

This piece sets up four different buttons to show themselves on roll over followed by hiding themselves on roll out. The *_txt is a bit stupid since they are buttons, however the function is more a help text so…

From frame 1 of MenuMc (library name):

var gotoSub:String = '';
var menuButtons = new Array('add', 'change', 'display', 'manage', 'workspaces');
var rootMc = root;
var curAction = '';
var addButtons = new Array();

function onClick(event:MouseEvent){
	rootMc.gotoAndStop(2);
	gotoAndStop(event.currentTarget.name.split('_').shift());
}

for each (var cName:String in menuButtons){
	getChildByName(cName+'_btn').addEventListener(MouseEvent.MOUSE_UP, onClick);
}

function addClick(event:MouseEvent){
	var pattern:RegExp = /\d*/g;
	this.gotoSub = event.currentTarget.name.split('_').pop().replace(pattern, '');
	var gotoAction = curAction + '_sub';
	if(this.currentLabel == gotoAction){
		var curSub = getChildByName(curAction + '_sub_mc');
		curSub.gotoAndStop(this.gotoSub);
	}else
		gotoAndStop(gotoAction);
}
	
function setupSubBtns(subBtns, action){
	curAction = action;
	for each (var sName:String in subBtns){
		getChildByName(curAction + '_' + sName).addEventListener(MouseEvent.MOUSE_UP, addClick);
	}
}

The two last functions sets up the all the buttons in each sub menu, it will have the player jump to a specific flag in a sub clip, note that we remove all digits in the name. A button called “normal5” will therefore jump to the flag named “normal” in the sub clip in question, this is used in the Manage sub menu.

Another thing to note is the fact that we save root in rootMc, the reason for this is that the global root variable refers to a DisplayObject, not MovieClip, even though the target is in fact a MovieClip, very strange. Since it’s only the MovieClip class that has functions like gotoAndStop something like root.gotoAndStop() wouldn’t work for me, I got errors whining about “gotoAndStop is not a member function of a DisplayObject” blabla.

The way around this is as you can see to save a reference to root in rootMc, the lack of type identifier is key as that will have Flash automatically infer type (at runtime maybe) and have rootMc be a MovieClip (I think). Var rootMc:MovieClip = root; would for instance not work, same problem there, “can not infer type” blabla. Anyway, I spent some hour pulling my hair before I figured this out and now you don’t have to.

Note also that I temporarily save my regexp pattern in a RegExp object, simply using the literal /\d*/g wouldn’t work, I have no idea why but it feels stupid.

From workspace_info (library name), frame 1:

var stepCount = 0;

function goNext(event:MouseEvent){
	if(stepCount < 9){
		stepCount++;
		gotoAndStop('step' + stepCount);
	}
}

function goPrev(event:MouseEvent){
	if(stepCount > 1){
		stepCount--;
		gotoAndStop('step' + stepCount);
	}else{
		stepCount = 0;
		gotoAndStop('start');
	}
}

next_btn.removeEventListener(MouseEvent.MOUSE_UP, goNext);
prev_btn.removeEventListener(MouseEvent.MOUSE_UP, goPrev);

next_btn.addEventListener(MouseEvent.MOUSE_UP, goNext);
prev_btn.addEventListener(MouseEvent.MOUSE_UP, goPrev);

This one basically sets up a PowerPoint slide, we jump back and forth between flags depending on which button we press, Prev or Next. Note the removeEventListener call, I realized that each time we jump to the first frame (start), the code would stack, i.e. when pressing for instance the Next button we would jump 2 steps after the first revisit to start, 3 after the second and so on, highly unwanted behavior. The removeEventListener call will reset the assignments each time and the result is the kind of behavior we want.

Related Posts

Tags: , , ,

This entry was posted on Monday, January 19th, 2009 at 3:31 am and is filed under Flex, Flash and AMFPHP. Comments are currently closed.