Document Actions

Converting Keynote to HTML Slideshows

Keynote is great, but there are some things it just doesn't do that well. One of these is converting presentations to a handy format for viewing over the web. This is particularly true if you have embedded animations into your presentation. With a little hand-tweaking, you can get to web slideshows that look like this if you're willing to muck around in the HTML/javascript code. The instructions below should be fairly straightforward to anyone who is familiar with basic coding and is willing to spend 20 minutes (40 minutes with movies) converting their presentation. Note these instructions have been tested with Keynote'08.

Step 1: Exporting Keynote to HTML

If you tend to use a lot of animations (including both embedded movies and keynote animations), I recommend saving a copy of your presentation that you edit to make maximally export-friendly.

Remove any gratuitous keynote animations and slide transitions. These will end up as separate "pages" on the HTML, and will probably just annoy users. Simplify to make each slide appear in as few steps as possible. The later steps where you can add in navigation and links to animations will be much simpler if there are no animation steps at all, and each of your keynote slides maps directly to one HTML "page".
If you have embedded movies, these will not appear as embedded in the resultant HTML page. You can't have everything, accept this and move on. We will link to the movie files later. For now, put a message over each animation indicating that they should click on this icon to see the movie. For example, your slide might look like this:

Now you're ready to export your presentation. Choose File -> Export... -> HTML. Include navigation controls and save as PNG. If you kept in some keynote animations that you want in your webpage, select "Create an image for each stage of builds". Give your presentation a useful name, and export it.
Review the resulting HTML. This will not include any embedded animations or indexing, which we will do by hand in the steps below. Just check it for basic content and any conversion problems.
Some slideshows use particularly large format slides, which can cause the navigation tools to appear off-screen. The easiest way to deal with this is to re-scale each slide afterward. I use the "mogrify" command-line tool to do this. For example,

  karla@jalapeno > cd MySlides.html_files
  karla@jalapeno > F=`ls MySlides*.png`
  karla@jalapeno > for f in $F ; do mogrify -scale 80x80% $f ; done

Step 2: Adding indexing to your slideshow

One inconvenience with the way Keynote exports presentations is that there is no mechanism for navigating the slideshow except one slide at a time. This is particularly inconvenient for large presentations, which one might like to divide into logical subtopics or chapters. The instructions below describe how to add links to useful locations in the slideshow.

Open up the HTML document created by Keynote in your favorite editor (preferably not Word).

The first thing you will notice is a long line beginning <meta...>. Delete this. It is not necessary and it is a bit annoying during editing.
After this is a section begining <script...>. This section is Javascript code which dynamically switches between the images corresponding to each slide image. We will edit this later.
After the <script...> line are a series of lines: images[0] = "test_files/test.001.png", which refer to the images containing each slide.

Go to the end of the document where the actual HTML begins with <body...>. Keynote sets the background color ('bgcolor' usually set to "black"), but not the text color ('text') or the link color (good to set to the background color in this case). Set these colors, for example:
```
  <body bgcolor="black" text="white" link="black" onload='WindowLoaded(event);'>
```
Below the <body...> line, you'll see three lines beginning with <input...>. These set up the navigation buttons (forward, back and home). After these lines (but before the </p> line), we can add in our indexing. Insert code like the following:
```
  
  <br id="menu"/> <br/>
  <b> Jump to:
  <a onclick="GoTo(1)">First Sub-topic</a> | 
  <a onclick="GoTo(22)">Second Sub-topic</a> | 
  <a onclick="GoTo(36)">Third Sub-topic</a> 
  </b>
  
```
where you'll want to replace the number in the GoTo statements with the slide numbers to jump to, and the "First Sub-topic..." with your sub-heading names.
Now view your modified HTML page in a web browser. The bottom of your slide should now contain your sub-topic headings under the navigation buttons (see example below). By clicking on the text for each subsection, you should jump to the slide number indicated (note that you often have to fiddle with the slide numbers since the numbers may not exactly match the slide numbers in your Keynote presentation).

Step 3: Linking to animations

Okay, now for the fun part! If you went to the trouble to make animations, you might as well include them in a nice format. The instructions below describe how to edit the Javascript to enable the viewer to launch the animation in a separate (pop-up) window.

The first thing you'll want to do is to copy your movie files to the directory containing the exported files (for example, if you exported to a file called "test.html", there should also be a directory called "test_files/").
Now, you'll want get an extra button for users to press when movies pop up. I've created similar-looking buttons to the default by Keynote, which include a cute little movie button. Unzip this file to the same directory you just copied the movies to (i.e., "test_files/").
Now we need to make two significant edits to the Javascript file. First, we need to move the Javascript code from the header section (i.e., between the <head> and </head> HTML tags) to lie in the body section (i.e., between the <body> and </body> tags). Specifically, we want the Javascript at the end of the body section, just before the </body> tag. So cut everything from <script...> to </script> and paste it just before the </body> tag. If you want, check the HTML file in your browser to make sure it still works the same.

Now we'll add in some code to create links to movie files and create a pop-up window when we want one. After the section where the images[] array is filled in, add the following code (you'll need to change "test_files" to the appropriate directory name):

   // KM: insert following after array images[] is initialized
   var linked=0;
   var movieicon=document.createElement('img');
   movieicon.src='test_files/movie.png';
   var movielink=document.createElement('a');
   movielink.id='movielink';
   var menu = document.getElementById('menu');
   menu.parentNode.insertBefore(movielink,menu);
   function ShowMov()
   {
       window.open(movies[index],'','height=500,width=500,resizable=1');
   }
   // KM: end add

Next, in the definition of the GoTo(...) function, add the following code immediately after the line "document.Slideshow.src = images[index];", add the (exact) code:

   // KM: begin insert
   if (mklink[index] == 1) {
      movielink.setAttribute('onclick',"return ShowMov()");
      if (linked == 0) {
          movielink.appendChild(movieicon);
       }
       linked=1;
   } else {
       if (linked == 1) {
           movielink.removeChild(movieicon);
           movielink.removeAttribute('onclick');
        }
        linked=0;
   }
   // KM: end insert

Finally, we're ready to link in our movie files. We'll do this by creating arrays in a similar format to the images[] array.
```
  // KM: link in arrays to movie files
  var movies = new Array (90);
  var mklink = new Array (90);
  mklink[1] = 1; movies[1] = "test_files/anim_GRE_nodiff.gif";
  mklink[15] = 1; movies[15] = "test_files/anim_GRE_diff.gif";
  // KM: end add
```
You should set the array sizes to be the same as the image array (here, 90). You need to initialize the array elements that correspond to the slides with animations (here, the second and sixteenth slides, corresponding to indices 1 and 15). In each case, set the mklink[] array element to 1 and the movies[] array element to have the appropriate movie filename.
And that's it! Load up your modified HTML file in your web browser. Navigate to one of the slides that contains a movie, you should see the movie link appear, as shown below. Clicking on the movie link should launch a separate window containing your movie.

Personal tools

Document Actions

Converting Keynote to HTML Slideshows