Image Sequences John H. Krantz Hanover College. Outline Slideshows Why Presenting Using Redirects Video (if interested) Background Delivering in a Webpage.

Slides:



Advertisements
Similar presentations
Editing In ImageJ John H. Krantz Hanover College.
Advertisements

Layout Library Story line Preview screen Tool selection menu.
How to import and edit video clips in Windows Movie Maker
Windows Movie Maker Introduction to Video Editing Mindy McAdams.
The GIMP Simple features tutorial By Mary A White.
The Story of Past Presidents. What is PhotoStory?  PhotoStory is a free program from Microsoft that allows you to create a digital story.  You can personalize.
Lecture #25 Digital Video Editing I. Digital Video.
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
3.02 Publishing Animations
Chapter 9 Integrating Video. Digital video is a series of bitmap images that, when played back, create the illusion of movement. The quality and overall.
Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008.
Dynamic Media on the Web John H. Krantz Hanover College.
Video on the Web. Should you add video to your web page? Three main questions 1. How will it enhance the purpose of my page? –Entertain –Explain a process.
Basics of Stimuli John H. Krantz Hanover College.
Graphics and Still Images John H. Krantz Hanover College.
Video on the Web John H. Krantz Hanover College. Outline What is Video Acquiring with a Digital Camera Creating with ImageJ Editing with QuickTime Delivering.
Create a Narrated Story with PowerPoint. Basics Enter Text. (Click in the text box and start typing. If a text box is not visible, go to Insert > Text.
                      Digital Video 1.
Creating a PowerPoint With Sound PowerPoint 2003 Version.
Acadia Institute for Teaching and Technology Basic Web Page Design for Courses.
Creating a MagicInfo Pro Screen Template
Video Editing Adobe Premier Elements 4.0. Editing Steps in Order Capture analog or down load digital video Outline a script or use just as shot sequence.
Using Multimedia on the Web
Digital Video Basics CPSC 120 Principles of Computer Science April 16, 2012.
CS 1308 Computer Literacy and the Internet. Creating Digital Pictures  A traditional photograph is an analog representation of an image.  Digitizing.
Creating your Webpage with tables. This is a 2 column by 1 row table!
1 Lecture 12: Multimedia Not in Web 101 Text  Important Multimedia Issues  Audio  Movies and Video  Multimedia and HTML Documents.
Working with iMovie: The Basics Created by MJ. Importing Video Footage attach your camera to your computer and set to VTR mode move the camera button.
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
Multimedia Concepts: Video Technologies ANALOG DIGITAL.
 Using Screenr, Jing, and QuickTime Plus some alternatives!
HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit D Adding Graphics and Multimedia.
The Story of Westward Development. What is PhotoStory?  PhotoStory is a free program from Microsoft that allows you to create a digital story.  You.
VIDEO FORMATS Prof Oakes. Compression CODECS COMPRESSOR/DECOMPRESSOR A codec provides specific instructions on how to compress video to reduce its size,
WWW via the Internet Local via an Intranet Individual Computer.
Multimedia Web Design Professor Frank. Multimedia Combine text, graphics, sounds, and moving images in meaningful ways Use stable technology.
XP Practical PC, 3e Chapter 15 1 Creating Desktop Video and Animation.
1 Begin the editing process by selecting method of importing video Use the Movie Task Menu to import, edit and save video Follow this menu to complete.
Lecture Manipulating Graphics w/ Paint.Net. What is Paint.Net? Paint.NET is free image and photo editing software for computers that run Windows. It features.
Students : Hiba Ghannam Hawa Osama Superviser: Haya Sammaneh.
Backgrounds Pictures Movies Sounds Lists Excel Files Charts Word Files Drawing Transitions – Presentations, Projects – Outlines, Displays, Slide Shows.
LECTURE 07 RAZIA NISAR NOORANI Digital Video. Basic Digital Video Concepts CS118 – Web Engineering 2 Movie length Frame size Frame rate Quality Color.
Photo Story Creating your own!. What is Photo Story? Photo Story is a way to create slideshows with added narration, effects, transitions and background.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
IMovie 10 Overview. Importing Files from a Video Camera into iMovie 1.Plug the camera into a wall outlet using the power supply. (Some cameras will not.
AGB 3/26/121 ++=. 2 Yes, believe it or not this is a complete webpage. It has a Head, Title and Body between the start and end HTML Tag.
Photo Story. How to use Photo Story Photo Story 3 can be located in the Accessories folder on school computers. You will need to have your pictures already.
PowerPoint: POWERful or POINTless Dana Lane June 22, 2009.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Motion Graphics & Animation.
Introduction to Animation In animation, a series of images are rapidly changed to create an illusion of movement.
Design around your audience:  Keep layouts clean and simple for all audiences. Be consistent.  For professionals, try using a sophisticated template.
COMPREHENSIVE PowerPoint Tutorial 5 Applying Advanced Special Effects in Presentations.
1 Chapter 15 Creating a Presentation. Practical Computer Literacy, 2 nd edition Chapter 15 2 What’s inside and on the CD? In this chapter, you will learn.
1 PowerPoint Lesson 1 PowerPoint Basics Microsoft Office 2013: Introductory Pasewark & Pasewark.
Lesson 6: Enhancing Presentations
Video on the Web.
Creating Desktop Video and Animation
VIDEO.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Web Programming– UFCFB Lecture 8
3.02 Publishing Animations
Classroom Digital Camera
2.02G Publishing Animated Videos
2.02F Publishing Animated Videos
SAMPLE PRESENTATION Company Name presents PowerPoint Basics
Web Programming– UFCFB Lecture 8
Digital Video Faraz Khan.
Presentation transcript:

Image Sequences John H. Krantz Hanover College

Outline Slideshows Why Presenting Using Redirects Video (if interested) Background Delivering in a Webpage

Why Slideshows Example 1 Indicate sequence of events Carries sense of change From Billy – sense of momentum in photo Original Loftus Eye Witness testimony was done this way How? One easy way – use redirects

Here is an example Avi is ~5 meg uncompressed, a t 161 kb compressed but louse image quality images are ~35 kb each

Previous Student Slideshows Here are the work of previous students

Code for redirect Image Sequence Number is number of seconds before redirect This will change in 3 seconds, about

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

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 frames/sec 5 fps 10 fps 15 fps Probably not enough for speech and subtle facial expressions.

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 effectWagon wheel effect.

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 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

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 zoom original 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 size But image quality may be reduced to get on web

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

QuickTime Pro Interface Playback head In marker Out marker Selected region

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

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

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

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

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

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

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

To Stream or Not to Stream Steaming Starts sooner Can be large files Can stop Relatively lower quality and quality depends on connection General Protocol RTP/RTSP Regular Delivery Wait for entire file Keep to small files Keeps Speed Relatively better quality, but quality depends upon monitor and format

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=" <EMBED WIDTH="480" HEIGHT="376" CONTROLLER="false" TARGET="myself" HREF=“clip.mov" SRC="start.mov" BGCOLOR="FFFFFF" BORDER="0" PLUGINSPAGE=" html"> Example:

Assignment Have Fun!