Saturday, March 18, 2006

Flash Menu vrs Navigation

When designing a website or any other application, the navigation system is one of the most important bits of it.
Flash has been criticized in the past for its difficulty to create effective navigation systems where the client (the person who is watching the site) have no clue where he is nor where he can go next...
The other day, someone asked in a forum how to create a flash menu where:
- on rolling over the buttons, the colour of the text changes to red
- on rolling out, the text returns to its original white colour
- on pressing the button, the text changes to black
- a button should be disabled if it has been pressed
- when pressing a button, any disabled button should be enabled again

starting my FlashMX2004 and playing a bit with ActionScript, this is my solution:

var i:Number = 1;
for (i; i<=5; i++) {
var boton = _root["bt0"+i];
boton.onRollOver = function() {
sufix = this._name.substr(3);
texto = _root["e0"+sufix];
texto.textColor = 0xd95a1c;
boton.onRollOut = function() {
if (this.enabled == true) {
texto.textColor = 0xffffff;
boton.onPress = function() {
texto.textColor = 0x000000;
botonActual.enabled = true;
textoActual.textColor = 0xffffff;
boton.onRelease = function() {
this.enabled = false;
botonActual = this;
textoActual = texto;

what I have in my .fla are 5 instances of a button named Bt01 ... Bt05
and 5 dinamic text boxes called EO1 ... E05

voila! we have a flash menu that has an effective navigation.
Watch the sample here



MoyArt said...

Pretty Cool, i hope now Jacob Nielsen stops crying about Flash 99% Bad, pretty cool tutorial Mr Neto

Be Cool

Bruno said...

well, in a way Jacob Nielsen was right as in that time there were not many good flash developers and most of the flash stuff were intros...
The thing is that people started experimenting too much with flash (what is not bad...) but some of them were not taking "best practices" into account.
The menu presented here is pretty basic but adding animations and sounds can make it cool.