64x64 icon dark hosting
Deploy New Relic now and get $135 off your Tuts+ subscription.
Advertisement

Quick Tip: Full Screen Timeline Presentation

by

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).


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.

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.

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.

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

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.

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


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.


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.

Next, add the KeyboardEvent listener to the stage.

Last, create a method to handle the KeyboardEvent.


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.

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.

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!

Advertisement