tutoriales ( todos | principiante | medio | avanzado | AS 1.0 | AS 2.0 | AS 3.0 | top )

Tutorial FLASH - Carrusel de imágenes en Flash.

| | Más

Versión Flash: 8 y superiores | Compatible con ActionScript 2.0 | Nivel: Avanzado | Hits: 542534

En este tutorial va a mostraros como hacer un carrusel de imágenes que va rotando según desplazamos el puntero a lo largo de la pantalla de un lado a otro sin necesidad de emplear ningún componente. Además, vamos a poder personalizar una serie de parámetros del carrusel como su anchura, la anchura de las miniaturas, la velocidad de giro, etc. El código es ActionScript 2.0.

COMO HACERLO.
Las imágenes se van a cargar en la película mediante un archivo XML como el empleado en el Tutorial para hacer una galería de imágenes con carga dinámica en Flash. Es decir, un archivo XML con esta estructura.

Este archivo podemos crearlo manualmente en el bloc de notas u otro programa o podemos generarlo dinámicamente leyendo los archivos de imagen contenidos en determinada carpeta del servidor web. Para generarlo dinámicamente es necesaria alguna tecnología en nuestro servidor como PHP o ASP. Si queréis animaros a hacerlo con ASP podéis mirar este otro tutorial: Como leer los archivos que hay en una carpeta del servidor con ASP y pasarlo a Flash.

Los pasos básicos este tutorial son los siguientes:
Pasos carrusel imágenes

Todo el código de la película está en el primer fotograma. Vamos a ir comentándolo de arriba a abajo por bloques. Al final del tutorial podéis verlo todo seguido y descargaros el archivo .fla.

Ajustes para la carga del xml.

System.useCodepage = true;
XML.prototype.ignoreWhite = true;

Para no tener que escribir la ruta completa de las clases que usaremos más adelante.

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Matrix;

Éstos son los parámetros personalizables. Si no queréis comeros la olla con el funcionamiento del ejemplo y simplemente buscáis un carrusel para poner en vuestra web, éstos son los parámetros que necesitáis definir.
- ancho_carrusel. Ancho total en px que ocupará el carrusel.
- ancho_miniatura. Ancho en px de cada miniatura del carrusel en su punto máximo al pasar por el centro del carrusel.
- v_giro. Número mayor de cero que controla la velocidad de giro de manera inversa, es decir, para valores más bajos girará más rápido.
- reflejar. Valor booleano que indica si se proyecta el reflejo del carrusel o no.
- color_fondo. Color de fondo, es necesario para que el desvanecimiento del reflejo quede bien en el caso de que reflejar=true.
- x0. Posición horizontal en el escenario del centro del carrusel.
- y0. Posición vertical en el escenario de la parte inferior del carrusel.
- url_fotos. La url de nuestro archivo XML.
- dir_minis. Directorio donde están los archivos de las miniaturas.

var ancho_carrusel:Number = 700;
var ancho_miniatura:Number = 90;
var v_giro:Number=30;
var reflejar:Boolean = true;
var color_fondo:Number = 0xF4F4F4;
var x0:Number = 365;
var y0:Number = 185;
var url_fotos:String="asp/verMiniaturas_tutos.asp";
var dir_minis:String="miniaturas/";

Llegado a este punto conviene indicar que para conseguir que el efecto de reflejo quede bien, todas las imágenes han de tener las mismas dimensiones o mantener el mismo ratio alto/alto. Asímismo, los parámetros ancho_carrusel y ancho_miniatura deberán presentar valores adecuados para mostrar correctamente el carrusel según el número de imágenes a rotar.

A continuación, se define una serie de variables que se van a emplear en la película.
- IMG_array. Matriz que almacena la info del XML, esto ocurre dentro de la función cargarMiniaturas() como se verá más adelante.
- incre. Velocidad angular de rotación del carrusel, depende la posición del puntero respecto al propio carrusel.
- num_fotos. Variable que almacena el número de fotos del carrusel.
- num_fotos_cargadas. Variable que indica el número de miniaturas cargadas.
- radio. Radio de giro del carrusel, queda definido por los valores de los parámetros personalizables anteriores.

var IMG_array:Array;
var incre:Number = 0;
var num_fotos:Number;
var num_fotos_cargadas:Number;
var radio:Number = (ancho_carrusel-ancho_miniatura-10)*0.5;

Defino el objeto XML que recibirá los datos, la ruta de la carga y cual es la función que se ejecutará tras la carga.

var miniaturasXML:XML = new XML();
miniaturasXML.onLoad = cargarMiniaturas;
miniaturasXML.load(url_fotos);

La función cargarMiniaturas() es la elegida. Primero asignamos al array IMG_array, antes definido, los nodos del XML que contienen la información de cada archivo de imagen. Así, ya podemos establecer el valor de num_fotos que es la longitud del array. Si, por la razón que sea, no queremos emplear todas las imágenes que retorna el XML podemos definir manualmente el valor de num_fotos. En nuestro caso estamos empleando las propias miniaturas de los tutoriales de este sitio web, y como son unas cuantas, hemos decidido coger sólo las 17 primeras, por eso hemos comentado la línea que hay en negrita en el código para que no se ejecute y hemos establecido un valor de 17 directamente.

Creo estos clips vacíos:
- contenedor_mc. Este clip será el de nivel superior en el carrusel, si se aplica el reflejo, el objeto BitmapData necesario se basará en él.
- carrusel_miniaturas_mc. Este clip creado dentro de contenedor_mc alojará los clips de las miniaturas.

