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:
Haber leído (por lo menos) el tutorial mencionado anteriormente. Flash 8 preferiblemente CS3. 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!
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:
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
“Un problema requiere no de una, si no de varias soluciones.”
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:
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)
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 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
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! 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