Crear presentaciones en Flash con Custom Slideshows

Esta clase se ha creado con el propósito de que fácilmente podamos crear presentaciones de diapositivas personalizables (Custom Slideshows) para utilizarlas en banners de internet, exposiciones de trabajos, ejercicios finales de curso o simplemente como protectores de pantalla.

Para las animaciones de esta clase se utilizó la librería de clases "TweenLite" de GreenSock, la cual está contenida en los archivos del tutorial. Todos los ejemplos están hechos con Flash CS3 y Actionscript 3.

Vinculación de la fuente para ActionScript en la biblioteca

Si se desea que la presentación contenga pequeños textos en cada imágen para describir cada una, debemos tener una fuente vinculada en la biblioteca, a continuación describimos los pasos a seguir para vincular una fuente para ActionScript:

Vamos a la biblioteca y presionamos Click Derecho y escogemos "New Font".

Escogemos la fuente que queremos utilizar de nuestro ordenador, le ponemos nombre a la fuente (Podemos ponerle el mismo), escogemos si deseamos la fuente el bold o no, en size le introducimos el tamaño en el que se va a importar la fuente, le damos un tamaño y presionamos "ok".

Después de creada la fuente le damos en la biblioteca Click Derecho a esta y escogemos "Linkage", marcamos la opción "Export for ActionScript" y automáticamente se nos marcará la opción "Export in first frame", le damos "ok".

Ya tenemos nuestra fuente creada y vinculada a la biblioteca.

Crear y personalizar la barra de progreso

Si la presentación de diapositivas es para ser mostrada en internet debería incluirse una barra de progrso para que nos indique cuánto le queda por descargar de cada imagen. Para que nuestra clase pueda funcionar con una barra de progreso debemos tener el componente "ProgressBar" en nuestra biblioteca, para añadirlo a esta es muy sencillo, solamente debemos arrastrar el componente desde la ventana de de componentes hacia nuestra área de trabajo:

Presionamos CTRL + F7 y en la sección de "User Interfase" escogemos el componente "ProgressBar".

Después que hayamos arrastrado el componente a nuestra área de trabajo, este automáticamente pasará a la biblioteca y linkeado para action script, así que automáticamente podemos proceder a borrarlo de nuestra área de trabajo, ya que como se va a acceder a él mediante action script solo se necesita que esté en la biblioteca bajo su respectiva clase.

El componente por defecto tendrá un color azulado, podemos cambiar sus colores fácilmente, basta con ir a la biblioteca y localizar una carpeta llamada "Component Assets" dentro de esta encontraremos otra carpeta llamada "ProgressBarSkins" y dentro de esta encontraremos todos los movies que se utilizan para personalizar nuestra barra de progreso:

Estructura del XML

El funcionamiento de esta clase está basado en una lista de imágenes y una serie de configuraciones que dinámicamente le da un fichero externo XML, la estructura de este se explica a continuación:

<?xml version="1.0" encoding="utf-8"?>

	<slide>	
	<config>	
		<!--Configuración general de la presentación-->	
		<control>auto</control>	
		<loop>true</loop>	
		<time>5</time>	
		<effect_time>1</effect_time>	
		<random>true</random> 	
		<!--Configuración de nuestra barra de progreso-->	
		<preload>true</preload>	
		<preload_width>400</preload_width>	
		<preload_height>10</preload_height> 
		<!--Configuración de los textos-->
		<text_font>Arial</text_font>
		<text_color>0xFFFFFF</text_color>
		<text_bold>false</text_bold>
		<text_size>26</text_size>
		<text_shadow>true</text_shadow>
		<text_pos>BR</text_pos>
		<text_margin>20</text_margin> 
	</config>

	<images>

	
	<!--Lista de las imagenes-->
	
		<imagen nombre="Antílope" src="images/antilope.jpg" effect="fade"/>
		<imagen nombre="Árbol" src="images/arbol.jpg" effect="slideLeft"/>
		<imagen nombre="Otoño" src="images/autumn.jpg" effect="boxes"/>
		<imagen nombre="Ballena" src="images/ballena.jpg" effect="barsHorizontal"/>
		<imagen nombre="Bosque" src="images/bosque.jpg" effect="bounceBarsVertical"/>
		<imagen nombre="Cascada" src="images/cascada.jpg" effect="bounceBottom"/>
		<imagen nombre="Desierto" src="images/desierto.jpg" effect="bounceBoxes"/>
		<imagen nombre="Flores Silvestres" src="images/flores.jpg" effect="bounceZoomIn"/>
		<imagen nombre="Flores Pequeñas" src="images/flores2.jpg" effect="bounceBarsHorizontal"/>
		<imagen nombre="Invierno" src="images/invierno.jpg" effect="bounceZoomOut"/>
		<imagen nombre="Jardín" src="images/jardin.jpg" effect="fade"/>
		<imagen nombre="Muelle" src="images/muelle.jpg" effect="slideRight"/>
		<imagen nombre="Río" src="images/rio.jpg" effect="bounceLeft"/>
		<imagen nombre="Tortuga" src="images/tortuga.jpg" effect="zoomIn"/>
		<imagen nombre="Tucán" src="images/tucan.jpg" effect="zoomOut"/> 
	
	</images>

