SlideShow Transicion v1
Un SlideShow es una presentacion o coleccion de diapositivas que se muestran una tras otra, en esta ocasion diseñe un script que puede facilitarte la vida cuando quieres crear un slideshow altamente personalizable; el codigo esta documentado, espero te sea muy util. Suerte.
Caracteristicas
- Carga de archivos externos
- Despliegue de las diapositivas de forma secuencial, aleatoria o ciclicamente
- 8x5 Transiciones
Notacion
"MC"es MovieClip
"Diapositiva" se refiere al recurso que se ha cargado, puede ser una imagen o incluso un swf.
Variables Inciales
Código ActionScript :
//-- Variables iniciales --// var frames:Number = 24;//Numero de frames que se vera cada diapositiva var sld_x:Number = 10;//Posicion en X del Slide var sld_y:Number = 10;//Posicion en Y del Slide var sld_w:Number = Stage.width - 20;//Ancho del Slide var sld_h:Number = Stage.height - 20;// Alto del Slide var sld_mask:Boolean = true;// Alto del Slide var aleatorio:Boolean = false;//Indica si es aleatorio var ciclico:Boolean = true;//Indica si se tiene repite al llegar al final var transicion:String = "zoomv";//Tipos de transicion var movimiento:String = "elastico";//Tipos de movimiento
"sld_x", "sld_y" posicionan el SlideShow en cordenadas x y
"sld_w", "sld_h" es el ancho y alto del slideShow, necesario para centrar las imagenes y enmascararlas
"frames" es el numero de frames que transcurren antes de que cambie de diapositiva, usualmente las peliculas se exportan a 12fps(default), el valor 12 representaria 1 segundo y el valor 24 representa 2 segundos
"sld_mask" es un valor falso/verdadero que indica si se enmascara el slideshow
"aleatorio" es un valor falso/verdadero que indica si se presentan aleatoriamente las diapositivas
"ciclico" es un valor falso/verdadero que indica si se reincia cuando llega a la ultima diapositiva.
"transicion" el efecto de transicion puede estar entre estos valores:
- arriba .- movimiento hacia arriba
- abajo .- movimiento hacia abajo
- izquierda .- movimiento haca la izquierda
- derecha .- movimiento hacia la derecha
- zoomv .- amplificado verticalmente
- zoomh .- amplificado horizontalmente
- zoom .- amplificado
- fade .- desvanecido
- none .- nunguna animacion
"movimiento" el tipo de movimiento que toma la transicion puede estar entre estos valores:
- retroceso
- rebote
- elastico
- remarcado
- normal
Diapositivas a cargar
Código ActionScript :
var misDiapositivas:Array = new Array();
misDiapositivas.push("IMG/_01.jpg");
misDiapositivas.push("IMG/_02.jpg");
misDiapositivas.push("IMG/_03.jpg");
misDiapositivas.push("IMG/_04.jpg");
misDiapositivas.push("IMG/_05.jpg");
misDiapositivas.push("IMG/_06.jpg");
cargarDiapositivas();
Aqui se colocan las rutas de las diapositivas que cargara y presentara el SlideShow.
Codigo completo para CopyPaste
Código ActionScript :
import mx.transitions.Tween;
import mx.transitions.easing.*;
//-- Variables iniciales --//
var frames:Number = 24;//Numero de frames que se vera cada diapositiva
var sld_x:Number = 10;//Posicion en X del Slide
var sld_y:Number = 10;//Posicion en Y del Slide
var sld_w:Number = Stage.width - 20;//Ancho del Slide
var sld_h:Number = Stage.height - 20;// Alto del Slide
var sld_mask:Boolean = true;// Alto del Slide
var aleatorio:Boolean = false;//Indica si es aleatorio
var ciclico:Boolean = true;//Indica si se tiene repite al llegar al final
var transicion:String = "zoomv";//Tipos de transicion
/** transicion
*
* arriba .- movimiento hacia arriba
* abajo .- movimiento hacia abajo
* izquierda .- movimiento haca la izquierda
* derecha .- movimiento hacia la derecha
* zoomv .- amplificado verticalmente
* zoomh .- amplificado horizontalmente
* zoom .- amplificado
* fade .- desvanecido
* none .- nunguna animacion
*
**/
var movimiento:String = "elastico";//Tipos de movimiento
/** movimiento
*
* retroceso
* rebote
* elastico
* remarcado
* normal
*
**/
//-- Varialbles internas --//
// cargoDiapositivas .- array de los MCs que contendran las diapositivas
var cargoDiapositivas:Array;
// index .- indica la diapositiva actual
var index:Number = -1;
// loading .- indica el numero de recusos cargados
var loading:Number = 0;
// cargador .- se usara para cargar las diapositivas
var cargador:MovieClipLoader = new MovieClipLoader();
cargador.addListener(this);
// slideshow .- MC que contendra todo el slideshow
var slideshow:MovieClip;
//-- Diapositivas a cargar --//
var misDiapositivas:Array = new Array();
misDiapositivas.push("IMG/_01.jpg");
misDiapositivas.push("IMG/_02.jpg");
misDiapositivas.push("IMG/_03.jpg");
misDiapositivas.push("IMG/_04.jpg");
misDiapositivas.push("IMG/_05.jpg");
misDiapositivas.push("IMG/_06.jpg");
cargarDiapositivas();
//-- Clips de trabajo y Carga --//
function cargarDiapositivas( Void ):Void
{
this.slideshow = this.createEmptyMovieClip( "slideshow" , this.getNextHighestDepth() );
//Creamos el clip que contendra los limites del slideshow
this.slideshow.createEmptyMovieClip("bound_mc", 0);
this.setArea( this.slideshow.bound_mc, this.sld_w, this.sld_h );
//Enmascaramos el slideshow
this.slideshow.setMask( this.sld_mask ? this.slideshow.bound_mc : null );
//Posicionamos
this.slideshow._x = this.sld_x;
this.slideshow._y = this.sld_y;
//Variables inciales
this.slideshow.owner = this;
this.slideshow.count = this.frames;
this.cargoDiapositivas = new Array();
for (var i:Number = 0, l:Number = this.misDiapositivas.length; i < l; i++)
{
//creamos un MC dentro de slideshow y lo colocamos en el array
this.cargoDiapositivas[i] = this.slideshow.createEmptyMovieClip( "slide_" + i , i + 1);
//creamos un MC dentro del MC previamente creado, en el cargamos la diapositiva
this.cargador.loadClip(this.misDiapositivas[i], this.cargoDiapositivas[i].createEmptyMovieClip("clip", 0));
}
//Creamos un TextField para mostrar mensajes
this.slideshow.createTextField("texto_txt", this.slideshow.getNextHighestDepth(), this.sld_w / 2 - 100, this.sld_h - 22, 200, 22);
//Le damos formato al texto
var format:TextFormat = new TextFormat();
format.align = "center"
format.bold = true;
format.font = "Arial";
format.color = 0x888888;
format.size = 11;
this.slideshow.texto_txt.setNewTextFormat( format );
this.slideshow.texto_txt.selectable = false;
//Colocamos el mensaje de carga
this.slideshow.texto_txt.text = "Cargando...";
}
//Funcion que se ejecutara cuando esten cargados todos las diapositivas
function startSlideShow( Void ):Void
{
//Inicia el slideshow
slideshow.onEnterFrame = function( Void ):Void
{
//Evaluamos si han transcurrido los frames indicados
if ( this.count >= this.owner.frames )
{
//Si es asi, ejecutamos la funcion "cambiar"
this.count = 0;
this.owner.cambiar();
}
else this.count++;
}
}
//-- Eventos del MovieClipLoader --//
function onLoadInit( target:MovieClip ):Void
{
//Hacemos invisible
target._parent._visible = false;
//Centramos
target._parent._x = target._parent._parent.bound_mc._width / 2;
target._parent._y = target._parent._parent.bound_mc._height / 2;
target._x = target._width / -2;
target._y = target._height / -2;
//Si ya se cargo todo, podemos inciar
if( (++loading) >= cargoDiapositivas.length )
{
startSlideShow();
}
}
//-- cambiar --//
function cambiar( Void ):Void
{
if( aleatorio )//Si es aleatorio
{
//Generamos un numero aleatorio
var randome = rand( cargoDiapositivas.length, index );
//Aplicamos la transicion
interpolar( cargoDiapositivas[index], cargoDiapositivas[randome] );
//Actualizamos el index
index = randome;
}
else
{
//Creamos una variable la igualamos con el index y luego incrementamos el index
var actual = index++;
if( index >= cargoDiapositivas.length )//Si llegamos al final
{
if( ciclico )//Si es ciclico
{
index = 0;//regrsamos el index al incio
}
else//Si no
{
delete slideshow.onEnterFrame;//Detenemos el slideshow
}
}
//Aplicamos la transicion
interpolar( cargoDiapositivas[ actual ], cargoDiapositivas[ index ] );
}
//Trace
this.slideshow.texto_txt.text = (index + 1) +" de "+ cargoDiapositivas.length;
}
//-- Efectos --//
function interpolar( ini:MovieClip, fin:MovieClip):Void
{
//Colocamos a "fin" en el nivel mas alto
fin.swapDepths(cargoDiapositivas.length);
// ease .- variable que contiene la funcion de movimiento
var ease:Function = StringToEasing( movimiento );
//Elegimos la transicion
switch(transicion)
{
case "arriba":
CambioArr( ini, fin, ease );
break;
case "abajo":
CambioAbj( ini, fin, ease );
break;
case "izquierda":
CambioIzq( ini, fin, ease );
break;
case "derecha":
CambioDer( ini, fin, ease );
break;
case "zoomv":
CambioZoomH( ini, fin, ease );
break;
case "zoomh":
CambioZoomV( ini, fin, ease );
break;
case "zoom":
CambioZoom( ini, fin, ease );
break;
case "fade":
CambioFade( ini, fin, ease );
break;
//Si no hay ninguna transicion
case "none": default:
fin._visible = true;
ini._visible = false;
break;
}
}
//desvanecimiento
function CambioFade( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_alpha", ease, 0, 100, 1.5, true);
var aux:Tween = new Tween(ini, "_alpha", ease, 100, 0, 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
//ampliacion
function CambioZoom( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_xscale", ease, 0, 100, 1.5, true);
new Tween(fin, "_yscale", ease, 0, 100, 1.5, true);
new Tween(ini, "_xscale", ease, 100, 0, 1.5, true);
var aux:Tween = new Tween(ini, "_yscale", ease, 100, 0, 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
//ampliacion horizontal
function CambioZoomH( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_yscale", ease, 0, 100, 1.5, true);
var aux:Tween = new Tween(ini, "_yscale", ease, 100, 0, 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
function CambioZoomV( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_xscale", ease, 0, 100, 1.5, true);
var aux:Tween = new Tween(ini, "_xscale", ease, 100, 0, 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
function CambioDer( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_x", ease, fin._width / -2, fin._parent.bound_mc._width / 2, 1.5, true);
var aux:Tween = new Tween(ini, "_x", ease, ini._parent.bound_mc._width / 2, ini._parent.bound_mc._width + (ini._width / 2), 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
function CambioIzq( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_x", ease, fin._parent.bound_mc._width + (fin._width / 2), fin._parent.bound_mc._width / 2, 1.5, true);
var aux:Tween = new Tween(ini, "_x", ease, ini._parent.bound_mc._width / 2, ini._width / -2, 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
function CambioArr( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_y", ease, fin._parent.bound_mc._height + (fin._height / 2), fin._parent.bound_mc._height / 2, 1.5, true);
var aux:Tween = new Tween(ini, "_y", ease, ini._parent.bound_mc._height / 2, ini._height / -2, 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
function CambioAbj( ini:MovieClip, fin:MovieClip, ease:Function ):Void
{
//Hacemos visibles los clips
fin._visible = ini._visible = true;
//Generamos las Tween
new Tween(fin, "_y", ease, fin._height / -2, fin._parent.bound_mc._height / 2, 1.5, true);
var aux:Tween = new Tween(ini, "_y", ease, ini._parent.bound_mc._height / 2, ini._parent.bound_mc._height + (ini._height / 2), 1.5, true);
//Al finalizar la Tween
aux.onMotionFinished = function( o )
{
//Colocamos invisible el movieclip ini
o.obj._visible = false;
}
}
//-- Utilerias --//
//Genera numeros aleatorios de 0 a sup, excluye a norep
function rand( sup:Number, norep:Number ):Number
{
norep = ( norep == undefined ) ? -1 : norep;
var aux:Number;
do
{
aux = Math.floor(Math.random() * sup);
}
while( aux == norep && sup > 1);
return aux;
}
//Dibuja un cuadrado en clip, de ancho w y alto h
function setArea( clip:MovieClip, w:Number, h:Number, color:Number, alpha:Number ):Void
{
//Dibujamos un cuadrado
clip.clear();
clip.beginFill( color?color:0, alpha?alpha:0 );
clip.moveTo( 0, 0 );
clip.lineTo( w, 0 );
clip.lineTo( w, h );
clip.lineTo( 0, h );
clip.endFill();
}
//toma una cadena "aceleracion" y regresa una funcion de easing
function StringToEasing( aceleracion:String ):Function
{
switch( aceleracion )
{
case "retroceso":
return Back.easeOut;
break;
case "rebote":
return Bounce.easeOut;
break;
case "elastico":
return Elastic.easeOut;
break;
case "remarcado":
return Strong.easeOut;
break;
case "normal": default:
return Regular.easeOut;
break;
}
}
