If anyone wants to rate and/or comment it would be much appreciated, and tonight I’ll be presenting at LFPUG on Android development so if you’re keen to find out more about getting into native Android development I hope to see you there!

The presentation will get you up and running from installing the tools to building and skinning applications.

You can sign up to attend and find out more details here.

UPDATE: Recording here. (Volume is very low, so without external speakers you may have trouble hearing).

The problem: I have an IFocusableComponent which is rotated, in my case some “transform handles” being used to manipulate some on screen items. When tabbing to another non-rotated control, the visible focus rectangle remains rotated as it was for the transform handles.

Solution: No necessarily the best solution, but in my TransformHandles I override the focusOutHandler to reset the rotation of the focusPane’s visible border…

Code:

I’ve done some investigation into the real cause for this to no avail. UIComponent sets the rotation of the focusPane’s child to whatever its rotation is when setFocus() is called, but for some reason this clearly isn’t happening when tabbing to other standard controls. Potentially this is something unique to my UIComponent class as I’m using the RotateEffect.

Keywords: focusPane, focusRect, UIComponent, FocusManager, SystemManager.

I needed this for a project I’m working on which specifically targets Webkit (tablet devices), but I’m releasing the code under the existing MIT license for anyone to use as they wish. I’ve put together a little demo to show how it can be used. This demo has been tested on Safari and Chrome, in Firefox you’ll likely only see the 2D transformations, I haven’t tried IE.

DEMO

I had very little spare time to put this together so it’s quite rough around the edges and doesn’t really show the full potential of this technique. But hopefully you’ll see that 3D transformations can be used in a subtle manner with your existing JS/CSS, or in a very obvious manner in a game perhaps.

Click image to see demo. Move mouse around to rotate images in 3D, roll-over buttons and click to view transform animations.

(images are CC non-commercial share-alike, link)

Notes and Comparisons with Flash

There has been quite some discussion regarding the position of “HTML5″ (usually referring to HTML5, CSS3 and JS), and Flash. Steve Jobs made his thoughts clear on the subject, even though that particular letter was full of inaccuracies and errors, in particular with regards to video and touch events. Personally I’ll always use whatever tech works for the job, many of the posts bashing Flash in the last decade have been written by people that haven’t necessarily tried it. Many refer to Flash from brief experiences they had many years ago, with the timeline, slow performance and pre-AS3 code. So I thought it might be useful to write up some of the notes I made along the way as I weighed up when I might use this.

CSS Animations/Transitions

So far it’s really only Webkit that supports these. Everything is optimised for fairly non-interactive content, animations are defined ahead of time, not very dynamic. You can do some cool stuff with keyframes (at 10%, 20% etc) but I see way too many holes if you want to use these in RIAs and games.

Of course using JavaScript you can pretty much animate things as you wish, which is why I wrote the jQuery extension to support the 3D CSS transformations in the animate() function. The downside is performance. Testing on the 1Ghz Nexus One webkit browser shows that JS powered CSS animation will be severely limited on devices, certainly when compared with performance tests shown for Flash Player 10.1.

I was unable to find a way to perform a circular path (orbit) animation in CSS, anyone know if this is possible? This is something very common in UI work, rather than sticking to straight lines, transitions can benefit from having a touch of curvature to soften the effect, as well as standard (non-mouse-related) “hover” type animation. So again in this case I had to resort to using JS for this, losing the benefit of CSS animations, if anyone knows how to do this I’d really appreciate the comment.

Filters

I can’t seem to find anything that works in Webkit or Mozilla, here I’m talking about the sorts of things you do to highlight something of importance to the user to subtly improve usability; things like glow and non-box-shaped shadows (I’m aware of text-shadows and box shadows). I would have thought this was a given when the spec was being written, this could make for a pretty dated look and feel.

Blend Modes

I really just expected these to be in… there are a few things in Webkit related to this, but it’s a worry; blend modes make for an improved look and feel in modern UIs (especially when dragging things around as objects become obscured). Will have to wait and see what happens with this. Of course all of this would be almost moot if the IE 9 team decided Canvas wasn’t too much of a threat and implemented support. So many great Canvas experiments are essentially in vain as a result, so many apps still only possible using the pixel manipulating features in Flash Player 8+.

CPU usage / Performance

I was using a jQuery plugin for animating elements on a curve/arc to get the circle animation but I found CPU usage went straight to 100% with the four animals, so I presume either my usage was wrong (there wasn’t much to it) or there’s something wrong with that plugin.