Después algunas operaciones de posicionamiento y ocultamiento en algunos de estos movieclips, inicializamos el contador de imágenes cargadas y nos recorremos el array con la info con un bucle for. Dentro del bucle invocamos la función crearMiniatura() pasando dos parámetros: el nombre del archivo a cargar y un valor numérico incremental que va a definir la posición de cada imagen dentro del círculo del carrusel. Esta función (que definiremos más adelante en el código) se va a encargar de cargar la imagen y darle el tamaño deseado.

function cargarMiniaturas():Void {
IMG_array = this.firstChild.childNodes;
// num_fotos = IMG_array.length;
num_fotos = 17;
var contenedor:MovieClip = _root.createEmptyMovieClip("contenedor_mc", _root.getNextHighestDepth());
contenedor._y = y0;
contenedor._visible = false;
var carrusel:MovieClip = contenedor.createEmptyMovieClip("carrusel_miniaturas_mc", contenedor.getNextHighestDepth());
carrusel._x = x0;
num_fotos_cargadas = 0;
for (var k:Number = 0; k<num_fotos; k++) {
crearMiniatura(IMG_array[k].attributes.nombre,k);
}
}

La función crearMiniatura(), como ya hemos dicho anteriormente, se encarga de cargar cada una de las miniaturas y reescalarlas. Creamos un clip vacío llamado foto_0, foto_1,.... y dentro de éste otro llamado foto que es donde cargaremos la imagen con un objeto de la clase MovieClipLoader. En el tutorial Carga de clips externos en Flash. La clase MovieClipLoader se explica el uso de esta clase.

Cada vez que se completa la carga de una imagen y ya está disponible se le asignan las acciones a ejecutar al hacer clic sobe ella. En nuestro caso, abre la página del tutorial correspondiente, menos en el caso de que la miniatura sea la del logo con la efe, que abre la página de principal de nuestro sitio web.

Se comprueba si están cargadas todas, en caso afirmativo, se ejecuta la función girar_carrusel() con un retardo de medio segundo. A cada miniatura se le asigna como propiedad orden el parámetro que recibe de la función.

La función girar_carrusel() se invoca cuando se hayan cargado todas las miniaturas y se encarga como su propio nombre indica de girar el carrusel. Hemos dividido el código en dos bloques para facilitar la comprensión de éste.

La programación del bloque 1 se va a ejecutar sólo una vez en la película, en el momento de ejecutar la función, y básicamente comprende las rutinas necesarias para crear el efecto de espejo. Primero se crea el clip vacío reflejo_miniaturas_mc que es donde se duplicará el carrusel reflejado verticalmente. Después crearemos el clip vacío sombreado_mc por encima del anterior en que dibujaremos con la API de dibujo de Flash un rectángulo con un relleno degradado usando únicamente el valor de la variable color_fondo y distintos niveles de transparencia (alpha) del 0 a 100. Como se ve, hemos empleado el método createGradientBox de la clase Matrix, este método es especial para la generación de rellenos degradados, ya os prepararemos un tutorial o un truco explicando su aplicación, mientras tanto consultad la documentación de Flash u otras fuentes. Para finalizar este primer bloque, reposicionamos adecuadamente estos clips creados.

El contenido del bloque 2 se va a ejecutar en cada fotograma de giro del carrusel. En primer lugar, se calcula un nuevo valor de la velocidad angular incre en función de la posición horizontal del puntero respecto al centro horizontal del carrusel x0 y el valor de la variable v_giro definida al principio del código. Con este nuevo valor de incre establecido, ejecutamos el método girar() de cada una de las miniaturas por medio de un bucle for. Este método que escalará y posicionará cada miniatura se definirá más tarde.

A continuación de recorrernos el bucle, comprobamos de nuevo el valor de la variable reflejar, si es verdadero (true) actualizo el contenido del clip reflejo_miniaturas_mc con la imagen duplicada y reflejada del carrusel del fotograma actual. Esto lo hacemos con la ayuda de una instancia de la clase BitmapData. Primero copiamos el contenido en el objeto bmp y después lo adjuntamos (attachemanos suena mejor?) a reflejo_miniaturas_mc que como tiene la propiedad _yscale=-100 se ve reflejado respecto al original.

El método girar() se va definir empleando la propiedad prototype. Esto quiere decir que este método va a estar disponible para todas las instancias de una clase, en nuestro caso, la clase MovieClip. En función de la velocidad incre, del valor de la propiedad orden de la miniatura y del número de fotos totales, num_fotos, cada miniatura se posicionará en un angulo definido en la variable degrees dentro del círculo del carrusel.

MovieClip.prototype.girar = function() {
var degrees:Number = _root.incre+(360*this.orden/num_fotos);
var radians:Number = degrees*Math.PI/180;
if (Math.sin(radians)<0) {
this._alpha = 15;
} else {
this._alpha = 100;
}
this._x = radio*Math.cos(radians);
this._xscale = (1-Math.cos(radians+Math.PI*0.5))*99-99;
this.swapDepths(int(this._xscale*10));
};

Ahora que ya tenéis el carrusel funcionando es el momento de que adaptéis el código a vuestro gusto. Aquí tenéis el archivo .fla del ejemplo, el resto, el xml de las imágenes y las imágenes en sí poned las vuestros. carrusel.fla

Tutoriales Flash relacionados

| | Más

tutoriales ( todos | principiante | medio | avanzado | AS 1.0 | AS 2.0 | AS 3.0 | top )

Tutorial FLASH - Carrusel de imágenes en Flash.

Versión Flash: 8 y superiores | Compatible con ActionScript 2.0 | Nivel: Avanzado | Hits: 542534

Tutoriales Flash relacionados

random (tutoriales-flash.com)...