Crear menú dock de Mac OS X en Flash

Muchos de nosotros hemos visto paginas hechas en Flash que contienen un menú con el efecto del famoso menú de Mac OsX.

Realmente no tiene mucha dificultad.

Antes que nada deberemos leer este tip (la ultima edición echa por mi corrige el error, así que no hagan caso a la primera) en la cual se explica una de las dos partes fundamentales de este menú en ese tip hará la detección de la cercanía del mouse, es necesario entenderlo a conciencia para no confundirnos.

Ahora veremos los pasos necesarios para la creación del menú.

Empezamos desde cero, creamos un documento en blanco.

Primer paso, crear los elementos del menú, convertirlos a clip individuales por cada elemento , no importa el numero, es una de las ventajas como he diseñado esta versión, una ves terminados , asignarles a cada uno de ellos un nombre de instancia empezando por 0 en base a este termino
btn00, btn01, btn02 ... etc.

Después los seleccionamos todos y los convertimos a un solo clip con el punto de registro en la parte superior izquierda, esto es muy importante para el correcto funcionamiento.

Una vez hecho esto pegaremos este código dentro del primer frame del clip que contiene todos los elementos de el menú:

Código :

//align = bottom;
//esto hara que el punto de centro sea la mitad por si tenemos que reposicionarlo , el punto 1,1
//sera sera siemrpe el punto de en medio de este menú, se la asigno a variables para ser flexible 
//por si necesitamos hacer algo con ello
centerx = 0;
centery = 0;

//Establecemos el menú de items para saber cuanto tenemos que recorrer para hacer los cálculos
menucount = 6;

// establecemos de que ancho son los items, para hacerlo dinámico, tomo el ultimo y asigno el ancho
// los items para ser optimos deberian tener la misma anchura
miwidth = this["btn0" + menucount - 1]._width;

// establecesmos que espacio entre cada item deseamos
miborder = 5;

// establecemos la variable inicial en el valor cero, que lelvara el control del ancho del menu
AnchMen = 0;

//esto hara que cada ves que el menú haga un enterframe se ejecute y tengamos un monitoreo constante
onEnterFrame = function ()
{
   var AnchMen = 0;
   
   //esta es la parte del tip anterior, con la única diferencia que este acumula en la variable  
   //AnchMen el ancho del menú
   for (var i = 0; i < menucount; i++) {
      var xxm = this["btn0" + i]._xmouse;
      var yym = this["btn0" + i]._ymouse;
      var xm = Math.sqrt(xxm * xxm + yym * yym);
      if (xm < 80) {
         this["btn0" + i]._xscale = this["btn0" + i]._yscale += ((200 - xm) - this["btn0" + i]._yscale) / 3;
      } else {
         this["btn0" + i]._xscale = this["btn0" + i]._yscale += (100 - this["btn0" + i]._yscale) / 3;
      }
      
      //esta parte va acumulando el ancho de los elementos
      AnchMen += this["btn0" + i]._width;
   }
   
   //hacemos el calculo total de incremento de los espacios entre elementos del menu mas el espacio de los elementos
   AnchMen += (menucount - 1) * miborder;
   
   // Inicializamos las posiciones 
   // toma el ancho lo divide entre dos  y se lo resta al centro garantizando que el menu quede centrado
   var xpos = Math.round((centerx - AnchMen) / 2);
   
   // como el primer item no tiene un elemento anterior de donde partir en la funcion  se establece el punto de parida 
   // se hace el calculo del espacio del elemento uno se incrementa y se parte del elemento 2
   xpos += Math.round((this["btn0" + 0]._width + miborder) / 2);
   for (var i = 1; i < menucount; i++) {
      x = i - 1;
      xpos += (this["btn0" + x]._width / 2) + miborder + (this["btn0" + i]._width / 2);
      this["btn0" + i]._x = xpos;
      this["btn0" + i]._y = centery;
   }
   
   //como el elemento uno no ha sido establecido se le resta su ancho menos al elemento 2 para lograr su posición 
   this["btn0" + 0]._x = (this["btn0" + 1]._x - this["btn0" + 0]._width - miborder);
   this["btn0" + 0]._y = centery;
};

Resultado:



Se puede cambiar, por ejemplo, en lugar de convertir los elementos a clip podemos hacerlo a botones y el botón dispara la acción, o dentro del clip podemos establecer animaciones para hacerlo mas vistoso y así lanzar la acción de ese botón.

Si parece muy extenso es solo por los comentarios, realmente el código de el menú es este

Código :

centerx = 0;
centery = 0;
menucount = 6;
miwidth = this["btn0" + menucount - 1]._width;
miborder = 5;
AnchMen = 0;
onEnterFrame = function ()
{
   var AnchMen = 0;
   for (var i = 0; i < menucount; i++) {
      var xxm = this["btn0" + i]._xmouse;
      var yym = this["btn0" + i]._ymouse;
      var xm = Math.sqrt(xxm * xxm + yym * yym);
      if (xm < 80) {
         this["btn0" + i]._xscale = this["btn0" + i]._yscale += ((200 - xm) - this["btn0" + i]._yscale) / 3;
      } else {
         this["btn0" + i]._xscale = this["btn0" + i]._yscale += (100 - this["btn0" + i]._yscale) / 3;
      }
      AnchMen += this["btn0" + i]._width;
   }
   AnchMen += (menucount - 1) * miborder;
   var xpos = Math.round((centerx - AnchMen) / 2);
   xpos += Math.round((this["btn0" + 0]._width + miborder) / 2);
   for (var i = 1; i < menucount; i++) {
      x = i - 1;
      xpos += (this["btn0" + x]._width / 2) + miborder + (this["btn0" + i]._width / 2);
      this["btn0" + i]._x = xpos;
      this["btn0" + i]._y = centery;
      //trace(centerx);
   }
   this["btn0" + 0]._x = (this["btn0" + 1]._x - this["btn0" + 0]._width - miborder);
   this["btn0" + 0]._y = centery;
};

Es optimizable, así que se aceptan sugerencias.

 

Tweet