Assignment #2: From Cellar to Attic (link to assignment page)

In this assignment, we will be covering:

Quicktime Architecture and Realtime Streaming

Quicktime Realtime Streaming is similar to RealPlayer streaming in that it streams not by downloading, but by streaming packets of data in realtime. Like RealPlayer, it can stream alternate data rates of one movie to the viewer. However it differs from RealPlayer in a few essential ways:

  1. Reference Files: As you know, Cleaner creates a reference movie from the video file which directs the client to the streaming movie on the streaming server. In RealPlayer this reference movie is called a "metafile" (.ram). In Quicktime, this reference movie is called a master movie (_MSTR.mov).
  2. Embedding Quicktime:In RealPlayer, the Ram file is placed on the http server, and you create an html page which links to the Ram file. This in turn calls up the RealMedia file (.rm) from the streaming server and plays it in its own player window. With Quicktime, you can also create a link from an html page--but in this case you link to the Master movie (_MSTR.mov) which is also on the http server. However, instead of calling up the Quicktime movie in the player, you can easily embed this movie in an html page. In this exercise, we will embed the movie in a sized pop-up window.
  3. Alternate Movies: When encoding and compressing for Real, you can set your alternate data rates in Cleaner. One movie is compressed which can be streaming at different rates. With Quicktime, Cleaner makes several different alternate movies, each compressed at the different data rate you specified. The viewer's settings in the Quicktime Plugin or Player determine which alternate movie is played.Quicktime Player Prefs. Alternate movies are placed on the streaming server, Emmy, the same as RealPlayer real media (.rm) files. Make certain to set your server path (rtsp://emmy.csusm.edu:554/diekman/vsar305/yourfolder/) for each alternate, or use Cleaner Prefs and set it once there.
  4. Encoding and Compressing QT: Because Cleaner creates several streamable alternate QT movies, encoding and compressing take much more time. You will need to have all of your quicktime movies run through Cleaner in advance of the class in which these are due to be watched. Read the chapter in your reader on Quicktime Architecture, and make notes during the demo to understand the steps used to encode and compress for QT streaming.

After compressing in Cleaner, you should have folders and files which look like this:

These contain your files, and tell you where to put them. Alternates go on "Emmy", the realtime streaming server, and the master movie goes on "courses" in your folder. You will need to create an html to embed the _Mstr.mov; this page also goes in your folder on courses.

Rollovers
The web page you will be interacting with for this assignment, newhouse.html in the "houses" folder, contains a table divided into cells(house/newhouse.html). Each cell contains a rollover. Rollovers are made of two images, one with an "out" and one with an "over" state. When you rollover the image, it swaps with the one "underneath" it, which indicates to the user that this is an interactive link. Here is a rollover linking to the csusm webpage:

This rollover is swapping csusm1.gif with csusm2.gif. The target is set to _blank to open the CSUSM webpage in a new blank page.

Below is the Dreamweaver rollover window:

Below is a screen shot of the Dreamweaver property inspector:

Creating Rollovers for Assignment#2, newhouse.html page:
In this case of this assignment, the rollovers are already created for you. After exploring the page, choose a text which you want to base your video on. You can change the "out" state of the rollover by replacing the top image with your own 160 x 120 jpeg or gif. After creating a thumbnail, download the page (newhouse.html) with the checkout option and with all dependent files. Open in Dreamweaver, click on your cell, and change the gif or jpeg either in the html code window or in the Src field of the property inspector. You will see "house.jpg" already there-that is what you are changing. Upload the page back to the courses server, and upload your gif or jpeg into the same "house" folder as the newhouse.html page--that way it is easier for everyone to download all dependent files.

Linking From Rollover
You can link from the rollover to your movie. First you must make the html page you want to link to that contains your embedded QT master movie. See the Course Reader and consult notes from demos on embedding Quicktime movies. This page along with your master movie (_MSTR.mov) should be uploaded into your folder on the courses server, with your QT alternates in your folder on Emmy. We will link to a sized pop up window. In Dreamweaver, open the Behaviors window. You will already see the rollover script. From the "+" pulldown select "Open Browser Window". In this dialogue box you can add the information to open a custom popup--link, width, height, deselect all toolbars. In the "URL to display" field, you link to the html page which contains the _MSTR movie. Make sure also to select "on click" from the pulldown arrow. I will demo all of this for you.

If you haven't finished your movie yet, you can make a temporary html file that says something like "under construction" or "check back later" and link to that. Below is the same rollover linking to the CSUSM webpage; however, I made it open in a sized window without toolbars.

The Dreamweaver Behaviors window will look something like this: