En este tutorial, vamos a aprender cómo realizar un Dock Menu en Flash. El objetivo es lograr que nuestra animación se acerque lo más posible al Dock Menu original de Mac. En Internet podemos encontrar varios ejemplos realizados en flash, pero son muy pocos los que respetan 100% la mecánica del original.

Dock Menu Mac OS

Lo primero que veremos será la lógica, el concepto de cómo funciona un Dock Menu; sí, eso, un poco de teoría para tener una base y luego meter las manos en la masa.

El siguiente es un ejemplo de una aplicación de Dock Menu ya terminada; si bien contempla prácticamente todos los detalles del original, en este primer tutorial no vamos a ver todos los detalles sino que nos vamos abocar a la interacción principal, utilizando cuadros iguales; luego en posteriores entregas iremos agregando más funcionalidad a la aplicación.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

En cuanto a la lógica de la aplicación, la idea es hacer que en un determinado radio de acercamiento cada cuadro (futuro icono) se escale proporcionalmente de acuerdo a la distancia entre el ratón y el centro del cuadro. Esto pasa con cada uno de los elementos pero a su vez, cuando un elemento cambia su tamaño, todos los cuadros vecinos de desplazan manteniendo el mismo espaciado de distancia entre ellos. Esto significa que si me acerco a cualquier cuadro, este al agrandarse hará que el Dock agrande su ancho.

Por otra parte, tendremos que hacer que el dock siemrpe se mantenga alineado al centro; esto significa que no basta con desplazar hacia un extremo todos los clips vecinos sino que al mismo tiempo que los desplazo, tengo que encargarme de centrar el contenedor general, para que me de la sensación de que los otros cuadros se desplazan a ambos lados del principal. Ese es el mayor truco, desplazar los clips hacia la derecha pero al mismo tiempo mantener el contenedor centrado, que en este caso sería desplazarlo hacia la izqueirda tanto como se desplacen los cuadros hacia la derecha.

Ahora que ya conocemos un poco acerca de la teoría, vamos a ver como se traduce todo esto al código. Separaremos el código en 6 partes:

  1. Variables generales
  2. Función que haya el radio desde la posición del ratón al centro de cada clip
  3. Función que escala los clip dependiendo del radio
  4. Función que re posiciona los clips
  5. Función que chequea si el ratón se encuentra en el área de la película
  6. Función general que revisa constantemente la posición del ratón y modifica las variables en consecuencia

Variables generales:

Los valores de estas variables son los que me permitirán personalizar el dock:

var _totalclips = 5;
//Espaciado entre ellos
var _espaciado = 10;
//Area máxima de movimiento para detectar y escalar los clips
var _radiomax = 110;
//Escala máxima que quiero llegar para los clips
var _escalamax = 200;
//Margen para poder detectar que el ratón sale del área de la película
var _margen = 20;

Función que haya el radio desde la posición del ratón al centro de cada clip:

Esta función lo que hace es devolverme la distancia entre el ratón y el centro de del clip que paso como parámetro. Para ello utilizo la ecuación de pitágoras que me dice que Hipotenusa al cuadrado es igual a cateto opuesto al cuadrado más cateto adyacente al cuadrado.

function hayaRadio(clip){
   var x = clip._xmouse;
   var y = clip._ymouse;
   var radio = Math.sqrt(x*x + y*y);
   return radio;
}

Función que escala los clip dependiendo del radio:

Esta función es la encargada de tomar el clip que recibe como parámetro y escalarlo según la distancia que hay desde el ratón a su centro. Claro está que esta distancia está limitada por el valor que yo determino en la variable _radiomax. Supongamos que el radio máximo que determinamos es 100, eso significa que cuando el ratón esté a menos de 100 px de distancia, el clip empezará a escalarse a medida que el ratón se acerque al centro del clip; la escala máxima (_escalamax) se logrará cuando la distancia entre el ratón y el clip sea 0.

