Adobe Flash Tutorials


Current Flash CS, CS2, CS3, CS4 and CS5 Tutorials

 

 

Making a slideshow - Macromedia Flash Tutorial

 

Tim Carden

1

Yes! Flash is awesome for making cool intros for your websites and CD-ROMs, but chances are you will one day have to produce something more businessy for a client and this typically is some sort of Flash presentation. Maybe it's to sell a product, or perhaps a step-by-step information session. Either way you normally have two main buttons, a next and previous, with a series of animated or static "slides". Flash is superior to proprietry presentation software such as Corel Presentations or Microsoft Powerpoint as it can be viewed in most web browsers, or made into cross-plaftorm stand-alone players.

Here is a logical methology for producing such presentations easily and efficiently. This tutorial is written using Flash 5 but you should be able to produce a similar project in Flash 4 without too much difficultly using this tutorial as a guide.

To start with you will need to setup your layers, create the forward and next buttons, and design how you would like your presentation to look. You may expand this list depending on the complexity of your presentation, but at basis it is good to have the following:

bullet Content
bullet Buttons
bullet Background
bullet Actions

I like to keep all Frame actions on a separate layer. Start a new document (File | New) and create the 4 layers above by pressing the "insert layer" button on the time line 3 times to add to the current "Layer 1". You can view the timeline if it is not visible by choosing View | Timeline or pressing Ctrl+Alt+T.

To make it easier to keep track of your layers, rename them to the bullet points above. Double click on the name of a layer to edit it. Type the new name and press ENTER to change it.

2

You now need to create the base design for your slides. This will, at minimum, consist of a background with matching Next and Previous buttons. For simplicity I will be using pre-made buttons, but feel free to create your own.

Open the buttons library by clicking Window | Common Libraries | Buttons. Locate two appropriate buttons to use for switching between the next and previous slides in your slide show. Select the Buttons layer in the timeline to activate it, and then drag the buttons out of the library to insert them into your Flash document. Size them so they are easily noticed, but leave room for your content. Position the buttons into the bottom right corner of your slide.

3

Now activate the Background layer in the timeline. With the rectangle tool selected, choose a nice gradient fill. You can create your own gradient fill by opening the Fill Panel (Window | Panels | Fill) and selecting a gradient type from the Fill Style drop down box. If you edit the fill while the rectangle tool is selected you will be editing the fill for the rectangle you are about to draw. Set the outline to none and draw a rectangle filling the entire slide.


T I P
Once your background is finalized, click the dot next to the "Background" layer in the timeline below the padlock icon. This will prevent you from performing accidental edits.

4

Each slide may be static or contact an animation. Consequently we don't want to restrict the number of frames between each slide as there may be longer animation between some, and maybe no animation at all between others. Ideally we would like the "next" button to tell the presentation to play until the next slide (whenever that is), and the "previous" button to rewind to the last slide that was viewed (however far back that was). The simplest way of doing this is to put a play action on the next button, and place stopper frames at each slide. To demonstrate, let's make two static slides.

With the content layer selected, use the text tool to add a text box and enter some text. Press F6 to insert a new keyframe and place next text in the text box on this new keyframe. If you press Ctrl+ENTER to preview your presentation you will notice that Flash just flashes between your two slides without pausing, and without control. Initially the presentation show STOP, and play only when the next button is pressed, and even then only until the next frame.

5

We can achieve this by placing STOP frames where each new slide begins. Select the ACTIONS layer in the timeline and press F6 to insert an empty keyframe. Double click on this key frame to open the actions panel for that keyframe. Click on the Frame Actions panel to activate it, and then press Ctrl+E to switch to expert mode. You can also switch to expert mode from the panel's popup menu. Type the code shown below. It is:

C O D E
stop();
currentSlide = 1;

6

You will also need to label each slide consistently so you can jump forward and back. Select the first keyframe and label it "slide1". You can change the label using the Frame panel (Window | Panels | Frame).

