HOW FLASH WORKS The Flash authoring environment is used to create Flash movies The .fla file is exported to a format called .swf The .swf file is included in the page using JavaScript Fade in: Flash is created using an authoring tool Click: This is exported to SWF (which can be used on web page) Click: SWF is included into page using JavaScript

TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 This is to demonstrate how there has been an evolution in different ways that the web has dealt with audio, animation, video etc. RealAudio streaming audio AUDIO

TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 Future Splash, forerunner to Flash This is to demonstrate how there has been an evolution in different ways that the web has dealt with audio, animation, video etc. ANIMATION AUDIO

TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 This is to demonstrate how there has been an evolution in different ways that the web has dealt with audio, animation, video etc. ANIMATION AUDIO RealVideo streaming video VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 This is to demonstrate how there has been an evolution in different ways that the web has dealt with audio, animation, video etc. ANIMATION AUDIO Flash 4 streaming audio VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 This is to demonstrate how there has been an evolution in different ways that the web has dealt with audio, animation, video etc. ANIMATION AUDIO VIDEO RealVideo 8 streaming video

TIMELINE: FLASH, VIDEO & AUDIO 1995 1996 1997 1998 1999 2000 2001 2002 2003 This is to demonstrate how there has been an evolution in different ways that the web has dealt with audio, animation, video etc. ANIMATION AUDIO VIDEO Flash MX Flash video

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies Vimeo launched VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies YouTube launched VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies Prototype ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies script.aculo.us ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies JQuery ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies iPhone APPLE ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies APPLE ANIMATION YouTube iPhone app VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies Safari BROWSER APPLE ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Chrome & Firefox Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Opera Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION Vimeo HTML5 Video VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER iPad APPLE ANIMATION VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION YouTube HTML5 Video VIDEO

TIMELINE: FLASH, VIDEO & AUDIO 2004 2005 2006 2007 2008 2009 2010 2011 IE9 Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION VIDEO

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> JavaScript can be used to replace an element on the page with a SWF file. You do not need to know JavaScript to do this.

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> Here is the <script> that adds the SWFObject.

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> Here is the <script> that adds the file to be played.

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> This code specifies the method for getting the file as well as its name. 1

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> Here is the name of the element to be replaced with Flash. The arrow points to it. Note how the value is the same as the value of the id attribute of this element. 1 2

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> This specifies the width of the SWF file. 1 2 3

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> This specifies the height of the SWF file. 1 2 3 4

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> This specifies the minimum version of Flash player needed for the movie to play. 1 2 3 4 5

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> If the browser does not support Flash, the element that would otherwise have been replaced is shown (instead of the SWF file).

UNDERSTANDING VIDEO FORMATS & PLAYERS Older browsers require a plugin to show video. Each plugin only plays certain formats. AVI VHS Flash Video Click: older browsers require plugin to play video Click: newer browsers support HTML5 video (no plugin) Click: Shows traditional movie formats - VHS, DVD, BluRay This sets tone for the concept that there are different online formats Click: Shows several online formats for video files Ogg Theora BluRay WebM TRADITIONAL MOVIE FORMATS ONLINE FORMATS Newer browsers also support HTML5 video and audio without the need for plugins. Windows Media QuickTime DVD MPEG H264

USING HOSTED VIDEO SERVICES ADVANTAGES DISADVANTAGES ALTERNATIVE 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 Host your own video Flash Video HTML5 <video> element Explain: how you can use hosted services can be simpler than doing it yourself Click: advantages of hosted video sites Click: disadvantages of hosted video sites Click: alternatives

PREPARING A FLASH VIDEO FOR YOUR SITE CONVERT TO FLV Shows steps to putting a video on your site using Flash Click: Convert to FLV Click: Finding a video player written in flash Click: Embedding the video player into your page (and specifying the location of the file you want to show) FIND A PLAYER EMBED IN PAGE Format: H264 Miro video converter Format: FLV Flash video osplayer.com longtailvideo.com swfobject.js custom JavaScript

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 puppy playing in the snow</p></div></body>

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 puppy playing in the snow</p></div></body> Explain: Flash variables are not used in this example, but adding this code is required for the player.

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 puppy playing in the snow</p></div></body> Explain: Parameters tell the Flash video player information about what it should show and how large it should be. (These are specific to the player.)

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 puppy playing in the snow</p></div></body> Explain: This shows the embed method and the location of the player file.

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 puppy playing in the snow</p></div></body> Explain: This shows the name of the HTML element to be replaced by the video. The arrow points to the element to be replaced.

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 puppy playing in the snow</p></div></body> Explain: This shows the width of the video.

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 puppy playing in the snow</p></div></body> Explain: This shows the height of the video.

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 puppy playing in the snow</p></div></body> Explain: This shows the required version of Flash player.

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 puppy playing in the snow</p></div></body> Explain: This script requires flashvars and params.

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 puppy playing in the snow</p></div></body> Explain: This is what is shown if the video player does not load.

