Putting Kid Pix SlideShows on the Web

Presented at the Annual Meeting of the Maryland Instructional Computer Coordinator's Association (MICCA), Baltimore Convention Center, March 26 and 27, 1998.

Tom O'Haver, University of Maryland, College Park (to2@umail.umd.edu), and
Mary O'Haver, Fairland Elementary School, Montgomery County (mohaver@umd5.umd.edu)

This document shows how to convert a KidPix SlideShow created on a Macintosh into HTML format for publication on the Web. Using this method, each slide is shown full-size on a separate page, along with navigation buttons for moving between the slides and a sound button for playing the accompanying recorded sound. Example of a slide show converted using this method. No Knowledge of HTML is required.

Brief Overview of the process

A KidPix slide show consists of a group of KidPix graphic files (in PICT format), plus a "SlideShow" file that controls the order in which the slides are shown and the transitions between them. (We will use only the graphic files and their attached sounds, not the SlideShow file).

The procedure involves four steps:

Graphic Converter

2. Use the free program SoundApp to Convert all the sounds attached to the KidPix graphic files into ".au" audio files called slide1.au, slide2,au, etc., in the order that they are to appear in the slide show.

3. Place all the converted GIF and au files into a folder along with a set of pre-made HTML template files.

4. Customize the template's generic title page.

Why not simply save the SlideShow as a Quicktime movie? That would be a simpler procedure, but we have found that the Quicktime format can not always be played back, with the sounds intact, on all platforms (PC as well as Macintosh) on all Web browsers (Microsoft Internet Explorer as well as Netscape). This seems to depend on which version of Quicktime is installed. Other disadvantages of the Quicktime method are the relatively small window size and the long time delay required to download the Quicktime file before the slideshow starts. The procedure described here has been tested and has been found to play back reliably on Netscape 3.0 and Internet Explorer 3.0 on both platforms. It shows the slides full-size, includes the recorded sounds, and does not involve a long initial delay, because each slide and sound is downloaded individually as the show is played. A review of other methods for converting KidPix slideshows has been published by Montgomery County.

Detailed Step-by-Step Instructions

So your kids have made a Slide Show on Kid Pix on their Macs at school and you want to put it on the web? What follows is one way we found to have your full sized picture, with its associated sound, on the web so that it can be viewed by either Macintosh or Windows machines. Any additions or corrections would be greatly appreciated since this is a working document with changes being made as we learn new things.

Steps I took to make a Kid Pix set of pictures ready for the web:

Step 1:
Have a folder that contains all the pictures you want to include on your web pages.

Step 2:
I personally like to open up the folder and view the pictures by name, then I print (on the mac) using Print window under the File menu. That will give me a list of all my pictures. I will need this later because it helps me keep track of what I name each picture after I have seperated the pictures and sounds for web use. This is an example of what you can get. Number your pictures starting with one, in the order you want your pictures to appear in the Web Slide Show.

Step 3:
Now you are ready to seperate the pictures and sound from your student's Kid Pix pictures. I like to extract the pictures first.

Step 4:
Open up Graphic Converter (I was using V2.8 but all versions work with small changes in the menus).

Step 5:
With GraphicConverter open, Select Open from the File menu and navigate to your pictures.

