[skalie]

Here's the deal, someone made a menu in flash, it looked like shite so I remade using it actionscript to do the drawing dynamically. The new version has been shown to the clients, but er, there's one bug, sometimes it doesn't show up. Not very often, but enough to cause, well big problems, the menu being quite an important piece of the navigation for the site. A click on refresh and the menu will show, but that's besides the point. I'm assuming that it has do with the speed of processor client side.

My question, do any of you flash (or maybe javascript) guru's know of a way to register if the computer client side has completed the calculations necessary to render the menu?

Example http://www.scraf.com/scraf_menu/

Here's the initiation of the variables on frame one of the movie.....

Code:
if(!page){
	page=0;
}
labels = ["home", "contact","news", "agenda", "forum", "links", "information"];
number_of_buttons = labels.length;
function toRadians(deg){
	return deg * Math.PI/180;
}
scraf_buttonTextFormat = new TextFormat();
scraf_buttonTextFormat.bold = true;
scraf_buttonTextFormat.color = 0x000000;
scraf_buttonTextFormat.font = "Arial";
bg_scraf_buttonTextFormat = new TextFormat();
bg_scraf_buttonTextFormat.bold = true;
bg_scraf_buttonTextFormat.color = 0x009933;
bg_scraf_buttonTextFormat.font = "Arial";
dwn_scraf_buttonTextFormat = new TextFormat();
dwn_scraf_buttonTextFormat.bold = true;
dwn_scraf_buttonTextFormat.color = 0x009933;
dwn_scraf_buttonTextFormat.font = "Arial";
logo2.swapDepths(100);
button_height = 24;
var left_start = 100;		// x position start for menu buttons
var excess = 80;		// length that the round rectangle extends
var extra = 10;			// above and below the buttons
//var sideways = left_start; 	// grows in the array as buttons are added
var gap = 6; 			// gap between buttons
var y_position = 51; 		// y_position for buttons
var y_position_text_offset = 3; // gets the text in the middle of the button
var s = 1;			// spacer for the button shadow
var fillType = "radial";
var colours = { bg:0xD4E9BB,	
		Grad1:0xFFFFD5,
		Grad2:0x99CC99,
		topLine:0x99CC99,
		botLine:0x009933,		
		botShad:0xB6B6B6,
		sideLine:0x856C19,
		rShad:0xFFFFA4,
		sideLine:0x856C19,
		bg_Grad1:0xFFFFFF,
		bg_Grad2:0xFFFFCC,
		bg_topLine:0x009933,
		bg_botLine:0x009933,
		bg_sideLine:0x009933,
		dwn_Grad1:0xFEF2AF,
		dwn_Grad2:0xD4E9BB,
		dwn_topLine:0x009933,
		dwn_botLine:0x009933,		
		dwn_botShad:0xFFFFA4,
		dwn_sideLine:0x009933,
		dwn_rShad:0xFFFFA4,
		dwn_sideLine:0x856C19}
var alphas = [100,100];
var ratios = [0,255];

Then here's the code that draws the menu.

Code:
for (i=0; i<number_of_buttons; i++) {
	this.createTextField("text"+i, i+(number_of_buttons*6), width*i, 100, 100, 100);
	var txt=_root["text"+i];
	txt.setNewTextFormat(scraf_buttonTextFormat);
	txt.autoSize = true;
	txt.border = false;
	txt.useDeviceFonts = true;
	txt.antiAlias = false;
	txt.align = center;
	txt.selectable = false;
	txt.quality = best;
	txt.text = " " + " " +labels[i]+" "; // note added spaces
	txt._x = sideways;
	txt._y = y_position + y_position_text_offset;
	if(page == i){
		txt._visible = false;
	}
	// now the rollover background text
	this.createTextField("bg_text"+i,i+(number_of_buttons*4), width*i, 100, 100, 100);
	var bg_txt=_root["bg_text"+i];
	bg_txt.setNewTextFormat(bg_scraf_buttonTextFormat);
	bg_txt.autoSize = true;
	bg_txt.border = false;
	bg_txt.useDeviceFonts = true;
	bg_txt.antiAlias = false;
	bg_txt.align = center;
	bg_txt.selectable = false;
	bg_txt.quality = best;
	bg_txt.text =" " + " " +labels[i]+" "; // note added spaces
	bg_txt._x = sideways;
	bg_txt._y = y_position + y_position_text_offset;	
	if(page == i){
		bg_txt._visible = false;
	}
	// now the enabled or down text
	this.createTextField("dwn_text"+i,i+(number_of_buttons*2), width*i, 100, 100, 100);
	var dwn_txt=_root["dwn_text"+i];
	dwn_txt.setNewTextFormat(dwn_scraf_buttonTextFormat);
	dwn_txt.autoSize = true;
	dwn_txt.border = false;
	dwn_txt.useDeviceFonts = true;
	dwn_txt.antiAlias = false;
	dwn_txt.align = center;
	dwn_txt.selectable = false;
	dwn_txt.quality = best;
	dwn_txt.text = " " + " " +labels[i]+" "; // note added spaces
	dwn_txt._x = sideways;
	dwn_txt._y = y_position + y_position_text_offset;	
	// begin top button fill
	createEmptyMovieClip("scraf_button"+i,i+(number_of_buttons*5));
	var x = _root["scraf_button"+i]._x + sideways;
	var y = y_position;
	var w = _root["text"+i]._width;
	var butto = _root["scraf_button"+i];
	var matrix = { matrixType:"box",x:x-10,y:y-2,w:w*2,h:button_height*3.5,r:toRadians(0) };
	var gradColours = [colours.Grad1,colours.Grad2];
	butto.beginGradientFill(fillType,gradColours,alphas,ratios,matrix);
	butto.lineStyle(1,colours.topLine,100); // top line
	butto.moveTo(x,y);  			// move to start postion
	butto.lineTo(x+w,y);			// line across top
	butto.lineStyle(1,no_colour,0);		// invisible for fill
	butto.lineTo(x+w,y+button_height);	// invisible line to bottom right
	butto.lineStyle(1,colours.botLine,100); // bottom line
	butto.lineTo(x,y+button_height);	// line across bottom
	butto.lineStyle(1,no_colour,0);		// invisible for fill
	butto.lineTo(x,y);			// invisible line to start	
	butto.endFill();
	butto.lineStyle(1,colours.sideLine,100);// sidelines
	butto.moveTo(x+w,y+button_height);	// move to bottom right
	butto.lineTo(x+w,y);			// line right
	butto.moveTo(x,y);			// back to base
	butto.lineTo(x,y+button_height);	// line left
	butto.lineStyle(1,colours.rShad,100);	// right shadow
	butto.moveTo(x+w+s,y+button_height+s);	// move to bottom right + spacer
	butto.lineTo(x+s+w,y+s);		// right yellow shadow
	butto.lineStyle(1,colours.botShad,100);	// bottom shadow	
	butto.moveTo(x+w+s,y+button_height+s);	// move to bottom right + spacer
	butto.lineTo(x+s,y+button_height+s);	// bottom shadow	
		if(page == i){
		butto._alpha = 0;
	}
	// begin background
	createEmptyMovieClip("bg_scraf_button"+i,i+(number_of_buttons*3));
	var x = _root["bg_scraf_button"+i]._x + sideways;
	var y = y_position;
	var w = _root["text"+i]._width;
	var bg_butto = _root["bg_scraf_button"+i];
	var matrix = { matrixType:"box",x:x-10,y:y-2,w:w*2,h:button_height*3.5,r:toRadians(0) };
	var gradColours = [colours.bg_Grad1,colours.bg_Grad2];
	bg_butto.beginGradientFill(fillType,gradColours,alphas,ratios,matrix);
	bg_butto.lineStyle(1.5,colours.bg_topLine,100); // top line
	bg_butto.moveTo(x,y);  			// move to start postion
	bg_butto.lineTo(x+w,y);			// line across top
	bg_butto.lineStyle(1,no_colour,0);		// invisible for fill
	bg_butto.lineTo(x+w,y+button_height);	// invisible line to bottom right
	bg_butto.lineStyle(1,colours.bg_botLine,100); // bottom line
	bg_butto.lineTo(x,y+button_height);	// line across bottom
	bg_butto.lineStyle(1,no_colour,0);		// invisible for fill
	bg_butto.lineTo(x,y);			// invisible line to start	
	bg_butto.endFill();
	bg_butto.lineStyle(1,colours.bg_sideLine,100);// sidelines
	bg_butto.moveTo(x+w,y+button_height);	// move to bottom right
	bg_butto.lineTo(x+w,y);			// line right
	bg_butto.moveTo(x,y);			// back to base
	bg_butto.lineTo(x,y+button_height);	// line left
	bg_butto.lineStyle(1,colours.rShad,100);	// right shadow
	bg_butto.moveTo(x+w+s,y+button_height+s);	// move to bottom right + spacer
	bg_butto.lineTo(x+s+w,y+s);		// right yellow shadow
	bg_butto.lineStyle(1,colours.botShad,100);	// bottom shadow	
	bg_butto.moveTo(x+w+s,y+button_height+s);	// move to bottom right + spacer
	bg_butto.lineTo(x+s,y+button_height+s);	// bottom shadow	
	if(page == i){
		bg_butto._alpha = 0;
	}
	// begin enabled or down fills
	createEmptyMovieClip("dwn_scraf_button"+i,i+(number_of_buttons*1));
	var x = _root["dwn_scraf_button"+i]._x + sideways;
	var y = y_position;
	var w = _root["text"+i]._width;
	var dwn_butto = _root["dwn_scraf_button"+i];
	var matrix = { matrixType:"box",x:x-10,y:y-2,w:w*2,h:button_height*3.5,r:toRadians(0) };
	var gradColours = [colours.dwn_Grad1,colours.dwn_Grad2];
	dwn_butto.beginGradientFill(fillType,gradColours,alphas,ratios,matrix);
	dwn_butto.lineStyle(1.5,colours.dwn_topLine,100); // top line
	dwn_butto.moveTo(x,y);  			// move to start postion
	dwn_butto.lineTo(x+w,y);			// line across top
	dwn_butto.lineStyle(1,no_colour,0);		// invisible for fill
	dwn_butto.lineTo(x+w,y+button_height);	// invisible line to bottom right
	dwn_butto.lineStyle(1,colours.dwn_botLine,100); // bottom line
	dwn_butto.lineTo(x,y+button_height);	// line across bottom
	dwn_butto.lineStyle(1,no_colour,0);		// invisible for fill
	dwn_butto.lineTo(x,y);			// invisible line to start	
	dwn_butto.endFill();
	dwn_butto.lineStyle(1,colours.dwn_sideLine,100);// sidelines
	dwn_butto.moveTo(x+w,y+button_height);	// move to bottom right
	dwn_butto.lineTo(x+w,y);			// line right
	dwn_butto.moveTo(x,y);			// back to base
	dwn_butto.lineTo(x,y+button_height);	// line left
	dwn_butto.lineStyle(1,colours.dwn_rShad,100);	// right shadow
	dwn_butto.moveTo(x+w+s,y+button_height+s);	// move to bottom right + spacer
	dwn_butto.lineTo(x+s+w,y+s);		// right yellow shadow
	dwn_butto.lineStyle(1,colours.dwn_botShad,100);	// bottom shadow	
	dwn_butto.moveTo(x+w+s,y+button_height+s);	// move to bottom right + spacer
	dwn_butto.lineTo(x+s,y+button_height+s);	// bottom shadow	
	sideways = sideways + _root["text"+i]._width + gap;
}
function wollover(butt){
	_root["scraf_button"+butt].onRollOver = function(){ 
			if(page!=butt){
				_root["text"+butt]._visible = false;
				_root["bg_text"+butt]._visible = true;
				_root["scraf_button"+butt]._alpha = 0;
			}
		}
	_root["scraf_button"+butt].onRollOut = function(){ 
			if(page!=butt){			
				_root["text"+butt]._visible = true;
				_root["bg_text"+butt]._visible = false;
				_root["scraf_button"+butt]._alpha = 100;
			}
		}
	_root["scraf_button"+butt].onRelease = function(){ 
			_root["text"+butt]._visible = false;
			_root["bg_text"+butt]._visible = false;
			_root["scraf_button"+butt]._alpha = 0;
			page = butt;
			gotoAndPlay(page_to);
			//getUrl(startUrl+labels[page]+"/index.php?loc="+0,"mainFrame");
	}
}
function wollover2(butt){
		_root["scraf_button"+butt].onRelease = function(){ 
		gotoAndPlay(page_to);
		getUrl(startUrl+labels[page]+"/index.php?loc="+0,"mainFrame");
	}
}
for (jjj=0; jjj<number_of_buttons; jjj++) {
		if(page!==jjj){
		wollover(jjj);
	}else{
	    wollover2(jjj);
	}
}
function round_rectangle(width,height,x,y){
	this.createEmptyMovieClip("round_rectangle_mc",-1); //watch the levels
	round_rectangle_mc.lineStyle(1,0x000000,0);
	h=height/2;
	i=x+h;
	j=x+width-h;
	k=y-h;
	l=y+h;
	w=x+width;
	round_rectangle_mc.beginFill(colours.bg,100);
	round_rectangle_mc.moveTo(x,y); 
	round_rectangle_mc.curveTo(x,l,i,l); 
	round_rectangle_mc.lineTo(j,l);	
	round_rectangle_mc.curveTo(w,l,w,y);
	round_rectangle_mc.curveTo(w,k,j,k);
	round_rectangle_mc.lineTo(i,k);
	round_rectangle_mc.curveTo(x,k,x,y);
	round_rectangle_mc.endFill();
}
var x_rect = left_start - excess;
var y_rect = y_position + (button_height / 2);
var width_rect = sideways-left_start + (2 * excess);
var height_rect = button_height + extra;
round_rectangle(width_rect,height_rect,x_rect,y_position+(button_height/2));

