CDM100
Video Formats and the Video Formats and the WebWeb
Video Compression and delivery methods via Flash 8
Video Standards and FLVs
Ref: Macromedia – Developer Center: Flash Video Learning Guide
CDM100
Video StandardsVideo Standards
• Television Standards– Established in the 1950s when colour television
was inverted
• NTSC (National Television System Committee)
– Used in America (North and South) and Japan
• PAL (Phase Alternating Line)
– Used in Europe, Australia, Middle East and Asia
CDM100
Televisions & MonitorsTelevisions & Monitors
• Conventional televisions are made up of horizontal lines which refresh quickly to show a moving image– NTSC is 525 lines– PAL is 567 lines
• Computer Monitors are made up of pixels– Often of a higher resolution
than PAL or NTSC
CDM100
Capturing VideoCapturing Video
• Capturing VHS using a video capture card– NTSC: The 525 lines are represented by 720 x 486 pixels
– This video size is often termed D1– PAL: The 576 lines are represented by 720 x 526 pixels
• Capturing Digital video – i.e. IEEE1934 Firewire and Digital Video Camera– NTSC is represented by 720 x 480 – This video size is
term DV– PAL is represented by 720 x 576– Both NTSC and PAL DV have frame sizes which are
multiples of 16. This is because most compression algorithms work on blocks of 16 x 16 pixels
CDM100
Pixel Aspect RatioPixel Aspect Ratio
• NTSC and PAL specifications specify non-square pixels (rectangular)
• Computer Monitor pixels are square• Most Video Applications scale the video to
compensate– For example:
• PAL D1 720 x 526 will display as 768 x 576 DV (Square pixels) (Horizontal Compensation)
• The pixel Aspect Ratio is 1.067 for PAL D1 to PAL DV
i.e. 720 x 1.067 = 768
as images have a 4:3 ratio (3 x 768) / 4 = 576
CDM100
Frame RateFrame Rate
• The number of images per second shown to give the illusion of motion
• PAL frame rate: 25 fps (frames per second)
• NTSC is 29.97 fps– There are really 30 fps in NTSC but they run 0.1
percent slower in real time– This was done to ensure backward compatibility
with black and white television sets of the time
CDM100
Display FormatDisplay Format
• Interlaced Video– Due to the speed of the technology of the time it was not
possible to draw a full frame without a noticeable flicker– The solution to this problem was to break the image
(frame) into two fields and display one after the other
• Progressive Video– A modern standard used in High Definition television– Each image is drawn in one pass – from top to bottom
CDM100
Video CompressionVideo CompressionThe basic principle of video compression CODECs (algorithms)
are based around the use of keyframes and delta frames.
Original uncompressedVideo
Images/frames
Keyframes – a full uncompressed image
Delta frames – these contain only the information about pixels that have changed from the previous frame
CompressedVideo
CDM100
Video and Flash (8)Video and Flash (8)
• Flash version 8 has an inbuilt video codec called On2 VP6
• Earlier versions of Flash (6 and 7) used the Sorenson Spark codec
• You can use Flash to both create video and as a tool to deliver video (to computers, mobile phones, PDAs etc)
CDM100
Creating VideoCreating Video• Any movie you create in Flash an be exported as a AVI or
Quicktime– File > Export > Export Movie…
• This allows multimedia developers to create animations or bespoke video effects
• Example (1): Using PhotoShop and Flash to create a movie
From static imageto Flash animationto video
In class demojpeg
CDM100
Delivering Flash VideoDelivering Flash Video
• There are 3 methods to deliver video using Flash– Embedded Video– Progressive FLV– Streaming FLV
• All methods share the same goal which is to deliver video in format which will work on the client machine (regardless of operating system and hardware etc.)
CDM100
Embedded VideoEmbedded Video
• The video is imported and placed on the timeline
• The Frame Rate of the video file and Flash movie must be the same
• You have timeline access to the video clip– This means you can treat the video like any other
Flash object– For example: You could add interactions to
video (e.g. invisible buttons over the video file)
CDM100
Progressive FLVProgressive FLV
• FLV files are a Flash Video format– i.e. you use the Flash 8 Video Encoder to create the FLV
• The video file is stored externally to the Flash SWF file
• The video only plays at runtime• FLV files are progressively downloaded, cached
and played from the local disk• There are special ActionScript functions which
permit you to control the video – e.g. netStream, Load, Play, Pause, Seek
CDM100
Streaming FLVStreaming FLV
• FLV files are streamed from a Flash Media Server (this is hosted on Web server etc.)
• Many features are the same as progressive FLV
• Main advantages – the user doesn’t get a local copy!– Possible to capture live video from webcams /DV
cameras– Also, permits multiway video applications to be
developed
CDM100
Example (2): Example (2): Flash -Embedded Video Flash -Embedded Video
• Step 1 select File > Import
Find the videofile you haveAlreadycreated
Step 2
CDM100
Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video
Step 3:Select the deployment methodNote: Unless you have access to a Flash Communication ServerYou can only really pick Progressive or Embed
CDM100
Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video
Step 4: Pick the symbol typeDefault is Embedded videoOther options Movie Clip etc
Step 5: Select if you want to have the audioLinked to the video or separate
CDM100
Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video
Step 6: Decide how much you want to compress the video
CDM100
Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video
Flash now compresses the video- This can take some time forlonger movies!
Step 7: Add the video to the stage and publish the movie
Step 8: Load the HTML file in a web browser
CDM100
Example (3): Example (3): Flash -Progressive VideoFlash -Progressive Video
The same process as example 2 except Flash creates a .FLVVideo file which is stored externally from the Flash .fla and .swf files
You do get the option to add a set of video controls- this can be added or removed using the properties inspector