|
|
flash menu from hell
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Feb 2003
Location: NY²
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Occasionally Useful
Join Date: Jun 2001
Location: Liverpool, UK
Status:
Offline
|
|
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
|
"Have sharp knives. Be creative. Cook to music" ~ maxelson
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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,
|
|
|
|
|
|
|
|
|
Occasionally Useful
Join Date: Jun 2001
Location: Liverpool, UK
Status:
Offline
|
|
you could also play around with this. quite handy, when time is short.
|
"Have sharp knives. Be creative. Cook to music" ~ maxelson
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|