Instructions For Creating Web-based Lectures Using MS PowerPoint Jaspal S. Sandhu Email: jsandhu@mit.edu MIT Dept. of Mechanical Engineering This document last updated: Fri 18 May 01 Acknowledgements The Visual Basic program that will be used in this process reuses some of the code created by Fred Videon at the University of Washington. The creation of this program would not be possible without the resources of Prof. Tomas Lozano-Perez of MIT EECS, who also authored the JavaScript page that runs the lectures. Details can be found at: http://www.mit.edu/~jsandhu/ppt.html Instructions 1. Download the Visual Basic program from the following website: http://www.mit.edu/~jsandhu/ppt.html a. Click on the link labeled "PowerPoint Web Converter Setup Files" b. Download each of the files to the same location (e.g. - a Temp directory on your desktop) i. right-click on each link ii. go to "Save Target as ..." iii. specify the appropriate directory 2. Install the program a. Open the .cab file (with WinZip or a similar program) b. Extract the files to the same directory where setup.exe resides c. Double-click on setup.exe to begin the install process i. This will be fairly self-explanatory ii. When you are done, you should be able to access the program from the Start Menu ® Programs ® PPT_GIF_WAV_Exporter 3. Create the PowerPoint Slides a. Use PowerPoint to create an organized presentation of your lecture notes b. "Break" up the slides i. The script that runs this program cannot handle animation, so it treats the presentation as a discrete number of slides. If it is necessary to add elements to a slide in a piecewise fashion (as might be done using PowerPoint fly-ins), it will be necessary to create multiple slides each containing only the information that will be discussed on that slide. You may think of this as discretizing the animation of slides. 4. Create the PowerPoint Narration a. Now it will be necessary to create the narration for the slides. It is important to note that each slide in the presentation must have narration tied to it. Otherwise the VB program and JS script will not run properly. b. Create a narration for each of the slides in a program like MSWord. c. Export the file using the "Save as Web Page ..." command. Note that what you put into the Word file is effectively what the students will see. You should organize each of the individual slide transcripts with a heading, such as "Slide XX". You must name this file "text-all.html". d. Note that it will be necessary to edit the HTML document (using a program like WordPad) such that the text will automatically scroll to the section representing the current slide. This will be done using the HTML tag. Look at the text-all.html (open file with WordPad) at http://www.mit.edu/~jsandhu/ppt.html for an example of how to do this. If this step is omitted, the text will still be available, but it will not be synchronized to the current slide. 5. Narrate the slides a. Using the narration, it will now be necessary to actually narrate the slides. Advice from the Professors in MIT EECS (Lozano-Perez and Grimson) suggests that we should first create the narration and then record the sound. The reverse process will likely take more than twice as long. b. From within PowerPoint, go to the Insert Menu ® Movies and Sounds ® Record Sound c. Using the narration from step 4, record the sound for each slide. When prompted for a filename, you may type whatever you like (it will later be handled by the VB program). d. This will result in the display of a sound icon (a megaphone). Place this in the corner of the page on which you wish to embed the sound. It can also be resized to make it more discreet. e. Repeat this process until the entire lecture has been narrated. 6. Export for Web use a. Save the file as a *.ppt file. b. Save to Web format (File Menu ® Save as Web Page...) c. Now use the VB program to properly export the PowerPoint presentation. i. Start the program (Start Menu ® Programs ® PowerPoint Web Exporter) 1. create image files a. click on "Select a PowerPoint File and Export GIFs" b. when prompted select the *.ppt file that you created in step 6 c. this will create a folder containing the appropriate *.gif images, with a meaningful naming convention 2. create sound files a. click on "Select an XML File and Export WAVs" b. when prompted, go into the directory containing all the Web support files (typically named [name_of_presentation]_files) and select a file called "filelist.xml" c. this will create a folder containing the appropriate *.wav files, with a meaningful naming convention 7. Modify the *.html file a. It will now be necessary to edit the JavaScript *.html page that can be downloaded from http://www.mit.edu/~jsandhu/ppt.html. That file contains three sections that must be modified (and one that is optional). The three are marked with the following text: "$$$$$$$$". This should make them easy to find (you can use the "find" feature to quickly locate the fields to change). b. You can modify the page using a simple text editor such as WordPad (do not use Notepad, it does not handle formatting well). c. The four sections to modify are: i. Base URL 1. on 9th line of document (slideshow.html) 2. change base URL to reference location of all support files (all *.gif files, *.wav files, and the "text-all.html" file) 3. e.g. - "http://www.mit.edu/~jsandhu/support_files/" ii. Number of images 1. on 10th line of document 2. change to specify the number of slides in a particular presentation 3. e.g. - "10" iii. First image 1. on 105th line of document (~80% of the way through) 2. change to specify starting image (image to display when page is loaded) 3. e.g. - "http://www.mit.edu/~jsandhu/support_files/slide1.GIF" iv. Sound on/off 1. on 14th line of document 2. changing this is optional, but allows the individual to create lectures with or without sound a. "sound = true"; sound will load b. "sound = false"; sound will not load c. students will be able to access the transcript of the narration in either case 8. Post to the Web a. The final step is to put all the files to the Web. b. Place slideshow.html in the appropriate directory (wherever students will access it). c. Place all support files in the directory specified in slideshow.html (step 7.c.i) by the Base URL variable. d. The lecture should at this point be ready to go. 9. Problems? a. If you experience any problems, please email me at the address specified at the top of this page. b. If there are any sections of this document that you felt were unclear or misleading, please email me so that I can revise them.