Cristalab

Menús con efecto de desplazamiento flotante en Flash

Por: jpcw + 20.02.2008

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

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 Guiño

si desean descargar el archivo .fla

Etiquetas actionscript

Comentarios | Enviar un comentario
Hasta que por fin se ve bien el archivo *swf... Felicidades JPCW !
Thumbs up
Por: M@U
Quizás hubiese sido mas fluida con un fps mas alto... no?
Por: Bleend_blog
También sería más sencillo con el uso de la clase Tween para el desplazamiento, pero está excelente el tip. Felicitaciones! Thumbs up
Por: The Fricky!
Muy buen tip, gracias Muy Feliz
Por: Faust_blog
Acabo de ver un sitio que hace esto sin flash, y me parecio genial, esto es buena opción...

Saludos,
Por: Hugo_blog
Excelente! muchas felicidades!! =)
Por: Alexis_blog
felicitaciones JPCW... cada dia me dejas mas impresionada Guiño
Por: SMRS_blog
creo que de esta forma es mejor:

import mx.transitions.Tween;
import mx.transitions.easing.*;

function mover(posx, posy) {
new Tween(cuadros, "_x", Regular.easeIn, cuadros._x, posy, .8, true);
new Tween(cuadros, "_y", Regular.easeIn, cuadros._y, posy, .8, true);
}
bt1.onPress = function() {
mover(400,400);
};
bt2.onPress = function() {
mover(0,-400);
};
Por: vectorcinco_blog

vectorcinco_blog :

creo que de esta forma es mejor:...


“Un problema requiere no de una, si no de varias soluciones.” U_U

Solo te ahorraste una línea de código, pero sin contar las líneas de las Clases que importaste.

muy interesante el tip jpcw.
Por: gcm
Saludos!Esta muy interesante el tema...soy nuevo por aqui.
Tengo un problema:
Hice todo el tutorial y el anterior tambien ( el de slider, me funcionó perfectamente) pero al llegar a la ultima parte, en la que se añaden los codigos de As a cada uno de los botones, no entiendo más!
Por favor agradezco mucho la ayuda que puedan darme ya que no sé como hacer para que los botones funcionen y el "mundo" vaya arriba, abajo, etc.
Espero su pronta respuesta.
Pd: tengo flashx 8 y flash MX y el archivo del tutorial no abre, tiene algun problema o esta en otra version?

El problema lo tengo a partir de aqui: Furioso

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

(expliquenme esta parte por favor, denme algun ejemplo de donde colocar estos codigos dentro de las acciones)
Aw Crap

a la derecha (-)

a la izquierda (+)

hacia abajo (-)

hacia arriba (+)
Por: anibrimo84
hola anibrimo84

te cuento que el .fla esta en la version de CS3, por eso no has podido abrirlo.

primero que todo, el mundo se encuentra centrado, es decir esta sobre el cuadro de borde azul y fonfo gris y las coordenadas del mundo estan en -400,-400. dejando claro esto te explico

las coordenadas o mejor aun el plano carteciano sobre el que se disponen los elementos en flash es similar al matematico que siempre hemos utilizado, pero con una pequeña variante, que el eje Y esta invertido Guiño

En este caso cuando nos desplzamos hacia la derecha ----> (x) las x van aumentando, y cuando nos deplazamos hacia abajo las Thumbs up tambien van aunmentando

por esto debemos hacer que la diferencia sea cero que en definitiva seria la velocidad, en el caso del cuadro negr ocon gris que esta abajo a la derecha el codigo seria este

Código :

on(release){ 
   _root.mundo_ints.mueveX = -_root.mundo_ints.s3._x;
   _root.mundo_ints.mueveY = -_root.mundo_ints.s3._y;
}


y para ver la diferencia muestro el codigo del dorado con blanco, que está abajo a la izquierda

Código :

on(release){ 
   _root.mundo_ints.mueveX = _root.mundo_ints.s4._x;
   _root.mundo_ints.mueveY = -_root.mundo_ints.s4._y;
}


espero esto te saque del problema Cool
Por: jpcw
hem aqui tengo una version FEA pero en 8

http://juanpablocelyw.webcindario.com/flash/mundoflotante0.1.fla

espero tambien les sea útil
Por: jpcw
Hola! Muchas gracias por sus respuestas...me han ayudado de mucho!
Ya solucioné el problema, ahora tengo otro! BOFH jajaLos botones al ser presionados me mandan a la dirección especifica, pero se situan más abajo de donde deben!
Por ejemplo, al mandar el boton del cuadro negro abajo y a la derecha, pasa por encima del simbolo negro y queda afuera de él, es decir fuera del escenario de flash!
En cambio el boton marron con gris que va al simbolo que está arriba y a la izquierda si se situa perfectamente! mmmm
Por favor ayudenme, por qué ocurre esto? qué estoy haciendo mal?
Muchas gracias! miau
Por: anibrimo84
acaso no hay algo mas importante que hacer?
Por: el poet_blog
<script>alert('hola');</script>
Por: erqer_blog
Esta bueno. Guiño
Por: Miguel_blog
me parece exelente todo esta muy bien diseñado pero les pidiria un favor que si me pueden mandar a mi correo electronico cada actualizacion que se realice de estas presentaciones mi correo es ____
nel_tm2230@hotmail.com
cuando quieran en viar algo a esta direccion porfavor grasias
bye
Por: leonel hernandez hernande
kilroy te lo agradece
Por: MaBoRaK
hola

me ha encantado el tuto, pero tengo un problema... no se como establecer que al momento que llegue a determinada posicion cargue un movieclip vaco y cargue una peli en el. esto para que la pagina no pese mucho y pueda dividir el peso en los diferentes archivos de las secciones...
Por: nanis_blog
Hola, me gustaría saber como crear dentro del mundo flotante un scroll de texto y similares, se crearlo pero al aplicarlo al mundo flotante ,su función de movimiento deja de funcionar y parpadea o bien no aparece el texto, necesitaría saber donde puedo introducir el scroll si dentro del clip_mc o en escena y si tengo que modificar los códigos, agradecería que alguien me echase una mano. GRACIAS.
Por: Hola_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.