| Motion and Animated Graphics | ||||
| Unit 7 | LP2 | |||
| # of Days | 1 | Addendums | Resources | |
| LP Prior Knowledge | Unit #1-6, Unit #7 LP1, PR OFAD 2250 | Differentiation | Animated .gifs tutorials (For students not interested in
motion studies) |
|
| Lesson Objective | Motion Graphics and Animated Designs | |||
| Lesson Assessment | Lecture/Discussion | Changes for Next Time | ||
| Benchmarks or Standards | No Assessment | (Dates) | ||
| Materials Needed | Previous Web Page Directory, Provided Embed Code,
an open source converter and Video Tutorials: http://www.videocopilot.net/basic/ |
LP3 | ||
| Time | Student Learning Task or Activity | METHOD | Teacher Activity | |
| Students are to copy and paste the following code
into their html code and replace the dummy titles with their movie titles
after converting their motion graphic movie file to the needed extensions for
the embedded code, They will download an open source converter. Suggested
converter: converter suggestions: http://www.mirovideoconverter.com Code: <video id="movie" controls poster="XystoresLogo.jpg"> <source src="XystoresLogo.mp4" type="video/mp4" /> <source src="XystoresLogo.webm" type="video/webm" /> <source src="XystoresLogo.theora.ogv" type="video/ogg" /> <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':['XystoresLogo.jpg',{'url':'XystoresLogo.mp4','autoPlay':false}]}" /> <img id= "moviepic" alt="Xystores Cheap Cheap" src="XystoresLogo.jpg" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download video:</strong> <a href="XystoresLogo.mp4">MP4 format</a> | <a href="XystoresLogo.theora.ogv">Ogg format</a> | <a href="XystoresLogo.webm">WebM format</a> </p> <!--Don't forget to set the size of the video according to the media queries --> |
Demonstration | Demonstration and Sample Video Embed Provided | Link | |