Image Mapping in RealVideo
When I found out that RealVideo contains an image-mapping function, I knew I had to experiment with it, but I wasn't sure how. My main problem was this: I love film because the medium is simultaneously entertaining and passive. I love that once I step through the theater doors, I never have to make a choice while watching a movie. So why on earth would I ever want to interrupt a user's entertainment to encourage interaction with videos on the Web?
A choose-your-own-adventure story seemed like one possible option, but those always bored me as a kid, so I didn't have much desire to use this technology to offer people different fictional narrative options.
After mulling all this over for a while, I decided a nonfiction story would best utilize video image mapping by providing users with the ability to shift between general and fine-grain information. To experiment, I created a mini-documentary about a technology education project called the Humboldt Institute for Technological Studies (HITS). It's a collaborative project I work on with the rest of the Webmonkeys. The documentary was developed specifically for RealPlayer and provides people with an introduction to the HITS Web site, while the image mapping gives users the opportunity to investigate topics within the video that they find interesting.
Since the video acts as an introduction to the topic, a dual form of navigation enriches the story by offering people multiple levels of information. Those interested in an overview and a more passive experience can just watch the slide and audio piece. Anyone who wants more can interact with the movie by clicking on stills within the video that provide entry points to the HITS Web site.
Software: RealNetworks' RealPlayer.
Got the tools? Check out Wendy's interactive slide show.[28.8] or [56.6].(Don't forget that you can click on the slides to make different Web pages appear.)
How It Was Made
Before jumping into the image-mapping process, I had to create the movie. Since motion within streaming video continues to be a bit klugey, I used still images instead. I wanted the final product to be a hybrid of slide show and radio documentary.
Once I chose my photographs and converted them to the PICT format, I imported them into my editing system along with the audio and quickly cut my piece. I was happy with the outcome and found that once the movie was encoded, the still images maintained their image quality much better than the video footage I have used in other RealVideo shorts.
When I finished the movie, I began work on the image mapping. First I had to choose where each image or series of images should lead the user. As I made a list of my images, I also noted their beginning and ending points using the running time displayed at the bottom of the RealPlayer. Then I began writing the map file, which is simply a text file. Here is part of the code for my image map that should give you a good idea of the information you need to create your own:
DURATION=0:0:3:57:0
One of the first things you'll probably notice is that the map begins with the duration of the video. The time is marked in days:hours:minutes:seconds:milliseconds. You have to note each of these time specs, and if one measurement is empty, be sure to stick in a zero or the map won't work.
Notice the map is divided into areas. An area is defined by a starting time and ending time within the video's time line. I used the areas to indicate an image or series of images that are connected to a unique URL. It's also possible to define different shapes within an area. The space within the shape is a hot spot that will take you to a URL (just like a regular image map). The shape is defined by coordinates, which I believe are in pixel width - although I can't verify this since the documentation on the RealPlayer site was vague.
Since RealPlayer movies are so small, I recommend using a rectangle and defining your hot spot, or link, as the entire screen. You can also display text in the bottom of the player by defining alt text for each area. This text will remain the same throughout an area.
Once you create your image map text file, you are ready to merge the map file with your video file. For a step-by-step description of how to merge these files, check out this RealVideo page. I found this part of the process to be a bit annoying, because currently you can't use the image-mapping feature unless you have a Windows box to merge the text file and the .rm files, which are the video files. (Although, as you probably already know, video files can be encoded on a variety of platforms.) But once I got over my irritation, I was quite pleased with the results.
Before you embark on your own image-mapping adventure, remember that time-synching with streaming video is not very exact. One way I dealt with this issue was to make sure that I had extended audio passages between each image in order to give users some time to explore the site. If you encode multiple versions of the movie for users hitting your site with different modem speeds, I also suggest making a map for each movie you create, since the video encoded for different bandwidths seems to stream at different speeds.
When I found out that RealVideo contains an image-mapping function, I knew I had to experiment with it, but I wasn't sure how. My main problem was this: I love film because the medium is simultaneously entertaining and passive. I love that once I step through the theater doors, I never have to make a choice while watching a movie. So why on earth would I ever want to interrupt a user's entertainment to encourage interaction with videos on the Web?
A choose-your-own-adventure story seemed like one possible option, but those always bored me as a kid, so I didn't have much desire to use this technology to offer people different fictional narrative options.
After mulling all this over for a while, I decided a nonfiction story would best utilize video image mapping by providing users with the ability to shift between general and fine-grain information. To experiment, I created a mini-documentary about a technology education project called the Humboldt Institute for Technological Studies (HITS). It's a collaborative project I work on with the rest of the Webmonkeys. The documentary was developed specifically for RealPlayer and provides people with an introduction to the HITS Web site, while the image mapping gives users the opportunity to investigate topics within the video that they find interesting.
Since the video acts as an introduction to the topic, a dual form of navigation enriches the story by offering people multiple levels of information. Those interested in an overview and a more passive experience can just watch the slide and audio piece. Anyone who wants more can interact with the movie by clicking on stills within the video that provide entry points to the HITS Web site.
Software: RealNetworks' RealPlayer.
Got the tools? Check out Wendy's interactive slide show.[28.8] or [56.6].(Don't forget that you can click on the slides to make different Web pages appear.)
How It Was Made
Before jumping into the image-mapping process, I had to create the movie. Since motion within streaming video continues to be a bit klugey, I used still images instead. I wanted the final product to be a hybrid of slide show and radio documentary.
Once I chose my photographs and converted them to the PICT format, I imported them into my editing system along with the audio and quickly cut my piece. I was happy with the outcome and found that once the movie was encoded, the still images maintained their image quality much better than the video footage I have used in other RealVideo shorts.
When I finished the movie, I began work on the image mapping. First I had to choose where each image or series of images should lead the user. As I made a list of my images, I also noted their beginning and ending points using the running time displayed at the bottom of the RealPlayer. Then I began writing the map file, which is simply a text file. Here is part of the code for my image map that should give you a good idea of the information you need to create your own:
DURATION=0:0:3:57:0
One of the first things you'll probably notice is that the map begins with the duration of the video. The time is marked in days:hours:minutes:seconds:milliseconds. You have to note each of these time specs, and if one measurement is empty, be sure to stick in a zero or the map won't work.
Notice the map is divided into areas. An area is defined by a starting time and ending time within the video's time line. I used the areas to indicate an image or series of images that are connected to a unique URL. It's also possible to define different shapes within an area. The space within the shape is a hot spot that will take you to a URL (just like a regular image map). The shape is defined by coordinates, which I believe are in pixel width - although I can't verify this since the documentation on the RealPlayer site was vague.
Since RealPlayer movies are so small, I recommend using a rectangle and defining your hot spot, or link, as the entire screen. You can also display text in the bottom of the player by defining alt text for each area. This text will remain the same throughout an area.
Once you create your image map text file, you are ready to merge the map file with your video file. For a step-by-step description of how to merge these files, check out this RealVideo page. I found this part of the process to be a bit annoying, because currently you can't use the image-mapping feature unless you have a Windows box to merge the text file and the .rm files, which are the video files. (Although, as you probably already know, video files can be encoded on a variety of platforms.) But once I got over my irritation, I was quite pleased with the results.
Before you embark on your own image-mapping adventure, remember that time-synching with streaming video is not very exact. One way I dealt with this issue was to make sure that I had extended audio passages between each image in order to give users some time to explore the site. If you encode multiple versions of the movie for users hitting your site with different modem speeds, I also suggest making a map for each movie you create, since the video encoded for different bandwidths seems to stream at different speeds.
posted by sr at
7:55 AM
<< Home