HTML5 Is Ready – Rebuttal to Facebook’s native app

Here’s a great “HTML5 Love Story” about the team at Sencha, who is passionate about using proper technologies for the one open web, who knew better than to trust that the failure of Facebook to create a reliable HTML5 app for users was because HTML5 wasn’t ready (as Facebook claimed). They built this demo to prove that HTML5 can do all that the now gone native FB app does and faster. The trick is you have to know what you are doing. Something it seems, FB doesn’t. Ready the full story and watch the comparison video: The Making of Fastbook: An HTML5 Love Story | Blog | Sencha. Or go try it yourself. Visit on your favorite mobile browser.

When we started what became Sencha, we made a bet on the web: a bet that modern application development didn’t need anything except the browser, a great set of frameworks and a great set of tools. With those three weapons in hand, we knew developers could build applications that would delight users. The advent of HTML5 upped the game and it gave developers even more tools to let them treat the browser as an application development platform and not a page rendering engine. Developers sprang at the opportunity and unleashed a torrent of apps — on both desktop and mobile — that leveraged the new HTML5 capabilities to build amazing applications using web standards.

So, when Mark Zuckerberg said HTML5 wasn’t ready, we took a little offense to the comment.

We thought to ourselves: HTML5 can’t really be the reason that Facebook’s mobile application was slow. We knew what the browser on modern smart phones was capable of and what kind of rich capabilities HTML5 offered. We saw the latest generation of mobile devices — running at least iOS 5 or Android 4.1 — push ever increasing performance and HTML5 implementation scores. But perhaps most importantly, we’d seen what our customers were building and the amazing things they were creating using HTML5.

I totally agree with this sentiment and believe that native apps are the new flash to the web. They are fun and seem to be the way, but give it a few years and these native apps will quickly give way to web based apps that are browser based and offer speed and flexibility and consistence to the web experience. Sure, flash can do things that html still can’t. But I’m pretty sure no one would want to build their whole site in flash today. They would put the parts that need to be or the parts that belong in flash in flash and let the rest be standards compliant open web. Facebook has essentially built a flash based website for phones to access their website content. They will have to maintain and update this separate from their “real” version.

Our smart phones are helping us converge our devices, as in we no longer need a phone a camera a gps a notepad a … But it is not helping us converge our internet or content. We currently need to use a website in one way at our desk and another way on the go. Websites and the internet should have the same capabilities and the same uses no matter where we decide to use it. Sencha is showing us that, built correctly, HTML5 truly is ready to handle many things that belong in the browser rather than in a native app. We should never need to download a native app to access website data that we normally would just login at our desk. That’s inefficient, divergent and complicated. It’s against the openness and standards everyone preached and pined for and indeed “won” when flash-haters succeeded in ousting flash from mobile browsers. I actually respect Adobe for finally pulling the plug there because they too, believe in the web (and at the time, I was a full-time flash developer). I believe in the web too and that’s why I call it the one open web.

Flash Gaming Technology – Notes from Lee Brimelow’s Adobe Presentation

Here are my notes on the presentation from Lee Brimelow of Adobe at the Atlanta Adobe Users Group Meeting:

What is flash for? Doing things the browser can’t! If you can use HTML5 then do it. Learn about it and learn the capabilities and know when to use what tool and when they are appropriate. It might not be easy, but it is where the industry is moving, don’t hide from it! If you want to do things that are to advanced for the current standards and browsers, then flash is most likely where you need to be. Adobe will always position Flash to be ahead of what is possible with browsers.

While you can do some gaming in browsers today, flash is now positioned to be the best solution for game development. It even can compile to native apps for ios and many successful apps have done so. Adobe has put in a site to showcase these games at:

Adobe has a new partnership with unity. See example game: Angry bots.

Console sales are declining. We have so many other outlets to game: browsers, social, mobile devices… Soon professional games will be via Facebook and browsers.

Facebook angry birds game built in flash using stage 3D.

New gaming features:
Mouse lock.
Right and middle click events.
Concurrency, multi threading for player. Yo will not lock up with intense calculations.
Native extension Burls and extensions.

Sprite sheet exporter!
Create js exporter, via Grant Skinner
Html 5 export to canvas a vector art.


11.3 – latest flash player
full screen keyboard input.
Background auto updates.
Audio streaming via net stream.
Improvements for low latency audio.
Stage 3D progressive texture streaming.
Lzma compression sort door byte array.
Native bitmap encoding to png and jpg.
Bitmap data draw with quality
Frame labels.

Air specific
USB debugging for ios
Native ios simulator support
Enhanced background support for ios
Android 4 stylus support
Mac app store support

Dolores, upcoming updates
As workers
Advanced profiling
Better sort for hardware accelerated video cards

Refactorizing code base
Work on as virtual machine
Many action script language updates: stringent static typing as default, hardware oriented numeric types, type inference…

Flash Roadmap Update – Notes from Mike Chambers’ Adobe presentation

Here are my notes on the presentation from Mike Chambers of Adobe at the Atlanta Adobe Users Group Meeting:

Honestly, the announcement from Nov was handled horribly, it was a mess. Adobe has learned a lot and there have been many changes since then to keep this from happening again. They are really pushing transparency and have begun publishing white papers that explain the flash roadmap and explain plans and commitments.

These white papers put out by Adobe is definitive resource for flash.

Flash runtimes is one shared core player. Flash player and adobe air both share same core.

Flash has filled many niches: animation, video, applications, games, rich media, art (Flash as an expressive medium).

While none of these functions are going anywhere, HTML5 is bringing a lot of this capability to browsers natively.

Adobe will now focus on advanced video and gaming in Flash as they are the areas that aren’t possible in web standards.

Introducing Premium features – set of features in API available for licensing. Only example for now is Stage3D used in conjunction with domainMemory API.

“I’m doing this for the love of flash, everyone else is doing it for the money” – Mike Chambers

The funding for the flash player is contradictory since more tools to publish to flash player have come out, it draws resources and funding away from flash player. This revenue sharing model allows for the player to remain funded in the current flash ecosystem.

Linux: Ppapi = pepper codename for browser plugin API which will let the player do it’s thing rather than worry about browser and OS. Working with google chrome on Linux already.

Windows 8: working closely with Microsoft to have support for flash player and air on Windows 8.

All updates will be added to the white paper (link above) along with the 2 year roadmap.

Thanks for visiting ATL and working on making this well understood and making Flash even better. I’m Always a fan of using flash when it’s the right tool for the job.

Link: Why are standards such a good thing?

Flash is always the bleeding edge and can move/adapt much faster than html because it is controlled by one entity. Which is some people’s criticism – they don’t want to rely too much on Adobe, I partly agree, but I’d much rather rely on Adobe than many other tech companies: especially Microsoft, Apple or even Facebook…

Link: Why are standards such a good thing? – ( from (author unknown) at

Interactive Generative Art Series – 05 – wild anchor


While in the previous step (Generative Art 04 Using a target other than the mouse) in this generative actionscript art tutorial series it was cool to see everything move on it’s very own, it seemed a bit slow or fake, or maybe just plain uninteresting. Tinkering with the color, I thought if we set a minimum and maximum value for each red green and blur we could control the colors a bit more and still let them be generative. Plus I wanted the anchor to move a bit more and thus paint the curves and lines in a more interesting fashion. To do this we ramp up the range of the change rate of the anchor velocity. I really enjoy this example because it is faster, so we get more of those sweeping arcs, but also when the anchor slows down we get some very delicate curves and twists. With just a couple changes from the last example (which frankly seemed a bit chaotic), now I’m starting to see for the first time how to set some controls in the code which will lead to a visually appealing and still randomly generative result.

For some reason I find it gratifying that the final swf is still a mere 2kb and change. Perhaps all this current focus on HD and 3D gives us the sense that to be good it needs to have a large footprint. Sometimes the magic or value is in how much you can accomplish with less (less is more)

05 Wild Anchor, play here

Please visit the blog article to view this interactive flash content. Flash plug-in required: Get Adobe Flash player

actionscript source code

[cc lang=”actionscript”]
var ball:Sprite = new Sprite();, .5);, 0, 5);;

var anchor:Sprite = new Sprite();, .5);, 0, 12);;

var div:Number = .1;
var line_max_width:Number = 48;
var line_min_width:Number = 1;
var line_width:Number = randomRange(line_min_width, line_max_width);
var line_width_velocity:Number = 0;
var dampen:Number = 0.95;

var ballax:Number = 0;
var ballay:Number = 0;
var oldx:Number = ball.x;
var oldy:Number = ball.y;

var anchorvx:Number = 0;
var anchorvy:Number = 0;

anchor.x = stage.stageWidth/2;
anchor.y = stage.stageHeight/2;

var colors:Object = new Object();
colors.r = 255;
colors.g = 255;
colors.b = 255;
colors.rv = 0;
colors.gv = 0; = 0;
colors.rmin = 150; //0
colors.rmax = 250; //100
colors.gmin = 0; //100
colors.gmax = 150; //200
colors.bmin = 0; //150
colors.bmax = 100; //250
colors.rate_of_change = 12;
var color_first:Number = 0xFFFFFF;
var color_second:Number = rgb2hex(colors.r, colors.g, colors.b);
var gradientBoxMatrix:Matrix = new Matrix();

