keynote to web-presentation

Question

keynote to web-presentation

After a tip I found on a blog, I converted my iWeb-portfolio-site to an interactive Keynote presentation.

I exported the file to html, but on opening the site in Safari, some strange things happen (at least things I do not want to happen).

1.

I get a controller on the bottom of the screen which appears every time I move the mouse; I can't find a way to avoid that.

2.

I want to start with a start-up screen with just my name and some image; after clicking I let the name (with a Keynote action) move to the upper left corner of the screen and let the rest of the navigation come in (with a Keynote fade-action).

This all works fine in Keynote, but somehow there is a problem in Safari; the actions only work when set to automatic, not when set on "after mouseclick".

But I would like the visitor to be in control.

Putting an identical page in front of it all which (after a mouseclick) fades to the page where actions start automaticaly doesn't work either. After fading to the second page, the actions simply don't start.

3.

Is there a way to make the background of the browser-window (that is the area outside the 1280x720 px area of the webpage itself) white instead of black ?

4.

Does someone know of a tutorial that deals with this subject

iMac 27, Mac OS X (10.6.8), 8 Gb RAM - 1,5 Tb harddisk

Posted on Apr 2, 2012 1:08 PM

Reply

Answer 1

Roddy

Level 6

17,265 points

Apr 2, 2012 10:18 PM in response to Gerrit Velthuis

Keynote export to HTML is just a slideshow (all be it a fairly complicated one) so that the user can click through them. The control bar appears to give the clueless a clue in case they don't realise they can click the images.

The background color needs to be changed in both of these files...

index.html

KeynoteDHTMLPlayer.html

This latter file is found in the assets/player folder. Open them in an app like TextEdit and change this line...

<bodybgcolor="black" onload="detectBrowser()">

to this...

<bodybgcolor="#fff" onload="detectBrowser()">

... or this...

<bodybgcolor="white" onload="detectBrowser()">

Reply

Answer 2

Apr 3, 2012 12:55 AM in response to Roddy

Thanks Roddy,

One of the problems solved; I had found one spot to change the bkgnd color, didn't know about the other.

Of course I know the html export is meant for bringing presentations to web-like situations and the easiest way to do that is an interactive slideshow, but . . . .Keynote is far more sophisticated and can be used to construct a pretty complicated hyper-environments that can be controlled like a normal website.

In fact, most of the more simple websites are merely slideshows and they don't need a controller bar either.

So, I know why it is there, but (sometimes) it's not needed and I don't want it; question is, is there a way to get rid of it.

And than there is still the second problem, the one with the non-functioning actions.

Reply

Answer 3

Roddy

Level 6

17,265 points

Apr 3, 2012 8:53 AM in response to Gerrit Velthuis

The quick and dirty way to get rid of the controls would be to hide it using CSS by adding an inline style to the control bar div in the KeynoteDHTMLPlayer.html...

<divid="hud"style="visibility:hidden">

Reply

Answer 4

Apr 4, 2012 2:16 AM in response to Roddy

Great Roddy, that one was very helpfull too.

Maybe you could do some thinking about the action-problem or point me in some direction ?

Reply

Answer 5

Jan 22, 2013 1:55 PM in response to Roddy

Hi Roddy. I just tried this and it worked . . . as long as I previewed the exported HTML in Safari. The control bar would always show in Google Chrome and IE. Any suggestions?

Thanks.

Reply

Answer 6

Roddy

Level 6

17,265 points

Jan 23, 2013 12:58 PM in response to Rexrothbeat

In CSS "visibility:hidden" hides an object but it still takes up space. Using "display:none" will hide the object and it will not take up space. Try using them both.

I don't know about IE (which version?) but this should get rid of it in Chrome...

<divid="hud"style="display:none;visibility:hidden">

Reply

Answer 7

Jan 23, 2013 2:19 PM in response to Roddy

It doesn't seem to be working, even for Chrome, Roddy. Did I put the div id in the right spot (see Line 62)?

Reply

Answer 8

Roddy

Level 6

17,265 points

Jan 23, 2013 4:25 PM in response to Rexrothbeat

You've put it the correct place.

Chrome is no use for testing local files. You need to upload them to the server or see the bottom of this page under "Testing Your Website" for how to overcome the disappearance of Web Sharing when using Mountain Lion...

http://www.iwebformusicians.com/iWeb/mountain-lion.html

Reply

Answer 9

Roddy

Level 6

17,265 points

Jan 23, 2013 4:57 PM in response to Rexrothbeat

