1 / 10

HTML5 & FLASH ANIMATION EFFECTS

HTML5 & FLASH ANIMATION EFFECTS. CONTRASTED. Overview. 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

judd
Download Presentation

HTML5 & FLASH ANIMATION EFFECTS

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. HTML5 & FLASHANIMATION EFFECTS CONTRASTED

  2. Overview • 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

  3. ANIMATING PRESENTATION WITH HTML

  4. ANIMATING PRESENTATION WITH FLASH

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

  6. ANIMATION FOR CASUAL GAMES • 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 • 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.

  7. Video and Motion Media • HTML 5 VIDEO TAG • FLASH VIDEO OBJECTS • Example  Browser • CSS ANIMATIONS (FRAMES) • Example (w3schools) • Example (CSS man) • Digital artwork and hard-coded transitions and effects • FLASH FRAME ANIMATIONS • Example (Stick man fighting) • Example(Moon landing story)

  8. Questions • 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?

  9. SOURCES NOT LINKED IN PRESENTATION • http://www.dragynstudios.com/articles/html-vs-flash/ • 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

  10. EXTRA LINKS AND CODE FOR PRESENTATION 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 <!DOCTYPE html> <html> <head> <style> 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; } } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> </body> </html> 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 <!DOCTYPE html> <html> <body> <!--FLASH plugin and object/embed tags--> <object data="movie.mp4" width="320" height="260"> <embed width="320" height="240" src="movie.swf"> </object> <!--HTML5 video support with video tag--> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html>

More Related