Adobe Edge
Marián Rusnák
LaSArIS
24. 10. 2013

Overview
•Adobe Flash
•HTML5
•Flash vs. HTML5
•Adobe Edge
•Edge Animate DEMO

Adobe Flash
•Software platform
–Adobe Flash Player
–Adobe AIR
•Used to
–Video on websites
–RIA
http://cdn.dice.com/wp-content/uploads/2011/11/adobe-flash-logo.jpg
http://farm3.staticflickr.com/2608/3771832508_c0d0bd8896_z.jpg?zz=1

Adobe Flash
•More than 500 million devices
•More than 20 000 apps in mobile markets
•24 of the top 25 Facebook games
•
•
•
•
•http://www.adobe.com/cz/products/flashruntimes/statistics.html
•

Adobe Flash
•Consistency across devices
•Animations
•Multimedia

But...
•Proprietary
•Security
•Performance?
•
•Mobile browsers!!!

HTML5
•Multimedia
–<video> - 82.32% support
•MP4 - 60.85%
•WebM - 55.2%
•Ogg - 48.71%
–<audio> - 82.32% support
•MP3
•WAW
•Ogg
E:\MUNI\PV226 Seminar LaSArIS\HTML5_Tech_Classes_128\HTML5_Multimedia_128.png

HTML5
•Graphics and animations
–<canvas> - 80.73%
–SVG
–CSS3
–
•
E:\MUNI\PV226 Seminar LaSArIS\HTML5_Tech_Classes_128\HTML5_3D_effects_128.png

Flash vs. HTML5
•Consistency
•Multimedia
•Animations
•
•
•Proprietary
•Security
•Mobile browsers
•Inconsistent across browsers (getting better)
•Browser support
•Performance of animations
•
•Open standard

Adobe Edge
•Suite of web development tools
E:\MUNI\PV226 Seminar LaSArIS\edge_tools.PNG

Adobe Edge Animate
•Flash-like web development
•Timeline
•Animated HTML
•
http://html.adobe.com/_/img/edge/tools/icons/hero/an.png

Adobe Edge
•Edge Reflow – CSS design
•
•Edge Code – code editor
•
•Edge Inspect – preview in browsers
on various devices

Adobe Edge
•Edge Web Fonts – fonts library
•
•Typekit – commercial fonts
•
•PhoneGap Build – mobile apps packaging
http://html.adobe.com/_/img/edge/tools/icons/hero/t.jpg
http://html.adobe.com/_/img/edge/tools/icons/hero/bd.jpg

Edge Animate DEMO
•