</slide>

El nodo "config" contiene los datos generales de la configuración de la presentación, los datos de configuración de nuestra barra de progreso y los datos de la configuración de los textos:

<control>

Este nodo es en el que configura si la presentación va a ser controlada por el teclado (manual) o va a mostrarse automáticamente (auto).
Valores posibles: auto, manual.

<loop>

Este nodo controla que la presentación al llegar al final comience por el principio (true) o que al llegar al final se detenga (false) si está el control en "auto".
Valores posibles: true, false.

<time>

Este nodo controla el tiempo en segundos que va a demorar cada diapositiva en pantalla (Sin contar el tiempo de carga de la diapositiva siguiente).
Valores posibles: Números positivos.

<effect_time>

Este nodo controla el tiempo en segundos que va a demorar el efecto de cada diapositiva.
Valores posibles: Números positivos.

<random>

Este nodo controla si las imágenes se mostrarán en el mismo orden que se encuentran en el XML (false) o de manera desorganizada (true).
Valores posibles: true, false.

<preload>

Este nodo controla si para cargar las imágenes se utilizará una barra de progreso (true) o no (false).
Valores posibles: true, false.

<preload_width>

Este nodo controla el ancho que va a tener nuestra barra de progreso.
Valores posibles: Números positivos.

<preload_height>

Este nodo controla el alto que va a tener nuestra barra de progreso.
Valores posibles: Números positivos.

<text_font>

Este configura el nombre de nuestra fuente vinculada en la biblioteca (Debemos poner el nombre exacto de nuestra fuente en la PC).
Valores posibles: Cadena de caracteres.

<text_color>

Este configura el color de nuestra fuente.
Valores posibles: Números enteros hexadecimales Ejemplo:(0xFFFFFF)

<text_bold>

Este nodo configura si nuestra fuente se visualizará en bold (true) o no (false) (La variante debe estar vinculada en la biblioteca).
Valores posibles: true, false

<text_size>

Este nodo configura el tamaño en el que se visualizará nuestra fuente.
Valores posibles: Números positivos

<text_shadow>

Este nodo configura si nuestra fuente tendrá sombra (true) o no (false).
Valores posibles: true, false.

<text_pos>

Este nodo configura la posición de nuestro texto en la pantalla.
Valores posibles: TL (Arriba a la izquierda), TC (Arriba en el centro), TR (Arriba a la derecha), BL (Abajo a la izquierda), BC (Abajo en el centro), BR (Abajo a la derecha).

<text_margin>

Este nodo configura la separación que tendrá nuestro texto de los bordes de la pantalla.
Valores posibles: Números positivos.

Ahora veremos como se inserta una imagen en nuestro XML:

<imagen nombre="Antílope" src="images/antilope.jpg" effect="fade"/>

nombre

Este atributo es el que contiene el nombre de la imagen, es este el que se va a mostrar en los textos de la pantalla.
Valores posibles: Cadena de caracteres.

src

Este atributo es el que contiene al camino o path hasta nuestra imagen con respecto al SWF principal o al HTML que tenga insertado el SWF.
Valores posibles: Cadena de caracteres.

effect

Este atributo es el que controla el efecto que se le va a aplicar a esta imágen al momento de insertarla.

Valores posibles:

