Tips and Tricks for Including AVI in Online Turorials - OCSTCocstc.org/ana_conf/pdf/tt6q_a.pdf ·...

Tips and Tricks for Including AVI(Video) Demos in Your Online

Tutorial

Nad Rosenberg, TechWRITE, Inc.Woodbury, NJ

Web Site http://www.techw.comE-Mail - [email protected]

Phone - 609-848-6593

TechWRITE, Inc., 1998

What’s in this presentation?

• Focus is on creating video demonstrations ofsoftware for online tutorials, using AVI filesand

• Inserting these files into Windows Help orHTML.

• Not CBT.


Why use AVIs?• To demonstrate the movement of the cursor, selection

of menus, program interactions (such as entering text orcommands), 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


Example of tutorial created usingAVIs

• Following example created using the “soft” videocamera included with most online help tools.


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.


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!


Before you begin….

• Design the screen on which the AVIs will appearBEFORE you begin.

• Designate the FASTEST computer you have totake the videos.

• Make sure you have lots of disk space.• Practice!


Design issues

• Dimensions• Position on screen


Text on left - video on right


Text above video


Practice makes perfect

• Practice before you start recording.• Saves you time and disk space.• Remember:

– Just because you think you know how somethingworks, doesn’t mean you’ll do it correctly whenrecording.

– There might be a better way to do it for thepurpose of making your video.


Example: Practicing with Word


What happens if you don’tpractice!

Oops! I really wanted this one!


Better ways of presenting mayoccur to you during practice.


• Stop cursor for a few seconds before clicking.• Stop and move cursor to point out field names,

etc.

Tips to create emphasis:


Example of stopping cursor beforeclicking


Example of stopping for emphasis


Record/Review process

• Record• Review• Re-Record


Tips to avoid the shakes

• Fast computer• Move quickly between two points


Examples of videos shot ondifferent computers


Moving quickly to next place onthe screen


Frame speed

• A movie recorded at 10 fps takes less disk spacethan 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.


Spreadsheet with topic names, AVIfile names, and dimensions


Other design issues

• With or without buttons?• With or without controls?


Invoke via graphical buttons?


With or without controls

Controls


Coding for specific positioning

