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.

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
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

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

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

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

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

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

Explain: how these technologies change, and older browsers do not always support the most recent technologies Vimeo launched VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies YouTube launched VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies Prototype ANIMATION VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies script.aculo.us ANIMATION VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies JQuery ANIMATION VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies iPhone APPLE ANIMATION VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies APPLE ANIMATION YouTube iPhone app VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies Safari BROWSER APPLE ANIMATION VIDEO

Chrome & Firefox Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION VIDEO

Opera Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION Vimeo HTML5 Video VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER iPad APPLE ANIMATION VIDEO

Explain: how these technologies change, and older browsers do not always support the most recent technologies BROWSER APPLE ANIMATION YouTube HTML5 Video VIDEO

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=" 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.

<head> <script type="text/javascript" src=" 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.

<head> <script type="text/javascript" src=" 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.

<head> <script type="text/javascript" src=" 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

<head> <script type="text/javascript" src=" 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

<head> <script type="text/javascript" src=" 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

<head> <script type="text/javascript" src=" 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

<head> <script type="text/javascript" src=" 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

<head> <script type="text/javascript" src=" 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>

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 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.

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback