Menu efecto zoom, escalado al estilo Mac.

Partimos de un nuevo documento de ActionScript2.0, el cual contiene en la biblioteca dos MovieClips, esfera y sombra. El primero contiene una esfera dibujada y el MoviClip sombra para darle un efecto 3D.

En primer lugar, vamos a la biblioteca y pulsando el botón secundario del ratón accedemos a la opción linkage… Marcamos la opción Export for ActionScrit y asignamos en el campo de texto Identifier el nombre de instancia que queramos en nuestro caso “esfera”.
Hecho esto, marcamos el primer fotograma de la capa acciones, y presionamos F9 para entrar en el manu de edición de ActionScript.

En la primera parte del script definimos las variables y constantes que utilizaremos más adelante. Las constantes xo y yo son la posición del centro del escenario que después utilizaremos para centrar el movimiento, estas dos son indispensables para paliar el sistema de coordenadas de flash que comentábamos con anterioridad.

var num_objects:Number = 6; // Numero de objetos
var amp_x:Number = Stage.width; // Amplitud del escenario
var amp_y:Number = Stage.height/2; // Posición vertical del menú
var sep_hor:Number = amp_x / (num_objects + 1); // Separación entre ítems del menú
var factor_escalado:Number = .8; // Factor que afecta al escalado de los elementos
 

La última constante (factor_escalado), es un numero entre 0 y 1 que determinara, más adelante, la mayor o menor variación del tamaño de cada objeto.

Después de este paso incluiremos la siguiente parte:

// Introducimos los objetos en el escenario
for(i=0;i     _root.attachMovie("esfera","esfera" + i, i);
     referencia = this["esfera" + i];
     referencia._x = sep_hor * i + sep_hor; // Los separamos de manera equidistante
     referencia._y = amp_y; // Posición vertical de los objetos
}
 

Mediante este bucle incluimos las esferas en el escenario. El bucle recorre desde el 0 hasta el número de objetos que le designamos en la variable num_objects – 1. En cada iteración realiza un llamada a la función attachMovie que coge el nombre del primer argumento, lo busca en la biblioteca, y lo inserta en el escenario con el nombre de instancia que asignamos en el segundo argumento (“esfera”+i genera: esfera0, esfera1, esfera2… ), el último argumento es el nivel donde se carga el objeto (más arriba o más abajo). En este caso, después de instanciar los objetos, los vamos a posicionar, ya que en este menú los objetos no modifican su posición.

Así pues cogemos su referencia, y los separamos equidistantemente multiplicando i por sep_hor, le sumamos otra vez sep_hor para que el menú este centrado en x y el primer objeto no aparezca pegado a la parte izquierda. Por último, colocamos la línea horizontal del menú.

Una vez insertados los elementos en el escenario e instanciados, necesitaremos un bucle que se repita infinitamente para que actúe como elemento listener.

// Bucle infinito que permite el movimiento
this.onEnterFrame = function() {
     for(var i:Number = 0;i          thisObj = this["esfera"+i];
          scale(thisObj,i)
     }
}
 

El objeto onEnterFrame es un bucle que se repetirá infinitamente. Esto nos permite asignar características a nuestra película como esperar a que el usuario realice una acción. Pues bien, este bucle estará ejecutándose siempre para que obtenga la posición del mouse en todo momento, ya que de esta posición depende el movimiento de nuestro menú ( del mismo modo que depende del mouse puede depender de la pulsación de alguna tecla… ).

Hecho esto, necesitamos un bucle que recorra todas las esferas y actualice la escala de cada una en función de la distancia a ella. Creamos un bucle for como el anterior, pero en este asignamos el nombre de instancia de cada esfera a la variable thisObj en cada iteración. Y llamamos a la función scale que modifica la escala de la esfera que le pasamos por argumento.

referencia._y = amp_y; // Posición vertical de los objetos
}
// Función que escala los objetos
function scale(thisObj,i){
     // Calculamos la distancia del mouse respecto de cada objeto
     var dist = Math.abs(thisObj._xmouse);
     var inc = Math.abs(100-dist)* _root.factor_escalado;
     // Para evitar problemas solo escalamos si la distancia es menor a 100
     if( dist < 100 ){
     thisObj._xscale = 100 + inc;
     thisObj._yscale = 100 + inc;
     } else {
     // En caso contrario la escala queda intacta
     thisObj._xscale = thisObj._yscale = 100;
     }
}

