Surviving without Flash: Some Practical Alternatives
mLearnCon Resources http://rdclark.github.com/mlc10
HTML + Graphics
Online, static art, possibly server generated.
- HTML, JS, Graphics (Sprites/static Bg w/ animations, SVG/scalable vector graphics).
- So-called HTML 5 -JS (On/Off-line, <canvas> tag, SVG, sensors.
- Cross-platform toolkits (Common subset)
- Native apps (write specifically for that platform)
spritely.net (This blew me away… really nice!) The bird animations are just a 3-layer PNG file, the JS plays through the layers. (Me: Cool!) Open source, under the MIT license, even for work-for-hire. Your code can remain proprietary.
$fx() Library Sprites w/ movement and alpha
jsAnim Sprites, tween any property
Glimmer Free set of Wizards that run on Windows that create animations using jQuery, animations on top of jQuery (MS OS).
Raw XML / Using Raphael JS library Have to create without a timeline, do it all programmatically. Richard says it’s the better option, but not easy.
2D drawing surface in the browser. Supported by WebKit, Firefox, Opera, IE8+. WebKit is leading the charge currently.
Will it Run?
Basically, everyone is adopting WebKit; maintained by Apple but is open and supported world-wide. WebKit for iPhone is one version behind for desktop, so you have to test on both devices. That’s the way the build cycle is currently. Android is about 2 versions behind. Animations caveat… processing on the handheld devices is slower than on the desktop (hardware acceleration). May need to scale down for mobile.
Moving from Flash Development
- From timeline to code… Use the Graphics class in AS3 to practice inside Flash.
- Design for sprite-based animation when possible (avoiding drawing at run time).
- Consider Glimmer wizards
- Mock-up in Flash, export the tweens to XML (XFL in Cs5)
- Separate content layer from the presentation layer
- Automate unit testing (QUnit),
- Use source code control (Subversion, Git)
- Cross the gap
- Learn graphics programming
- WebKit and Opera are your friends
- Evaluate the JS graphics libraries (see if they do what you need to do)
firstname.lastname@example.org and email@example.com