In this Quick Tip we'll create a full screen slideshow presentation with Flash.

Step 1: Set Up the Flash File

Create a new Flash file and save as Presentation.fla. In the Properties Panel, set the size to match the settings of your display screen size. For example, a standard laptop WXGA screen is 1280 x 800 pixels. To deliver a presentation file to someone that doesn’t have the flash player installed on their machine, select the Windows and/or Macintosh Projector boxes in the Publish Settings Panel.

Step 2: Set up the Main Document Class

Create a new .as file - “Presentation.as” - to be the document class (refer to this Quick Tip for more on document classes).

package  {
	
	import flash.display.MovieClip;
	
	public class Presentation extends MovieClip 
	{
		
		public function Presentation() 
		{
			
		}
		
	}
	
}

Step 3: Go Full Screen

To switch to full screen mode, we must change the stage display state. Add a new import statement above the class declaration for StageDisplayState.

import flash.display.StageDisplayState;

Under normal circumstances, Flash requires full screen mode to be initiated by MouseEvent, but when viewing a swf outside of a browser (projector mode) this is not an issue. Still, just to be safe (and in case you would like to put your presentation online), we use a try/catch statement to contain the Security Error that would be thrown.

public function Presentation() 
{
	public function Presentation() 
		{
			try 
			{
				stage.displayState = StageDisplayState.FULL_SCREEN;
			}
			catch (err:SecurityError) 
			{
				// Must be in projector mode for full screen viewing
			}
		}
}

If you publish and open the swf, you will see that it launches directly into full screen mode (press ESC to exit).

Step 4: Create Playhead Timer

Our presentation will work by going forward and backward through the timeline. Flash doesn’t have a method for playing the timeline in reverse, so we will have to create our own using a timer to move the playhead through the frames on the timeline. First, we import the Timer and TimerEvent classes.

import flash.events.TimerEvent;
import flash.utils.Timer;

Next, we declare the class vars for the timer and also a Boolean for keeping track of the playback direction.

private var isPlayingForward:Boolean;
private var timelineTimer:Timer;

Then, in the class constructor, we set the values for these class vars. We give the timer a delay equal to the frame rate set in the document properties.

isPlayingForward = true;
timelineTimer = new Timer(1000/stage.frameRate);
timelineTimer.addEventListener(TimerEvent.TIMER, timelineTimerHandler);

Last, we set up the event handler for the timer.

private function timelineTimerHandler(te:TimerEvent):void 
{
	if (isPlayingForward)  
		this.nextFrame();
	else
		this.prevFrame();
}

Step 5: Create Timeline Control Methods

In this step, we will create three simple methods for controlling movement along the timeline. One for stop, one for play forward and another to play in reverse.

public function stopTimeline():void 
{
	stop();
	timelineTimer.stop();
}

public function playForward():void 
{
	isPlayingForward = true;
	timelineTimer.start();
}

public function playReverse():void 
{
	isPlayingForward = false;
	timelineTimer.start();
}

Step 6: Configure Keyboard Listeners

The keyboard will be used to change slides in our presentation, so we need to set up the keyboard events and listeners. Once again, we import some classes.

import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

Next, add the KeyboardEvent listener to the stage.

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardHandler);

Last, create a method to handle the KeyboardEvent.

private function keyboardHandler(event:KeyboardEvent):void 
{
	if (event.keyCode == Keyboard.RIGHT) 
		playForward(); 
	if (event.keyCode == Keyboard.LEFT) 
		playReverse();
}

Step 7: Build Slides

Now we move on to building the timeline. For this, simply build some slides, and create timeline animations to transition between them. Create an actions layer and, for each slide, add stopTimeline(); to a keyframe. Your timeline panel should look something like this:

Step 8: Create Slide Transitions With Code

In addition to building slide transitions on the timeline, we can also use ActionScript. In this example, we will use TextAnimMaker and Greensock’s TweenLite. To download these ActionScript libraries, go to Google Code for TextAnimMaker and GreenSock for TweenLite. Once you’ve downloaded the files, grab both the greensock and flupie directories from their individual com directories and copy them into one com directory in your project folder.

Next, we import these code libraries into our main document class so they will be available for us to use on the timeline.

import com.greensock.TweenLite;
import com.greensock.easing.*;
import com.flupie.textanim.*;

Create a new MovieClip and add it to the stage. Give it an instance name of slideTextAnimation. Inside the MovieClip, create a dynamic TextField with some text inside and give it an instance name of slideText. Now, in the actions layer on the timeline, add the script below.

stopTimeline();

var slideAnimateIn:TextAnim = new TextAnim(slideTextAnimation.slideText);
slideAnimateIn.mode = TextAnimMode.RANDOM;
slideAnimateIn.interval = 20;
slideAnimateIn.blocksVisible = false;
slideAnimateIn.effects = growEffect;
slideAnimateIn.start();

function growEffect(block:TextAnimBlock):void 
{
	TweenLite.from(block, 1, {scaleX:0, scaleY:0, ease:Elastic.easeOut});
}

This will create a fun effect where each letter is animated onto the stage. For more about TextAnimMaker, check out this QuickTip.

Step 9: The Big Finish

Wrap up the presentation by animating the slideTextAnimation MovieClip off the stage and filling out the timeline with the rest of your slides. Perhaps you might like to try some 3D Motion tweening or more cool transitions with TextAnimMaker and TweenLite.

Thanks for reading this quick tip, and I hope your next presentation is one that will blow everyone away with its flashy greatness!