Linking Text to Movie Clips Using Dreamweaver

Note - these directions are specific to the system used at the Urban School, they are included as a model to be adopted by others interested in creating similar projects.

Prerequisite: You have already transcribed text, divided this into manageable "paragraphs" that are generally less than 90 seconds in length, and created the Quicktime movie clips associated with each text section.

Summary: You will now link the interview "paragraphs" to the Quicktime movie files. This will allow the viewer to click on text to launch the associated movie file. This is a tricky set of steps – go slow at first until you get accustomed to the procedures.

Set-up File Structure

Up to now you have been working solely off your laptop, but now it's time to begin sharing files as we move into a more collaborative review and publish phase. You will continue to work primarily from your laptop, however all your publishable files will be uploaded to the fileserver – both for back-up and for sharing.

  1. Logon to the fileserver and navigate to: Students > Courses > History > Oral History
  2. Drag the "WebsiteInProgress" folder to your laptop desktop
  3. Rename this folder by adding your initials to the end – like this: "WebsiteInProgressHL"
  4. Open and explore the contents of this folder

Understanding the File Structure

Let's take a look at one example since understanding this will help you as you begin to add movie and transcript files. For now, ignore everything other than the actual interviewee's folder – in this case we look at Karl Lyon.

Move in Your Movie Files

  1. Go ahead and move all your movie files into the correct folder as per the directions above.
  2. Check that they still work – open and make sure they play. If not – you need to go back and re-save all the movies as "self-contained" – see "Creating Movie Clips Using Quicktime."
  3. Upload the movie files to the same folder on the server. You need to work with your group members to MAKE SURE your movie names are unique. If multiple people are working on the same transcript tape – you do NOT want to inadvertently replace other's with your movie files.

From now on you will work off of files on your laptop – but you will UPLOAD NEW WORK to the server. This will both serve as a BACKUP as well as allow others to review your work.

Define a Site Within Dreamweaver

Dreamweaver works best when you work within it's own unique file structure – called a "site." You will now create your own site.

  1. Launch Dreamweaver
  2. Choose "Site > New Site"
  3. Name your site with a combination of your name and the survivor's name – like KarlLyon_Howard
  4. You do NOT want to work with "server technology"
  5. Choose "Edit local copies on my machine."
  6. When asked "Where on your computer do you want to store your files?" – click the small folder icon and navigate to the "Website in Progress" folder on your desktop.
  7. When asked "How do you want to connect to your remote server?" choose "None."
  8. After clicking "Done" – a new site window pops up.

As you continue to work with movie and text – do this within Dreamweaver's site window. Always go to "Site > Site Files" to open your site rather than navigating via Apple's file structure (the "Finder").

Copy and Paste Transcripts into Dreamweaver

You now need to convert the transcript sections from Listen & Type to Dreamweaver.

  1. Launch Dreamweaver and open one of the blank transcript files (those with the "xxx-xxx") within your survivor's folder.
  2. Choose "Save-As" and rename it to match that segment of the tape you are working with by simply replacing the x's with numbers representing minutes.
  3. Example: "trans1b_25-62.html" means "transcript from tape 1, from the 25 to 62 minute points. "b" just signifies SECOND interview.
  4. Copy all the transcript from your segment of the Listen & Type segment and paste it into this new file.
  5. You should now have a Dreamweaver document that contains all the transcription for that segment of the interview. The file name should match the content as per #2 above. From here on out you will use this file to continue editing the transcript as well as to insert the movie files.

Creating the Linked HTML Files

Eventually you are going to make text clickable – when the user clicks any answer, the corresponding movie will play in the top-right "movie frame." You first have to make a small html file (hypertext markup language), one that ends with ".html" for every movie file. This can be tedious so we've created a simple tool to do this for you.

  1. Download (drag and drop) to your desktop the tiny program called "mov_to_html" – this is posted in the Oral History folder on the server (Students>Courses>History>Oral History).
  2. Locate the folder where all your movie files live.
  3. Drag and drop this entire folder ONTO the "mov_to_html" icon
  4. This should miraculously create paired files for all your movies – the files will end in ".html" – wait several seconds – this can take some time.