fade: Crea una difuminación por transparencia de la imagen desde transparente hasta opaca.
zoomIn: Crea una animación de escala de la imagen desde el centro hasta los bordes.
bounceZoomIn: Crea una animación de escala de la imagen desde el centro hasta los bordes con efecto de rebote.
zoomOut: Crea una animación de escala de la imagen desde fuera de los bordes hasta los mismos.
bounceZoomOut: Crea una animación de escala de la imagen desde fuera de los bordes hasta los mismos con efecto de rebote.
slideLeft: Crea una animación de la imagen deslizándose hacia la izquierda.
slideRight: Crea una animación de la imagen deslizándose hacia la derecha.
slideTop: Crea una animación de la imagen deslizándose hacia arriba.
slideBottom: Crea una animación de la imagen deslizándose hacia abajo.
bounceLeft: Crea una animación de la imagen deslizándose hacia la izquierda con efecto de rebote.
bounceRight: Crea una animación de la imagen deslizándose hacia la derecha con efecto de rebote.
bounceTop: Crea una animación de la imagen deslizándose hacia arriba con efecto de rebote.
bounceBottom: Crea una animación de la imagen deslizándose hacia abajo con efecto de rebote.
boxes: Divide la imagen en cuadros y realiza una animación de escala de estos.
bounceBoxes: Divide la imagen en cuadros y realiza una animación de escala de estos con efecto de rebote.
barsHorizontal: Divide la imagen en barras horizontales y realiza una animación de escala de estas.
bounceBarsHorizontal: Divide la imagen en barras horizontales y realiza una animación de escala de estas con efecto de rebote.
barsVertical: Divide la imagen en barras verticales y realiza una animación de escala de estas.
bounceBarsVertical: Divide la imagen en barras verticales y realiza una animación de escala de estas con efecto de rebote.

Métodos públicos de la clase

slideShow(MC:MovieClip, xmlSRC:String, ancho:Number, alto:Number, botones:Object)

MC: Es el movieClip donde se va a insertar la Presentación de diapositivas.
xmlSRC: Es el path completo a nuestro fichero XML con la configuración y las imágenes.

ancho y alto: Son las medidas de la máscara que se le aplicará al movieClip MC (Normalmente deben ser las dimensiones de las imágenes a leer).

botones: Este parámetro opcional nos permite mandar un objeto de estructura {next:DisplayObject, prev:DisplayObject} que contiene dos DisplayObjects que serán utilizados como botones para pasar las diapositivas hacia adelante o hacia atrás cuando nuestra presentación esté configurada en "manual".

slideShow.start();

Comienza nuestra presentación, hasta que este método no sea llamado, nuestra presentación no comenzará a reproducirse.

slideShow.stop();

Detiene nuestra presentación después que se haya cargado la imágen que esté siendo procesada.

Ejemplos concretos

Para crear nuestra propia galería, debemos tener las clases "slideShow" y "slideTransitions" junto con nuestro fichero de flash, se debe incluir también la carpeta "gs" que es la que contiene la clase "TweenLite". Todos los archivos se encuentran en los archivos del tutorial (abajo).

El siguiente código en el primer frame de nuestra película flash creará una presentación de diapositivas utilizando como contenedor nuestra misma escena. Ideal para presentaciones de trabajos o banners de internet.

var mySlideShow:slideShow = new slideShow(this, "images.xml", stage.stageWidth, stage.stageHeight);

mySlideShow.start();

var mySlideShow:slideShow = new slideShow(this.contenedor, "images.xml", this.contenedor.width, this.contenedor.height);

mySlideShow.start();

El siguiente código en el primer frame de nuestra película flash creará una presentación de diapositivas dentro de un MovieClip situado en la escena con nombre de instancia "contenedor", utilizando como medida de la máscara las mismas dimensiones de este y utilizando dos MovieClips situados en la escena con nombres de instancia "botonAlante" y "botonAtras" respectivamente como botones para pasar la presentación de diapositivas hacia adelante o hacia atrás cuando el control esté configurado en "manual".

var mySlideShow:slideShow = new slideShow(this.contenedor, "images.xml", this.contenedor.width, this.contenedor.height, {next:this.botonAlante, prev:this.botonAtras});

mySlideShow.start();

El siguiente código en el primer frame de nuestra película flash creará una presentación de diapositivas dentro de un MovieClip situado en la escena con nombre de instancia "contenedor", utilizando como medida de la máscara las mismas dimensiones de este y dándole acciones a dos botones en nuestra escena con nombre de instancia "botonStop" y "botonPlay" respectivamente para detener o reproducir nuestra presentación de diapositivas.

var mySlideShow:slideShow = new slideShow(this.contenedor, "images.xml", this.contenedor.width, this.contenedor.height});
mySlideShow.start();
this.botonStop.addEventListener(MouseEvent.CLICK, stopSlideShow);
this.botonPlay.addEventListener(MouseEvent.CLICK, startSlideShow);
function stopSlideShow(evt:MouseEvent):void{
	mySlideShow.stop();
}
function startSlideShow(evt:MouseEvent):void{
	mySlideShow.start();
}

Con esto terminamos el tutorial.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo