UCSF University of California, San Francisco      About UCSF       Search UCSF       UCSF Medical Center     
  Education & Training    Research    Patient Care   
 
Print This Page For Normal View, Click Here For Larger Font Sizes', Click Here

 UCSF Office of  Educational   Technology
 UCSF Center for  Instructional   Technology
 Flickr RSS feed and  blogs
 UCSF Blogs
 UCSF Podcasts &  Feeds
 Adobe Flash   Forums
 Adobe Flash   Showcase
 Hotscripts:   developer   resources
 LearnIt Classes
 Lynda.com: Online  Training
 
 
Information Services Unit
Web Resources
Announcements
Web Techniques
Web Worker Meetings
Training Resources
Web Style Guide
 

Rich Media

Video

You have the ability to embed video into pages through Dreamweaver or we can create a progressive download for you and host the video on our server. Web Services recommends using the progressive download method. To set up a progressive download we require the final version of a video in a supported source format. We do not have the software to edit videos in-house.

Supported source formats for creating a progressive download:

• Active Streaming Format (.asf)
• AVI video (.avi)
• DV Stream (.dv)
• Quicktime Movie (.mov)
• MPEG-4 Movie (.mp4)
• MPEG Movie (.mpg, .mpeg)
• Windows Media Video (.wmv)

Editing Resources on Campus:

Progressive Download vs. Embedded video:

Progressive Download
Best method
The video is stored externally and downloaded into flash movie, usually through http
  Embedded Video
Should be used for really short clips, like special effects, such as explosions
Imports and places it in the Flash timeline
Uses regular web server
 
Pros:
swf file is small
Video begins before download is complete
flv frame rate is independent of swf file
Cached video plays instantly once downloaded
Can create a scrubber bar
  Pros:
Can create seamless video loops
Can see individual frames in timeline
Can create mask and overlays
Preloaded as part of swf file
 
Cons:
Increases site bandwidth
Can be cached
  Cons:
Have to re-import video when it changes
Entire video must be downloaded before viewing
Audo sync issues after two minutes
Limited length of 16,000 frames, which is too long for a video anyway
Frame rate must match swf frame rate
 
Example of a progressive video (left): Video Commentary by Mike McCune:
   


Embedding a Video in Dreamweaver

Go to File > Insert > Media > Plugin > browse to the video file. Declare the height and width in the Properties panel.


Audio

Web Services recommends using streaming audio to prevent the downloading of audio. Streaming audio, with a stand-alone player, also allows the user to control playback with a navigation panel.

Our server can host files in the wma, mov, or mp3 format. mp3 is the most popular audio format.

See (on left-hand side): School of Medicine Graduation Speeches





Flash

The School of Medicine's preferred form of animation graphics is Macromedia Flash. Web Services can create simple flash animations for your homepage banner. See Osher and SFGH. If you are going to create the Flash on your site, follow the settings below.

Settings:

Before saving the movie go to File > Publish Settings and set Window Mode to Transparent Windowless.

To create the swf file go to > Export Movie. An export window will pop-up. (Note: Flash files should be saved at Flash 5 or less in order to play on all platforms.) Select Flash 5, Top Down and a JPEG quality around 75%. Test file size to picture quality in order to find optimum size. A swf file will show up in the same folder as your fla file.

Insert the swf file into Dreamweaver to be played online. Insert > Media > Flash > browse to find file.

Optimize images before importing them into Flash to keep file size down. Flash recommends importing images as png or jpeg files.

Flash Export






Podcasts & Feeds


Calendar Feeds

The most popular feeds on the School of Medicine website are currently Calendar feeds. See: Office of Medical Education.

News Podcasts & Feeds

Photo Feeds

Flickr photostream allows photos posted on Flickr (under your account) to rotate on your webpage. See: Global Health Sciences Education & Training (Refresh page to see photo rotation.)



 


Updated: July 5, 2007
    Site Map    Contact Info     ©UC Regents