{bml DEMOBUT.BMP}!mciSendString("openbettrwa2.avi style popup",0,0,0) ;mciSendString ("putbettrwa2.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)


Additional entries inConfiguration 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 helpfile.

• Thanks to John Daigle and WINHLP-L listserv


Editing AVI files

Special software is required to edit videos createdin most basic video capture programs.

Editing Software Features•Cut, paste, and deleting video sequences•Converting video frame rate•Adding text and subtitling


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 videoediting program VidEdit.


Files you need to include withWindows Help

• Any AVI files included in the Help system• Your .HLP file• The appropriate version of RHMMPLAY.DLL

(16-bit or 32-bit)


CD-ROM issues

• Many large AVIs = CD ROM• Review thoroughly before master is made!• You may need an installation program.

InstallShield Express 2http://www.installshield.com


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 tousers.


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 youinsert a Video (from Active Elements option), it will NOT put inthe 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


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 <embedsrc="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 4browser this causes the movie to play once when the user clicks on themovie image. After completion of the movie, the user can have themovie play again by clicking on the movie image.


HTML Coding for IE

– Plays the movie with a mouse over. <IMGDYNSRC=“movie.avi”START=“mouseover”>

– Plays movie when HTML is loaded. <IMGDYNSRC=“movie.avi”START=“fileopen”>

– Displays controls and allows for human interaction <IMGDYNSRC=“movie.avi”controls>

– You can also add looping and delay. LOOP=“infinite”, LOOP=“2”,andLOOPDELAY=“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.


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


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/featurehttp://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


Options from user perspectiveHow to invoke it Position .AVI on

screenHow to start it How to stop it Controls

availabilityCan you pause

it?Can you

minimize ormaximize it?

RoboHelpAuthorablebuttons

By clicking onthe Authorablebutton.

Separate windowon top of helpwindow. Cannotchange where itappears wheninvoked. Canmove it.

Click on Playbutton onPlaybar or right-click and selectRun.

Click on Stopbutton onPlaybar or right-click and selectStop.

Optional playbarat bottom.

Yes. Yes.

Popup windowbrought up byText or Graphic

By clicking onhotspot text orgraphic.

Like any otherpopup, youcannot changewhere it appearswhen invoked.

Playsautomaticallyonce you click onhotspot text orgraphic.

Click againanywhere.

No controls. No. No.

RoboHelp Videomacro


Separate windowon top of helpwindow. Cannotchange where itappears wheninvoked. Canmove it.

Playsautomaticallyonce you click onhotspot text orgraphic.

Click on Stopbutton onPlaybar or right-click and select .


Optional. Yes.

Multimediabutton

By clicking thePlay button onthe Playbar orautomaticallyupon arrival totopic.

Stays where itwas embeddedin text.

If not set to playautomatically,click on Playbutton onPlaybar.

Click on Stopbutton onPlaybar, ifavailable. If not,have to wait tillit's over.


Optional. No.

The mci stringcode


Can place itanywhere.

Playsautomatically.

Can't stop it.Have to wait tillit's over.

Optional. Optional. No.


Options from author’s perspectiveHow to do it Difficulty of implementation Need to ship file

separatelyRoboHelpAuthorablebuttons

1. Click the Authorable Button button.2. At the Authorable button dialog, name button andclick the Custom button.3. Select the macro ExecFile, i.e.,ExecFile(techwrite.avi) and click OK.

MODERATE. Have tocustomize RoboHelp's button,select a macro and customizethe macro.

Yes

Popup windowbrought up by:

Text 1. Highlight the text and click on the Popup button.2. Type popup topic title and click OK.3. Use the Multimedia button to insert .AVI in the popuptopic. Make sure you select Auto Play.

EASY. Just like any popup.Have to insert .AVI in popuptopic using the Multimediabutton.

No, if you select tostore the .AVI inHelp file.

Graphic 1. Place cursor where you want graphic to appear andclick the Popup button.2. Click Graphic button next to the Hotspot text field andselect graphic.3. Click OK and use the Multimedia button to insert .AVIfile in the popup topic. Make sure you select Auto Play.

MODERATE. Same as withtext, but you may have tocreate a graphic.

No, if you select tostore the .AVI inHelp file.

RoboHelp Videomacro

1. Click the Macro Hotspot button.2. At the Insert Link to Help macro dialog, typevideo(filename.avi) in the Macro to execute when userclicked on hotspot box.3. Click OK.

MODERATE. You can use textor graphics as hotspots andhave to select a macro andcustomize it.

Yes

Multimediabutton

1. Click the Multimedia button.2. Select the .AVI or .WAV file you want and click OK.3. If you want, you can have a Playbar and have the.AVI or .WAV file stored in the help file, so you won’thave to ship it separately.

EASY. Just a couple of clicksaway.

Yes

The mci stringcode

1. Type the code.2. Edit it as desired.Note: You can use text or graphics to invoke the .AVIfile.

DIFFICULT. Have to play withparameters to get rightpositioning.

Yes


Glossary• ActiveMovie - Microsoft's successor to Video for Windows shipped

with OEM Service Release 2 of Windows 95. ActiveMovie 1.0 isalso bundled with Microsoft Internet Explorer for Windows 95 andWindows NT 4.0. ActiveMovie 1.0 plays AVI, QuickTime, andMPEG files. ActiveMovie uses the ActiveX control amovie.ocx.

• AVI - Audio-Video Interleave. A video file format created byMicrosoft; one of several motion-oriented file formats.

• Cinepak - A compression/decompression technology . Takes a longtime to compress but a short time to decompress.

• Codec - Stands for Compression/Decompression technology. Canbe used for CD or Web.

• Indeo - Another compression/decompression technology.• Inline - The current method used to view the videos within your

Web page (as opposed to the video opening in a separate window).• MCI - Media Control Interface application.


More Glossary• Media Player - Plays multimedia files in Video for Windows.• MIME - Stands for Multipurpose Internet Mail Extensions. Identifies

the data type for multimedia files. MIME types for AVIs arevideo/msvideo and video/x-msvideo.

• MPEG - Video format.• MPLAYER.EXE - File name for Media Player• Plug-in - Software component that extends a browser’s capabilities.• QuickTime - Apple application that lets you create videos in .MOV

format. Available for MAC and Windows.• Streaming - Files play as they download. VivoActive and RealVideo

use this technology.• Video for Windows - A system for handling video in Microsoft Windows. It

was part of MS Windows 3.1 The original Video for Windows is acollection of 16 bit windows utilities, dynamic link libraries, and othercomponents. The AVI file format is a central part of Video for Windows.

Tips and Tricks for Including AVI in Online Turorials - OCSTCocstc.org/ana_conf/pdf/tt6q_a.pdf ·...

Documents

Transcript of Tips and Tricks for Including AVI in Online Turorials - OCSTCocstc.org/ana_conf/pdf/tt6q_a.pdf ·...