In the timeline a little "a" appears letting you know that it is an action frame. Right-click on the "a" keyframe and select "Copy Frames" then click in the empty frame next to the keyframe, right-click and select "Paste Frames". Remove the second line of code in the Frame Actions panel — we only want to initialize the currentSlide variable on the first slide. The only action for this second (and the rest of your slides) should be stop();

C O D E
stop();

 

7

We will now set the action for the next button. We need for the next button to Play the current presentation, but also keep track of the current slide so we jump back using our previous button. Use the code below:

C O D E

on (release) {
  currentSlide = currentSlide + 1;
  play ();
}

A quick Ctrl+Enter shows that our next button is working nicely.

Now select the previous button and to enter the actions for it. We have stored the current slide number in a variable called currentSlide. All we need to do is move to this by going to Slide(CurrentSlide - 1), if currentSlide is 2 (for the second slide), then we will need to go to slide1 when the previous button is pressed (remember we labeled the first slide slide1 previously). The following code will do this.

C O D E

on (release) {
  currentSlide = currentSlide - 1;
  gotoAndStop ("slide"+currentSlide);
}

Add a few more slides to your slide show but placing content on the content layer. It doesn't matter how many frames between each one, or if there is animation or not. All you need to ensure is that you copy and paste the STOP frames where each slide is. You will have to extend the background, Actions and Buttons layers so they continue until the end of your presentation. You can do this by selecting the empty box where you would like to continue to (as shown below) and pressing F5 to insert frames.

8

Here's how my timeline is looking after adding a few more content slides and animation.

9

There is only one more thing to do. You don't want a "prev" button on the first slide, nor a "next" button on the last slide. Select the frame where the last slide STARTS on the buttons layer and press F6 to insert a keyframe there. Delete the next button from this new Keyframe. Select the frame where the second slide STARTS on the buttons layer and press F6 to insert a new keyframe there too. Select the first keyframe on the Buttons layer and delete the previous button from it. You should now have only a next button on the first slide, and only a previous button on the last slide.

That's it! You should now have a working Flash slideshow template. Add as much content and slides as you want, just ensure you label each slide "slide2", "slide3" etc.

Here is my final timeline and a published Flash 5 SWF. If you like you can also download my final Flash 5 FLA file and add your own content.

What did you think? Did you like this tutorial? Was it easy to follow? Do you have suggestions for future tutorials? Have you seen an effect in Print, web or Flash that you would like to know how to achieve? Please feel free to contact me (Tim) on tiem@healthposts.com.au with your Corel technique query.

 

Copyright 2001, Tim Carden, All Rights Reserved








Groupon Getaways



 

Follow Designer Today on Twitter and Google+


Designer Today tutorials cover all versions of 3D, General 3D, 3dsmax, After Effects, Cinema4D,  CorelDRAW, Flash, Illustrator, InDesign, Maya 3D, Paint Shop Pro, Painter, PhotoPaint, Photoshop, Premiere, Web Design and other design and photo editing software.

Tutorials
3ds max   After Effects  Cinema 4D  CorelDraw  Flash 
Illustrator  InDesign  Maya 3D  Misc   Natural Media   Painter   Paint Shop Pro   PhotoPaint   Photoshop  Poser   Premiere   Texturing   Web Design   Xara Xtreme


Designer Today is the Graphic Design Magazine for 2D and 3D graphic designers. We have thousands of graphic design and graphic design software tutorials, product reviews and design articles available.

Copyright © 1998-2015, GMP Services, Inc. of Statesboro Georgia, All Rights Reserved

Visit our other websites
Poser World - Poser & DAZ Studio 3D Models
3D Dojo - 3D FBX Format Models
Awe 3D - Custom 3D Model Services
Golf Done Right
Statesboro Business & Lifestyle
Allen Harkleroad | Favorite Recipes 
Beat Debt Collectors in Court 
Sue Abusive Debt Collectors