Safari uses 100% CPU just to run the setInterval() for the first 30 seconds before dropping down to <5%, Chrome doesn’t suffer from this. I’m not sure whether this is a bug in Safari or not, hopefully someone can shed some light on this. Outside of setInterval() there are no built in ways to do real-time games in JS that I am aware of (Flash has setInterval and Timers but i’s much more efficient to use the ENTER_FRAME event which results in no CPU overhead).

If you are doing real-time games in JS, I would probably avoid the overhead of jQuery for the most part and keep it as low-level as possible, the DOM with its history of laying out mostly static content doesn’t lend itself amazingly well to high-performance graphics, this is akin to building a game in the Flex (app) framework, you just wouldn’t, you’d use Sprite/MovieClip etc which doesn’t have the enormous measurement overheads for liquid layout, padding, margins, accessibility and so on. Perhaps Canvas is an option, which unfortunately still means Flash for the next few years (flashcanvas) due to IE9 (SVG could take up a large amount of slack, but that’s about equivalent to FP8 so not particularly exciting).

The other day I saw this video which appears to confirm my performance worries with HTML. It’s very easy to say HTML provides better performance than Flash until you try to do the same sort of things people do with Flash but I imagine the FUD will continue long after people start to question why we aren’t seeing these cutting edge apps being built with HTML.

Cross browser inconsistencies

I mentioned I’m only targeting Webkit, luckily the two big OSs in tablet devices (Apple iPhone OS and Android) both run Webkit, but I am a little worried by the fact that something as basic as text-stroke only works in Webkit, there’s nothing very concrete to go on as to who’s going to support what in the coming years. Even Firefox doesn’t support it, and that actually has a big impact on design as I’d also have to remove the (fairly supported) text drop-shadow because without the text stroke it just looks ugly. What a nightmare the next few years will be, with frustration and constant set-backs; I’ve gotten used to being 100% confident anything I can achieve in Flash will work across all browsers, the thought of hacking and rolling back to simpler times is a pain.

Conclusions

So this has been a learning experience… it certainly works for me when targeting mobile devices for fairly simple apps/games, where you don’t have a lot of heavy graphics or effects to deal with. I can definitely see a huge chunk of current-gen Flash web apps being cut-down a little and written in HTML+CSS+JS in order to support Apple devices and in favour of Web standards, but I fear if Flash becomes too niche we’re going to take one step forward and two steps back just as web apps and games were really beginning to rival the desktop; leaving us with a rather uninspiring experience based on what you simply can’t do in HTML5/JS/CSS3. In short it’s only about 60% of the way to Flash Player 10 in raw technical capabilities and before widespread use we’ll see Flash Player 11, 12, with who knows what.

So it’s not quite as great as I hoped, but I’m gonna jump on board as best I can and push it as far as I’m able. Still, what I’d really love to see is browser vendors pushed in the right direction by us developers demanding some of these things as soon as possible.

This is really just an overview which should give plenty to help you figure out the steps. I can’t paste the exact code because it’s embedded in a client project, but I do refer to some of the TLF functions throughout that you have to make use of, if anyone can suggest improvements, please drop them in the comments.

Copied from the forum post…

• Find TextRanges for misspelled words:
  • Get the first Paragraph using textFlow.getFirstLeaf().getParagraph()
  • Loop through all Paragraphs using para.getNextParagraph()
  • For each, run a Regex match (/\b\w+\b/) on para.getText()
  • Spellcheck each result using Squiggly, and for bad words store a TextRange: TextRange(textFlow, para.getAbsoluteStart()+index, para.getAbsoluteStart()+index+word.length-1); where index is incremented to the position proceeding the end of each word (match or no match).

• Spellcheck class:
  • Created a static SpellCheck class which loads language dictionary (downloaded from OpenOffice website) and a UserDictionary (stored as a simple text file)
  • Added methods for checkTextFlow(textFlow:TextFlow):Array which returns an array of “bad” TextRanges, a method for getSuggestions(word:String):Array and methods for checkWord() and addUserWord().

