1 / 33

Dynamic Media on the Web

Dynamic Media on the Web. John H. Krantz Hanover College. Outline. Slideshows Creating with ImageJ Presenting Using Redirects Video Background Editing with QuickTime Delivering in a Webpage. Why Slideshows. Example1 , Example 2 Indicate sequence of events Carries sense of change

ishmael-finch
Download Presentation

Dynamic Media on the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dynamic Media on the Web John H. Krantz Hanover College

  2. Outline • Slideshows • Creating with ImageJ • Presenting Using Redirects • Video • Background • Editing with QuickTime • Delivering in a Webpage

  3. Why Slideshows • Example1, Example 2 • Indicate sequence of events • Carries sense of change • Think of Loftus early eyewitness studies • Billy – sense of momentum in photo

  4. Creating Slideshows with ImageJ • Stacks • Sequence of images to be played • Found under Image menu • Open the desired sequence in order • Images must all be the same size • Image: Stacks: Convert Images to Stack

  5. Editing Stacks • Can add and remove images (a Slice) under the same menu • Many other editing options do not work on stacks so edit images before you make stack. • Save as…Image Sequence • Give convenient name in numerical order

  6. Why do this in ImageJ • Cannot play in ImageJ so why all of this work? • Can edit images first • Can preview easily (but only with 1 frame per second at slowest) • Can give convenient name • Put in folder of choice

  7. Can save as Movie • Stack Menu • Can control frame rate under: • Image: Stacks: Animation Options • Determine frame rate • Get AVI writer plugin to save as a movie or a more current version of ImageJ (will be under Save As) • File will be huge.

  8. Here is an example • Avi is ~5 meg image is ~350 kb

  9. Slideshows • Can also do slideshows in web pages • Here is an example • Why? • Can be much smaller – faster download • Show sequence – convey more than single image • Original Loftus Eye Witness testimony was done this way • How? • One easy way – use redirects

  10. Code for redirect <html> <head> <title>Image Sequence</title> <META HTTP-EQUIV="refresh" CONTENT="3; URL=page01.html"> • Number is number of seconds before redirect </head> <body> <p> This will change in 3 seconds, about</p> <p align = "center"> <img border="0" src="Bobby0000.jpg" width="512" height="384"></p> </body> </html>

  11. Make A slide show • Edit in Text editor • Just edit new page for link • Change image shown • Use Save as • Remove meta tag for last image

  12. A JavaScript Slide Show • Click here • Here is one that has different times for different images • Use View Source to get the code

  13. Motion Reproduction • Frame rates of monitors far exceed what is needed for movement update • NTSC video: 30 updates per second • Movies: 24 updates per second • Most web video 10 to 15 frames/sec

  14. Computer Video • Most Update rates are 10-15 frames/sec 5 fps 10 fps 15 fps Probably not enough for speech and subtle facialexpressions.

  15. Flicker • Critical threshold of flicker rates is about 60 Hz in the fovea • But gets higher for larger stimuli • Recommended flicker rates between 66 Hz and 120 Hz (Bridgeman, 1998) • Most monitors are adequate in this value • Notice difference between flicker and frame update rate. • Wagon wheel effect.

  16. Stimulus Duration • Pixels are not on continuously during a frame • In part this is necessary for clean motion • Typical CRT phosphors last about 4 msec. (Bridgeman, 1998) • On LCD and other technologies, persistence is longer • Makes motion less clean but flicker less noticeable

  17. Differences in Persistence Fast motion will be less clean on an LCD screen

  18. General Video Issues • Image size • Keep it small • 320 x 240 is not uncommon • Image color depth • Normally full color • Video Length • The shorter the better • This file is ~ 5.5 meg in QuickTime and it is 17 seconds

  19. General Video Issues • Frame rate: recall difference between apparent motion and flicker • 10 to 15 is really fine for most cases • And best you can expect on web

  20. Acquiring with a Digital Camera • Find format of your video camera • mine is QuickTime • Can use digital zoom • original camera images are much larger than movie images so will be shrunk down • And digital zoom is before movie image

  21. Acquiring with a Digital Camera • Hold camera still or not? • Movies are limited in duration • mine is 30 sec or size of disk for 320x240 • It is 120 sec if 160x120 • Image quality is reasonably good if presented in original size • But image quality may be reduced to get on web

  22. Editing with QuickTime Pro • Open more than one • Basics • Opens MOV, mpg, avi, mp3, etc. • Get Movie Information on Movie Menu (ctrl-j in Windows) • Tracks: separate slices of information: played at same time as other tracks • Look under the Edit menu

  23. QuickTime Pro Interface Playback head In marker Out marker Selected region

  24. Basic Editing • Selecting a region to edit • Use guides at bottom • Called In and Out Markers • Selected region is darkened • Arrow keys to fine tune • Cut and Paste operation • Paste is at playback head

  25. Adding Tracks • Copy as before • Use Edit: Add – adds the video track • Use Edit: Extract Tracks • Then Edit: Add • Can extract sound this way to a movie • Can add scaled so new track is not length of old movie

  26. Deleting Tracks • Use Edit: Delete Tracks • Remove any unwanted sound from video

  27. More Advanced Editing with QuickTime Pro • Adding text to beginning • Make any graphic • Resize to movie size so know how it will look • Select al (ctrl-A) • Then cut and paste to beginning • Another paste for each additional frame

  28. More Advanced Editing with QuickTime Pro • Overlaying Text • Use a gif file with a transparent background • Use a text file • File: Import • Any .txt • Press Option button • Select keyed text • Change background to white and foreground to text color • I like changing it to bold • Add tracks as before

  29. More Advanced Editing with QuickTime Pro • Filtering portions of movie • Delete regions do not want to filter • Use the export function • Click on Options • Click on Filter • Pick pattern • Use cut and paste to reassemble

  30. Saving for Web • Format: • You must compress • Uncompressed files will be very large • Lead very slow download • Duration • For same reason, keep videos short

  31. Steaming Starts sooner Can be large files Can stop Generally low quality General Protocol RTP/RTSP Regular Delivery Wait for entire file Keep to small files Keeps Speed Better quality To Stream or Not to Stream

  32. Streaming vs. HTTP Fast Start • HTTP Fast Start is a feature of QuickTime • Allows playing after part of file downloaded • Fewer stops • No special software • Still keep files relatively small • Some loss of image quality

  33. Embedding a QuickTime Movie in a Web Page <p align="center"> <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="480" HEIGHT="376" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="start.mov"> <PARAM NAME="controller" VALUE="false"> <PARAM NAME="target" VALUE="myself"> <PARAM NAME="href" VALUE="http://psych.hanover.edu/Krantz/test/Invert2.mov"> <EMBED WIDTH="480" HEIGHT="376" CONTROLLER="false" TARGET="myself" HREF="Invert2.mov" SRC="start.mov" BGCOLOR="FFFFFF" BORDER="0" PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html"></EMBED></OBJECT> </p>

More Related