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

In this assignment, we will be covering:

Quicktime Architecture and Realtime Streaming

Quicktime Real-time Streaming is similar to RealPlayer streaming in that it streams not by downloading, but by streaming packets of data in real time. Like RealPlayer, it can stream alternate data rates of one movie to the viewer depending on the viewer's Quicktime preference settings for their connection speed. 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 or link 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 a stand alone 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. You can use tables and cells to place the movie where you want it in the pop-up. I use this on my website.
  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 streamed at different rates with Surestream. With Quicktime, Cleaner makes several different discreet alternate movies, each compressed at the different data rate you specified. The viewer's preference settings in the Quicktime Plugin or Player determine which alternate movie is played. Alternate movies are placed on the streaming server, Emmy, the same as RealPlayer real media (.rm) files.
    You may also make just one QT streaming movie at one connection speed. If you make that movie for 56k modem, everyone can view it, but it won't look as good as it could if a viewer has a faster connection. If you only make one compression at LAN, then a viewer with a 56k modem will not be able to discern the movie.
    Link to this page to see different QT compressions streaming from Emmy. If you change the connection speed in the QT prefs and reload the page each time, you will see the how the different compressions look--especially on the second movie.
    When making alternates, be certain to set your server path (rtsp://emmy.csusm.edu:554/diekman/vsar305f03/yourfolder/) for each alternate, or use Cleaner Prefs and set it once there. YOU NEED TO ENTER THIS PATH CORRECTLY AS YOU CANNOT CHANGE IT AFTER YOU HAVE DONE ALL OF YOUR COMPRESSIONS.
  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 Format, and make notes during the demo to understand the steps used to encode and compress for QT streaming. When you are using Cleaner for alternate compressions, you must click the "alternate" button in the settings window. You can use the presets, but I like to select a preset and then tweak my own setting.

After compressing in Cleaner, you should have folders and files which look like this below. In this case, "westerlands" was the name of the video. Cleaner created an html file and a _MSTR.mov to upload to the http server (courses) in your folder. It also created another folder for all the alts which are identified with the connection speed and an _S for streaming. (westerlands_56k_S.mov). These alts go on Emmy, the streaming server, in your folder.

Rollovers
The web page you will be interacting with for this assignment, housepage.html, contains a table divided into cells(house/housepage.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.

Below is the Dreamweaver rollover window for the above:

Creating Rollovers in Dreamweaver for Assignment#2, house/housepage.html:
In this case of this assignment, the rollovers are already created for you. After exploring the From Attic to Cellar page (housepage.html), 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 (the house or house.jpeg) with your own 160 x 120 jpeg or gif. You can do this n the property inspector in Dreamweaver. These rollovers are in a table, with each cell having dimensions of 160x120 pixels, so make sure your image is 160x120 and 72 dpi or you will break the table. You can resize a still frame from your video by exporting a still from FCP, resizing it in PhotoShop and saving for web. However, if you want to claim a text, you can make a temporary jpeg and replace it later with your video still. Save this in your own folder which you have already created during the last assignment.

After creating a thumbnail this size in Photoshop, download the entire folder "house" from the course directory with all dependent files using the checkout option selected in the Dreamweaver Site Definition Window under remote info. In this way, only one person at a time can make changes to the page, therefore avoiding overwriting other's changes. Open the page (housepage.html) in Dreamweaver, click on your cell (the text you have chosen), and change the gif or jpeg either in the html code window or in the Src field of the property inspector to the thumbnail you created. You will see "house.jpg" already there-that is what you are replacing with your own jpeg or gif. The path to your own jpeg will be a little different from the last assignment. It will have a "../" before it. Upload the the house folder back to the courses server, using the check in box. You folder should have the jpeg in it.

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, Dreamweaver book and consult notes from demos on making this page and embedding Quicktime movies. You can put other info on this page, such movie title, or your name, or other text. 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. You will link to this html page with the embedded master movie, and make the page 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. You can eliminate all the brower elements such as scroll bars, etc. In the "URL to display" field, you link to the html page you made 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 to link to 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 toolbars.

The Dreamweaver Behaviors window will look something like this:

and the Open Browser window something like this: