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

Dynamic Media on the Web

John H. Krantz

Hanover College

Outline

SlideshowsCreating with ImageJ

Presenting Using Redirects

VideoBackground

Editing with QuickTime

Delivering in a Webpage

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

http://ati.fullerton.edu/jkrantz/bobby/page00.html

http://ati.fullerton.edu/jkrantz/Slideshow/page1.html

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

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

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

Can save as Movie

Stack MenuCan 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.

Here is an example

Avi is ~5 meg image is ~350 kb

Slideshows

Can also do slideshows in web pagesHere 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

http://ati.fullerton.edu/jkrantz/bobby/page00.html

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>This will change in 3 seconds, about<img border="0" src="Bobby0000.jpg" width="512"

height="384"></body></html>

Make A slide show

Edit in Text editorJust edit new page for link

Change image shown

Use Save as

Remove meta tag for last image

A JavaScript Slide Show

Click here

Here is one that has different times for different images

Use View Source to get the code

http://ati.fullerton.edu/jkrantz/Bobby/JSslideshow.html

http://ati.fullerton.edu/jkrantz/Bobby/JSslideshowDiffTimes.html



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

Computer Video

Most Update rates are 10-15 frames/sec

5 fps 10 fps 15 fps

Probably not enough for speech and subtle facialexpressions.

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 valueNotice difference between flicker and frame update rate. Wagon wheel effect.

http://psych.hanover.edu/JavaTest/Media/Chapter4/MedFig.FlickerMotion.html

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

Differences in Persistence

Fast motion will be less clean on an LCD screen

General Video Issues

Image sizeKeep it small

320 x 240 is not uncommon

Image color depthNormally full color

Video LengthThe shorter the better

This file is ~ 5.5 meg in QuickTime and it is 17 seconds

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

Acquiring with a Digital Camera

Find format of your video camera mine is QuickTime

Can use digital zoomoriginal camera images are much larger than movie images so will be shrunk down

And digital zoom is before movie image

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 sizeBut image quality may be reduced to get on web

Editing with QuickTime Pro

Open more than one

BasicsOpens 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

QuickTime Pro Interface

Playback head

In markerOut marker

Selected region

Basic Editing

Selecting a region to editUse guides at bottom

Called In and Out Markers

Selected region is darkened

Arrow keys to fine tune

Cut and Paste operationPaste is at playback head

Adding Tracks

Copy as beforeUse Edit: Add – adds the video track

Use Edit: Extract TracksThen Edit: Add

Can extract sound this way to a movie

Can add scaled so new track is not length of old movie

Deleting Tracks

Use Edit: Delete Tracks

Remove any unwanted sound from video

More Advanced Editing with QuickTime Pro

Adding text to beginningMake 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


Overlaying TextUse a gif file with a transparent background

Use a text fileFile: 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


Filtering portions of movieDelete regions do not want to filter

Use the export function

Click on Options

Click on Filter

Pick pattern

Use cut and paste to reassemble

Saving for Web

Format:You must compress

Uncompressed files will be very large

Lead very slow download

DurationFor same reason, keep videos short

To Stream or Not to Stream

SteamingStarts sooner

Can be large files

Can stop

Generally low quality

General Protocol RTP/RTSP

Regular DeliveryWait for entire file

Keep to small files

Keeps Speed

Better quality

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

Embedding a QuickTime Movie in a Web Page<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>

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

Documents

Transcript of Dynamic Media on the Web John H. Krantz Hanover College.