I just remembered that I had a page with the old style Keynote slideshow...

http://www.iwebformusicians.com/Banner-Slideshow/HTML-Slideshow.html

Here's a standalone demo with the navigation buttons removed...

http://www.ezmacwebdesign.com/Demo/HTML-Show.html

This should work OK in all browsers.

Reply

Answer 10

Jan 24, 2013 8:36 AM in response to Roddy

HI Roddy. Below is a screen shot of my dilemma. This image was snapped after updating the CSS as you instructed, uploading the show to my server, then previewing in Chrome. The green buttons are hyperlinks that can be bypassed if the user clicks on the Control Bar, which is what I'm trying to avoid. The control bar is the newer version, different than the home, left, and right buttons in the examples you gave me.

If it helps, I upload the exported Keynote HTML file into a Moodle LMS. So, it displays in a viewer window in the LMS. I don't know if that would affect things.

Reply

Answer 11

Roddy

Level 6

17,265 points

Jan 24, 2013 9:17 AM in response to Rexrothbeat

Did you empty the browser cache before visiting the page?

Here's a demo of the new style slideshow with the controlbar removed...

http://www.ezmacwebdesign.com/Demo/Space-Eggs/assets/player/KeynoteDHTMLPlayer.h tml

It works OK in Safari and Chrome but not in Firefox.

The more I look at this slideshow, the more I see how hideously complicated it is compared to the one it replaced. Its almost like some hot shot at Apple was asked to redesign it and made it so complicated to impress the boss that the fact that it didn't work too well was overlooked.

The old style slideshow only requires a folder of images and an HTML file that looks like this....

<!DOCTYPEhtml>

<html>

<head>

<title>Keynote Style Slideshow</title>

<metahttp-equiv="content-Type"content="text/html; charset=utf-8">

<scripttype="text/javascript">

// <![CDATA[

var images = new Array (6);

images[0] = "HTML-Slideshow.html_files/HTML-Slideshow.001.jpg";

images[1] = "HTML-Slideshow.html_files/HTML-Slideshow.002.jpg";

images[2] = "HTML-Slideshow.html_files/HTML-Slideshow.003.jpg";

images[3] = "HTML-Slideshow.html_files/HTML-Slideshow.004.jpg";

images[4] = "HTML-Slideshow.html_files/HTML-Slideshow.005.jpg";

images[5] = "HTML-Slideshow.html_files/HTML-Slideshow.006.jpg";

var index = 0;

function WindowLoaded(evt)

{

document.body.onselectstart = function () { return false; };

}

function Step(i)

{

GoTo(index + i)

}

function GoTo(newIndex)

{

if(newIndex >= 0 && newIndex < images.length)

{

index = newIndex;

document.Slideshow.src = images[index];

}

// ]]>

</script>

</head>

<bodybgcolor="black">

<palign="center">

<imgname="Slideshow"alt=""src="HTML-Slideshow.html_files/HTML-Slideshow.001.jpg" onclick="Step(1)"/><br/><br/>

<inputstyle="display:none"
class="home"type="image"src="HTML-Slideshow.html_files/home.png" onclick="GoTo(0)"/>

<inputstyle="display:none"
class="back"type="image"src="HTML-Slideshow.html_files/prev.png" onclick="Step(-1)"/>

<inputstyle="display:none"type="image"src="HTML-Slideshow.html_files/next.png" onclick="Step(1)"/>

</p>

</body>

</html>

Reply

Answer 12

Jan 24, 2013 11:07 AM in response to Roddy

Yup. I tried clearing cache in both IE and Chrome. The Control Bar still pops up. I wish that boot-licking lap dog who redesigned the HTML export would've simplified this process. It really takes away the functionality of hyperlinks in a presentation. If I was his boss, I would be much more impressed.

Reply

Answer 13

Jan 25, 2013 10:57 AM in response to Roddy

Hey Roddy, I saved a Keynote '09 presentation as Keynote '08, then exported from '08 as HTML. I deselected "show navigation controls" but when I uploaded the HTML file to the server, the display was blank except for a small, blue ? icon. Could it be that it was not displaying because I was using a 30-day free trial version of of '08 and they don't allow advanced features?

Reply

Answer 14

Roddy

Level 6

17,265 points

Jan 25, 2013 11:00 AM in response to Rexrothbeat

What is the URL to the HTML file on the server?

Reply

Answer 15

Jan 25, 2013 11:24 AM in response to Roddy

.

Reply