1 / 85

HOW FLASH WORKS

The Flash authoring environment is used to create Flash movies. The .swf file is included in the page using JavaScript. The .fla file is exported to a format called .swf. HOW FLASH WORKS. TIMELINE: FLASH, VIDEO & AUDIO. 1995 1996 1997 1998 1999 2000 2001 2002 2003.

sheae
Download Presentation

HOW FLASH WORKS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Flash authoring environment is used to create Flash movies The .swf file is included in the page using JavaScript The .fla file is exported to a format called .swf HOW FLASH WORKS

  2. TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 RealAudio streaming audio AUDIO

  3. TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 Future Splash, forerunner to Flash ANIMATION AUDIO

  4. TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 ANIMATION AUDIO RealVideo streaming video VIDEO

  5. TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 ANIMATION AUDIO Flash 4 streaming audio VIDEO

  6. TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 ANIMATION AUDIO VIDEO RealVideo 8 streaming video

  7. TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 ANIMATION AUDIO VIDEO Flash MX Flash video

  8. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Vimeo launched VIDEO

  9. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 YouTube launched VIDEO

  10. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Prototype ANIMATION VIDEO

  11. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 script.aculo.us ANIMATION VIDEO

  12. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 JQuery ANIMATION VIDEO

  13. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 iPhone APPLE ANIMATION VIDEO

  14. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 APPLE ANIMATION YouTube iPhone app VIDEO

  15. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Safari BROWSER APPLE ANIMATION VIDEO

  16. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Chrome & Firefox BROWSER APPLE ANIMATION VIDEO

  17. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Opera BROWSER APPLE ANIMATION VIDEO

  18. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 BROWSER APPLE ANIMATION Vimeo HTML5 Video VIDEO

  19. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 BROWSER iPad APPLE ANIMATION VIDEO

  20. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 BROWSER APPLE ANIMATION YouTube HTML5 Video VIDEO

  21. TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 IE9 BROWSER APPLE ANIMATION VIDEO

  22. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body>

  23. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body>

  24. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script><script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body>

  25. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript">swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body> 1

  26. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf","bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body> 1 2

  27. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body> 1 2 3

  28. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body> 1 2 3 4

  29. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body> 1 2 3 4 5

  30. ADDING A FLASH MOVIE TO YOUR WEB PAGE <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/swfobject/2.2/swfobject.js"> </script> <script type="text/javascript"> swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0"); </script></head><body><div id="bird"><p>An animation of a bird taking a shower</p></div></body>

  31. UNDERSTANDING VIDEO FORMATS & PLAYERS Older browsers require a plugin to show video. Each plugin only plays certain formats. AVI VHS Flash Video BluRay Ogg Theora WebM TRADITIONAL MOVIE FORMATS ONLINE FORMATS Newer browsers also support HTML5 video and audio without the need for plugins. Windows Media DVD QuickTime MPEG H264

  32. USING HOSTEDVIDEO SERVICES ADVANTAGES DISADVANTAGES ALTERNATIVE Host your own video Flash Video HTML5 <video> element Easy to upload (no encoding required) Do not pay for bandwidth used Not exclusive to your web site No ads allowed on some sites Some insert own ads before content

  33. PREPARING A FLASHVIDEO FOR YOUR SITE CONVERT TO FLV FIND A PLAYER EMBED IN PAGE Format: H264 Miro video converter Format: FLV Flash video converter osplayer.com longtailvideo.com swfobject.js custom JavaScript

  34. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  35. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript">var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  36. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={};var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  37. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"};swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  38. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf","snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  39. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  40. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  41. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  42. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0",flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  43. ADDING FLASH VIDEO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={movie:"../video/puppy.flv"}; swfobject.embedSWF("flash/player.swf", "snow", "400", "320", "8.0.0", flashvars, params);</script><body><div id="snow"><p>A video of a puppyplaying in the snow</p></div></body>

  44. HTML5: PREPARING VIDEOFOR YOUR PAGES SUPPORT FORMATS CONTROLS Recent browsers No DRM H264 WebM From browser Or via JavaScript

  45. ADDING HTML5 VIDEO <body> <video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300" preload controls loop> <p>A video of a puppy playing in the snow.</p></video></body>

  46. ADDING HTML5 VIDEO <body><video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300" preload controls loop> <p>A video of a puppy playing in the snow.</p></video></body>

More Related