• Context menu:
  • Extend ContainerController and override menuSelectHandler()… use an instance of my CustomContainerController when creating the TextFlow:
  •   textFlow.flowComposer.addController( new CustomContainerController() );  
  • Loop through flowComposer.numLines, obtain each TextFlowLine from flowComposer and therefore each TextLine.
  • Determine if textLine.getBounds(container).container(container.mouseX, container.mouseY) to find the line they right-clicked.
  • Get the “raw text” for the line: textLine.textBlock.content.rawText.substr(textLine.textBlockBeginIndex);
  • Find the atom clicked: textLine.getAtomIndexAtPoint(container.stage.mouseX, container.stage.mouseY).
  • Find the starting atom of the word (reverse lookup for word boundary i.e.. ” ” or first char in raw text).
  • Determine the word itself by using regex to find the first word from this starting point (/\b\w+\b/).
  • Add ContextMenuItems for “add to dictionary” and suggested words (for the latter also store start/end atoms in ContextMenuItem.data).
  • When user clicks a suggested word, use (interactionManager as EditManager).selectRange(data.start, data.end); (interactionManager as EditManager).insertText(data.word) where “data” is the data property of the clicked ContextMenuItem.

• In my “EditableTextField” class, I call my SpellCheck.checkTextFlow() to get the bad TextRanges and…
  •   Loop through the badRanges array.
  •   Loop from range.absoluteStart to range.absoluteEnd for each TextRange.
  •   Find TextFlowLine for “i” in this loop, and therefore the TextLine: containerController.flowComposer.findLineAtPosition(i); textFlowLine.getTextLine();
  •   Find atom bounds using textLine.getAtomBounds(charIndex); where charIndex is: i - textFlowLine.absoluteStart.
  •   Underline… drawRect( bounds.x + textLine.x, bounds.y + textLine.y + bounds.height - textLine.descent - 1, bounds.width, 3)

I’m sure there is a more elegant way, but this seems to work. I believe I read Adobe are working on Squiggly for pure TLF, if not, I hope this helps somebody get on the right track.

So the official line is that Adobe is now focusing on getting the Flash Platform onto Android (along with existing targets, Nokia), and to be fair, even though that sounds like they’re just making the best of a bad situation, Android is going to be by far the biggest market judging by current growth indicators; the number of manufacturers producing all manner of devices that run it is truly staggering, the quality improving weekly.

Aral presented on something he called “Native X"; in a nutshell: why are Adobe obsessed with getting a one-size fits all runtime onto every device, rather than outputting native executables for a given platform? Presumably the argument is that a single runtime produces fewer cross-platform inconsistencies, but in reality this endeavour has proven very difficult to achieve. Flash Lite showed just how hard it can be, which for years consisted of a slower, older runtime running on certain Nokia smartphones, fragmented versions and implementations, the whole thing never really took off in a consistent way outside of Japan, and now Flash Player 10.1 and AIR is finally coming, should they continue down this route?

Flash CS5 showed an alternative —perhaps through necessity— which was outputting native apps for iPhone. By cross-compiling you can provide developers with familiar tools, but still target specific platforms. You do begin to introduce cross platform inconsistencies… does it have multi-touch or webcam (already a consideration in the FP) for example. Still, the win from being able to write something once and have it run on almost anything without too many changes far outweighs this problem. The alternative is to spend a lot of time and money writing once in Objective-C, again in Flash or Java… indie developers, thanks but no thanks.

The downside to this is that you will inevitably produce a one-size fits all set of capabilities, so you may lack access to a hardware feature which you could access in Objective-C. That’s fine, the point is you have a choice and you should not be forced to use something if your app or game doesn’t require it.

What Can Adobe Do Next?

Who could guess Adobe’s long term strategy? They may have this all figured out and this recent set-back is just a fly in the ointment. In a post “The World is Moving to HTML 5 and Other Flights of Fancy” I indicated that whilst Adobe have made a huge success out of the “Flash Platform", we have to remember the money has traditionally come from tools*. Flash CS5 and Flash Builder are just two tools that target the Flash Player, but there was once Director, and there is still Dreamweaver which has stood the test of time, of course Photoshop is used in pretty much anything you see online and in print. Tools, these are not something easily copied, they demand a premium.

*More recently we’ve seen a shift toward providing developer and consumer-facing services such as with Acrobat.com. I believe this to be a forward looking risk-reducing strategy, broadening the portfolio in-case of collapse in the desktop/app market, or perhaps just generating new scalable revenue streams.

So if I were the CEO of Adobe Systems, Shantanu Narayen, what actions would I take over the next 5 years? Partly this is a waiting game, the necessary features of HTML to make some of these leaps are still being ironed out, mainly thanks to IE 9 failing to add Canvas to an otherwise outstanding list of supported features. Instead it looks like SVG will provide the forward momentum for a large percentage of RIAs.

Either way, here are some things I’d consider…

Technical

Slowly start to migrate focus away from the Flash Platform - That’s the player/runtime end of things. This step has the highest risk associated with it because Flash’s ability to do so much more than HTML even promises to in the specs has always has been the differentiator and why people use Flash in the first place.

