Introduction

In this tutorial we will be creating a Slidshow application for your site or blog. This tutorial is once again very basic and uses pretty simple ActionScripting to get things done. As usual I will explain what the script does so you can follow what’s going on and when.

Necessary skills are basic and we’re going to do some ActionScripting, Masking and XML scripting which will make sure we can use this slidesho application whenever and how many time we want. This means we will load pictures and picture tag lines dynamically which enables you to always update your Slideshow with new content.

Software’s and Languages used:

• Adobe Flash
• Adobe Photoshop
• ActionScript
• FTP Client

Step 1

The first thing we have to do is to create a User Interface for our Slideshow Player. The interactivity is going to be a Next, Prev and a Slideshow Speed button. There are millions of ways you can design your User Interface to fit your blog or website. Your creativity is really only the limit.

I have created a fairly simple and straight forward User Interface. What’s important to remember here is to Layer everything so you can dis include some things when adding your background in Flash for example. You wouldn’t want to have you player showing all the buttons as it then will become kind of weird looking when you adjust the speed for example.

Here is my User Interface all put together:

Step 2

Now when we have our User Interface it’s time to setup our Flash project. Open your Adobe Flash and open a new project. Make it ActionScript 2.0. After your new project has been created open the “Document Properties” window by either double clicking on the “Frame Rate” display or by pressing “Ctrl-J“.

With the window open add these settings (considering you have the same User Interface Properties as I am using in my User Interface. Width, Height etc…):

• Title: Slideshow Player
• Width: 263px
• Height: 356px
• Background Color: White (#ffffff) – Considering you want the same background color.
• Frame Rate: 25 fps (Frames per Second)

Step 3

Let’s create the layers we need for this application. We’re going to be creating a pre-loader for the Slideshow. Not a pre-loader that loads all the pictures at once as this would make our player slow and frustrating before it actually begins if we were to use a vast amount of pictures to Slideshow.

The layers we are going to need are (from top to bottom):

• actions
• buttons
• speedcontrol
• textfield
• display
• preloader
• background

If you want to add for example a title to your player you can just go ahead and add another layer. It’s really up to you what you want to add to this player.

In the “display” layer we are going to play around with masking to get the result we’re after when changing images. But we will get to that.

Step 4

Let us start adding stuff to our player by adding the background we’re going to be using. Before adding my background (User Interface) I have to take out everything that will be moving around. Would want to reveal a stuck nob while the movable object is floating around.

So, in Photoshop I will just de-select the layers I don’t want visible in the background of our Slideshow Player.

After that, let’s import our background to our project. With our “background” layer selected click “File” -> “Import” -> “Import To Stage…”

When your graphics have been imported you might have to align them properly. Either use your “align” toolbox to your right or set X and Y in your “info” box to your right to 0 and 0. This will align your background to the upper-left corner.

Go ahead and lock the layer to prevent any movement.

Step 5

Now with out background all included. Let’s create the pre-loader for our pictures. So, create a rectangular box over the “Speed Slider Bar” with the size of Width: 250, Height: 12. Color doesn’t matter as our box will later become transparent anyways.

With that done we need to convert our rectangle into a video clip. With the recangle selected click “Modify” -> “Convert To Symbol…” Use these settings for the new movie clip:

When done converting the rectangle into a movie clip make sure you set the “Instance Name” to “preloader“.

Double click the newly created movie to get inside the movie for us to set things up. When inside the movie create one new layer and name them (from top to bottom):

• preloaderbar
• loaderbackground

What we have to do now is to actually make our background transparent so it show our real background and it’s details.

Select the rectangle that we just created a movie clip out of (this time inside the movie). We are going to convert it into a “bitmap” so we can mess around with it’s properties a little. Click “Modify” -> “Convert To Symbol…” Use these settings for our “bitmap”:

Alright, now we have a “bitmap” to play around with and will be able to set a bunch of settings if we so wanted. However, there is only one setting we really need to mess around with this time. With the “bitmap” selected you will see a bunch of properties that we can set in the lower part of your screen.

It’s the “Color” setting we’re going to change and in this case the “Aplha” level. So, go ahead and click the roll down menu and choose “Alpha” and set the level to “0%”. As you can see now our background layer is transparent and out of the way. Great!

Time to create the actual loader in itself.

In our “prelaoderbar” layer let’s create what’s going to be our Pre-Loader indicator bar. Create another rectangle (pick the color you want) with the exact same size: Width: 250, Height: 12 and place it exactly where the first one was placed. Should look like this:

With that done we now have to create a movie clip out of this rectangle as well. So, go ahead and click “Modify” -> “Convert To Symbol…” and use the same settings we used last time we created our movie clip. Only this time use the title “Loader Bar Indicator“.

While having the newly created movie clip selected set the “Instance Name” to “preload_bar“.

When this is done, let’s make it a bit transparent to make sure we get that cool effect of being able to look through it to see the details on the background.

With the newly created movie clip selected go ahead and change the “Alpha” level again to 20%. This will make it transparent but still visible enough to be seen and show the loading progression.

You should now have something looking like this:

Step 6

Time to create the actual display. The pane where we are going to show our pictures. Start by creating a square box where you want your pictures to be shown in the “display” layer. My box measures: Width: 249, Height: 186. Align it to where you want it to be positioned. Here is where I positioned my picture window:

Alright, time to convert this box into a dynamic loader by converting it into a movie clip. As usual, convert it by clicking “Modify” -> “Convert To Symbol…” Again use the “Movie Clip” selection and set the name to “Slidehow Window“.

Now, set the “Instance Name” to “picture“. And after doing that, double click your movie clip and when you enter the inside of the movie clip, select that square you just created and delete it. There should only be an empty frame left in the layer bar. This will make the window non visible before there are any pictures in it. Later when we load the image it will be resizing itself.

In order for the pictures not to size up larger then the actual position where we want the picture to be show we are going to create a mask layer so that any excess will be cut off when this happens.

Now, with the “display” layer selected create another layer. Name the layer “masking“. In the masking layers first frame. Create another box exactly sized as the old one. Width:249, Height: 186.

After doing that, right click the “masking” layer and select “Mask“. You will now notice how your newly created box disappears. You have now created a masking for the picture. The picture will only be visible inside this box. Anything that goes outside the masking limits will become invisible. Everything will be kept nice and tidy.

Now we should be done setting up our picture pane and it’s time move on to the next step.

Step 7

In our Slideshow we would like to have some tags/info showing for each image so the viewer will know what he/she is looking at. This is easily created with a dynamic text field which we then can program to load text along with the image showing.

So, lets create a dynamic text field on our Slideshow. Pick the “Text” tool and create a text field where you want it positioned. My text field measured: Width: 244, Height: 98. It’s positioned here:

Now we need to set up our text field so that it will be dynamic and able to load text from an XML document. In the text fields “Properties” that you find in the lower part of your screen, add these settings:

• Change the Text Type to: Dynamic
• Instance Name: “desc_txt“
• Font: Arial Bold
• Font Size: 11
• Font Color: #777777
• Line Type: Multiline
• Align Text: Left
• Embed: Uppercase, Lowercase, Numerals, Punctuation, Basic Latin

Alright, our “tag line” text field is set up. We have another text field to set up as well. The text field that will display how many pictures there are in the Slideshow and what image we are currently displaying.

So, add another text field using these settings:

• Text Type: Dynamic
• Instance Name: “pos_txt“
• Font: Arial Bold
• Font Size: 12
• Font Color: #ffffff
• Line Type: Single Line
• Align: Center
• Embed: Uppercase, Lowercase, Numerals, Punctuation, Basic Latin

I have chosen white just because it’s the least probable color to cover the most part of the image you are going to show. But font color is entirely up to your taste so go ahead and change it if you feel you want another one to fit your website/blog theme.

Here is the finished positioning and layout of the text fields:

Now our text fields are set up and it’s time to move on to the next step yet again.

Step 8

Time to create the Slideshow Speed adjuster. We’re going to make a little drag box that will adjust the speed of the Slideshow and how often it changes images.

So, go ahead and create a rectangle over the loaderbar in the “speedcontrol” layer. Size it: Width: 250, Height: 12.

After doing that, we once again must create a movie clip out of our rectangle to make it interactive. Click “Modify” -> “Convert To Symbol…” Use the same settings as usual but name it “Speed Control“.

Set the “Instance Name” to “speedbar“.

Double click the newly created movie clip to get inside it. In there, create another movie clip out of the rectangle again. Same procedure but name it “Speed Bar Background“. Also set the “Instance Name” to “speedBG“.

With then newly created movie clip (“Speed Bar Background” selected. Set the “Alpha” level to 0% to make it transparent.

We now need to add our drag box. Import it by clicking “File” -> “Import” -> “Import To Stage…” to the same layer and frame as your newly created movie clip. Position it all the way right in the Speed Bar.

The “Drag Box” is now a “graphic” entity and we need to convert it into a movie clip also to be able to play around with it. Convert it using the same settings as usual but name it: “Dragger“. Also set the “Instance Name” to “dragger“.

With everything set up properly you should now have something looking like this:

Step 9

Alright, so all our interface functions is set up graphically. It’s time for us to add some interactivity to the things. Let’s add our buttons to the user interface.

As you can see our background is already showing our buttons. Well, this is no problem, just makes it easier for us to align and position our buttons. They will never be moved out of their position so the background is never going to be seen anyways.

Now, go ahead and add your buttons to the user Interface. Position them where they are supposed to be.

After you have positioned your buttons, go ahead and convert them to buttons. Do so by clicking “Modify” -> “Convert To Symbol…” name them “Prev Btn” and “Next Btn” and choose “Button“. Set their “Instance Name” to “previous_btn” and “next_btn“.

Now we have some working buttons as well. You can go ahead and add different stage images to the buttons if you like. It’s all up to you what you want your buttons to do when “Hovering”, “Clicked” and so on.

Step 10

Now we need to add some functionality to our User Interface. Time to for the core. The ActionScript that actually will make things move. Look at it as if we’re bringing life to our Slideshow with Actionscript.

delay = 10000;

Sets the speed of the Slideshow. The 10000 indicates the time between each image. This can later be adjusted by our Speed Control drag box.

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = “file not loaded!”;
}
}

