COAP:COAP-2100/week6-2011
Jump to navigation
Jump to search
Week 5
Topics Covered
- Dealing with pictures (some reminders about formats and size)
- Strategies for dealing with Video formats
- Video with Flash
- Encoding of Flash videos
- Creating Flash files with the video component
- Adding captions (sub-titles) with Timed Text
- XML (some principles as explained in the Editing XML tutorial)
Teaching materials
- Image File Formats (Wikipedia)
- Video streaming, Multimedia container format, Codec (some short background info with links)
- Flash video component tutorial (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
Classroom activities
- Monday
- Images (reminder about formats and size)
- Creating Flash videos: Flash video component tutorial
- Video formats (Multimedia container format)
- http://video.google.com/videoadvancedsearch (Google video search)
- https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
- Video encoding for Flash and Timed Text (Flash video component tutorial, only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
Code template for timed text:
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head><styling></styling></head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Let´s start</p>
</div>
</body>
</tt>
Code template for times text (advanced):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="0" dur="9" style="title">Something</p>
<p begin="30" dur="5">My
<span tts:backgroundColor="yellow" tts:color="black">
something</span>
</p>
<p begin="35" dur="5">
<span tts:backgroundColor="transparent"></span>
Working hard ....
</p>
<p begin="40" dur="4">The outside (not my bike)</p>
</div>
</body>
</tt>
- HTML 5 Video tag (short info)
Homework 5
Create a Flash video with captions
- Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
- Prepare a flash "movie clip" that includes playback with the video component plus captions.
- You can choose any film you like, but preferably one that you made yourself (originality bonus)
Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.
I suggest that those who already turned in 3-4 homeworks skip this exercice. I will not test Flash in the final exam. I only require that you have some very basic understanding of timed text (i.e. use the "p" tag to define start and duration of captions ....)
When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf, flv, js. To get this right, I suggest to use a new folder for this project.
Due: Wednesday, week 6