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