May it be a question of copy and pasting the calculations instead of using loops to speed up the processing? The other possible solution is to screenshot the menu and do a gif/javascript version. The screenshots look horrible if opened in flash btw.

Comments or tips, greatly appreciated.

[mdc]

just one comment. if the link that you sent is the menu, do you really need flash? you could do that with some image rollovers and have no troubles.

[philzilla]

i've got to agree, there's no real need for Flash there. a simple, styled unordered list would do the trick in half the code.

example

[skalie]

Originally posted by philzilla:
i've got to agree, there's no real need for Flash there. a simple, styled unordered list would do the trick in half the code.

example

Agreed with both you and mdc on that one, and I had mocked up a version using a method very similar to the one you linked to Philzilla. (although my version wasn't listening to "hover" in Safari).

Thing is, the site is almost finished, and the navigation should have been a long time ago (it's also a mock-up I posted). It's just the occasional non-appearance of the menu , which I hope could a bug sorted with a line of code as in "onData()" or someit.

I know I went way over the top, but I wasn't to learn the flash drawing apps anyhows, what is nice is that the flash listens to the html(php) which means you can navigate to, say, "news" from a link in the php and the menu shows where you are. This can of course be emulated in Javascript, but still.....

Another thing that was really cool, was being able to just add a name to the "labels" array and whammo, instant button!! Which is of course a moot point if the menu doesn't show up,

[philzilla]

you could also play around with this. quite handy, when time is short.

[skalie]

Have narrowed it down to at least a pattern.

If I empty my browser's cache, then the first time that the menu should load it doesn't. Clicking on refresh will load the menu properly, and further attempts to access it will also go smoothly.

Haven't been able to replicate the problem with the url I posted.

[skalie]

Originally posted by philzilla:
i've got to agree, there's no real need for Flash there. a simple, styled unordered list would do the trick in half the code.

example

Just thought I'd mention, that I got the thing to work, er almost.

I rewrit the whole code using an ActionScript 2.0 class and managed to produce a version that didn't work ever when viewed in a browser !!! So with that off to Flashkit, received the advice, "all files in the same directory", that worked !!!!

Till a week later, *Bosch*, no menu. Ignore it, then it started getting slowly worse and worse (no there's no logical reason for that, MUST be something happening server side), till I would image it was happenning 1 in 20 times. Not acceptable by any means.

May I just mention that I work alongside a group of Flash and Actionscript programmers who are no slouches, and this menu has had them all shaking their heads in disbelief.

So here I am, working on my day off, screenshotting and manipulationg the original menu (impossible to reproduce in authoring time in Flash) and using the method linked in the quote above, when I upload it to a server (localhost even).

I then get the IE6 Windows "Flicker" that hasn't been debugged as far I can tell from the messages posted (comments now closed) in the link.

Merry fooking Xmas (We develop exclusively with and for IE6 where I work ).

So back to base once AGAIN.

Back to Photoshop (I'm getting way good at batch processing) and the to a screenshotted menu based entirely on JavaScript.

From possible rocket science to re-inventing the wheel.

[/rant]