HTML5: PREPARING VIDEO FOR YOUR PAGES SUPPORT Fade in: support for HTML 5 Click: Formats required to show HTML5 video across as many browsers as possible Click: How the controls for the video player are created FORMATS CONTROLS Recent browsers No DRM H264 WebM From browser Or via JavaScript

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>

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> Explain: The src attribute shows the path to the movie file.

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> Explain: The poster provides a holding image to show before the video starts playing.

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> Explain: The width and height can also be specified using CSS.

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> Explain: This tells the player to load the video file automatically.

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> Explain: This indicates that the player should show the video control bar.

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> Explain: This indicates that the video should play again once finished.

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> Explain: This is what is shown if the browser does not support HTML5 video.

MULTIPLE VIDEO SOURCES <video poster="images/puppy.jpg" width="400" height="300" preload controls loop> <source src="video/puppy.mp4" /> <source src="video/puppy.webm" /> <p>A video of a puppy playing in the snow.</p> </video>

MULTIPLE VIDEO SOURCES <video poster="images/puppy.jpg" width="400" height="300" preload controls loop> <source src="video/puppy.mp4" /> <source src="video/puppy.webm" /> <p>A video of a puppy playing in the snow.</p> </video> Explain: This shows the two <src> elements used to provide different video formats for different browsers. (Please note that there is no screen shot following this as it is same as the previous result.)

ADDING AUDIO TO WEB PAGES HOSTED SERVICE Options for adding audio to web pages: Click: hosted services Click: flash Click: HTML5 audio FLASH HTML5 SoundCloud MySpace Flash MP3 player Several available <audio> element Similar to <video>

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body>

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: Flash variables are not used in this example, but adding this code is required for the player.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: Parameters tell the Flash audio player information about what it should play.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This shows the embed method and the location of the player file.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This shows the name of the HTML element to be replaced by the audio player. The arrow points to the element to be replaced.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This shows the width of the player.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This shows the height of the player.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This shows the required version of Flash player.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This script requires flashvars and params.

ADDING FLASH AUDIO TO YOUR PAGES <script type="text/javascript"> var flashvars={}; var params={mp3:"../audio/test.mp3"}; swfobject.embedSWF("flash/mp3player.swf", "music-player", "200", "20", "8.0.0", flashvars, params); </script> <body><div id="music-player"><p>You cannot hear this track because this browser does not support our Flash music player.</p> </div></body> Explain: This is what is shown if the audio player does not load.

ADDING HTML5 AUDIO <body> <audio src="audio/test-audio.mp3" controls autoplay> <p>This browser does not support our audio format.</p> </audio> </body>

ADDING HTML5 AUDIO <body> <audio src="audio/test-audio.mp3" controls autoplay> <p>This browser does not support our audio format.</p> </audio> </body> Explain: The src attribute points to the file to be played.

ADDING HTML5 AUDIO <body> <audio src="audio/test-audio.mp3" controls autoplay> <p>This browser does not support our audio format.</p> </audio> </body> Explain: This shows that we want to display controls for the player.

ADDING HTML5 AUDIO <body> <audio src="audio/test-audio.mp3" controls autoplay> <p>This browser does not support our audio format.</p> </audio> </body> Explain: This indicates that the audio should start automatically.

MULTIPLE AUDIO SOURCES <body> <audio controls autoplay> <source src="audio/test-audio.ogg" /> <source src="audio/test-audio.mp3" /> <p>This browser does not support our audio format.</p> </audio> </body>

MULTIPLE AUDIO SOURCES <body> <audio controls autoplay> <source src="audio/test-audio.ogg" /> <source src="audio/test-audio.mp3" /> <p>This browser does not support our audio format.</p> </audio> </body> Explain: The <src> elements provide different audio formats for different browsers.

Flash allows you to add animations, video and audio to the web. SUMMARY Flash allows you to add animations, video and audio to the web.

Flash is not supported on iPhone or iPad. SUMMARY Flash is not supported on iPhone or iPad.

SUMMARY HTML5 introduces new <video> and <audio> elements to add video and audio to web pages, but these are only supported in the latest browsers.

SUMMARY Browsers that support the HTML5 elements do not use the same video and audio formats, so you supply your files in different formats.