Menús con efecto de desplazamiento flotante en Flash

En muchas ocasiones hemos visto Websites que dan la impresión de estar dentro de un mundo, donde nos desplazamos y vamos recorriendo por diferentes lugares de dicho mundo, pues en este tip daré una muestra y uso diferente al tutorial presentado anteriormente por Soundwave, para representar un mundo en el que nos movemos libremente.

Requerimientos:

1. Haber leído (por lo menos) el tutorial mencionado anteriormente.
   
2. Flash 8 preferiblemente CS3.
   
3. Deseo de aprender.

Manos a la Obra:

Debemos definir el tamaño a mostrar para poder determinar el tamaño de nuestro mundo flotante, en este caso el tamaño de mi frame va a ser de 400x400



Escribimos Ctrl-F8 (crear nuevo símbolo) escribimos mundo y en el tipo dejamos "Clip película"



Apareceremos dentro del símbolo, aquí seleccionamos una capa la llamamos "fondo"

Colocamos el fondo de nuestro mundo, es aconsejable que si deseamos un mejor efecto al desplazarnos debemos crear este mundo al menos 3 veces el tamaño de nuestro frame tanto vertical como horizontal. (mundo de 1200x1200).



Luego de crear el mundo podemos salir del objeto, este se encontrará en la biblioteca, por lo que lo traeremos al frame, seleccionamos el objeto y en la sección de propiedades le asignamos un nombre de instancia, en este caso se llamará mundo_ints. adicional a eso lo ubicaremos en la coordenada -400,-400 (centrado)



Ahora procedemos a crear los sectores que mostraremos de nuestro mundo, damos doble click e ingresamos al objeto.

Dentro del objeto en una capa diferente al fondo procedemos a dibujar un cuadro de 400x400, lo ubicamos en 400,400 este será nuestro punto de partida, luego de dibujarlo lo seleccionamos y damos F8 (convertir en Objeto) lo nombramos s1



Este procedimiento se repite hasta que tengamos las secciones que deseemos en nuestro mundo, cabe aclarar que esto depende del tamaño del mundo, en este caso creare otras tres secciones y quedaria algo así



A cada uno de los símbolos se le debe asignar un nombre de instancia, al símbolo "s1" le he colocado s1 (valla imaginación) y al símbolo s2 le he colocado s2, etc.

Ahora ingresamos en el símbolo s1 y en una nueva capa dibujamos una imagen que haga el trabajo de boton, ya que tenemos 4 secciones dibujare cuatro cuadros similares a las seciones y les daré por nombre bot1, bot2, bot3,bot4 consecutivamente



Luego de crear la "interfaz" es hora de ingresar el código As a cada componente, comenzamos por salir al root de la escena y seleccionamos el objeto mundo

En la sección de ActionScript de este objeto colocamos lo siguiente. es necesario que hallan leído el tutorial mencionado al comienzo de este para que puedan comprender el porqué de cada línea!

Código :

onClipEvent (load){
    mueveX = _x;
    mueveY = _y;
    velocidad = 5;
}
onClipEvent (enterFrame) {    
  _x += (mueveX-_x)/velocidad;
  _y += (mueveY-_y)/velocidad;
}

Ahora procedemos a ir a cada botón que hemos creado, en el botón bot1 que se debe encontrar en Escena>mundo>s1 y en su sección de AS colocamos el siguiente código:

Código :

on(release){
    _root.mundo_inst.mueveX = -_root.mundo_inst.seccion2._x;
    _root.mundo_inst.mueveY = -_root.mundo_inst.seccion2._y;
}

En este caso los valores son negativos debido a la dirección del desplazamiento, para comprender esto adjunto una tabla que será de mucha ayuda

• a la derecha (-)
  
• a la izquierda (+)
  
• hacia abajo (-)
  
• hacia arriba (+)
  

Para evitar que se pueda ver las demás secciones salimos al root, y en una capa superior, dibujamos un cuadro (no importa el color) de 400x400 lo ubicamos sobre 0,0 y le damos click derecho a la capa, seleccionamos mascara y VUALA listo ya tenemos nuestro mundo en el cual podemos dar el efecto de desplazarnos, ahora lo único que hace falta es agregar más secciones, y por supuesto mejorar el diseño

si desean descargar el archivo .fla

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.