Step 6:
When the picture opens up, go to Save As... under the File menu and navigate to your folder that has all your pictures you want to convert. Be sure to select GIF as your format preference. You select that by clicking on Format and choosing GIF from the pop-up menu. Name the first picture slide1 (the .GIF is automatically in the Save picture as: field. Follow these same steps (5 and 6) until you have all your pictures converted and saved. When you are finished you should have a series of files labled: slide1.GIF, slide2.GIF, slide3.GIF and so on. Note: do NOT put spaces in any of these file names.

Capturing the sounds from your Kid Pix pictures

Step 1:

This is the icon for the SoundApp Fat 2.4.1 program.

When you launch the program you will have this control panel appear. Just close it if it bothers you because you will not be using it.

Step 2:
As with the pictures, you will convert the sounds in the order they will appear in your Web Slide Show.

Step 3:
You will need to set up some preferences and change some settings in the program to save the sound in a form that will be read on the web by both Macs and PCs. First, set these preferences after you select the Preference menu. Highlight "General" and X the boxes marked below.

Again, under preferences, highlight "Convert" and make sure your window looks like the one below.

Step 4:
Now you have to adjust the settings to save your sound in the proper format. Go the the File menu and select Convert. Then select the following setting under each selection.

That completes the set-up of the SoundApp Program. These settings are automatically saved; you should not have to repeat the above steps the next time you use the program.

Directions for extracting your sound from a Kid Pix picture.

Step 1:

If you have made all the necessary changes to the SoundApp Fat 2.4.1 program then go to the File menu and choose Convert. Navigate to the first Kid Pix picture (your original Kid Pix pictures) you are going to have in your slide show. Remember to select your pictures in the same order as you will have them appear in your Web Slide Show.

Step 2:
When you choose "Convert" navigate to your folder that has your original picutres and choose your first picture. Your SoundApp program will appear with all previously set preferences. Do not change any of them since you have already set them.

Step 3:

Click on the Open button or double click on the first picture you are going to use. You will be given a chance to save your sound. You should already be in the right folder to save your sound but if not, navigate to the folder you have been saving all your other converted pictures. Save your sound as slide1.au

Continue extracting all your sounds from your original pictures in order and save them in order - slide1.au, slide2.au, slide3.au, slide4.au, slide5.au, and so on. (Note: do NOT put spaces in any of these file names.) You should now have all your original Kid Pix pictures, all your converted Kid Pix pictures (all the files with a.GIF at the end) and all your extracted sounds (all the files with the .au at the end).

Assembling the Web Slide Show.

Step 1:
Click here to download the template to your Macintosh. It will download a folder named "Web slide show template". You will want to make a copy of it (using the Finder's Duplicate command in the File menu) so that you can always keep one copy available to create other slide shows. Note: Depending on how your Web client is set up, you may need to convert the downloaded file with StuffitExpander from Aladdin Systems.

Step 2:
Give this copy of the template a new name to reflect your current project. I will call my new copy "test slide show". At this point it contains all the html pages, and graphics necessary to display and hear your pictures and sounds but it DOES NOT contain your own pictures and sounds.

This screen shot shows what an empty template for ten slides would look like. It only contains data to display the web site. No personal pictures or sounds are included.

Step 3:
You will need to drag a copy of all your pictures and sounds you extracted from the original Kid Pix picutres into the folder that contains the template data.

This screen shot shows your personal files of pictures and sounds you extracted from the original Kid Pix pictures.

You will now have a folder with quite a number of files.

This screen shows your folder with all the template information PLUS your own extracted pictures and sounds.

Step 4:
Your "Web Slide Show" should be ready for viewing now. Open up your web browser (Netscape or Explorer, etc.), pull down the File menu and select Open File. Then navigate to your folder that has your web site and select index.html

This screen shows the menu for Netscape.

Your title page should show up. (You will notice your title page will have some very generic information on it. You can add information to personalize this. Instructions for this will be given later under "Personalizing your Web Slide Show". For now, just click on "Start the Show" and proceed through the slide show to see if all your pictures appear. If they do not, double check the file names of the pictures to be sure you named them correctly, (slide1.GIF, slide2.GIF etc.).

Personalizing Your Web Slide Show:

Step 1: (Personalizing Your Title Page)
You will need to open up your index.html (located in you folder that contains all your web data) in a text editor such as Simple Text. (Any text editor will do). You are just going to write your own information onto this html page. When you open up index.html in the text editor you will see a bunch of text in brackets (< and >). Leave that stuff alone. You will just edit this file to change the following items only:

2. Where it says "URL to your home page", change the text in the quotes to the URL of your school home page, leaving the quotes in place.

3. Where it says "Name of Project", change this to the name you want to give to this slide show (may be the same as in #1).

4. Where it says "Date", change this to the current date.

5. Where it says "Name of Contact Person", change this to your name.

6. Where it says "Text for introduction goes here", replace that text with a paragraph describing your slide show.

Finally, Save the index.html file, then Open it from within your Web browser using the Open File command. Check and correct as required.

Step 2: Changing the number of pictures in the Web Slide Show
You will notice that the Web Slide Show template has room for 34 pictures and sounds but that can be changed if you have more or less pictures.

If you need more than 34 slides , you can easily create additional ones. Here's how. Open the last slide file (slide34.html) in your text editor. Increase each of the numbers in the this file by one - that is, change each 34 to 35, 33 to 34, and 36 to 37. Then save the file as slide35.html. Repeat this process for as many additional slides as you need.

If you need fewer than slides 34, you can leave the unused slide files in place (they do no harm) or you can delete (trash) the unused files. It is simpler just to leave the unused slides files in place - that way, if you need to add some slides in the future, the slide files will already be there.

There is one more modification you may wish to make, but it is not essential. If you are sure you will not be adding more slides to your show, you can remove the "next" button from the last slide (i.e. the right-hand arrow that you click to go to the next slide). To do this, open the last slide file in your text editor, delete the entire line that contains "<img src="bf.gif" alt="next">", and Save.

As you become more comfortable with the HTML symbols, feel free to make changes that individualize your web site. For more information on HTML, you can go to a tutorial on HTML. Feel free to print out the tutorial and experiment with this new language.

You are now ready to upload your web site to your server. You will have to check with your school system or web service provided to get directions on how to do this since each web server has their own protocol.

Last update: March, 1998.