Flash instead of PowerPoint

Created Aug 24, 2011     Last Updated: September 18, 2011

Skill Level: Intermediate. Actionscript version: AS3

Flash skills needed:
  1. Creating MovieClip symbols
  2. Simple animation
  3. Using ActionScript panel

Target - to create via Flash a PowerPoint like presentation

Below is a sample. It consists of 3 'slides' that are controlled via the right arrow key on the keyboard. The first slide is a simple fade in. The second and third slides have 3 parts each. The first part fades in the background. The second fades in some text, and the third runs a short animation.

Click inside the flash SWF to the left to make it the 'active' element in the web page. Then you can use your Right Arrow key on your keyboard to advance the 'slideshow'.

The simplest way to make this might be one of the old fashioned ways. The first way is to go frame by frame showing a different 'slide' or portions of a 'slide' on each consecutive frame.

next frame

Some simple code can check for a right arrow keypress(keycode #39), or a left arrow keypress(keycode #37), and use a simple script to advance or go back one frame:

stop();

stage.addEventListener(KeyboardEvent.KEY_DOWN, advanceSlide);
function advanceSlide(e:KeyboardEvent):void {
	
	if (e.keyCode == 39  )
	{ 
	nextFrame();
	}
	
	if (e.keyCode == 37  )
	{ 
	prevFrame();
	}

}
 

Each frame could have either static images, or they could have movieclip symbols which themselves contain animation: fades, movement, etc. If using movieclip in these frames, each moveiclip's internal timeline would need a stop action on its last frame.


A variation on that would to be to have all the animations right on the main timeline, with stop actions on each frame as needed. Then the script is slightly altered to just 'play' the timeline - and it will stop according to the stop actions. This way will make it more difficult to code going in reverse.

timeline

This script extends across the whole timeline, and listens for when the right arrow key is pressed ( the right arrow key has the 'keycode' of number 39 ). It tells the timeline to play, which it will, until it comes to the next stop action.

stage.addEventListener(KeyboardEvent.KEY_DOWN, advanceSlide);
function advanceSlide(e:KeyboardEvent):void {

	if (e.keyCode==39) {
		play();
	}
}

OK, one of those ways would seem to do the trick. BUT, let's try to do this using more modern practices. Better to keep the main timeline as a 1 frame timeline, with all the code on this frame ( or in an external AS file...). There are many different ways we can approach this, make it work, AND move closer to more modern OOP (Object Oriented Programming) mode of coding.

Some other approaches to this, rather than relying on the main timeline, could be, but are not limited to:

  1. Creating each 'slide' as a stand alone MovieClip, which can then be manipulated at will
  2. Using MoveClip assets that are called from the Library as needed
  3. Creating each 'slide' as a separate external SWF, which is Loaded in/removed as required

We are going to work off of item #1. Once you understand this way, then you can figure out the other means also.


 main timeline

I set up my project as a 1 frame timeline. I made a layer for the actionscript, and one layer for each of the movieclip 'slides'.


Next i created the movieclip 'slides'. The first one:

slide 1

just has a background layer with the words 'slide 1' which fade in over 30 frames. For this example I am using a Classic Tween to animate the alpha from 0 to 1. Under normal circumstances I usually choose to do code based animations, often using Greensock's TweenLite tweening engine to make the job easier.

I placed 2 frame labels, the first called 'first' ( how original..) , and the last one called 'end'. For the sake of being able to actually see and read the last frame label, I extended the 'labels' layer by several frames to reveal the full frame label. Do not leave it this way if you follow along, or you will end up with unexpected results!


Slides 2 and 3 are created the same way:

slide 2

Slides 2 and 3 have a background layer with the word 'slide 2' or 'slide 3', which you can see uses a Classic Tween of its alpha from 0 to 1. Next comes the Classic (alpha) Tweening of some text, and then comes the animation of a ball(slide 2) or a rectangle(slide 3).

Key frames with frame lables are placed at all the points where one animation ends, and the next is about to begin. Notice that the first framle label is also called 'first', and the last is also called 'end'.

That's really it. All we will do now is to give these 3 movieclips instance names: 'slide1', 'slide2', and 'slide3', and then to align them on the stage. They are all starting out without any transparency(alpha) so they will appear invisible at this point.

We will take advantage of, and use, two properties - the CurrentLabel and the CurrentFrameLable. Both are similar in that they return the value of the current frame. The difference is that 'curerntFrame' returns the value ( the name) of the current frame, or if the current frame has no label, it returns the value of the last frame label it passed through. You can think of it like driving through several States ( if you are in USA). You see a sign that says 'Welcome to NY' and you drive on through. As you keep driving, you are still in NY until you come to the next sign which says 'Welcome to NJ'.

With currentFrameLabel, things are a little different. It will return the value of a frame label of exactly which frame it is over. If the playhead is over a frame without a frame label, the value returned will be 'null'.

Now that we have all the slides created, and understand 'currentLabel' and 'currnetFramelabel', let's begin coding!

Here is the complete codeing that will now make this work. We will go over it below.

var slides:Array = [slide1, slide2, slide3 ];
var slidesLength:uint = slides.length;

for (var i:uint; i < slidesLength; i++) {
	slides[i].stop();
}

var slideNumber:uint = 0;
var currentSlides:MovieClip = slides[slideNumber];
var currFrameLabel:String = currentSlides.currentFrameLabel;
 
stage.addEventListener(KeyboardEvent.KEY_DOWN, advanceSlide);
function advanceSlide(e:KeyboardEvent):void {
	if (e.keyCode == 39 && currentSlides.currentFrameLabel == 'end' )
	{ currentSlides.gotoAndStop(1); 
	if ( slideNumber == slidesLength - 1 ) { slideNumber = 0} else
	 { slideNumber+=1 };
	 
	  currentSlides = slides[slideNumber];
	  currentSlides.play();
      addEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	  }
else	
	if (e.keyCode == 39 )
	{ 
	currentSlides.play();
    addEventListener(Event.ENTER_FRAME, stopsSlideEnd);  
	}
	
}
 
 function stopsSlideEnd(e:Event):void {
	currFrameLabel= currentSlides.currentFrameLabel;

if (currentSlides.currentFrameLabel=='end' || currFrameLabel !=null)
	{ currentSlides.stop();
	   removeEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	   }
	 else
	
	{ currentSlides.play(); }
}

Code Explanation

var slides:Array = [slide1, slide2, slide3 ];
var slidesLength:uint = slides.length;

We first create an Array to hold and keep track of the slides. Arrays are quite useful in many ways. Read up on them if you need more information. Our array is called 'slides'. Another good idea is to create a variable to declare the length of the array. My variable is 'slidesLength'.

for (var i:uint; i < slidesLength; i++) {
	slides[i].stop();
}

This 'for' loop goes through the array, and tells each slide to stop.

var slideNumber:uint = 0;
var currentSlides:MovieClip = slides[slideNumber];
var currFrameLabel:String = currentSlides.currentFrameLabel;

Next we create a few variables. 'slideNumber' is a number (uint) which will be used to keep track of which position we are in the array.

'currentSlides' is a MovieClip, which we will use to reference the presently playing 'slide'.

The last variable is a String, 'currFrameLabel' which we will use to determine the current Frame label of the current slide playing

stage.addEventListener(KeyboardEvent.KEY_DOWN, advanceSlide);
function advanceSlide(e:KeyboardEvent):void {
	if (e.keyCode == 39 && currentSlides.currentFrameLabel == 'end' )
	{ currentSlides.gotoAndStop(1); 
	if ( slideNumber == slidesLength - 1 ) { slideNumber = 0} else
	 { slideNumber+=1 };
	 
	  currentSlides = slides[slideNumber];
	  currentSlides.play();
      addEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	  }
else	
	if (e.keyCode == 39 )
	{ 
	currentSlides.play();
    addEventListener(Event.ENTER_FRAME, stopsSlideEnd);  
	}
	
}

An Event Listener is attached to the stage. It will listen for a KeyboardEvent, i.e. when a key is pressed. It triggers the function 'advanceSlide'.

It's main task is to check for 2 overall situations. First, to see if the key pressed was the right arrow key, and also to check if the current slide is on its last label ('end').

It first:

If both of the cases ( right arrow being pressed AND the current frame label being 'end') is NOT true, then it goes on to check to see if at least the keypress was for the right arrow ( keycode #39). If so, it then:

 function stopsSlideEnd(e:Event):void {
	currFrameLabel= currentSlides.currentFrameLabel;

if (currentSlides.currentFrameLabel=='end' || currFrameLabel !=null)
	{ currentSlides.stop();
	   removeEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	   }
	 else
	
	{ currentSlides.play(); }
}


That's basically it! Going in reverse in this manner has it own sets of challenges. The main challenges are if you are using 'slides' with multiple, stepped, animations. Backing up to the individual frame labels is more complicated. It CAN be done, but requires some other coding and logic. For practical reasons, I wouldn't see the need to actually do that. One work around is to have the 'reverse ( the 'left arrow' on the keybord ( keycode #37)) always back up by whole 'slides'. That IS doable. IF wanted, you would just add this extra code in the 'advanceSlide' function:

 stage.addEventListener(KeyboardEvent.KEY_DOWN, advanceSlide);
function advanceSlide(e:KeyboardEvent):void {
	
	if (e.keyCode == 39 &&  currentSlides.currentFrameLabel == 'end' )
	{ 
	currentSlides.gotoAndStop(1); 
	if ( slideNumber == slidesLength - 1 ) { slideNumber = 0} else
	 { slideNumber+=1 };
	 
	  currentSlides = slides[slideNumber];
	  currentSlides.play();
	  addEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	  }
else	
	if (e.keyCode == 39 )
	{ 
	currentSlides.play(); 
	addEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	}
	
if (e.keyCode == 37 )
	{  
	currentSlides.gotoAndStop(1);
	if (slideNumber == 0) { slideNumber=slidesLength-1} 
	else {slideNumber-=1};
	currentSlides = slides[slideNumber];
	currentSlides.play(); 
	addEventListener(Event.ENTER_FRAME, stopsSlideEnd);
	}	
	
}

If you have questions or comments, feel free to let me know.

You must have 'styles' or 'CSS' disabled. That's OK.

If so, and you see this, please DO NOT fill out the next 3 fields: name, email and zipcode. Thank you.

Name:

Email:

Just continue on to the rest of the form below this. Thank you.








Thanks for helping us control spam by filling in this question:
What is 10 + 3 = ? (Use numerals only)