// Bucle infinito que permite el movimiento
this.onEnterFrame = function() {
 

En primer lugar definimos la función scale con los argumentos thisObj y i. El primer argumento será el nombre de instancia de la esfera que queremos modificar la escala, el segundo, i será la variable de iteración para operaciones posteriores.

En primer lugar obtenemos la distancia respecto a la esfera o objeto del mouse(var dist), y la pasamos por la función Math.abs para obtener su valor absoluto, esto se debe a que en esta ocasión al no haber movimiento, solo necesitamos las distancias (siempre positivas) para que en función de ellas escalemos o no el objeto. Para ilustrar esto, decir que, si el ratón esta a la parte izquierda de la espera que tenga la función el valor de dist será negativo y a la derecha positivo, pero nosotros queremos saber a qué distancia esta el puntero ( a 10 o 30 pixeles) por tanto, el signo no va a afectar en las operaciones.

Posteriormente, calculamos un incremento (incr) que será la variación de la escala dependiendo del factor de escalado y la posición del mouse.

Por último, realizamos un condicional para que nos permita solucionar un problema. Si quita el condicional if…else vera que el menú tiene un comportamiento extraño, las esferas se hacen pequeñas en un punto y crecen a medida que se alejan del puntero. Bien, esto se debe a que el incremento (incr) es menor que 0 o negativo debido a que la distancia es superior, en nuestro caso, a 100; el objeto se reduce porque el factor de escala es negativo. Por tanto, con esta solución, si la distancia es menor a 100 se realiza el escalado, en caso contrario, el objeto se queda en su tamaño natural.


Nota: Si lo que queremos es que los objetos se alejen o hagan más pequeños cuando nos acercamos a ellos tan solo debemos poner un signo negativo a la variable factor_escalado, consiguiendo el siguiente efecto.

Perfeccionamiento del menú:

Para crear un efecto más parecido al menú original de Mac, tendríamos que evaluar la distancia entre los objetos para que al mismo tiempo que al acercarnos al objeto este se agrande también la distancia entre los objetos se mantenga constante.

     >     thisObj._xscale = thisObj._yscale = 100;
     }
     if(i == 0){
          var dist_o = sep_hor * i + (sep_hor/2) + (thisObj._width/2);
     }else{
          var dist_o = sep_hor * i + (sep_hor/2) + (_root["esfera"+(i-1)]._width/2);
     }
     thisObj._x = dist_o;
     }

     // Bucle infinito que permite el movimiento

Estas líneas consiguen crear el efecto deseado. Aquí creamos una variable dist_o que almacena la coordenada respecto de x que tendrá cada objeto. Esta la calculamos, sumando la mitad del ancho del objeto anterior.

Menú con imágenes diferentes.

Hasta ahora, siempre que hemos realizado menús, hemos utilizado la misma imagen para todos los ítems, cosa que limita mucho el uso de menús. En este apartado os enseñaremos pequeño truco para que el menú tenga diversas imágenes.

En primer lugar, tenemos que abrir el MovieClip “esfera”, y presionar 5 veces F6 para crear 6 fotogramas clave. Una vez hecho esto, modificamos las esferas u objetos a nuestro gusto conservando las coordenadas, y añadimos una capa en la que creamos un fotograma que abarque los 6 fotogramas anteriores. Abrimos la ventana de edición de AS, con F9 y escribimos stop();
Volvemos al script principal i agregamos la siguiente línea en el primer bucle for.

     referencia =this["esfera" + i];
     referencia._x = sep_hor * i + sep_hor; // Los separamos de manera equidistante
     referencia._y= amp_y; // Posición vertical de los objetos
     referencia.gotoAndStop(i+1);
}

// Función que escala los objetos
function scale(thisObj,i){

Con esto, conseguimos que cada esfera se sitúe en un fotograma clave, por tanto en una imagen diferente.
Este método es un poco limitado ya que si queremos incrustar imágenes o mapa de bits el archivo sofá pesaría demasiado, en el articulo Precarga imagenes en Flash os enseñamos otro método para cargar distintas imágenes en el menú.

Descarga los ejemplos:

Descarga el archivo fla preparado

Descarga los Ejemplos del articulo

Observa el ejemplo avanzado del articulo

Descarga los Ejemplos avanzados del articulo