¿Quieres registrarte?

Menús con efecto de desplazamiento flotante en Flash

Por: jpcw
20 de Febrero del 2008
1370 de clabLevel
Otros artículos de jpcw
32,538 visitas

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 ;)

si desean descargar el archivo .fla

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas actionscript

Comentarios | Enviar un comentario
Hasta que por fin se ve bien el archivo *swf... Felicidades JPCW !
(y)
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! (y)
Por: The Fricky!
Muy buen tip, gracias :D
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 ;)
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: :twisted:

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)
: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 ;)

En este caso cuando nos desplzamos hacia la derecha ----> (x) las x van aumentando, y cuando nos deplazamos hacia abajo las (y) 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! :| 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! :roll:
Por favor ayudenme, por qué ocurre esto? qué estoy haciendo mal?
Muchas gracias! ^^
Por: anibrimo84
acaso no hay algo mas importante que hacer?
Por: el poet_blog
<script>alert('hola');</script>
Por: erqer_blog
Esta bueno. ;)
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
ayuda, una vez que llegue a los botones no pude ponerles los AS para que realicen su funcion, y eso que yo lo estoy haciendo en CS3.
Algien me podria ayudar con este problema.
Gracias
Por: chispa-blog
quiero hacer algo parecido, pero ue en lugar de que se mueva la zona quiero es mover la barra del menu, me explico tengo la barra de meno (home, contactenos etc, la pongo en el medio de la pagina, y quiero que cuando se oprima algun boton, la barra sedesplaze a algun lugar de la pantalla, me pueden ayudar???
Por: blues-blog
Uy hermano!!.. que tutorial tan bacano!!
a ud si le entiendo facil!!
felicitaciones!!
Por: poizzon3-blog
me da el siguiente error:

**Error** Símbolo=mundo, capa=fondo, fotograma=1:Línea 1: Sólo se permiten los eventos de clip para instancias de clip de película
onClipEvent (load){

**Error** Símbolo=mundo, capa=fondo, fotograma=1:Línea 6: Sólo se permiten los eventos de clip para instancias de clip de película
onClipEvent (enterFrame) {

Total de errores de ActionScript: 2 Errores comunicados: 2

¿Alguien puede ayudarme?
Por: Eva34
como cargar swf externos en cada una de las secciones, pero que se carguen estos swf hasta que pase a cada una de las secciones y no desde que carga la principal del mundo flotante
Por: mx24-blog
alguien me podria decir como desplazarse un clip por fotogramas y no por "x"
Por: rodo-blog
buenas, alguno tiene este mismo efecto pero en ActionScript 3, el problema que tengo es este: hice 4 animaciones pero en ellas use la herramienta 3D que trae el flash CS4 y por ende no me funciona este codigo, me gusta mucho y me gustaria tratar de emplearlo en AS3 pero he batallado una semana y ya no puedo, ayudemen xq ya me embote....

gracias
Por: Luis Diego-blog
somos dos tambien lo necesito en as3 o com ose llama ste efecto
Por: juanzear
hola amigo, me salio perfecto! y mas o menos era lo que estaba buscando...
me gustaria agregarle ademas el efecto de que con el mouse te puedas desplazar...como en esta pagina: www.claudiabezza.com
no se si existe un codigo no en donde lo tendria que agregar ...mi mail es marumh@yahoo.com.ar y muchas gracias !!!
maru
Por: maru -blog
el archivo de ejemplo no abre, tengo flash 8, ya busque en una de las direcciones que estan en el blog pero la pagina ya no existe.
Por: Victor -blog
muy bueno!!!
Por: kf-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.