Quite some time ago, I made this scripted slider for a presentation of my college’s computer class. It proved useful. So, why not share it with everyone?

It automatically generates a fading in and out transition to the slides (technically they’re called frames). Thus, you can add however many slides you want without animating them manually. It is super convenient to use.

Simply add in graphic elements like text or pictures into frames of the movieclip, and it’ll work like a charm.

step 1 – Create a new movieclip

 

Draw a dot using the Paint Bucket Tool, select it using the Selection Tool (the black cursor), then press F8. Make sure it’s “Type” is selected as “movieclip”. Then, press that ‘OK’ button to convert it into a movieclip symbol.

step 2 – Add actionscript to movieclip

Add the following actionscript to the movieclip. Don’t panic, most of the script below are only comments.

onClipEvent (load) {
this.stop();     //stops movieclip at the first frame
this._alpha = 0; // set transparency to 0
var a = false;   //a simple variable named "a", set as false
}
onClipEvent (mouseDown) {
a = true; //if you clicked, variable "a" becomes true
}
onClipEvent (enterFrame) {
//if transparency is lower than 100 percent, and "a" is false, then
//transparency increases by 6 per second
if (_alpha<100 and a != true) {
_alpha += 6;
}
//if "a" is true, transparency decreases
if (a == true) {
_alpha -= 6;
}
//if transparency is smaller than 5, "a" becomes false, and
//jumps to the next frame
if (_alpha<5) {
a = false;
nextFrame();
}
}

It’s simple and self explanatory, read the comments (marked by //) within the actionscript for a better understanding of the script.

step 3 – Add graphic elements into the movieclip’s frame

Double click the movieclip to access it’s timeline, which contains it’s own set of frames. Then, erase the dot you drawn using the Eraser tool.

Now you can insert graphic elements like textboxes and images into it’s frames. Also, simply press F7 if you want to create new frames.

3.1 Importing graphics

First you have to make sure you are within the movieclip’s timeline. Then,  simply drag images from their folder onto your Flash 8′s stage.

3.2 Creating text boxes

 

Select the text box tool here. (indicated by red square) Then, drag your cursor on the stage to create a text box.

You can change it’s size, color and style at the properties panel below, after it is selected.

One important thing you have to know is that you have to use font’s other than sans, serif and typewriter, as their transparency cannot be altered.

I found that other fonts like Arial would work fine. If you absolutely have to use the fonts mentioned above, there is an alternative, which is to break down the text box into vector graphics.

You can do so by selecting the text box, then press Ctrl+B twice. Now they can be affected by transparency changes. The downside to this method is that you cannot edit or change the text or content afterwards as they’ve become graphics.

step 4 – Making your Flash presentation full screen

If you want to have a full screen Flash presentation, you must first change the stage of your Flash document to match your screens dimension. For my computer, I use 1366×768.

First, right click on the stage, then select “document properties” to popup the dialog box above. There you can set the size and color of your Flash movie.

Then, insert this actionscript into the first frame of your main timeline. It set’s your Flash presentation to full screen automatically.

fscommand("FULLSCREEN", true)

 

Conclusion

If you find this post helpful, tweet, stumble or like it on Facebook below. And thanks for the read! Here is the source files for presentation slider above, feel free to download and dissect it.

flash_presentation_tut

The upcoming updates will cover more complex sliders, with audio, timeline bars and so on.