Line 1 -Opens up a function that will load our XML file and store the contents.
Line 2 – Checks if any XML file has already been loaded.
Line 3 – Sets up our variable parent.
Line 4 – Creates the child variable “image” to xmlNode.
Line 5 – Creates the child variable “description” to xmlNode.
Line 6 – Creates a variable that will hold the number of total images.
Line 7 – Calculates the total number of images in the Slideshow.
Line 8 – Holds the current image that will be displayed. In this case the first one.
Line 9 – Holds the current description that will be displayed. In this case the first one.
Line 10 – Ends the calculation process.
Line 11 – Directs the Script to the “firstImage” function.
Line 12 – If no content is found, then this…
Line 13 – Content not loaded.
Line 14 – Ends the “else” process.
Line 15 – Ends the if loaded process.

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};

Line 16 – Creates a variable to hold the XML file content.
Line 17 – Ignore any line spacing that might occur in the file.
Line 18 – Sets up the load session.
Line 19 – Loads the XML file. (Here it is important to add the EXACT pathway to your xml file on the server. Meaning for example “http://www.sitename.com/slideshow/images.xml”)
Line 20 – Opens up button functionality. Listens for interactions.
Line 21 – Opens up a function that listens for Key strokes.
Line 22 – If “left” key is pressed.
Line 23 – Go to prevImage function and execute it.
Line 24 – If “right” key is pressed.
Line 25 – Go to nextImage function and execute it.
Line 26 – Close “if” process.
Line 27 – Close loadXML function.

previous_btn.onRelease = function() {
clearInterval(myInterval);
if (p == 0) {
lastImage()
} else {
prevImage();
}
};

Line 28 – Opens up “previous_btn” button onRelease function.
Line 29 – Resets the interval.
Line 30 – If we’re at the first image…
Line 31 – Load the last image in the list.
Line 32 – If not…then…
Line 33 – Go to the previous image in the list.
Line 34 – Close the else process.
Line 35 – Close the “previous_btn” onRelease function.

next_btn.onRelease = function() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
};

