Hack 47. Create an Interactive Video Catalog

We've all seen dramatizations of, or heard about, the day when you could be watching a television show and click on an actor's shirt to find out about it or even buy it. That day is today.

When viewing digital video on a computer, you gain some cool features not available on a DVD or videotape, such as linking to a URL [Hack #84] and allowing people to jump to bookmarks in a movie [Hack #49]. Another feature, called a hotspot, enables viewers to make parts of a video react when they click on corresponding sections of the image on screen. By combining hotspots with URLs and bookmarks, you can create an interactive video catalog.

4.10.1. Producing the video

Producing a video is challenging. With the addition of interactivity, another dimension comes into play. If you know you will be producing an interactive catalog, keep a few (hopefully, obvious) thoughts in mind when shooting.

First, attempt to keep the item you are making interactive unobstructed by other objects. This will allow viewers to click on the item at any point during a scene. For example, if you would like a viewer to click on a television, don't have someone standing in front of it.

You should also keep the item stable within the scene. The best solution is to use a tripod, even if you are shooting with multiple cameras. Keeping the item steady within the frame allows viewers to easily click on it because they won't be chasing it around with their mouse.

Finally, keep in mind the size of the object in relation to the rest of the image. If your viewers are going to be able to buy a television, make sure the television isn't off in the distance or obscured somewhere in the background.

If your item is smaller than you would prefer, you can help it stand out in the frame when editing. One method is to briefly superimpose a circle around the item at the beginning of a scene. Another method is to make everything in the scene black and white, except the item [Hack #74]. Whatever your approach, you should have it in mind before your shoot your scene.

4.10.2. Creating a Hotspot

How you create your hotspots depends on the application you choose to use. There are three capable applications available: LiveStage Pro (http://www.totallyhip.com/; $449), cleaner (http://www.discreet.com/cleaner/; $549), and VideoClix (http://www.videoclix.com/; $349). Unfortunately, all of the applications are available only on Macintosh.

A previous version of cleaner for Windows (Version 5) did include the ability to create hotspots, as well as other interactive elements, using a feature called EventStream. To create hotspots using Windows, you need to either obtain a copy of cleaner 5 or pressure Discreet to incorporate EventStream into an update.

Because tutorials for creating hotspots are available online for both LiveStage Pro and VideoClix, this hack will cover cleaner only.

After launching cleaner, you can import video by selecting Batch Add Files… and choosing your video file from your hard drive. To create a hotspot, you need to edit the EventStream data. To do so, either double-click on the videos icon or select Windows Project. This brings the Project window forward.

Within the Project window, choose EventStream Edit (the Edit button is just below and to the right of the tab) to bring up the EventStream window. To add a hotspot, you need to locate the section of video where you would like to place the hotspot and click the Add button to create a new event.

In the Event Type pop-up menu, select Hotspot. You can then click and drag over the section of video you would like to allow your viewers to click. Additionally, you can choose whether the shape of the hotspot, as well as assign it a Label for reference. Figure 4-18 shows a hotspot being created with an Oval shape.

Figure 4-18. Creating a hotspot with an Oval shape

Even though you've now created a hotspot, you still have a few other tasks to complete. First, unless you want the hotspot to last for the length of your video, you need to decide its duration. Fortunately, cleaner makes it fairly simple to determine how long to enable a hotspot: just click on the small pop-up menu to the right of the Duration text field. The menu offers three choices: To In Point, To Out Point, or To Current Time. Selecting any of these will enter the respective duration into the Duration text field.

Finally, create an action for your hotspot by clicking on the Add Action button. This creates a related event, which executes when the viewer clicks on the hotspot. The two types of actions you will be interested in, at least when creating a catalog, are the Open URL action and the Go to Time action. Figure 4-19 shows an Open URL action being entered for the referenced hotspot. This action causes the specified URL to open in a viewer's web browser.

The way in which you implement your catalog will determine which action you choose. If you are planning to integrate a web site into the process to allow viewers to make a purchase online, for example use the Open URL

Figure 4-19. Creating an Open URL action

action and enter the URL where you would like your viewers to be sent. If you plan on having your video display within a web page, use the Target entry to have the URL opened in a separate frame (HTML knowledge is helpful in this instance).

If, on the other hand, you would like to provide more information on the item, use the Go to Time action. This action makes your video jump to another section within itself, such as a video of the item close up, along with dialogue explaining the item in detail. The Go to Time action can be jarring, yet exciting, when experienced for the first time.

When used together in the same video, the Open URL and Go to Time actions can create quite compelling content. To create more hotspots in your video, just rinse and repeat. When you're finished, don't forget to click on the Save button in the EventStream window! Otherwise, all of your events will be missing when you do finally encode your video for delivery.

4.10.3. See Also

• LiveStage Pro (http://www.totallyhip.com; $449.95)

• Video Clix (http://www.videoclix.com; $349 499)

4.10.4. Hacking the Hack

Just because you can use hotspots to create a catalog, that doesn't mean they're limited to that use. One alternative is to create a "choose your own adventure" type of movie. By using a hotspot and an action to jump to another section of your movie, you can allow viewers to click on areas of the video to influence the story.

For example, you could create a scene in which a character needs to choose between two doors to possibly win a prize (think Let's Make a Deal). Upon reaching the decision stage, you could allow the viewer to click on a door and, based on her selection, jump to the appropriate section of your video. Quite obviously, you need to shoot two scenes, one for each door.

However you use hotspots, one thing is certain: your project will take a step beyond traditional "passive" video.