function escalarClip(clip,radio,radiomax,escalamax){
   var difradio = radiomax/radio;
   var escala = escalamax + ((100 - escalamax)/difradio);
   if(radio < = radiomax){
      clip._xscale = escala;
      clip._yscale = escala;
   }else{
      clip._xscale = clip._yscale = 100;
   }
}

Función que re posiciona los clips

¿Pensaron que era tan fácil?… jeje, ahora tenemos que hacer que los clips se muevan dependiendo de como modifican sus escalas los clips contiguos; van a ver que es bien simple.
Lo que debo hacer es fijarme que la posición de cada clip sea igual a la posición del clip anterior más la mitad del ancho del clip anterior más la mitad de su propio ancho más el espaciado. Esto me asegura que siempre haya un corrimiento cuando los clips se agrandan. Claro que esto se aplicaría para todos los clips menos para el primero.
Ahora veamos lo siguiente, si sólo dejamos esto, el dock completo siempre se moverá hacia la derecha, por eso es que tenemos que hacer el truquito de mover también el contenedor hacia la izquierda, ¿cómo hacemos esto?, asegurandonos de que el contenedor del dock siempre se mantenga centrado en la película, por lo tanto que permanezca en la mitad del ancho de la película menos la mitad de su propio ancho.

function reposicionaClips(clip,clipanterior,num){
   if(num > 0){
      clip._x = clipanterior._x + (clipanterior._width/2) + (clip._width/2) + _espaciado;
   }
   _root.contenedor._x = (Stage.width / 2 ) - (_root.contenedor._width / 2);
}

Función que chequea si el ratón se encuentra en el área de la película:

Es bien simple, si el ratón se encuentra fuera de los límites de la película, la función retorna falso, sino retorna verdadero. Acuerdense que a los límietes de la película le acorto 20px (_margen) para que se pueda detectar que el ratón sale de la zona.
Los métodos Math.max y Math.min lo que hacen es devolver el valor máximo y mínimo entre los dos valores que paso como parámetro.

function buscaRaton(){
   if(Math.max(_xmouse,Stage.width - _margen) == _xmouse or Math.min(_xmouse,0 + _margen) == _xmouse){
      return false;
   }else if(Math.max(_ymouse,Stage.height - _margen) == _ymouse or Math.min(_ymouse,0 + _margen) == _ymouse){
      return false;
   }else{
      return true;
   }
}

Función general que revisa constantemente la posición del ratón y modifica las variables en consecuencia:

Esta función se ejecuta cada vez que muevo el ratón y hace que por medio del bucle for, todos los clips alteren su escala y posición, dependiendo de la cercanía del ratón. En caso de que el ratón se encuentre fuera de los límites de la película, vulvo a todos los clips a su estado de reposo, escala del 100% y posición original.
Vean como lo que hago es llamar a las funciones necesarias, pasando como parámetros los clips y valores que definí en las variables principales.

_root.onMouseMove = function(){
   for(i=0;i<_totalclips ;i++){
      if(buscaRaton()){
         escalarClip(_root.contenedor["clip"+i],hayaRadio(_root.contenedor["clip"+i]),_radiomax,_escalamax);
         reposicionaClips(_root.contenedor["clip"+i],_root.contenedor["clip"+(i-1)],i);
      }else{
         _root.contenedor["clip"+i]._xscale = _root.contenedor["clip"+i]._yscale = 100;
          reposicionaClips(_root.contenedor["clip"+i],_root.contenedor["clip"+(i-1)],i);
      }
   }
}

Aquí está el resultado:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Bueno gente, espero les haya servido de utilidad, sólo trato de devolver un poquito de todo lo que otros me han enseñado.

Acá pueden descargar el FLA

¡Hasta pronto!

Categoría: Tutoriales

Publicado por: negro

Entradas más populares