function loop () {

oldx = ball.x;
oldy = ball.y;

anchorvx += randomRangeAxis(10);
anchorvy += randomRangeAxis(10);

anchor.x += anchorvx;
anchor.y += anchorvy;

anchorvx *= dampen;
anchorvy *= dampen;

if(anchor.x > stage.stageWidth) {
anchor.x = 0 – anchor.width;
else if(anchor.x < 0 – anchor.width) { anchor.x = stage.stageWidth; } if(anchor.y > stage.stageHeight) {
anchor.y = 0 – anchor.height;
else if(anchor.y < 0 – anchor.height) { anchor.y = stage.stageHeight; } ball.x -= ballax = (ballax + (ball.x – anchor.x) * div) * .9; ball.y -= ballay = (ballay + (ball.y – anchor.y) * div) * .9; line_width_velocity += randomRangeAxis(1); line_width += line_width_velocity; line_width_velocity *= dampen; if(line_width > line_max_width) {
line_width = line_max_width;
line_width_velocity = 0;
else if (line_width < line_min_width) {
line_width = line_min_width;
line_width_velocity = 0;

color_first = color_second;
color_second = rgb2hex(colors.r, colors.g, colors.b);

var dx:Number = ball.x – oldx;
var dy:Number = ball.y – oldy;;
gradientBoxMatrix.createGradientBox(Math.abs(dx), Math.abs(dy), Math.atan2(dy,dx), Math.min(oldx, ball.x), Math.min(oldy, ball.y));, [color_first, color_second], [1,1], [0, 255], gradientBoxMatrix);, ball.y);

setInterval(loop, 1000/30);
function rgb2hex(r:Number, g:Number, b:Number):Number {
return(r<<16 | g<<8 | b); } function color_step(){ colors.rv += randomRangeAxis(colors.rate_of_change); colors.r += colors.rv; colors.rv *= dampen; if (colors.r > colors.rmax) {
colors.r = colors.rmax;
} else if (colors.r < colors.rmin){ colors.r = colors.rmin; } colors.gv += randomRangeAxis(colors.rate_of_change); colors.g += colors.gv; colors.gv *= dampen; if (colors.g > colors.gmax) {
colors.g = colors.gmax;
} else if (colors.g < colors.gmin){ colors.g = colors.gmin; } += randomRangeAxis(colors.rate_of_change); colors.b +=; *= dampen; if (colors.b > colors.bmax) {
colors.b = colors.bmax;
} else if (colors.b < colors.bmin){
colors.b = colors.bmin;
//random number between min and max
function randomRange(max:Number, min:Number = 0):Number {
return Math.random() * (max – min) + min;
//random number range centered at 0 with the specified max, randomRange(-max, max)
function randomRangeAxis(max:Number):Number {
return Math.random() * (max * 2) – max;



View the swf and get the fla source file.

Interactive Generative Art Series – 01 – Color

After updating the line width to be still random, but more of a gradual step in variation (in the first experiment in this series), the second most obvious edit to the original in this generative art series is the color of the line. While it would be pretty simple to update the code to use any one solid color in place of the black, I wanted the color to vary over time. The simplest way I know to achieve this is to create a variable to hold the color value (as a number) and then change it over time. So here, I have a color chosen at random and just increment it every time the loop function executes by 1024. I chose this amount because it would loop through and eventually get back to where it started while restricting the color scheme. I think it brings a lot to the design to have color – and I especially like how it randomly creates a color scheme and sticks to it. Totally random colors may look a bit much, while problematically it’s not too difficult to get, it may be difficult to look at once it’s created. Above are a few screen shots of the random colors generated:

01 Color, play here

Please visit the blog article to view this interactive flash content. Flash plug-in required: Get Adobe Flash player

Source Code

[cc lang=”actionscript”]
var ball:Sprite = new Sprite();, 1);, 0, 30);;

var div:Number = .1;

var ax:Number = 0;
var ay:Number = 0;

var line_max_width:Number = 50;
var line_min_width:Number = 0;
var line_width:Number = Math.random() * line_max_width;
var line_width_velocity:Number = 0;
var dampen:Number = 0.95;

var color:Number = Math.floor(Math.random() * 16777215);

function loop () {
ball.x -= ax = (ax + (ball.x – mouseX) * div) * .9;
ball.y -= ay = (ay + (ball.y – mouseY) * div) * .9;

line_width_velocity += Math.random() * 6 – 3;
line_width += line_width_velocity;
line_width_velocity *= dampen;
if(line_width > line_max_width) { line_width = line_max_width; }
if (line_width < line_min_width) { line_width = line_min_width; }, color+=1024, 1);, ball.y);

setInterval(loop, 1000/30);
You’ll see if you’re following along that this only add 2 lines of code from the last version. We simply create and instantiate (with a random value) the color variable and then apply it in place of the black to the lineStyle and simultaneously increment it. Check the example swf here and get the fla here.

Interactive Generative Flash Art Series Intro

The world has been excited by html5/css3 recently and has been pushing limits and experimenting. It’s been exciting and funny at the same time – most of the things that are amazing people in html5 experiments have been done 5 years ago in flash. I’ve enjoyed it so much though because it has brought me back to what made me fall for flash initially: sites like and People that wrote books about programming actionscript like Keith Peters, Jim Bumgardener Colin Moock, Robert Penner etc… and then art by people like Erik Natzke. I’m a geek and these guys are some of my heros (and don’t think that list is exhausted, I’ve got plenty of unmentioned flash heros), but not just because they could/can do what they do, but because they selflessly (open source-ly) taught me how to do some of it. The magic of creating something so engaging, responsive, animated, unique, random. Little experiments that feel like they contain so much life and are so lightweight -easily less than 10,240 bytes (read 10kb). I knew in high school trig and calculus that those formulas had power, but seeing it unfold and interact with it really is magical to me.


A little inspiration

So, I’ve been toying with a lot of the things that actually taught me (or at least pushed me to learn) the basics of programming. With the years experience under my belt now I’m understanding it on a totally different level and all I want to do is find more things to make balls and lines bounce, move and swirl. And I also want to share it. Well, I recently stumbled upon a flash sneak peak video by Erik Natzke about some of his technique and then his open source files and really had some fun. Anyways I wanted to share some of the experiments that came from it. Let me know your thoughts and download the code and play with it. Let me know what else you come up with and share what you learn. I’ll start this series with a post of the original experiment from Erik on his blog here, Flash Code 101.

Natzke’s Flash Code 101

Please visit the blog article to view this interactive flash content. Flash plug-in required: Get Adobe Flash player

If it looks like greek to you, I’d suggest going to Keith Peter’s tutorials (especially the first few on gravity, easing and elasticity).

Actionscript 3

For something so fun, it’s amazing that it’s barely over a dozen lines of code.
[cc lang=”actionscript”]
var Ball:Sprite = new Sprite();, 1);, 0, 30);;

var div:Number = .1;
var ax:Number = 0;
var ay:Number = 0;

function loop () {
Ball.x -= ax = (ax + (Ball.x – mouseX) * div) * .9;
Ball.y -= ay = (ay + (Ball.y – mouseY) * div) * .9;*10, 0, 1);, Ball.y);

setInterval(loop, 1000/30);

Here’s the swf in action, or download the fla to play (if you really would rather download a file than copy 15 lines of code).


Well, I’ll be playing with this code and others and posting the experiments with some screenshots of what I create get’s created.

Why I {heart} Flash and a Smart Point for Adobe

nytimes example of adobe ad Checking out an interesting article about Diaspora (back the project and the cause if you can) on NYTimes and then I noticed the words adobe and Apple in the same space. The ad reads “We Love Apple” and is followed by the Adobe logo. What a joke I thought, it takes a lot of gumption for Adobe to say they love Apple right now, but I’m sure they really do. Despite all the negative things Apple has been doing and saying towards Flash and Adobe in general. I admit I’m biased, but…

I {heart} flash

I would rather stop using Apple than stop using Adobe. I agree with the openness and empowering software that Adobe provides. True, it’s expensive and true it’s not perfect, but I’ve found Adobe to be a great company that cares about the web and progress. During the whole Flash/iPhone debate I’ve been bothered by the lack of response from Adobe. It was nice that they were above the name calling and flat out lying that Steve Jobs and Apple have turned to, but to be honest- a little disheartening that they had nothing to say. Then the ‘Thoughts on Flash’ came out and I was amazed at the silence from Adobe. This is the perfect and genius response to the unprofessional lashes from Apple. From the 3.3.1 iPhone developer clause to the sheer CLOSEDness of Apple in general. I used to be a big fan of Apple because they made a great product. Perhaps I gave them a little boost because who doesn’t like an underdog. But they have proven to me at least to be more closed and more evil than even Microsoft when they packaged IE with their OS. (Although Apple has done that too with Safari and iTunes, but I digress).

What we don’t love is anybody taking away your freedom to choose what you create, how you create it, and what you experience on the web.

I give props to Adobe. They were surely disturbed when Apple declared war on flash, but rather than stooping to the level of Steve Jobs, they thought it out and made an honorable move. I know it’s not the end, but if things continue a check-mate/game-point-match may be in order by the end of the decade…

Learn more at adobe. We love choice and the Truth about Flash.
Flash Truth Stats