Cargando

Español  English

Blog

Por Enrique González

Hola Flashero, necesito un Powerpoint

¿Qué hacer si tu jefe te dice esto? Es muy normal que a veces quiera hacer alguna presentación de algo, pero no quiera un simple Powerpoint, el quiere "algo mejor". O sea, quiere una presentación en Flash, pero con la misma navegación que un Powerpoint. Cuando esto pasa, hay una solución muy fácil. Vamos a hacerle una presentación diapositiva a diapositiva, con una transición para todos los objetos en cada escena. Solo necesitamos Tweenlite u otra librería similar para las transiciones. En el escenario de Flash, cada keyframe va a ser una diapositiva. Ponemos todos los objetos en el escenario (texto, fotos, etc.) y cada uno lo convertimos en un MovieClip, dandole un nombre de instancia. Vamos a hacer dos tipos diferentes de transiciones, una solo con Alpha y otra con scaleX+ScaleY+Alpha. Con todos los nombres de instancia, creamos 2 arrays, son 2 porque vamos a hacer 2 tipos de transiciones.

var objetosparaalpha:Array=new Array(titulo, texto, otrotexto, logo1); 
var objetosparaalphayrescalar:Array=new Array(imagen1, imagen2, imagen3);

Ahora necesitamos una función para hacer las transiciones. Esta función pondrá el alpha a 0 de todos los objetos que se encuentran en los arrays, y entonces hará los efectos de transición.

function start():void {   
  var i:uint=0;
  var element;
  for each (element in objetosparaalpha) {
    element.alpha=0;
    TweenLite.to(element, 1, {delay:roundToNearest(i/5,2,false), alpha:1, onComplete:endTransition, onCompleteParams:[element]});
    i++;
  }
}

Hay que notar que hemos usado una función para calcular el retardo con un número más exacto. El retardo es imprescindible, porque las transiciones deben ser consecituvas (no deben empezar todas a la vez).

function roundToNearest(num: Number, places:Number, truncate:Boolean):Number{
   var factor:Number = Math.pow( 10, places );
   return Math[Boolean(truncate)?''floor'':''round'']( num * factor ) / factor;
}

En la función Tweenlite hemos añadido el evento onComplete, es necesario porque tenemos que saber cuando el último elemento del primer array termina su transición, para que en ese momento, empiecen las transiciones de los elementos del segundo array.

function endTransition(el:MovieClip):void { 
   if (el.name==objetosparaalpha[objetosparaalpha.length-1].name) {
     if (objetosparaalphayrescalar.length > 0){
      var j:uint=0;
       var item;
      for each (item in objetosparaalphayrescalar) {
         item.alpha=0;
        item.scaleX=.1; //lo hacemos pequeño
        item.scaleY=.1;
        TweenLite.to(item, 1, {ease:Elastic.easeOut,delay:roundToNearest(j/5,2,false),   alpha:1,scaleX:1, scaleY:1, onComplete: endTransition2, onCompleteParams:[item]});
        j++;
      }
    }
  }
}

Y hacemos lo mismo de nuevo, cuando el último objeto del segundo array termina su transición, hemos terminado toda la animcación de la dispositiva.

function endTransition2(el:MovieClip):void { 
  if (el.name== objetosparaalphayrescalar[objetosparaalphayrescalar.length-1].name)
  {
   trace("fin!!!");
  }
}

De esta forma, con 2 botones de "anterior" y "siguiente" para movernos entre los fotogramas, y ejecutando la función "start()" al llegar a cada fotograma, tendremos un bonito "Flash - Powerpoint" para nuestro jefe.

  • Fecha14-06-2010
  • 0

    comentarios

  • +

    Deja un comentario