mLearnCon 2010: Richard Clark – Surviving without Flash

Surviving without Flash: Some Practical Alternatives

Richard Clark
NextQuestion
http://nextquestion.net

mLearnCon Resources http://rdclark.github.com/mlc10

My first session on the last day of mLearnCon (Thursday, June 17th) focused on JavaScript reources to use while we all wait for HTML 5 and potential WYSIWYG editors to be as robust as we will all need. Here’s my live blog of the session, and please keep in mind that I’m an isntructional designer with basic Flash timeline and AS2 skills = I’m not a programmer, but I have the heart of a programmer! I enjoy working with programmers and try to understand their world so the storyboards I write make sense from their development perspective.

HTML + Graphics
Online, static art, possibly server generated.

——
knowledge gap
——–

  • 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)

Moving to JavaScript

Is very similar to AS2 and AS3. Very good resource: “Javascript, the Good Parts” by Douglas Crockford (O’Reilly) and Crockford’s YUI Theatre lectures. Talks about the danger points and what to watch out for. Free tutorials on JS. The graphics model is still the JS world instead of Action Script.

Sprite-based Animation

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).

SVG

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.

<canvas>

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)

Summary

  • 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)

Richard Clark
NextQuestion
rdclarck@nextquestion.net and rclark@intrepidls.com
Ph: 1.408.605.2653
http://nextquestion.net

Share

One thought on “mLearnCon 2010: Richard Clark – Surviving without Flash”

Comments are closed.