Focus on “Dream Builder” - Continue to develop the Flash IDE but focus on combining Flex Builder and Dreamweaver (ironically Flex Builder used to run in a Dreamweaver-like IDE, I propose the migration of Dreamweaver to Eclipse)…

Develop the best HTML5/JS Editor - None of the hardcore JS people I know use Dreamweaver, which I found suprising until you realise the code completion is pretty worthless for OO code. If Dreamweaver and Flex Builder were to combine, I would initially introduce “HTML Project” as a type in Flex Builder, which uses a Flex SDK targeting JS, including some of the familiar components, effects and so forth.

Open source the Flash Player - provide the web with one of the greatest gifts it has ever seen. HTML specs progress slowly, HTML5 really does just feel like a slight incremental improvement over version 4 when you weight it up against the features in Flash Player 10.

Work with the W3C - Providing the building blocks for technological innovations is one thing, getting any of it into the spec is another entirely. This probably needs to remain as hands off as possible for political reasons and wide-spread developer relations, whilst still supporting active development as many corporations do.

Don’t stray too far from the underlying web technologies - In other words, don’t do a GWT or face rejection.

Some of these things are simply unfathomable; “abandon the Flex SDK and build it again for HTML/JS?", no, not abandon, but aim to supplant in the very long term, this cannot happen overnight, and that’s a lot of extra man-power needed, but of course this would have to remain open-source as with Flex, and the developer audience would be enormous.

People

This is the really tough part, something I simply don’t have the experience to discuss with any meaning. It’s all well and good discussing what could be done with the products, with the specs, the technical side of things… but these are all supported by a hierachy of real people doing their jobs. No matter how slowly you do this people will lose jobs or move to another team.

Continuing to develop the Flash Player would see the very best developers adding those features that really wow us. The niche for cutting edge will not disappear (just like plug-ins), what I’m talking about here is the wider-web. The semantic, open web which has to, by its very nature, remain top dog.

What Can Developers Do Now?

I can only speak for myself. I’m writing a game which specifically targets tablet and surface computers, so I have to include the iPad in there of course. The news of Flash not being an option has also put me off using OpenPlug’s Elips Studio until we get confirmation of their situation… but in doing so I started to think of alternatives.

It just so happens this particular game does not rely on 3D graphics, complex animations or particularly advanced special FX, so I’ve decided to write it in Webkit-friendly HTML/JS (that includes things like 3D transformations). That means I can use some of the most advanced HTML5 features, it also means that it will run on a wide variety of devices, such as Android. By using technologies like AIR I can provide a consistent webkit engine to platforms that don’t inherently run it.

For the most part I will continue to develop with Flash, but I think this illustrates that you have to weigh up your options and not be afraid of picking up new languages; programming is a cumulative and transferable skill.

Recently I posted a bug report regarding the [Embed] metatag, which led me to write this post in order to find out whether people are happy with their current workflows and how well others receive projects when it comes to handovers and maintenance.

Background

So you’re building an application, a game, or a website. Immediately you have two options when it comes to setting up your Flash project. You can create an FLA file, assign a document class and get coding, or you can fire up Flash(/Flex) Builder/FDT/Flash Develop et al, create a new Flex or AS3 project and compile it using the Flex SDK compiler. Pretty much every time I’ll opt for the latter because of the increased reliability of the application, and faster compile times.

Even if you use the first option, compiling in Flash Pro itself, you may be actually editing your code in Flash Builder or some other IDE, but the point is the compiler being used in the former is Flash Pro, and in the latter mxmlc/compc the Flex SDK compilers. For the purpose of this post we’ll be looking at Flex or AS3 projects using the Flex SDK compiler, and how to get assets from a FLA, into your project.

I’ve written the following to the best of my knowledge, but there are always tips and tricks that I may be missing, perhaps an entire workflow. If you spot any inaccuracies or flaws please let me know in the comments and I’ll change it ASAP.

Why an FLA at all?

You probably already know you can embed PNGs, SVG and other file types in your classes and never go near an FLA to get graphics into a SWF. When it comes to animations, you may use TweenLite or GTween to perform transitions, but when it comes to frame-based animation, character animation, or simply buttons and panels with hand-made flourishes you may want to use an FLA to create and animate these using the powerful timeline, graphics and animation tools within Flash Pro.

It’s at this point you ask yourself, how do I get these assets from a FLA into my project if I’m not compiling my project in Flash Pro?

The Workflows

Here are 5 methods for getting assets from an FLA, into a Flex or “pure AS3″ project. I’ve excluded those which are MXML-only as this post is not about Flex specifically.

1. Publish SWC from FLA

This method involves linking library symbols to classes, so instead of “MySymbol” in the class field, you have “com.package.MyClass” which refers to a class file in one of the FLAs classpaths. You must then turn on SWC export in the FLA Publish Settings panel, and most likely turn off “Automatically declare stage instances” in the ActionScript 3 settings panel to avoid errors where your class has defined properties for items on stage. Finally add all of the required classpaths that the linked classes will be using (that could include 3rd party libraries) to avoid any compile-time errors.

When you publish the SWF it’ll also publish a SWC in the same folder. You add that SWC to your AS3 project and the classes/symbols compiled into it become available for use in your code.

Pros:

This method keeps any timeline ActionScript, great for complex, nested or multi-state animations.

Cons:

You have to compile the FLA every time you change a class linked to a symbol, in reality that can mean toggling to Flash, exporting the SWC, toggling back to Flash Builder, refreshing the project to re-build the SWC indexes and then recompiling the project here also.

You have to make sure the classes your symbols are linked to are not in the main project source directory (or any directory the project is set to reference as source code). If you don’t do this you will likely not see your graphics/animations appear because the Flex linker will find the class definition first, not the definition that is inside the SWC due to the compilation order.

You have to add all required classpaths to the FLA, possibly every classpath your project is using.

Flash Builder will not report errors in the code used and you lose the ability to Ctrl/Cmd+Click to go to source.

You don’t have access to items on stage immediately, the workaround is pretty painful (link).

Summary:

Whilst this is really the only sensible method for keeping timeline code, the cons make it a really un-intuitive and frustrating process. If anyone can suggest a way to improve this I’ll owe you quite a few beers.

2. [Embed] tag above a class declaration

Example:

Code:

Here we’re simply using the SWF produced by an FLA to store our symbols. The FLA does not link any symbols to any classes itself, the library is simply full of vanilla MovieClips. In our class files we add the [Embed] tag and that binds the symbol from the SWF to the class, so that when we create a new instance of that class, we will also get the graphics from the library symbol.

Pros:

You don’t have to re-compile the FLA unless your graphics actually change.

You can spend more time in your coding environment and not toggle back and forth between it and Flash Pro.

You get real-time compilation errors in the Problems panel of Eclipse because the code is not coming from a SWC.

Cons:

It strips ActionScript from the timeline of your symbols. If your symbol is an animation, and you had a few stop frames in there, perhaps one per labelled segment of animation, you’ll lose these and the animation will just run through on loop. What you see coders do to circumvent this is use addFrameScript(5, stop); for every stop frame, or even using lots of frame labels to act as meta-tags for code replacement (link).

Any children of the symbol lose any typing, so if you’ve added a couple of MyButton’s or a MyCustomWidget to your symbol on it’s timeline, those become plain MovieClips. This is a huge problem which relegates this method to animations only.

3. [Embed] tag above a class property declaration

This method involves using the [Embed] tag above a class property, for example:

Code:

So you can probably guess this is more of a composition-based approach, which works well for simple graphics, for multi-frame MovieClips you’d type myInstance as MovieClip, and tell it to stop().

With this method you’re instance will either be a SpriteAsset (extends Sprite) or a MovieClipAsset (extends MovieClip), you cannot cast it to a custom class, so for a symbol that is meant to represent a contact form, with an instance of MyButtonClass or even just some TextFields in it, this will fail.

4. Embed metatag to embed a whole SWF

There’s also another attribute available to the Embed metatag, that’s mimeType. If you remove the symbol attribute and replace it with mimeType="application/octet-stream” it will embed the entire SWF and preserve the class associations set up in the library, i.e. you won’t have to have the instances typed to Sprite(/Asset) or MovieClip(/Asset).

When you embed a symbol from a SWF in this way, you can then use Loader to get at the classes within:

Code:

Pros:

Great way to provide a library symbol a class/some behaviour without having to constantly re-compile the FLA.

Cons:

I think you’ll agree that’s not a great option if you have a lot of symbols or symbols which have others nested within. There are libraries to help with this, but…

No strict typing.

5. Runtime loading a SWF

Perhaps the oldest option here, loading a SWF at runtime allows you to pull out symbols/classes using the applicationDomain.getDefinition() function as described in method 3. If you’re already familiar with the getDefinitionByName() utility this works pretty much the same, but you are targeting a specific SWF’s classes.

Pros:

Great for loading content that rarely changes, such as fonts.

Cons:

Magic strings. Making a string a constant does not make it any less hacky, if you change the string in your FLA, your constant is meaningless, and you’ll only find out about it at runtime if that piece of code executes.

You’ll have to export your SWF from an FLA or using one of the other techniques which means you’ll also have some of the problems associated with those.

Feedback

So what route do you take? Please also state the type of project: application, game, website; it’s quite possible that people building applications simply never encounter these issues due to the primarily scripted animation and simple non-hierarchical graphical assets.

You may also want to consider how easy it will be to start compiling in Flash Professional in order to take advantage of CS5’s export to iPhone, this can impact your decision on which method you use.

Overall I feel that whilst choice is great, each method seems to have pretty serious downsides, and I’m yet to find one that doesn’t make for a less than pleasant rinse-and-repeat workflow. It would be nice to be able use Flash Pro to speed up the process of preparing game assets, laying stuff out on stage, animating on the timeline… but there are too many down-sides associated with this, and too many idiosyncrasies to learn just to get things working, I hope in future the two tools can be brought closer together perhaps through the new file format.

As usual, all comments welcome, unless you’re the bargain-dishwasher spammer.

Further reading

http://www.bit-101.com/blog/?p=853
http://www.bit-101.com/blog/?p=864
http://gskinner.com/blog/archives/2007/03/using_flash_sym.html
http://www.airtightinteractive.com/news/?p=327

Also the Flex Livedocs, which certainly don’t explain all of these methods in nearly enough detail or context, which makes using the Flex SDK a darker art than it could be.

“The World is moving to HTML 5″

This poignant, yet immediately dated and tautological quote is supposedly from Steve Jobs, as reported by Wired. The article speaks of HTML 5 being used to create sophisticated web pages, and I wholeheartedly agree. If you are building web pages, HTML and JavaScript are almost always the right technologies to use, but we went beyond solely building web pages many years ago. Web pages are not the only type of internet destination, even though the ever vocal standardistas seem to think that’s what everyone wants. I say get your head out of the sand, it’s nice out.

Types of Web Content

We can break down web content into four main categories:

Pages

Pages were once the only type of content to be found in a web browser, primarily there for information display with very little user interaction, they are designed to provide the desired content as fast as possible, as such they tend to use text as the primary method of communication, they work very well with search engines, and they date just as fast as anything else (Microsoft’s first web presence).

Dynamic Pages

We have in this category the semi-interactive stuff that AJAX has found a home with, adding dynamism to an otherwise static page, and it does this stuff very well indeed. In short, it’s all very direct and to the point, it works outstandingly well. If you had to wait for an intro to play before you found out the price of the avocado you want to buy from your online supermarket you’d go elsewhere.

Experience and Brands

Then again, if you’re a 14 year old boy who loves watching Top Gear and you’re being delivered a loud, visceral and engaging experience for a super-car brand, this is the 21st century equivalent of that Ferrari F40 poster on your wall, that aspirational experience now even more compelling; one day you’ll drive that car. It may be interesting to some people to scroll through a highly efficient search engine friendly static page to see this kind of thing, but it’s really very boring for most people. There is a world of purely enjoyable content out there; don’t paint it grey. If you’re trying to build a brand, you have to tell a story.

Applications and Games

This is really a big part of what the web is today. Web-deployed applications and games have proven their worth. Open to wide audiences across multiple platforms, secure, immediately updateable, cheap to develop, and getting ever more sophisticated. If you look at these examples all done in Flash, I’d ask you what else you’d use that ticks all those boxes:

• Aviary - everything from bitmap and vector editors, texture generator to an audio editor, truly incredible.
• Hobnox audio tool - emulates in real time, hardware instruments for creating electronic music.
• Big and Small - Content for kids, it has to be fun and interactive to compete with TV.
• Google Street View - The reality is, the transitions and interaction that make it so impressive, require Flash, and we know Google are pretty much the best in the business at AJAX.

I wouldn’t underestimate the shift to web-based applications, IMHO nearly all applications will be web-based in the next 5 years; applications that include office suites, image and video editors, casual and hardcore games, music production software, and of course the most ubiquitous, social networking and media sharing. All of these are equally deserving of being available to users of a web browser, all of these requiring the most cutting edge technology available in order to stand out from the crowd and avoid being locked into the glacial flow of web standards progression.

Plugins

Plugins drive things forward by letting non-techies bolt on new functionality. Director, Flash, Unity all did or still do their part. Zoom forward 5 years and let us visit a perfect world where all the major browser vendors, including the behemoth Microsoft, have agreed on the various parts of “HTML 5″. Miraculously IE supports the same Canvas abilities and video codecs as the iPhone, Android and Nokia browsers, Mozilla (Firefox) has conceded to paying h264 royalty fees, sites with video content have conceded to paying h264 broadcast fees, everything is gonna be allllright. The issue now is that things are looking a bit dated, the browser can now natively do what Flash applications were doing 5 years ago. This is a never ending game of cat and mouse, no-one can argue one is better than the other when nothing is standing still.

And so what now? What about new technologies, where’s the now ubiquitous multitouch we’re used to seeing since Flash 10.1, since iPhone and Android devices dominated the markets. Maybe that’s in the HTML 6 spec, maybe just in Firefox, how many more years after we start using it does it become standard. Along with multi-touch there will be many more features missing, we will still need plugins. Flash has added a myriad new features that game programmers and web developers are using to create a whole new level of experience that has obliterated the console and desktop software markets. HTML 5 is starting to look a lot like HTML 4 used to. Long in the tooth.

HTML 5

If we come back to today, I think it’s important to clear up just what this HTML 5 really means. It’s more than a spec, in general the term is used to refer to the many sub-technologies involved, including new HTML markup, the Canvas tag for 2D (and possibly in future 3D) static and dynamically scripted graphics, fast JavaScript VM’s like Tamarin (donated by Adobe), a video tag for playing back a choice of video files, and possibly WebGL which aims to bring OpenGL 3D graphics to the web on par with Unity3D perhaps. I need to make it clear that I really want this to happen, no matter how open to feedback Adobe are, no matter how open the SWF format is, it does not sit well with me that one vendor controls what will and will not go in to the runtime, and it’s still a plugin, no matter how easy and fast it installs, something doesn’t quite feel right about it.

But I live in the real world, it’s mainly this technology that I’ve used to pay my way since I was 16, and that doesn’t show any signs of slowing. I am 100% willing to use HTML 5 if it suits the job. I’m not sitting around either, trust me. No flash developers are tied in to using it. But there are too many things stopping me from switching. Let’s take the hot topic of the day, the <video> tag; it doesn’t even replace what you could do with Flash 8 or 9 let alone some of the cool things you can do *right now* (no waiting)…

Video

Flash is not video. The Flash Player was installed on over 90% of internet connected computers before YouTube, when Flash video was limited to the early Sorenson Spark codec, optimised for small files that performed really badly at anything larger than 320x240, and 8 years ago when performance was so bad with Flash video we were using postage stamp sized video, but it was the immediacy of the playback that made it successful over more powerful plugins like Quicktime, WMV or Real Player. Either way, Flash video clearly changed the web, no more picking a plugin, picking your bandwidth, looking at truly ugly system chrome, so let’s look at what we need to see from HTML 5 video for it to displace Flash as the most efficient, cost effective and flexible solution:

• DRM - Boo, evil. Whatever your personal view on DRM, broadcast corporations want it.
• True multi-bitrate streaming - Efficient live feeds across the globe that alters bitrate to suit current bandwidth, multicast (Flash Player 10 also supports a P2P UDP to take pressure off the server, or provide much faster messaging in games).
• Internet Explorer - The truth of the matter is that it has to work with IE. If you’re using Flash as a fallback, as suggested by ALL current HTML 5 video player supporters, why are you making more work for yourself? For a simple video player fine, but a lot of video is increasingly interactive. YouTube for example overlay recommendations, annotations, detected music, and even live commenting, you really want to do this twice?

If >this< is the cream of the crop right now, and it doesn’t even work in Firefox or Internet Explorer (percentages?), what is there to shout about?

Yeah but Flash eats 100% of my CPU

In a sentence: so do the most basic HTML 5 experiments (link).

An empty SWF consumes ~0% of my CPU, funnily enough the same amount as an empty web page. When something eats 100% of the CPU, it’s because is is doing something computationally expensive, possibly animating high quality 32-bit images whilst applying real time bitmap effects so that you can see just how that logo will look on this crumpled T-Shirt before you send it off to be printed. The CPU usage is not automatically higher with Flash, it’s down to the design and programmer to figure out what they want to achieve, and optimise it to whatever they find acceptable for their intended audience. JavaScript can and does use 100% CPU in some of the best apps out there, we just don’t see many apps that are up to the level of the Flash apps linked to earlier in this post. Video acceleration is a fair point until you consider video is also a display object in the Flash Player that can have these filters, transformations and so on applied in real time, that comes at a cost, however with Flash Player 10.1 hardware acceleration is starting to come into play, a truly impressive feat for such a small cross platform runtime.

If we kill Flash, we kill annoying banner ads

It’s also the case that displacing Flash will not get rid of annoying banner ads, agencies will just use <canvas> and <video>, don’t kid yourself, it’ll be those same Flash developers making it, they would simply re-tool and utilise their existing experience to produce infuriating ads in whatever makes the biggest impact. The internet is only less annoying with things like FlashBlock because only a tiny drop in the ocean of internet users use Flash block so they scoot under the radar. They are excluding themselves from the mainstream for this small benefit and more power to you for doing that, it’s up to you.

Browser integration

This is a major sorepoint for me as my primary job has been developing ever more complex Flash applications that are deployed on the web and on the desktop (indeed to replace existing desktop apps). You can communicate in real time between JavaScript and Flash, passing simple and complex data types between them, but it’s still a black box on the page. This is a really tough nut to crack, if you spend just 10 minutes asking yourself how you could get a native desktop application that you’ve embedded in a page to play well with the HTML around it, you’ll see why it simply doesn’t make sense, we shouldn’t try to shoe-horn these things.

The Semantic Web and Accessibility

Another gotcha. I can absolutely agree these things are so very important, depending on the content. What on earth is the point of making accessible a site where the entire aim is to build a burger out of people dressed up as beef, buns and lettuce, running and jumping on one another in a video montage. You may think the site should not exist anyway, but who are we to dictate what kind of content can be put online. Some idiots love this stuff and clearly so did Burger King! What about a game like Dofus? Semantics and accessibility don’t apply to everything. You can build Flash sites to be accessible, you can build them on top of a CMS like Drupal to make sure you get the best of both worlds. In summary, use the right tool for the job.

Mobile

This one is very important to me. Hand on heart, devices that we now consider mobile: phones and tablets; these are going to be how 90% of people use computers, period. There’s simply no need for bulky laptops and desktops for non-professionals. Wireless TV connections let you get that big screen experience when you need it, but the redundancy in devices will be huge. This became clear in my own circle of entirely non-geek friends already, almost exclusively using mobile devices for everything, and this at the very beginning of the full-on shift to web-apps.

It became quite clear to me in 2007 (link) that Flash was never going to do well on mobile until it was the same runtime as the one we were using on the web, especially when it was licensed per handset. Funnily enough I called that convergent version “Flash X", and it turns out “X", by pure coincident, was right, in a roman numerals kinda way. Flash 10.1 has been optimised to run on lower powered CPUs like ARM chips found in iPhones and Android devices.

Hating Adobe

The animosity directed at Adobe is unusual. They simply invest in whatever proves popular in order to generate revenue, and they’ve had a lot of popular HTML/JS editing tools, even demoing Canvas support in the next Dreamweaver IDE. When Director started to die, occasionally being used for the odd online 3D game, and Flash took off, they invested time and money into creating what they like to call the Flash Platform. A range of commercial and open source tools, open-spec file formats for rich media, binary data transfer and a video container, a runtime, and a few free and commercial serverside offerings. They are not forcing anyone to use this stuff, if we stop using it they will move on like they have in the past, investing in whatever it is people do want to code in. In my opinion, Adobe will be the second big player, after Apple, to fully embrace HTML 5 in their software, with Microsoft lagging behind a very long way.

Conclusion

To everyone shouting support for HTML 5 as the flash killer, if that were really possible don’t you think Flash developers would already be doing it? We are a thriving community positively chomping at the bit to try out new stuff, I’m presenting on Android at a Flash user group shortly, we don’t hang around. We weren’t born knowing ActionScript 1, 2 or 3 and we have to live in the real world, we may even be right next to you Indeed many Flash developers are also HTML/JS developers and may practice a serverside language in smaller companies. It just leads to frustration when we hear “use HTML 5″ when it is not supported even across desktop browsers. What version of IE should we be targeting before we can start building the rich compelling experiences we’re used to.

The world will move to HTML X when Flash X is not needed, it is a non-argument, no amount of insane zealous preaching from within the idealist world of either side will make this happen in the real world. The market will use whatever tools provide the best solutions for the best return on investment.

I can’t wait till we get through this next transitionary period, with web designers having to spend twice the effort providing Flash fallbacks to video, companies encoding and hosting their videos twice for Firefox, licenses and royalties for h264, this will be another messy, frustrating time for web users and progress may slow, but I can’t see a way around it.