CONTRASTED HTML5 & FLASH ANIMATION EFFECTS

 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

ANIMATING PRESENTATION WITH HTML

ANIMATING PRESENTATION WITH FLASH

 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

 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

 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

 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

   Embed tag (Flash video plugin)  Video tag  do-you-need-to-know-part-1 do-you-need-to-know-part-1 SOURCES NOT LINKED IN PRESENTATION

disneyworld.disney.go.com/new-fantasyland/ div { width:100px; height:100px; background:red; position: relative; -webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */ animation:myfirst 5s; } /* Chrome, Safari, Opera myfirst { from {background:red;} to {background:cornflowerblue;} } /* Standard syntax 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 Your browser does not support the video tag. EXTRA LINKS AND CODE FOR PRESENTATION