PI8 Slide Show Web Page

You probably already know that you can create slide shows from templates in the EasyPalette. In this tutorial, I'll show you how to use a web page of your own design to make a slide show appear within the confines of a particular object.

seen in browser

If you're using IE, you can view the slide show here. Due to the way in which different browsers interpret java script, the slide show will not display properly in Netscape.

You can get my sea creatures slide show template here to follow along. Or you can build a web page in PI8 using your own objects and use the Slice tool to slice it so that one of the objects will be used to display the slide show.

Open up seaslideshow.ufo in the work space. To replace the default HTML text, right click on it and select Edit HTML Text. When the HTML Text Box opens, select the default text and replace it with your own. Create hyperlinks as needed by selecting text and clicking the Hyperlink button to enter URL's for links. Keep the HTML Text object brief, so it will fit on the page.

replace default text

If you wish to do so, you can select and format the font, font color and size in the Text Entry Box. However, if you're interested in learning how to use CSS to control font and link attributes, you can take care of that later with my Web Page With CSS tutorial. If you plan to use a style sheet, just type in HTML text using the default attributes.

Use the Transform tool to resize the HTML Text bounding box, if necessary. Select and edit the copyright statement HTML Text object at the bottom of the page. Use the Pick tool to move objects, or to select them and replace them with your own objects.

Important: Try to get your layout just the way you want it before proceeding any further. If you move any objects or change the layout in some way, including adding more HTML text, after creating the slide show, you will be very unhappy. You will have to erase all the slice lines, reslice and create your slide show all over again. So try to get the layout right the first time and don't move anything, even by a pixel.

Now would be a good time to choose Web, Web Properties to assign important web page information to the slide show page. If you're not sure how to do this, check out my PI8 Basic on HTML Web Page Properties.

Before you can create the slide show, you must slice the web page. Choose the Slice tool from the Tool Panel. In the Attributes toolbar, select Auto Slice (circled). The web page will be sliced up automatically. Note that there is no slice around the white rectangular object which will display the slide show.

auto slice

For the next step, hit Ctrl+1 to Zoom in to actual size. Make sure you can see the entire white rectangle object. In the Attributes toolbar, click the Method down arrow and select Rectangle (circled above). Your task is to select only the white part of the rectangle, excluding the black part around its edges. The black part will serve as a frame for the photos displayed in the slide show.

make rectangle slice

While the Slice tool is still selected, choose the Pick tool in the Attributes toolbar (this is not the regular Pick tool, it is the Pick that is available only when the Slice tool is chosen). Click on the rectangle slice to make it active. If the Slice Panel is not open, click Panel in the Attributes toolbar to open it. Select "Triggered by cell" and click the + sign to "Add Script Effect." Select "Slide Show."

create slide show

Doing so will open the Slide Show dialog box. From the Images tab, click the + sign to access the Open dialog box.

add photos

Browse to the images you wish to use in the slide and select them. Once they appear in the Images tab preview window, you can drag them around to re-order them. Select a thumbnail to delete it, rotate it, add a linking URL, Alt text and brief description as desired. The description will only show up if you've designated another slice to show this text later on in the Layout tab.

edit images

Click the Layout tab next. There isn't much to see there. The white rectangle is selected for the slide show display region.

display region

However, if you click on other slices, the contents of the Layout tab will change to allow you to assign various slide show properties to them, such as going forward, backward, stop, pause, etc. For example, if I'd placed some PLAY text on the fish in the upper right corner, I might want to select this slice and then assign the "Play" function to it in the Layout tab.

This process can get very complicated, so I'm not going to do it. I'm just going to create a slide show that starts automatically and repeats itself. But if you're feeling adventurous, it could be a true learning experience to assign behaviors to other slices.

Click the Options tab to select "Global settings," "Mouse Click Actions" and "Thumbnail images" settings. I've selected "Pause on mouseover" and "Auto Start," and left the default "Duration" at 5 seconds. There are some interesting "Mouse Click Actions" choices which tell the slide show what to do when an image is clicked. I've selected "Popup Window." This will open up the full size image in a separate browser window. It's a nice way for folks to see a larger version of the thumbnails that appear in the display region.

In the "Thumbnail images" section above, I've left the default of "Resample images" selected and also selected "Protected images from save as to local host." The latter option keeps people from right-clicking and saving the thumbnail images to their hard drive. However, it will not stop right-clicking from a popup window image. So keep that in mind if you use the Popup Window option. For "Image compressing settings," I've selected my own favorite Image Optimizer preset.

Now that all of the slide show settings have been established, click OK to close the Slide Show dialog box. Choose File, Preview in Browser to preview the slide show and make sure it displays correctly. If you've selected the same options I have, make sure that the slide show pauses on mouseover, and that the Popup windows work.

If there's any problems with the slide show display, go back to the Slice tool to edit. Use the Pick to select the white rectangle slice. In the Slice Panel, click the Script Effects tab. Click on the + sign next to "Triggered by cell" to expand the behaviors. Select "Slide Show" and click the "Modify Script Effect" button (circled).

modify slide show

When the Slide Show dialog box opens again, make any desired changes. Preview again and make sure that it works OK.

To save the slide show, choose File, Save for Web, As HTML. When the Save As dialog box opens, save to a folder on your hard drive. You should be aware that the slide show will create a lot of files, including java script files. All of these files will be saved to folders created especially for them. If you look at the folder to which you've saved the slide show, you'll see these files and folders.

folders for slide show

In addition to the HTML page, an "images" subfolder has been created. All of the images for the slide show are saved to this folder. The "js" folder is deceptively simple looking. Double click on it and you'll see this inside of it.

inside js folder

Double click on the "lib" file and you'll find two more folders, "dynapi" and "YoYo."

inside lib folder

Double click on either of these two folders and you'll find even more folders, all of which contain files. All of these folders and files have to be uploaded to your server. You have to create folders on your server that are named exactly as they are named on your hard drive. This means case-specific file folders. If you make a folder named "yoyo" instead of "YoYo," your slide show will not work. So take your time when you FTP files for this slide show to your server. Create the folders (directories) on the server, then upload all relevant files into the correct folders.

You can view my slide show here. Note that the slide show I created has a hover effect on link mouseovers, and that the HTML text is not in the default of Times New Roman. That's because I used a style sheet to change the font to Trebuchet MS and edit the link colors and effects. If you're interested in learning how to use CSS to change font, font size and color and link color and behavior, check out this tutorial.

This tutorial uploaded 6/27/03

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage