Flash Is So 2011, HTML5 Is So 2014

Here's a secret: Flash is far from dead, in fact it's being adopted at a higher-rate than ever on multiple mobile platforms.  In recent ZDnet article Christopher Dawson wrote:

"And it isn’t just Android. Windows Phone 7, RIM’s BlackBerry OS, and HP’s WebOS all currently or will shortly support Flash on their mobile phones, ensuring that everything from YouTube to the latest hardware-accelerated web-based games are supported on every major mobile platform. Except, of course, iOS."

So it appears, far from killing Flash by excluding it from iOS devices, Apple has instead, given their mobile competition a solid point of differentiation.

At the same time, HTML5, the technology Apple is banking on to replace Flash,  is still not finished. In fact, the target for a finished HTML5 is 2014.  In recent Web Monkey article on Wired.com  Scott Gilberton wrote:

"The World Wide Web Consortium (W3C) has extended the charter of the HTML Working Group (HTMLWG) — the group charged with creating HTML5 — and announced that HTML5 will move to last call status later this year. After a couple of years of rigorous testing, the spec should be finalized by the second quarter of 2014."

Wow.  While you can start using HTML5 now (we in fact, have a book on the HTML5 Canvas coming out this year ), the target finish date of the second quarter of  2014 is still three years away.  A lot can happen in three years.  In fact, here some facts about what the tech world was like just three years ago in 2008:

  • Flash CS3 was released was the current version of Flash, and the world was just getting used-to ActionScript 3.
  • People were excited about the prospect of the Silverlight 2 beta and there was talk of Silverlight being a Flash killer.
  • Sun's JavaFX was poised to be the next big thing, and there was talk of it being a Flash killer.
  • The iPhone was not yet a year old
  • Facebook would not turn cash-positive for another 18 months.
  • The Wii was still sold out in most stores.
  • Netflix On Demand had just gone unlimited.
  • 3D TV was still 2D TV

So what will happen by 2014?   Can HTML5 survive a 3 year beta-test and adoption period while other technologies continue to move forward?  Might it have been a bad idea to put a date on the finalization of HTML5?  Up until now, most people have thought that HTML5 was just around the corner.  Now they can see that it is still a long way away.

Some people might see this as simply a three-year lease on life for Flash,  but that may only be true if Flash stays in a static mode the entire time, which Adobe certainly will not let happen.   In fact, three years is a long time,  long enough for Flash to invade game consoles, 3D TV, set-top boxes, and, gasp, maybe even iOS devices.   In fact at the rate Flash and browser-less App Stores are evolving and growing, it just might be HTML5 that has something to worry about.


Quick Guide To wmode And Flash Embedding

When embedding Flash .SWFs in HTML, there are several choices you can make for the wmode parameter.  I've always been a bit confused about which was which, so I set out to today to pull together as much information as possible on the subject.  Here is a quick run down of the choices, and what they mean for your Flash .swf.

wmode=window : Usually the default option.  This puts the Flash movie on top of all other content on the HTML page. This means Flash won't play well with other HTML elements, and it won't adhere to z-index ordering.  In some cases, this mode will net you the best performance for your Flash game or application. This appears to be the safest option for getting your Flash to work properly in the majority of web browsers.

wmode=opaque : This mode is supposed to let Flash play well within an HTML page and adhere to z-index  ordering.   This option will disable hardware GPU rendering and default to software rendering. This mode is not recommended for use with mobile platforms displaying video. This mode also sometimes interferes with capturing keyboard events in Flash.   At the same time, some game developers have found that opaque nets them smoother frame rates.

wmode=transparent : If the background of your Flash movie is transparent, the HTML page will show through. Just like opaque, this option is supposed to play well with other HTML elements and has it's uses in the arena.  However, this option takes a significant amount of processing power to render the transparency.   Like opaque, this option will automatically disable hardware GPU rendering and default to software rendering, is not  is not recommended for use with mobile platforms displaying video and sometimes interferes with capturing keyboard events in Flash.

wmode=gpu : Uses the GPU for hardware accelerated rendering.  This may sound like a good idea, but that is not always the case.  Although running on the GPU can be very fast, in some cases loading and reloading graphics data to the GPU can be costly and time consuming.  You need to test this with your apps and the target devices to make sure it is beneficial to performance.

wmode=direct : This mode bypasses  the browser when rednering. This mode is required for Flash "StageVideo" to work in Flash player 10.2.  This mode appears to not play well with some HTML elements (similar to wmode=window).

This is what I could find today. If you have any additions, subtractions, or updates to this, please tell use in the comments below.


Flash Player 10.2 Released: Stage Video Is Finally Here – But What Is It?

I can recall Adobe talking about stage video for a long time.   It's a new feature in Flash Player 10.2 that is supposed to speed-up video layback considerably.   In many ways, this appears to be Adobe's way of combatting HTML5 Video.  If you are curious, here is what Adobe means when they talk about "stage video".

Stage video is a new API for Flash and a new feature set in the Flash Player that takes video away from being a standard display object in Flash, and instead treats it as it's own entity when rendering.  This means that underlying video hardware can be leveraged when playing back a video inside Flash.

This operation has significant advantages, especially on mobile devices because it takes most of the video rendering away from the CPU, which in-turn saves battery life and speed-up playback.

There are some limitations to using "stage video", and they sound like other limitations we have gotten used to  when working with bitmaps and with packager iOS development. Here are some of them:

  • No rotations allowed
  • No color or 3D transformations allowed
  • No alpha
  • No bitmapdata or bitmap caching
  • On some platforms (mostly mobile) only one video can be playing at a time.
  • Use only wmode=direct when embedding a .swf

Stage video is created with new class type named, appropriately,  StageVideo. What is not clear from Adobe yet is if the API for stage video will be (or already is)  available in the Flash CS5 distributed classes (maybe in an update or in CS5.5?). However,  it is part of the Flex SDK right now though, so you should be able to add those classes to your class path and get started (in theory anyway, we have not tried it)

You can read more about implementing "stage video" here: http://www.adobe.com/devnet/flashplayer/articles/stage_video.html


Are Apps Dead?

The Wall Street Journal has a story this morning about a meeting  of mobile business entrepreneurs in New York, where some of sentiment ran this way:

"Apps are going to die away in favor of simple mobile websites"

You can the whole story here: http://online.wsj.com/article/SB10001424052748704364004576132530157431902.html#ixzz1DTM6ooO5

I'm not sure I totally agree with the sentiment...at least not for games.   While you can probably build most other apps in HTML5 and scale them for a mobile browser, games are still not easy to build, at least for iOS.

Still this is a shift from last year when everyone was talking apps, apps apps.  The reality of running a business that sells units at $0.99 each, or tries to sustain itself on low eCPM must be setting in...

-Steve Fulton (8bitsteve)


Game Programming Tool Kit: A Binary Search in AS3

Every game programmer needs a basic set of tools to use in building his/her games. In this series we will cover everything from basic computer science algorithms and simple design patterns to more complex artificial intelligence implementations. If it can be used some how, some way in game development, then it is ripe for discussion and implementation in this series.

A Binary Search In AS3

With a binary search we can find an element in a sorted array faster (conceivably) than looping through the array  comparing the value we are looking for with the value of each element in the array.  I say conceivably because there are certain circumstances where the loop can be faster. Those cases would be when the value you are search for happens to be near the beginning of your search.

The version we are going to look at is a classic "needle in the haystack" style problem.  We are going to create and array called the "hayStack". It will contain a sorted list of numbers from the smallest to the largest. We will create a second integer variable called the "needle". The needle will be a value that exists in the array. We will use a classic example of recursion to search the "hayStack" for the needle value.

The recursive function, called "arraySearch()" will accept in four parameters:

1. The needle value

2. The hayStack array

3. The first element to use in the search. In our example we will search the entire array, so this value is 0, but it can be any value as long as it is not greater than the last parameter in the search.

4. The last element to use in the search. In our example this will be the hayStack.length-1, but it can be any value as long as it is greater than the first parameter.

The arraySearch() function will first find the middle of the array and then check to make sure that the last value is greater than the first value passed in.

If the value in the hayStack at the middle index is greater than the needle value then the arraySearch() function will recursively call itself but pass in middle-1 as the new last value.

If the value in the hayStack at the middle index is less than the needle value then the arraySearch() function will recursively call itself, but pass the middle+1 as the new first value.

Finally the middle value will be passed back as the correct index of the needle value.

[cc lang="javascript" width="550"]

import flash.display.Sprite;
* ...
* @author Jeff Fulton
public class BinarySearch extends Sprite

public function BinarySearch()
var needle:int = 55;
var hayStack:Array = [1, 2, 3, 4, 5, 6, 10, 21, 32, 33, 34, 41, 47, 51, 52, 53, 54, 55, 66, 69, 71, 73, 76, 90];
var location:int = arraySearch(needle, hayStack, 0, hayStack.length - 1);


private function arraySearch(needle:int, hayStack:Array, first:int, last:int):int {

var middle:int = Math.floor((last + first)/2);
if (first > last) {
trace("first > last");
// check for error in data passed in
return -1;
} else if (hayStack[middle] > needle) {
return arraySearch(needle, hayStack, first, middle-1);
} else if (hayStack[middle] < needle) { return arraySearch(needle, hayStack, middle+1, last); } else { return middle; } } } } [/cc] Executing this code will result in the value "17" being traced out as 55 is the 17th (0-relative) element in the hayStack array.

Now, try to set the first value to 10 and the last value to 9.
[cc lang="javascript" width="550"]
var location:int = arraySearch(needle, hayStack, 10, 9);

The result will be a "-1" returned because the first value is greater than the last value.

Next, change the needle to the value "0" (or any other value that is not in the hayStack() array. Change the arraySearch() call back to it original format:
[cc lang="javascript" width="550"]
var needle:int = 0;
var hayStack:Array = [1, 2, 3, 4, 5, 6, 10, 21, 32, 33, 34, 41, 47,51, 52, 53, 54, 55, 66, 69, 71, 73, 76, 90];
var location:int = arraySearch(needle, hayStack, 0, hayStack.length - 1);

If the value is not found, eventually the recursion will result in first > last and a -1 will result.

The recursive function can be replaced with an iterative version:

[cc lang="javascript" width="550"]

private function arraySearchIteration(needle:int, hayStack:Array, first:int, last:int):int {
var middleFound:Boolean = false;
var middle:int;
while (!middleFound) {
middle = Math.floor((last + first) / 2);

if (needle == hayStack[middle] || first > last) {
middleFound = true;
}else if (needle > hayStack[middle]) {
}else {
last = middle-1;




That's it for a simple binary search. This is relatively simple, yet powerful technique that can be applied to solve any number of game related problems from looking for the correct MovieClip to remove from the game screen to looking up words in a  word list. One problem with this technique though is that it requires a sorted list. In the future we will examine using a hash table to solve this problem.  While using a hash table is a much faster (in some cases) than a binary search, it is much more complex than the simple recursion/iteration that we have constructed here.


Shorter, More Game Focused Tutorials Targeting More Technologies Are Coming

OK, now that our HTML5 Canvas book is in production, we are planning a return to game tutorials that have been so popular here.  However, in 2011, people want more than just AS3 tutorials.  Keeping look back at this space for shorter, more precise code snippets and tutorials on game algorithms and solutions to common problems.   We will present them in AS3, JavaScript/Canvas and/or Corona Lau for mobile.

This site is protected by Comment SPAM Wiper.