Marcel Crudele’s Brain Matter

From Ad Words to Zen

Keynote to Flash (.swf)

It seems like a simple request – I have a Keynote presentation and want to create a web page with a Flash version in it. Ideally, I would record the voice over in keynote and click a button to export it, but that would just be too logical.

NOTE: if you need more control over your voice over than the solution in this presentation, check out this post that tells you how to use iMovie for your presentation.

The first problem is the voice over feature of Keynote. It records the audio as a complete track instead of breaking the track down and associating segments of audio with each slide (which Powerpoint does). This means that you better get the entire voice over right during your entire run through. The option to re-record from midway in the presentation until the end of the presentation has some serious issues and I have yet to get it to work.

An alternative is to use a screen capture program and then add in the voice over. However, this has proven to be difficult. The first problem is that Keynote dominates the screen and makes it difficult to access any recording software… I have yet to find a solution to this. The second problem is finding the appropraite tool that will allow you to remove the noise preceeding the presentation’s launch, provide a good voiceover interface, and export files to Flash. Adobe Captivate seems like it could work, but you have to fork over $800. TechSmith’s Camtasia looks awesome, but isn’t available for Mac’s (grrrr). iMovie might work, but is kludgy and doesn’t export to Flash.

So how can you do it? Well, Keynote can export a quicktime movie and there are converters for Quicktime to Flash, so here is what I ended up doing.

  1. Record the voiceovers in Keynote. One thing I noticed is that when you do this and then go back and hit play, there is a tendency for the audio and video to get out of synch, so this is not useful in automating the presentation within Keynote. However, when I exported to Quicktime, everything was in synch. Annoying, but there ya go.
  2. Export the presentation to Quicktime. Make sure to specify the appropriate export size. There is a customize option and I choose 800×600 to get a good size presentation with an add on controller (discussed later) that was likely to fit on most peoples screens.
  3. Shell out $45 for Verticle Moon’s Video2swf application. This allows you to import the movie and convert it to Flash. Make sure to edit the Player option in Settings to get your controller (play, volume, etc). Then hit export.
  4. Once you have your swf file, you will need to create an HTML page to embed it in. Verticle Moon provides some sample code, but below is the code I used. Make sure to 1) replace the title, 2) change 3MinPitch to whatever you want to refer to your project as, 3) replace 3-minute pitch.swf with your .swf file, and 4) change all of the 800×600 resolution sizes to the same dimensions as your swf file.
  5. On a side note, I tried to use Flash CS3 to accomplish this so I wouldn’t have to buy another product, but ran into all kinds of problems. It generated a .flv file that I then saved as a .fla file and then tried to export as a swf, but it was WAY more complicated than it needed to be and I didn’t really have any desire to have to learn Flash to accomplish this.

The result was a nice Flash page that accomplished everything that I wanted to, but this is ridiculously complicated. Also, since this was a short presentation, I was able to get the audio recorded in one sitting, but in the future I am sure I will have to use some audio editing tools… possibly iMovie. If and when I struggle through that, I’ll post the results so others won’t have to suffer through this.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Soket 3-Minute Pitch</title>
<script src=”../../../Scripts/AC_RunActiveContent.js” type=”text/javascript”></script>
</head>

<body>
<CENTER>

<p>
<script type=”text/javascript”>
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&#8242;,’width’,’800′,’height’,’600′,’id’,’3MinPitch’,’src’,’3-minute pitch’,’quality’,’high’,’name’,’3MinPitch’,’align’,”,’pluginspage’,’http://www.macromedia.com/go/getflashplayer&#8217;,’movie’,’3-minute pitch’ ); //end AC code
</script>
<noscript>
<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&#8243;
WIDTH=”800″ HEIGHT=”600″ id=”3MinPitch”>
<PARAM NAME=movie VALUE=”3-minute pitch.swf”>
<PARAM NAME=quality VALUE=high>
<EMBED src=”3-minute pitch.swf” quality=high WIDTH=”800″ HEIGHT=”600″
NAME=”3MinPitch” ALIGN=”” TYPE=”application/x-shockwave-flash”
PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”>        </EMBED>
</OBJECT>
</noscript>
</p>
</CENTER>
</body>
</html>

About these ads

April 1, 2009 - Posted by | Tech Geek | , , , , , , , , , , , , , , , , ,

6 Comments »

  1. [...] There is a customize option and I chose 800×600 to get a good size presentation that I could convert to Flash. Also, deselect “Include [...]

    Pingback by Using iMovie to create voice overs for Quicktime movies from Keynote « Marcel Crudele’s Brain Matter | June 25, 2009 | Reply

  2. [...] There is a customize option and I chose 800×600 to get a good size presentation that I could convert to Flash. Also, deselect “Include [...]

    Pingback by iMovie voice overs for Quicktime movies from Keynote « Marcel Crudele’s Brain Matter | June 26, 2009 | Reply

  3. I used keynote09 and the swf export option that includes the voice over but if you run the html file it runs okay but has no playback controls. The html code is very simple and looks like:

    Is there some additional coding I can put in to include the playback controls like play, pause, stop, sound level, beginning, end, etc?

    Comment by CT | August 14, 2009 | Reply

  4. Looks like the submit here omitted the example coding text. Have added with ? at the beginning.

    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?

    Comment by CT | August 14, 2009 | Reply

  5. Hey CT. I’m using Keynote ’09 version 5.0.2 and can’t find the .swf export you mentioned… what version are you using and where is that option? I know you can include .sfw in presentations, but didn’t know about the export.

    To get to your question, you should be able to use the generated .swf file in conjunction with the code I show above, editing the pieces described in step 4.

    Let me know if that helps.

    Comment by Marcel Crudele | August 14, 2009 | Reply

  6. Apple dropped the export to swf from Keynote 09. Bummer!

    Comment by ortquest | November 10, 2009 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: