Tips and Tricks for Including AVI (Video) Demos in Your Online Tutorial Nad Rosenberg, TechWRITE, Inc. Woodbury, NJ Web Site http://www.techw.com E-Mail - [email protected] Phone - 609-848-6593 What’s in this presentation? • Focus is on creating video demonstrations of software for online tutorials, using AVI files and • Inserting these files into Windows Help or HTML. • Not CBT. ÓTechWRITE, Inc., 1998 Why use AVIs? • To demonstrate the movement of the cursor, selection of menus, program interactions (such as entering text or commands), and results. • These demonstrations – Enhance learning – Serve as a marketing tool – Easy to create – Easily included within Window Help and HTML – Inexpensive - Tools to create AVIs included with some Windows Help tools ÓTechWRITE, Inc., 1998 Example of tutorial created using AVIs • Following example created using the “soft” video camera included with most online help tools. ÓTechWRITE, Inc., 1998 What are AVIs? • AVI stands for Audio-Video Interleave. • A video file format created by Microsoft; one of several motion-oriented file formats. • File format most often associated with PCs and Microsoft Windows. ÓTechWRITE, Inc., 1998 AVI file creation tools • Blue Sky, Doc-To-Help, ForeHelp (player only) • Personal AVI Editor - http://www.flickerfree.com/Pae1.html • SnagIt - http://www.techsmith.com/techsupp/snagit/index.htm • HyperCam - http://www.hyperionics.com • Asymetrix Digital Video Producer - http://www.asymetrix.com • MGI VideoWave - http://www.mgisoft.com • Microsoft Camcorder - Free screen capture utility called Microsoft Camcorder (sometimes abbreviated MSCamcorder). http://www.microsoft.com/msoffice/office97/camcorder Warning: Some of these need video capture cards! ÓTechWRITE, Inc., 1998 Before you begin…. • Design the screen on which the AVIs will appear BEFORE you begin. • Designate the FASTEST computer you have to take the videos. • Make sure you have lots of disk space. • Practice! ÓTechWRITE, Inc., 1998 Design issues • Dimensions • Position on screen ÓTechWRITE, Inc., 1998 Text on left - video on right ÓTechWRITE, Inc., 1998 Text above video ÓTechWRITE, Inc., 1998 Practice makes perfect • Practice before you start recording. • Saves you time and disk space. • Remember: – Just because you think you know how something works, doesn’t mean you’ll do it correctly when recording. – There might be a better way to do it for the purpose of making your video. ÓTechWRITE, Inc., 1998 Example: Practicing with Word ÓTechWRITE, Inc., 1998 What happens if you don’t practice! Oops! I really wanted this one! ÓTechWRITE, Inc., 1998 Better ways of presenting may occur to you during practice. ÓTechWRITE, Inc., 1998 Tips to create emphasis: • Stop cursor for a few seconds before clicking. • Stop and move cursor to point out field names, etc. ÓTechWRITE, Inc., 1998 Example of stopping cursor before clicking ÓTechWRITE, Inc., 1998 Example of stopping for emphasis ÓTechWRITE, Inc., 1998 Record/Review process • Record • Review • Re-Record ÓTechWRITE, Inc., 1998 Tips to avoid the shakes • Fast computer • Move quickly between two points ÓTechWRITE, Inc., 1998 Examples of videos shot on different computers ÓTechWRITE, Inc., 1998 Moving quickly to next place on the screen ÓTechWRITE, Inc., 1998 Frame speed • A movie recorded at 10 fps takes less disk space than one at 15 fps, but it looks jerkier. • Smooth motion occurs in 15-17 second range. • Note that standard TV frame video rate is 30 fps. • If motion is limited, rates below 15 frames per second may be acceptable. • Frame rates of 10 to 15 fps are common for CDROM but not practical for Web. ÓTechWRITE, Inc., 1998 Spreadsheet with topic names, AVI file names, and dimensions ÓTechWRITE, Inc., 1998 Other design issues • With or without buttons? • With or without controls? ÓTechWRITE, Inc., 1998 Invoke via graphical buttons? ÓTechWRITE, Inc., 1998 With or without controls Controls ÓTechWRITE, Inc., 1998 Coding for specific positioning {bml DEMOBUT.BMP}!mciSendString("open bettrwa2.avi style popup",0,0,0) ;mciSendString ("put bettrwa2.avi window at 215 110 408 459",0,0,0) ;mciSendString("play bettrwa2.avi wait",0,0,0) ;mciSendString("close bettrwa2.avi",0,0,0) ÓTechWRITE, Inc., 1998 Additional entries in Configuration section of .hpj [CONFIG] RegisterRoutine("mmsystem.dll","mciSendString","SIuu") RegisterRoutine("mmsystem.dll","sndPLaySound", "Su") Also, you need to put mmsystem.dll in the same directory as the help file. • Thanks to John Daigle and WINHLP-L listserv ÓTechWRITE, Inc., 1998 Editing AVI files Special software is required to edit videos created in most basic video capture programs. Editing Software Features •Cut, paste, and deleting video sequences •Converting video frame rate •Adding text and subtitling ÓTechWRITE, Inc., 1998 Editing Software Packages • Personal AVI Editor - http://www.flickerfree.com/Pae1.html • MGI VideoWave - http://www.mgisoft.com • Corel Lumiere Suite - http://www.corel.com • Ulead Media Studio Pro - http://www.ulead.com/ • Asymetrix Digital Video Producer - http://www.asymetrix.com • Adobe Premiere - the reigning king of desktop video editing http://www.adobe.com • VidEdit - The full 16 bit (Windows 3.x) Video for Windows from Microsoft (not the "Run Time") is shipped with a simple video editing program VidEdit. ÓTechWRITE, Inc., 1998 Files you need to include with Windows Help • Any AVI files included in the Help system • Your .HLP file • The appropriate version of RHMMPLAY.DLL (16-bit or 32-bit) ÓTechWRITE, Inc., 1998 CD-ROM issues • Many large AVIs = CD ROM • Review thoroughly before master is made! • You may need an installation program. InstallShield Express 2 http://www.installshield.com ÓTechWRITE, Inc., 1998 Videos on the Web • Low bandwidth = Long downloads • Most videos on the Web are less than one minute in length. • CinePak codec • Display the size of the video file in bytes as part of the link. Leave download decision up to users. ÓTechWRITE, Inc., 1998 Browser issues • Netscape – Provides a plug-in (npavi32.dll), installed in the \NETSCAPE\PLUGINS directory. – Use the EMBED tag. Warning: If you are creating pages via FrontPage, when you insert a Video (from Active Elements option), it will NOT put in the EMBED tab. • IE – No plug-ins. Uses Media Player or ActiveMovie – < IMG DYNSRC="movies/movie.avi" CONTROLS SRC="movies/movie.gif" > – Can handle some options of EMBED tag ÓTechWRITE, Inc., 1998 HTML Coding for Netscape – Plays movie when it is clicked <embed src="Test.avi" width="281" height="278" alt="Test.avi (481018 bytes)" /embed> – Plays movie when page is loaded. Loops continuously <embed src="test.avi" LOOP="TRUE" autostart="TRUE" controller=“FALSE” width="281" height="518” alt="test.avi (234224 bytes)" /embed> The defaults for AUTOSTART and LOOP are FALSE. In the Netscape 4 browser this causes the movie to play once when the user clicks on the movie image. After completion of the movie, the user can have the movie play again by clicking on the movie image. ÓTechWRITE, Inc., 1998 HTML Coding for IE – Plays the movie with a mouse over. <IMG DYNSRC=“movie.avi”START=“mouseover”> – Plays movie when HTML is loaded. <IMG DYNSRC=“movie.avi”START=“fileopen”> – Displays controls and allows for human interaction <IMG DYNSRC=“movie.avi”controls> – You can also add looping and delay. LOOP=“infinite”, LOOP=“2”,and LOOPDELAY=“20” (milliseconds) – Plays on mouse over, loops infinitely, and the delays are 20 milliseconds <IMG DYNSRC=“movie.avi”loop=“infinite” START=“mouseover”,LOOPDELAY=“20”>s Note: IE coding causes the AVI to NOT work in Netscape. ÓTechWRITE, Inc., 1998 Full Motion Video • A Digital Video Primer - http://webreview.com/97/02/14/feature • AVI Overview - Very detailed instructions (John F. McGowan, Ph.D.) http://www.rahul.net/jfm/avi.html#ScreenCapture ÓTechWRITE, Inc., 1998 Bookmarks • Everything you ever wanted to know about AVIs - http://www.rahul.net/jfm/avi.html • How To’s on Full Motion Video - http://webreview.com/97/02/14/feature http://www.rahul.net/jfm/avi.html#ScreenCapture • Microsoft’s white paper on HTML references - http://www.microsoft.com/devonly/tech/amov1doc/amsdk008.htm • Video file formats - http://www.prenhall.com/electronic_publishing/html/chapter6/06_7 .html • Video display and compression - http://www.why- not.com/articles/vidapps.htm ÓTechWRITE, Inc., 1998 Options from user perspective How to invoke it Position .AVI on How to start it How to stop it Controls Can you pause Can you screen availability it? minimize or maximize it? RoboHelp By clicking on Separate window Click on Play Click on Stop Optional playbar Yes. Yes. Authorable the Authorable on top of help button on button on at bottom. buttons button. window. Cannot Playbar or right- Playbar or right- change where it click and select click and select appears when Run. Stop. invoked. Can move it. Popup window By clicking on Like any other Plays Click again No controls. No. No. brought up by hotspot text or popup, you automatically anywhere. Text or Graphic graphic. cannot change once you click on where it appears hotspot text or when invoked. graphic. RoboHelp Video By clicking on Separate window Plays Click on Stop Optional playbar Optional. Yes. macro hotspot text or on top of help automatically button on at bottom. graphic. window. Cannot once you click on Playbar or right- change where it hotspot text or click and select . appears when graphic. invoked. Can move it. Multimedia By clicking the Stays where it If not set to play Click on Stop Optional playbar Optional. No. button Play button on was embedded automatically, button on at bottom. the Playbar or in text. click on Play Playbar, if automatically button on available. If not, upon arrival to Playbar. have to wait till topic. it's over. The mci string By clicking on Can place it Plays Can't stop it. Optional. Optional. No. code hotspot text or anywhere. automatically. Have to wait till graphic. it's over. ÓTechWRITE, Inc., 1998 Options from author’s perspective How to do it Difficulty of implementation Need to ship file separately RoboHelp 1.