Fondos continuos en Flash. Menú infinito. por Julio Laguna is licensed under a Creative Commons Reconocimiento-No comercial-Sin obras derivadas 2.5 España License.

Fondos continuos en flash. Menu infinito.
por Julio Laguna - redribera

1 Menú sin fin.
    1.1 Introducción.
    1.2 Crear un menú infinito.
    1.3 Perfeccionar nuestro menú y evitar errores.
Anexo I.
    Modificación para obtener un menú finito

1 Menú sin fin.

1.1 Introducción.

En este tutorial, vamos a ver como generar un menú para nuestros sitios web que nunca finalice. Es decir, el menú realizará un scroll infinito tanto hacia arriba como hacia abajo. La orientación como podeís observar va a ser vertical, aunque la resolución del problema es análoga para un menú horizontal (las propiedades y, cambian por x y la propiedad height por width, mas adelante lo veremos).
Para conseguir este efecto utilizando flash, nos vamos a apoyar en la técnica de los fondos continuos.
Un fondo continuo, es una imagen de un tamaño determinado que esta en movimiento (usualmente como fondo de la película) continuamente mostrando una sensacion de no finalizar nunca. Es decir, que cuando llega al final del desplazamiento a lo largo de un eje, vuelve a comenzar por el principio.
Por ejemplo con la imagen que se muestra a continuación se puede simular este efecto.

Fondo para usar como continuo

Como se puede observar con una imagen con cuatro circulos, simulamos un movimiento a traves de la ventana (la pélicula flash) continuo. Así permanecerá infinitamente, según nuestra programación.

Los fondos continuos, son muy útiles para el diseño y desarrollo de sitios web y en muchos otros ambitos de la programación, incluso de otras disciplinas.
En el diseño de sitios web, nos puede servir para en un determinado espacio de nuestro sitio, mostrar continuamente una publicidad determinada, simplemente como elemento decorativo y todo lo que se nos pueda ocurrir. En nuestro caso lo hemos orientado a la creación de un menú web con scroll sin fin. Esto nos puede ser muy útil cuando pretendemos mostrar una cantidad de opciones (de un determinado tamaño), en un área reducida de nuestro sitio web. Por ejemplo mostrar un menú que ocupa mas de 500 pixels de alto en un área de 150 pixels.
El uso de fondos continuos, no solo lo podemos conseguir con Flash, en muchas disciplinas podemos utilizar esta técnica. JavaScript, Ajax y otras tecnologías. En lenguajes tradicionales de programación, o en cualquier ámbito que lo precise.

Cuando disponemos de una imagen mas ancha/alta que el área que queremos mostrar, como es nuestro caso, la técnica consiste en trabajar con dos instancias de la misma imagen, colocadas una al lado de la otra en caso de scroll horizontal, o colocadas una encima de la otra en caso del vertical, y adyacentes entre si, sin separación intermedia.
Estas imagenes se van desplazando a lo largo del eje del movimiento, con una velocidad determinada, y en una dirección. Cuando una de las imágenes, sale por completo del área de visualización, la colocamos inmediatamente detrás de la otra (según el sentido de la dirección), y continuamos con el movimiento.
De este modo es como se consigue este efecto en nuestro caso.

Posición de las imágenes para conseguir fondo continuo con scroll hotizontal.

Cuando la imagen a mostrar es menor en tamaño (bien ancho o alto y según el tipo de scroll horizontal o vertical), al área de visualización, también existen técnicas que nos permitirían solapar varias instancias, mas de 2 instancias y en función de los tamaños, y gestionarlas mediante algún tipo de array y orden para conseguir un efecto similar. De todos modos no veremos este caso en este tutorial, y nos centraremos en el caso de imagenes a mover mayores al área de visualización, de modo que solo utilizaremos dos instancias de la imagen. Como ejercicio para el lector (o un próximo tutorial de redribera), puede intentar desarrollar cualquier estructura que permita esta técnica, como pista les diré que el uso de un array con instancias de las imagenes y el orden de las mismas puede funcionar.

Para el ejemplo anterior hemos creado un movieclip (podeís descargar el código fuente del ejemplo), con cuatro circulos. Hemos situado dos instancias del clip tal y como hemos visto en la imagen anterior llamadas bg1 y bg2 y en el fotograma 1 de la escena principal hemos colocado el siguiente código ActionScript.

var bg_width=200;	//Ancho del documento para limitar el scroll.
var bg_speed=3;		//Velocidad del fondo al andar

this.onEnterFrame=function(){	
	mueve_fondo();
}

function mueve_fondo(){
	//mover fondo
	bg1._x=bg1._x+bg_speed;
	bg2._x=bg2._x+bg_speed;
	//repetir cuando sale por la derecha 
	if(bg1._x>bg_width){
		bg1._x=bg1._x-2*bg1._width;	
	}
	if(bg2._x>bg_width){
		bg2._x=bg2._x-2*bg2._width;	
	}
}

El código en si se explica de la siguiente forma: Dos variables, bg_speed y bg_width determinan la velocidad a la que se mueve el fondo, y el ancho del area de visualización. Cuando se produce un evento de proceso de fotograma (e indicado en tiempo por el fps de la película), llamamos a la función mueve_fondo() y esta a su vez, realiza las siguientes acciones; desplazar a lo largo de la escena principal la posicion x del clip del fondo bg1 y bg2, si uno de ellos sale del area de visualizacion y determinada por la variable bg_width, etonces lo situaremos detrás de la otra instancia bg1._x=bg1._x-2*bg1._width; y así sucesivamente.

Pasemos pues a ver como aplicamos estos conceptos al desarrollo de un menú infinito.

Añadir un comentario  Ver comentarios