1. CONTRASTED HTML5 & FLASH ANIMATION EFFECTS

2.  HTML5 AND FLASH ANIMATION CONTRASTED  ANIMATION IN WEBSITE DESIGN AND PRESENTATION  HTML5, JavaScript, and CSS  Flash Websites  WEB GAMES AND ANIMATION  Basic differences  Future development  VIDEO AND MOTION MEDIA ON THE WEB  Video players  Frame animations OVERVIEW

3. ANIMATING PRESENTATION WITH HTML

4. ANIMATING PRESENTATION WITH FLASH

5.  Animated Presentation with HTML  JavaScript, JS Libraries alter DOM and CSS  Easing Effects Example Easing Effects Example  Parallax Example Parallax Example  Animated Websites built with Flash  Actionscript  Animated Presentation Example Animated Presentation Example ANIMATED WEB DESIGN

6.  CASUAL/MOBILE GAMING  Both support 2D and 3D graphics, but Flash is more stable in 3D  Flash is not available on all mobile devices  HTML5 specs and experimental features are not standard on all mobile browsers  HTML5 games have “open source code,” not protected by.swf  HTML5 game trailer HTML5 game trailer  FLASH game example FLASH game example  THE FUTURE  Most new games are being built using operating system SDK’s for mobile devices (iOS, Android, etc. ); HTML5 and FLASH game development will serve the PC community more than most mobile device users. ANIMATION FOR CASUAL GAMES

7.  HTML 5 VIDEO TAG  FLASH VIDEO OBJECTS  Example  Browser  CSS ANIMATIONS (FRAMES)  Example (w3schools) Example  Example (CSS man) Example  Digital artwork and hard-coded transitions and effects  FLASH FRAME ANIMATIONS  Example (Stick man fighting) Example  Example (Moon landing story) Example VIDEO AND MOTION MEDIA

8.  Which technology is best for designing the presentation of a Web site?  Which technology is best for telling stories and animating visual narratives?  Which technology do more browsers support?  Why do designers still use Flash?  Why are designers supporting HTML5? QUESTIONS

9.  http://www.dragynstudios.com/articles/html-vs-flash/ http://www.dragynstudios.com/articles/html-vs-flash/  http://w3schools.com http://w3schools.com  Embed tag (Flash video plugin)  Video tag  http://blog.accusoft.com/2012/october/html5-vs-flash-what- do-you-need-to-know-part-1 http://blog.accusoft.com/2012/october/html5-vs-flash-what- do-you-need-to-know-part-1 SOURCES NOT LINKED IN PRESENTATION

10. http://media.accusoft.com/blog/1111/flash_vs_html5_infograph_v2_500x1358.jpg http://ralphwhitbeck.com/demo/jquery-ui-easing-effects-demo-and-documentation/ http://prinzhorn.github.io/skrollr/ disneyworld.disney.go.com/new-fantasyland/ https://www.youtube.com/watch?v=_K9FWhGfio0 www.kongregate.com/games/dampgnat/wonderputt/ http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1 div { width:100px; height:100px; background:red; position: relative; -webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */ animation:myfirst 5s; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {background:red;} to {background:cornflowerblue;} } /* Standard syntax */ @keyframes myfirst { 0%{background:red;} 100% {background:cornflowerblue;margin: 0px; width: 200px; height: 200px; } } Note: This example does not work in Internet Explorer 9 and earlier versions. www.optimum7.com/css3-man/animation.html https://www.youtube.com/watch?v=DsT_p0eqUec http://wechoosethemoon.com http://www.w3schools.com/html/tryit.asp?filename=tryhtml_video_html5_4 Your browser does not support the video tag. EXTRA LINKS AND CODE FOR PRESENTATION