Note to other project adopters: The "mov_to_html" is a small Applescript that automatically generates a new html file based on the name of the movie file. We can send you a copy - just let us know.

Fixing the Format of Transcripts in Dreamweaver

ONE last step to prepare for linking text to movie files. You will notice that the Dreamweaver-based transcripts look different. The following is the procedure for fixing this prior to making the movie links.

  1. Open the transcript document
  2. Choose Edit > Find and Replace (or Apple-F)
  3. Set the choices to match identically with those to the right ąClick "Replace All"

Magically all the questions and paragraphs will separate out. Don't worry about the extra space between paragraphs – we will fix this later.

Linking cut movies

At this point you should have created a Dreamweaver "site" that lives on your laptop, you have moved all your movie files into the correct folders, you've copied and pasted all your transcript text into the correct Dreamweaver files, and you've created the "Linked HTML" files so that every movie file has a paired html file. Confused? Ask for help – this is complicated! Now for the actual link-up of text to movie.

  1. Open Dreamweaver and make sure you are looking at the SITE (Site > Site Files) – you should see something like the adjacent image.
    If there are no files or folders within the "Site" folder – then you need to re-do the step above – "Define a Site in Dreamweaver."
  2. Within this site - open the transcript file you are working with.
  3. Make sure the "Properties" window is open (Window>Properties).
  4. Highlight ALL the text from the paragraph you are linking from.
  5. In the "Properties" window – click on the little folder icon to the right of the "Link" box – navigate to find the matching file – be sure to link to the "html" pair – NOT to the ".mov" pair.
  6. In the "Target" box, enter "movie."
  7. Keep doing this for all your movies.

Uploading Back to Server

This step should be performed several times throughout this process until all your work is complete. Recall, you should be completing all your work (new files, changes, link creation) on YOUR laptop with the "WebsiteInProgress" folder on your desktop (or wherever else you moved it to). You then need to UPLOAD any NEW or CHANGED files to the server version ("upload" means to push files from your computer to another, i.e., the server – "download" is the reverse – means to pull files into your computer).

  1. Logon to the server and navigate to the "WebsiteInProgress" folder on the server
  2. (Students > Courses > History > Oral History > WebsiteInProgress) – go as far as opening the folder that contains (or will contain) your filesOpen the same paired folder that lives on your laptop
  3. Drag and drop any new or changed files from your laptop to the server version
  4. If you already had previous files with the same name in the DESTINATION you will be prompted with a message asking you to confirm that you want to replace the existing files with the NEW versions. Read this carefully – think this through – and if you have doubts, ask for help.

Yes, this can be a bit of an organizational challenge. The trick it to close or minimize ALL but the 2 windows – the DESTINATION window (the server version) and the SOURCE window (the laptop version). Hold the APPLE key and click on the title of an open window to see it's path, like these two:

this lives on my laptop

this lives on the Fileserver

Remember – only those files stored on the server are SAFE unless you have burned back-up CD's. Do this often.

Previewing Movie Clips in the Browser

In order to verify that the movies will properly load when the user clicks a transcript link – you need to follow these directions.

  1. Within Dreamweaver's SITE window, find and OPEN the file within your subject's window called "frameset.html." For example there is a file called "max_frameset.html" within the "mgarcia" folder.
  2. You may get an error like this one OR you may see the wrong page load – no problem – just keep reading...
  3. Choose "File > Open in Frame…" and navigate to the TRANSRIPT file that you want to preview.
  4. IF you are prompted to "copy the file to your document folder now" – click CANCEL
  5. You should now see the transcript frame appear – now click the "Preview" icon in Dreameaver's toolbar – looks like this:
  6. The first time you do this you may be prompted to find your internet browser – read and follow the directions on screen to correctly "point" the "Internet Explorer" – which lives in the "Applications" folder.

You should now be able to navigate through your transcript page. Check that all your movies correctly work and that they load in the top-right "movie" frame. Report those that are not working.