Line 36 – Opens up “next_btn” onRelease function.
Line 37 – Resets the interval.
Line 38 – If number is less or equal to the total amount of images.
Line 39 – Resets the P variable to zero.
Line 40 – Go to the firstImage function and execute it.
Line 41 – If not…then…
Line 42 – Go to the nextImage function and execute it.
Line 43 – Close the “else” process.
Line 44 – Close the “next_btn” onRelease function.

p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};

Line 45 – Resets the image counter to zero.
Line 46 – Opens up a onEnterFrame function.
Line 47 – Creates a variable (filesize) which will store the total amount of Bytes for an image.
Line 48 – Creates a variable (loaded) that will store the current amount of bytes loaded.
Line 49 – Make the “preloader” visible.
Line 50 – If the current amount of bytes loaded is equal to the total amount of bytes then…
Line 51 – Calculate the actual width of the loaderbar progress.
Line 52 – If not…then…
Line 53 – Make the “preloader” invisible.
Line 54 – If “picture”’s Alpha level is less then 100 then…
Line 55 – Add another 10 to the pictures Alpha level.
Line 56 – Close the “else” process.
Line 57 – Close the “if loaded” process.
Line 58 – Close the onEnterFrame function.

function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
};

Line 59 – Opens up nextImage function.
Line 60 – If we haven’t yet come to the end of the list of images.
Line 61 – Add one to the image counter.
Line 62 – If the loaded amount of bytes is the same as the total amount of bytes then…
Line 63 – Set pictures “Alpha” level to 0.
Line 64 – Load the current numbered image.
Line 65 – Add the text content in the XML file to the “desc_txt” label.
Line 66 – Go to then “picture_num” function.
Line 67 – Go to the “slideshow” function.
Line 68 – Close the “if loaded” process.
Line 69 – Close the “if total” process.
Line 70 – Close the “nextImage” function.

function prevImage() {
if (p>0){
p–;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
};

Line 71 – Opens up “prevImage” function.
Line 72 – If Image is not the first then…
Line 73 – Subtract one from the counter.
Line 74 – Set the pictures “Alpha” level to 0.
Line 75 – Load the current numbered movie.
Line 76 – Put the current numbered text into the “desc_txt” label.
Line 77 – Go to the “picture_num” function.
Line 78 – Go to the “slideshow” function.

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
}
};

Line 79 – Opens up the “firstImage” function.
Line 80 – If the amount of bytes loaded is equal to the total amount of bytes then…
Line 81 – Set the image “Alpha” level to zero.
Line 82 – Load the current numbered image.
Line 83 – Put the current numbered text into the “sesc_txt” label.
Line 84 – Go to the “picture_num” function.
Line 85 – Go to the “slideshow” function.
Line 86 – Close the “if loaded” function.
Line 87 – Close the “firstImage” function.

function lastImage() {
picture._alpha = 0;
picture.loadMovie(image[total-1], 1);
desc_txt.text = description[total-1];
current_pos = total;
pos_txt.text = current_pos+” / “+total;
p = total-1;
slideshow();
};

Line 88 – Opens up the “lastImage” function.
Line 89 – Set the image “Alpha” level to zero.
Line 90 – Load the current numbered image.
Line 91 – Put the current numbered text into the “desc_txt” label.
Line 92 – Put the current position in the slideshow count into the “current_pos” variable.
Line 93 – Put the current position and the total number of images into the “pos_txt” label.
Line 94 – Subtract one from the current position.
Line 95 – Go to the “slideshow” function.
Line 96 – Close the “lastImage” function.

function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+” / “+total;
};

Line 97 – Opens up the “picture_num” function.
Line 98 – Adds the current position+1 to the “current_pos” variable.
Line 99 – Puts the current position and the total amount of images in the “pos_txt” label.
Line 100 – Close the “picture_num” function.

function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}

Line 101 – Open up the “slideshow” function.
Line 102 – Pause the Slideshow with the amount given in “delay” variable.
Line 103 – Opens up the “pause_slideshow” function.
Line 104 – Resets the interval variabel.
Line 105 – If we have reached to the end of the list of images then…
Line 106 – Reset the position counter to zero (start).
Line 107 – Go to the “firstImage” function and execute it.
Line 108 – If not…then…
Line 109 – Go to the “nextImage” function and execute it.
Line 110 – Close the “else” process.
Line 111 – Close the “if” process.
Line 112 – Close the “slideshow” function.

this.speedbar.dragger.onPress = function() {
startDrag(this, true, 1, this._y, this._parent.speedBG._width-20, this._y);
this.onEnterFrame = function() {
delay = (10000/100)*((this._x/(this._parent.speedBG._width-20))*100);
if (delay < 1000) { delay = 1000;}
};
};

Line 113 – Opens up the “dragger” onPress function.
Line 114 – If “dragger” is draged the result is adjusted here.
Line 115 – Open up the “dragger” onEnterFrame function.
Line 116 – Calculates the amount of “pause” the Slideshow should have in between each image.
Line 117 – If delay dragger amount is less then 1000 then the “pause” stays at 1000 (1 sec).
Line 118 – Close the “dragger” onEnterFrame function.
Line 119 – Close the “dragger” onPress function.

this.speedbar.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};

Line 120 – Opens up the “dragger” onRelease function.
Line 121 – Deletes the onEnterFrame tag validator.
Line 122 – Indicates the user stopped dragging.
Line 123 – Close the “dragger” onRelease function.

this.speedbar.dragger.onReleaseOutside = function() {
stopDrag();
};

Line 124 – Opens up the “dragger” onReleaseOutside function.
Line 125 – Indicates the user stopped dragging.
Line 126 – Close the “dragger” onReleaseOutside function.

Well, that was all as far as ActionScripting. Not too much was it. Well, I can admit it was a bit much but it’s usually repetitive stuff and besides. Repetition is great for learning. Now when I have explained the whole script and all is set up it’s time to save our project and start with the content of the actual Slideshow.

But first, here is the entire ActionScript for an easy copy and paste solution.

Finished Code

delay = 10000;

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = “file not loaded!”;
};
};

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
};
};

previous_btn.onRelease = function() {
clearInterval(myInterval);
if (p == 0) {
lastImage()
} else {
prevImage();
};
};

next_btn.onRelease = function() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
};
};

p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
};
};
};

function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
};
};
};

function prevImage() {
if (p>0){
p–;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
};
};

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
};
};

function lastImage() {
picture._alpha = 0;
picture.loadMovie(image[total-1], 1);
desc_txt.text = description[total-1];
current_pos = total;
pos_txt.text = current_pos+” / “+total;
p = total-1;
slideshow();
};

function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+” / “+total;
};

function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
};
};
};

this.speedbar.dragger.onPress = function() {
startDrag(this, true, 1, this._y, this._parent.speedBG._width-20, this._y);
this.onEnterFrame = function() {
delay = (10000/100)*((this._x/(this._parent.speedBG._width-20))*100);
if (delay < 1000) { delay = 1000;}
};
};

this.speedbar.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};

this.speedbar.dragger.onReleaseOutside = function() {
stopDrag();
};

Step 11

With all that code created and our Slideshow Player all setup we are now ready to create the image list with the including tag lines. This is the part that is fun as you can just go ahead and add as many images as you want. The player will keep track of everything for you when you enter everything accordingly.

So, open your favorite word processor (I use Notes on Windows) and type this.

<?xml version=”1.0″ encoding=”utf-8″ standalone=”yes”?>
<images>
<pic>
<image>/Images/Image – 1.gif</image>
<caption>Me at the amusementpark with my daughter.</caption>
</pic>
<pic>
<image>/Images/Image – 2.gif</image>
<caption>My daughter and me on our way to Los Angeles.</caption>
</pic>
<pic>
<image>/Images/Image – 3.gif</image>
<caption>On our way to Santa Monica beach.</caption>
</pic>
</images>

Line 1 – Tells the computer that this is an XML document and should be executed as such.

Line 2 – Tells our Slideshow Player that our image list starts here.

Line 3 – Tells our Slideshow Player that this is an image.

Line 4 – Tells our Slideshow Player that this is the tag line to the above image.

Line 5 – Tells our Slideshow Player this is the end of information for our image.

Line 6 to Line 14 – Repeating the above steps.

Line 15 – Tells our Slideshow Player that this is the end of the image list.

As you can see, our image list is really simple and powerful. You can actually go ahead and more information tags to the Player with a little bit of easy coding. The mind is the limit.

When you create your XML document you will only change the “blue” text to what and where your images are located. I am using a folder where the Slideshow Player is located that holds my images for better and cleaner server structure. If you want to add more images, just upload them to the “Images” folder (in my case) and add new picture tags to the XML document and you’re good to go. It’s as easy as that.

Now when our XML Slideshow Image list is all completed, go ahead and save it in the same directory as your Slideshow Player and name the file “images.xml”.

Don’t forget to put your images in a folder located in the same directory as you Slideshow Player to. All this will be uploaded to our server after we have saved our project and published it. Which we’re going to do in the next step.

Step 12

Alright, time to save our Flash project and publish it. Click “File” -> “Save As…” and name your project “Slideshow Player“.

When we’re done doing this. Let’s hook up the “Publish Settings”. Open your publish settings by either “File” -> “Publish Settings…” or press “Ctrl+Shift+F12“.

What we need to do is to make sure we maintain the very best quality in our JPEG images when loading them dynamically into our Slideshow Player. So, in the “Flash” tab set the “JPEG Quality” to 100%.

Now click the “HTML” tab and change the “Quality” to “Best“.

That should be about  it for our publish settings. Now press “OK“.

To “Publish” our flash movie application either click “File” -> “Publish” or press “Shift+F12“.

We have now hopefully successfully published our finished Slideshow Player and are ready to implement it on our website or blog.

Step 13

To upload everything and to add it to your website or blog there are just a few more steps until it’s all done. Use your favorite FTP client and upload everything to your server. Make sure you remember the file path for your Slideshow Player.

After doing this you can incorporate your Flash Slideshow Player by adding this anywhere in your website or blog.

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”263″ height=”356″ id=”Slideshow Player” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”allowFullScreen” value=”false” />
<param name=”movie” value=”/Slideshow App/Slideshow Player.swf” />
<param name=”quality” value=”best” />
<param name=”bgcolor” value=”#ffffff” />
<embed src=”/Slideshow App/Slideshow Player.swf” quality=”best” bgcolor=”#ffffff” width=”263″ height=”356″ name=”Slideshow Player” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

This script adds your flash application to your site. As you can see, I decided to put my Slideshow Player Application in a folder…and that’s really all there is to it. Underneath here you can find an example of the finished Slideshow Player Application.

Finished Example

Round Up

As you can see I switched some colors to make it work better with the example images. Also, go ahead and change what you feel fits better for your images and site or blog. It’s entirely up to you.

Well, that just about sums it all up. We now have a working slideshow application and we can now go ahead and just show our visitors our images with complimentary captions.

I have really enjoyed making this tutorial and I hope you have enjoyed trying it out as well. When it comes to coding it usually is a lot easier than it actually looks at the beginning. Code is never complex unless the viewer is looking at it with fatigued eyes.

Don’t forget that there are plenty of other tutorials on this site that will enhance the feel of your website for your every visitor. Everything from Count-Up’s and Live Visitor Counter’s to Expansive XML Music Player’s.

If you have any additional question please don’t hesitate to ask. I am now taking a short coffee break before I start on my next tutorial.

Also, don’t forget to subscribe to the RSS Feed. You can subscribe to it right here: Minervity RSS Feed

Thank You!

Popularity: 26% [?]