47 Respuestas para “Construir un Dock Menu en Flash”

  • Excelente laburo negro… el resultado es realmente fiel al original y el código es super sencillo.

    está bueno como lo resolviste problema a problema y la expliación que le diste al tutorial!

    Tiro un desafio extra al desarrollo:
    Darle forma de clase para que se comporte como un “componente” encapsulado y fácil de reutilizar : )

    A ver quien se anima!

    abrazo,
    seba

  • hermano necesito su ayuda quiero hacer el dock pero necesito que me ayude con unas dudas que tengo si me puede agregar a esa cuenta. gerencia@lamix.com.ve

  • Seba, notable la idea, me gustó, si nadie se anima más adelante podemos postear la versión 2.0 orientado a objetos. Y me alegro que le haya gustado, si lo dice un mostro como usted, tiene doble valor!!!

    Beto, me parece más útil que preguntes aquí o en el foro, de esta forma otra gente puede evacuarse las mismas dudas que tu puedes tener, así logramos un feedback más productivo para todos. Vas a ver que hay mucha gente muy capacitada que te puede dar una mano.

  • Congratulations estimado, la verdad quedo barbaro y el tutorial muy claro.
    Quedamos a la espera del proximo.
    Salu2:
    JM

  • Excelente tutorial!
    Muy bien explicado, y buen resultado final.

  • Me sumo a las congrats de los demás, excelente trabajo y muy bien explicado (hasta para neófitos como yo).

    Un apunte de la parte gráfica (si me pongo a opinar sobre programación soy un atrevido). En el dock de ejemplo, creo que deberías poner los íconos en el mayor tamaño, de forma que no se pixelen al agrandarlos.

  • bueno, un tip que quizas sirva… para este caso..

    Los iconos, tienen que estar en el mayor tamaño, y para que no se pixelen feamente cuando hace el resize por as, hay que habilitar el allow smooth en las propiedades de la img.

    con esto va a renderizar la img de mejor manera.

  • Estimados, les cuento que efectivamente lo que menciona rafa es cierto, al agrandarse los iconos se nota un pixelado no muy agradable. Por tanto, creo que la solución puede pasar por tomar como tamaño base el máximo tamaño que puede llegar a tener cada icono en el dock. La propiedad smooth la tiene, cuando esta propiedad está ausente, se nota que hay un movimiento de pixeles mientas la imagen se está escalando, pero en este caso no es el problema.

  • íconos vectoriales!
    así funciona el original! ; )

  • Es otra alternativa sin duda, ahora yo tenía entendido que los originales de Mac eran PNG, de hecho se puede observar que todos tienen una sombrita propia. Por ejemplo los de Adobe. Ojo, he visto cada cosas vectoriales que la verdad no me extrañaría nada… jejeje

  • si.. son en png, incluso las animaciones son imagenes en png

  • a decir verdad hable comparando con los de windows, que si no me equivoco son vectoriales. Y me dije, mac no puede hacer las cosas peor que windows. De todas formas, para imagenes de tamaño variable no hay mejor opción

  • ke increible es justo lo que busco pero y como hago si yo lo que quiero animar como menu no son imágenes sino gif importados????
    excelente trabajo!!!!!!!

  • ya lo hice como pregunté… simplemente reemplazo los nombres en las instancias…. ke menu incre!!

    NUNACA MAESTRO, SIMEPRE APRENDIZ XD

    gracias mil!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • Hola les cuento que estuve viendo el ejemplo del efecto que muestran en esta pagina, mi pregunta es la sig.
    como hago si quiero agregar mas iconos o clip en su defecto siendo asi que en la programacion pongo el numero de variable 6 o mas y no me responde,
    espero que me respondan a la brevedad.
    Gracias

  • Hola de nuevo, cual seria la programacion de dicha botonera para que en ves de centrarlo lo pueda poner a la izq o derecha segun corresponda? Gracias urgente respondamne

  • Estimado, el ejemplo no contempla el desdoble de ubicación para los extremos izquierda, derecha y superior… Con respecto a tu pregunta anteiror, aparte de cambiar la variable, deberías agregar más clip dentro de la película, ya que estos no son adjuntados dinámicamente.

  • como le doy acciones a cada clip? es decir, quiero hacer que al dar click al clip0 vaya a determinado frame

  • que exelente dock… una duda:

    ya lo baje, personaliza, esta increible , pero , mm, como les doy propiedades de botton para que me mande a otra escena??

    les aplico convertoir en boton y pierden la animacion. y si se lo aplico mas a fondoa uno, se lo aplica a todos los demas elementos del dock.

    como los convierto en botones independoientes?

    graxias

  • [...] on dock menu. hi there i found this dock menu Construir un Dock Menu en Flash Comunidad de diseño, programación y creatividad en español AB… its all ok , but … how can i give accions as a button .? if i convert one "icon" to [...]

  • Hola xotelo

    No tienes que convertirlos a botón para darle acciones. Si conviertes a botón los movieclip, se van a transformar en un objeto diferente y perderán muchas propiedades que en definitiva es lo que hace que no te funcione.

    Simplemente lo que tienes que hacer es:

    clip0.onRelease = function(){
    gotoAndPlay(“escena2″);
    }

    Saludos

  • Buenas.
    Acabo de hacer el dock para el menú de mi pagina y quedó genial (y es la primera vez que uso el Flash!).
    Mi pregunta es si conocés algún codigo que permita que el icono rebote (bounce) al ser clickeado, como pasa en el dock original de Mac.
    Saludos! y Gracias!

  • La verdad que no conozco ningún código que oficie de plugin a este archivo, habría que agregarle esa funcionalidad. Queda cómo desafío para la próxima. En la que hagamos uno orientado a objetos y aprovechamos para anexarle el bounce como tu dices. Esperemos tener un tiempito para agregarlo al blog.

    Saludos

  • 24

    Negro dejate de joder, andas volando

  • estaba probandolo con imagenes pero no se como hacer lo que has comentado de tomar como tamaño base el máximo tamaño que puede llegar a tener cada icono en el dock, para que éstas no me queden pixeladas, si pudieras ayudarme te lo agradecería de veras

    muchas gracias, es muy bueno!!

  • ah, se me olvidaba! también quería comentarte si sabias a que podía ser debido que al cargarlo externamente desde mi web en flash, con un loadMovie, aparezca la imagen del swf estática y el menu no funcione :S me librarias de un apuro

    gracias de nuevo!!

  • clip0.onRelease = function(){
    gotoAndPlay(”escena2″);
    }

    ok este es el codigo solo que no ubico bien en donde aplicarlo en que parte ya es lo ultimo que necesito para que me quede jojo

    peron la pregunta incexoperta, donde va el codigo?
    y donde localizo las instancias para sustituir los cuadros por alguna imagen?

  • Como hago para dar una funcion,, osea q carge un loadmovie segun iconos del menu???
    de antemano gracias.. Bye!!!

  • negro, como puedo cambiar las imagenes? es que no he podido cambiar los cuadrados rojos por las imagenes que quiero usar
    porfa ayudame

    felicitaciones

  • Holaz este es un Excelente Tutorial !!!

    Y AQUI ESTAN MIS APORTES: [espero los tomen en cuenta!]

    1.-)Me gusta mucho este tipo de menu! y encontre tambien otro tutorial… aqui: http://www.cristalab.com/tips/crear-menu-dock-de-mac-os-x-en-flash-c39041l/

    Tiene un Super Codigo al Igual q este Pero uno tiene algo q el otro no … no c si pueden fusionar un poco ambos Codigos para sacar una Nueva Version Mejorada…

    2.-)Halle otra Web tambien donde hay listo par bajar: http://xuroqflash.com/2009/07/mac-os-x-style-menu/ ahi esta listo para bajar un “.fla” y tambien tiene un buen codigo y me gusta q cuando esta seleccionado un elemento este parece encenderse …

    3.-) Aqui hay otro q ando haciendo con un amigo: http://el.cybernetico.92.googlepages.com/Sinttulo-1.swf El cual esta basado en el 1.-) de cristalab, Y tiene de particularidad de q salen los iconos en gris y luego cuando acercas el mouse no solo crecen si no se muestran en colores… xD muy bueno … Si alguien desea contribuir a este Super Menu Dock 2.0 le mando el .fla del 3.-) …

    Saludos !!!

  • Hola. Esta padrisimo el tutorial, exelente y logicamente con el archivo todo es mucho mas facil para hacer algunas funciones mas.
    Comprendo muchas cosas del codigo, pero hay alguna explicacion o como puedo hacer sencillo un ejercicio de detectar la posicion del mouse para que ejecute una accion?
    Grax

  • excelente aporte pero tengo una dudas que me gustaria me ayudasen a despejar.

    las galerias se mantienen siempre en el centro de la escena , tanto al importar como al pasar a swf .. como le puedo hacer para que la se pueda desplazar a otras areas de la pelicula ??

    gracias

    nightlycat2@yahoo.es

    quien pueda ayudarme escribame gracias

  • Exelente tutorial, me preguntaba si alguien ya supo como hacer este menu pero en vertical?

    gracias!

    Julio

  • :( no entiendo nada de script, donde se pone la accion del boton, y como se cambian los cuadros

  • Soy el autor del otro codigo de Dock en Cristalab, muuy buen codigo, he tomado algunas ideas y generare otro mejorado
    Xaludos :)

  • Hey men esta interesante tu pagina, y la informacion que brindas es clara, te felicito.

  • Hola, antes que nada muchas gracias por el tuturial :)

    Quería saber si me podías ayudar con algo… Quizás sea por ignorante, pero me pasa que cuando quiero reemplazar los cuadrados rojos (del .fla que tan gentilmente nos acercaste), reemplazándolos por otras imágenes, se me modifican todos los cuadrados. Parecería que los cuadrados son el mismo clip (con el nombre “clip”) y con nombres de instancia individuales…

    Lamento si mi consulta es tonta, pero realmente he invertido mucho tiempo tratando de entender y ver cómo solucionarlo… Y no quiero dar esta batalla por perdida :P

    Desde ya muchas gracias!!!

  • Hola paz22 si bien el clip de película es el mismo, puedes arrastrar al escenario distintos clips con tus fotos y asignarle los nombres de instancia a cada uno clip0, clip1, clip2… etc. De esta manera te funcionará. No edites el clip existente (cuadro rojo).

    Saludos

  • Negro una consulta . . . si quiero que todo este en un solo movieclip . . . copio los 2 fotogramas claves ( el del AS y el del MC) a uno nuevo . . . he hecho eso pero no hay animación, no corre. Como lo puedo solucionar???

    Espero me puedas ayudar, muchas gracias desde ya.
    Saludos,

  • hola como puedo poner 2 menus, uno horizontal y otro vertical a la vez? por separado me funciona pero en cuanto los junto uno bloquea al otro

  • ¿Si quiero que se desplegue mi swf en full screen como le hago para que no se mueva de lugar mi contenerdor?

  • Thx…thanks for your sharing..

  • Desde la Ciudad de Puebla de los Angeles, México….. excelente!!!!

  • EXCELENTES MANUALES DE VERDAD TE AGRADESCO QUE COMPARTAS TUS CONOCIMIENTOS POCAS PERSONAS COMPARTEN TODO PASO A PASO ESO HABLA MUY BIEN DE TI

  • Muchas gracias Paola por el reconocimiento, para mi es un placer hacerlo ;)

  • Muchas Gracias!! Había estado buscando como hacer este efecto en flash y encontrarme con esta explicación y con el archivo fue maravilloso.

  • Gracias Negro, super editable el fla, me resirvió.

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>