Loading

Español  English

Blog

By Enrique González

Hello Flash coder, I need a Powerpoint

Yes, what to do if your boss says that? It's very usual that he wants a presentation for some stuff, but he doesn't want a Powerpoint for this, he needs "something better". So he wants a Flash presentation, but with the same features that we found in the Microsoft's application. When this happens, there is a very easy solution. We are going to make a "slide to slide" presentation, with a custom transition for the objects in every scene. We only need Tweenlite or something similar for the transitions. So let's go to the stage. Every keyframe will be a "slide". We place all the objects in the slide (text, photos, etc…), and we convert every object into a MovieClip, and give to them some instance name. We are going to make 2 different transitions, one with Alpha only, and another one with scaleX+ScaleY+Alpha. With all these instance names, we create 2 arrays, and fill them with our objects, there are 2 arrays because we are going to make 2 different kinds of transitions.

var objectsforaalpha:Array=new Array(title, text, anothertext, logo1); 
var objectsforaalphaandresize:Array=new Array(image1, image2, image3);

Now we need a function to make the transitions. This function will set the alpha to 0 to every object in the arrays, and then it will do the transition effect.

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

Note that we have used a function to calculate the delay with a more accurate number. The delay is a must, because the transitions must be consecutive (not all start at the same time).

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;
}

In the Tweenlite function we have added an onComplete event, it is necessary because we need to know when the last element of the first array ends its transition, so in that moment, we start the transitions of the second array elements.

function endTransition(el:MovieClip):void { 
   if (el.name==objectsforaalpha[objectsforaalpha.length-1].name) {
     if (objectsforaalphaandresize.length > 0){
      var j:uint=0;
      var item;
      for each (item in objectsforaalphaandresize) {
        item.alpha=0;
        item.scaleX=.1; //we make them tiny
        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++;
      }
    }
  }
}

And we are going to do the same again, when the last object in the second array ends its transition, we have ended the whole "slide" transition.

function endTransition2(el:MovieClip):void { 
  if (el.name== objectsforaalphaandresize[objectsforaalphaandresize.length-1].name)
  {
   trace("we have ended!!!");
  }
}

So with 2 buttons "previous" and "next" to move between frames, and starting the "start()" function on every frame, we have a nice "Flash - Powerpoint" for our boss!

  • Date14-06-2010
  • 0

    comments

  • +

    Leave a comment