crash course from the learning media stage
TRANSCRIPT
[email protected]/NickFloro
Crash CourseWhat we learned at the Learning Media Studio
Starts at 9:45
Crash Course [email protected]
twitter.com/nickfloro 1 of 114 03/25/11
Tools:
• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro
Quick Prototyping Techniques
Crash Course [email protected]
twitter.com/nickfloro 3 of 114 03/25/11
Using Acrobat for Prototyping
Crash Course [email protected]
twitter.com/nickfloro 5 of 114 03/25/11
Using CoverFlow view and Preview of Graphics
Crash Course [email protected]
twitter.com/nickfloro 9 of 114 03/25/11
Design Scrapbook: iPhoto | LittleSnapper
Crash Course [email protected]
twitter.com/nickfloro 10 of 114 03/25/11
ActionProblem Solutions
Brainstorming
Crash Course [email protected]
twitter.com/nickfloro 14 of 114 03/25/11
BrainstormingiPod
• 9 months from concept to market
• White ear buds
Crash Course [email protected]
twitter.com/nickfloro 21 of 114 03/25/11
Brainstorming• Quantity not quality
• Toys
• Everyone is equal
• 1 hour
• Getting everyone to focus
• Break & Flow
Crash Course [email protected]
twitter.com/nickfloro 22 of 114 03/25/11
BrainstormingPlay off ideas
Michael Jordan scored 69 out of
70 points, reporters after the
game swamped him, one reporter
decided to focus on the teammate
who scored 1 point...
Crash Course [email protected]
twitter.com/nickfloro 23 of 114 03/25/11
“Glad Michael and I could work together to score 70 points.”
Crash Course [email protected]
twitter.com/nickfloro 24 of 114 03/25/11
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
ExploreCrash Course [email protected]
twitter.com/nickfloro 28 of 114 03/25/11
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo Assets Compression
Reviews FastQualityPrototype
Crash Course [email protected]
twitter.com/nickfloro 30 of 114 03/25/11
HTML 5 OptionsVideo Compression
H264 WebM
Crash Course [email protected]
twitter.com/nickfloro 31 of 114 03/25/11
Using MPEG4 Interactive LayerInteractive Video
Crash Course [email protected]
twitter.com/nickfloro 33 of 114 03/25/11
Using MPEG4 Interactive LayerInteractive Video
Crash Course [email protected]
twitter.com/nickfloro 34 of 114 03/25/11
Every Element is a TrackUnderstanding Layers
Crash Course [email protected]
twitter.com/nickfloro 35 of 114 03/25/11
QuickTime takes you from capture to delivery and beyondMPEG 4 Specs based on QuickTime Framework
Delivery
Edit and Compose Playback
Capture Archive
Crash Course [email protected]
twitter.com/nickfloro 36 of 114 03/25/11
Standards Are Everywhere
MPEG-1/MPEG-4
audio
MPEG-2RedBook JPEGAC-3FM DVNTSC/
PAL
Crash Course [email protected]
twitter.com/nickfloro 37 of 114 03/25/11
• Original DV 60 sec 266mb
• MPEG-4 = 450k to 7.8mb
• Flash 8+ = 450k to 7.8mb
MPEG-4: The MPEG for the InternetThe standard for the digital media revolution
Crash Course [email protected]
twitter.com/nickfloro 38 of 114 03/25/11
PixelsGuidelines for Compression
DV 720 x 486
720P 1280 x 720
HD 1080i 1920 x 1080
Crash Course [email protected]
twitter.com/nickfloro 39 of 114 03/25/11
Selecting a SizeGuidelines for Compression
320 x 240
512 x 384
640 x 480
Crash Course [email protected]
twitter.com/nickfloro 40 of 114 03/25/11
Frame RateGuidelines for Compression
29.97 fps 10-15 fps
Video Compression
Crash Course [email protected]
twitter.com/nickfloro 43 of 114 03/25/11
Tips & Hints
Key Frames: 4 x fps
Guidelines for Compression
Crash Course [email protected]
twitter.com/nickfloro 44 of 114 03/25/11
Guidelines for Compression2 Pass Variable Bit Rate
Crash Course [email protected]
twitter.com/nickfloro 45 of 114 03/25/11
Tips & Hints
• Frame Rate: 15 fps– Key Frames: 4 x fps
• Data Rate Target 800-1200 kbs
• 2 Pass Variable Bit Rate
• QuickTime: Sorenson 3 / H264
• Flash: Spark / On2 Pro / H264
Guidelines for Compression
WebM
Crash Course [email protected]
twitter.com/nickfloro 46 of 114 03/25/11
Easy Access to VideoFlip $100 to $200
Crash Course [email protected]
twitter.com/nickfloro 47 of 114 03/25/11
4 StepsThe Production Process
Publish PromotePlan Produce
Crash Course [email protected]
twitter.com/nickfloro 48 of 114 03/25/11
Setting up a StudioCosts
Computer $1,199 Software $994 Camera / Studio $1,470
Premiere CS4 $699 or Final Cut $995
Boris Chroma FX $295
Sanyo HD $400 16gb Video SD $55
Green Screen $200
Lavalier Microphone $295Tripod $125
Flood Lighting $395
Apple iMac $1,199
MacBook Pro $1,199
Crash Course [email protected]
twitter.com/nickfloro 49 of 114 03/25/11
One Tool for Everything
• MPEG-4• Flash SWF• Flash FLV• QuickTime• Real media• MPEG 1/2• MP3 Audio
Telestream Episode
Crash Course [email protected]
twitter.com/nickfloro 50 of 114 03/25/11
LMS/Remote Storage of FilesWeb Delivery
Development
Cloud or Dedicated Server
Clients
LMS
Crash Course [email protected]
twitter.com/nickfloro 52 of 114 03/25/11
• 11mb 16bit 44khz Stereo
• 2.8 mb 16bit 22khz Mono
• 500k MP3 64k 44khz Mono
Compressing Audio60 Seconds
Crash Course [email protected]
twitter.com/nickfloro 58 of 114 03/25/11
Tips & Hints
• MP3
• Sample Rate 22050 Hz
• Bit Rate 64 Kbits/s
Guidelines for Audio Compression
Crash Course [email protected]
twitter.com/nickfloro 59 of 114 03/25/11
http://audacity.sourceforge.net/
Crash Course [email protected]
twitter.com/nickfloro 60 of 114 03/25/11
Audacity http://audacity.sourceforge.net/
EasyVoipRecorder Recorder (Windows) http://www.easyvoiprecorder.org/
Hot Recorder (Windows) http://www.hotrecorder.com/
Call Recorder (Mac OS X) http://www.ecamm.com/mac/callrecorder/
SkypeRecord Directly
Crash Course [email protected]
twitter.com/nickfloro 62 of 114 03/25/11
Podcasts on the GoAudioBoo & iPhone
Crash Course [email protected]
twitter.com/nickfloro 64 of 114 03/25/11
http://www.naturalreaders.com/
Crash Course [email protected]
twitter.com/nickfloro 65 of 114 03/25/11
The Web Platform is AcceleratingCrash Course [email protected]
twitter.com/nickfloro 67 of 114 03/25/11
Graphics Location Storage Speed
Solving Developer ChallengesCrash Course [email protected]
twitter.com/nickfloro 68 of 114 03/25/11
Next Generation Mobile Using Webkit
BlackberryiOSAndroid
Crash Course [email protected]
twitter.com/nickfloro 69 of 114 03/25/11
Chrome Safari Firefox Opera
Which browserʼs support HTML 5?
Internet Explorer 9BETA
Crash Course [email protected]
twitter.com/nickfloro 74 of 114 03/25/11
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
Crash Course [email protected]
twitter.com/nickfloro 77 of 114 03/25/11
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Crash Course [email protected]
twitter.com/nickfloro 83 of 114 03/25/11
Forms
CSS 3
Effects/Transitions
Crash Course [email protected]
twitter.com/nickfloro 85 of 114 03/25/11
http://www.apple.com/itunes/podcasts/specs.html
Crash Course [email protected]
twitter.com/nickfloro 97 of 114 03/25/11
Resources • Designing for the social web
• Joshua Porter
Crash Course [email protected]
twitter.com/nickfloro 99 of 114 03/25/11
Podcasting For Dummies Tee Moris, Chuck Tomasi, Evo Terra
Resources
Crash Course [email protected]
twitter.com/nickfloro 100 of 114 03/25/11
http://www.apple.com/quicktime/technologies/mpeg4/Resources
Crash Course [email protected]
twitter.com/nickfloro 102 of 114 03/25/11
Search Flickr.com for iPad UI
Crash Course [email protected]
twitter.com/nickfloro 108 of 114 03/25/11
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
ExploreCrash Course [email protected]
twitter.com/nickfloro 113 of 114 03/25/11
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Crash Course [email protected]
twitter.com/nickfloro 114 of 114 03/25/11