Flash vs. HTML5

Yesterday Adobe released a new prerelease program called Incubator. The announcement includes the release of a FlashPlayer 11 beta.

With Incubator everyone has the possibility to be part of the flash player development process.

The Adobe® AIR® and Adobe Flash® Player Incubator is a technology preview program for more adventurous developers who are willing to experiment with Flash Platform runtime features that are in early development stages

Additionally the team of Away3D published a first preview of the upcoming 3D API release, called Broomstick. When Molehill was announced at the MAX2010, the team of Away3D said that they are working together with Adobe to publish simultaneous a full-featured version of Away3D and as you can see, they did a great job. When you look at the demos you will see that they are amazing and the possibilities you get are enormous.

In a couple of days I’ll show you a test of the new player and Away3D 4.0.

What are you expecting of the future FlashPlayer release, please leave a comment.

As we mentioned one week ago, we gonna publish a series of performance tips for developing for the flash platform. Our plan was to start with a comparison between arrays, objects, dictionaries and vectors, but the best way to start is, to show you how to measure the performance of your Flash application.

There are two things you have to take care of, memory and CPU usage.

Detecting Memory usage:

A simple way to detect the memory consumption of your objects in AS3 is, to use a simple method called getSize(). It returns the object size in bytes. The usage is very simple you only have to call the function and trace the returned value.

var x:int = 4;
trace("The variable uses " + getSize(x) + " Bytes of your memory.");
// outputs: "The variable uses 4 Bytes of your memory."

Almost all primitive types consume 4 Bytes of memory (int, uint, Boolean), Numbers use 4-8 Bytes. The allocated size of Strings depends on the string’s length.

Detecting CPU usage:

It is difficult to detect the CPU usage of a code snippet, the best way is to detect the execution time. You can use a simple Actionscript method to detect the execution time of your application, getTimer(). The method returns the time since the FlashPlayer was started in milliseconds. Only a few lines of code are necessary to get your benchmark to work. Before running your code snippet you have to save the time and right after it you subtract the current from the saved time and voilà you have your execution time of your code snippet.

var ellapsedTime:uint;
// save the startTime
ellapsedTime = getTimer();
for(var i:uint = 0; i < 100000; ++i)
{
      //do something
}
// subtract current time from saved time
trace("The loop took about "+(getTimer()-ellapsedTime)+" ms to complete.");

In bigger projects it is useful to develop a test environment for measuring execution time of code.

Finally with this two small methods you have your first tools to improve the performance of your Flash Application. There are more steps to go and we will show you, what you can do to improve your code.

In the last months Flash loses a lot of his image and you can read phrases like “Flash is only used for unreliable ads”, “Every time i open a web page with Flash content on it, my CPU runs at almost 100%” or “We don’t need Flash, HTML5 is the future”. But Adobe did a lot to improve the performance of the Flash plugin and the work is still in progress as you can see for examples in the new Flash Player 10.2 or Molehill the next Graphic Engine. However it is not only Adobes work, you as a developer are also responsible for slow running Flash ads, websites or applications, it is your code. Because of that we will show you a few hints to improve the performance of your Flash apps or sites.

Our series will start on Thursday next week. At the beginning we will talk about dictionaries, objects, arrays and vectors.

Last wednesday we report about the new release of the FlashPlayer, 10.2. Today it’s time for the promised comparison of Flash 10.1, Flash 10.2 Beta and HTML5 video.

Some facts of the test conditions:

• MacBook Pro 2.4GHz Core2Duo
• 4GB RAM
• Geforce 9400M
• OSX 10.6.5
• Safari 5.0.2
• Flash Player 10.1.85.3
• Flash Player 10.2.151.49

Every test runs under Safari and the same video content to ensure that the test conditions are as good as possible. Because of that, the primary used videocodec is .h264 in two different containers .f4v for Flash and .mp4 for HTML5. For making nothing wrong in the development of the Flash 10.2 version the implementation of Adobe is used.

The following table shows the results of the tests:

As you can see, the performance has no significant difference between HTML5 and Flash for displaying HD content. Playing SD content under Flash uses almost the half of the CPU. But Flash Player 10.2 is still beta and hopefully there is yet more to come.

On the 30th of November Adobe released a preview of the next minor version of the Flash Player 10. The main feature of the new version is the StageVideo API which allows us to use video on a higher level. The usage of the GPU makes it possible, the StageVideo API uses the Graphic Processor to decrease the CPU usage. In the next days we will publish a comparison between Flash Player 10.1, Flash Player 10.2 and HTML5 video playback.

At the Adobe MAX 2010 a new version of the Flash Builder© was presented, codename “Burrito“. The main aspect of the new version is to bring FLEX to the mobile platform.

The first beta gives us the possibility to generate an .apk (file format of the Android installer) file from our Flex Project, therefore we can publish Flash Apps as native Android© Apps. Furthermore the final version adds support for iOS and Blackberry’s Tablet OS.

As an developer you don’t have to develop in multiple languages to deploy every possible mobile store. You create one Flex Project and publish it to three different platforms and you have “Flash” on your Smart phone.

Maybe it is the future for Flash on mobile devices. Flash authoring tools for creating mobile content running as native apps and not as SWF in the FlashPlayer. We’ll see.

Two weeks ago, Adobe© announced a new major version of the flash player. The features list is amazing and everyone who worked for years with the FlashPlayer was dreaming of the possibilities. The main feature of the new version is the low level graphic support. Molehill will support all available graphic APIs DirectX 9© under Windows©, OpenGL 1.3 under OSX and Linux, and OpenGL ES 2.0 for mobile platforms. With these capabilities Flash will use the GPU and not the CPU for graphic operations. In my point of view, HTML5 and JS can’t compete against it.

Take a look at the sneak peak from the Adobe MAX 2010.

At first everyone should know that there are differences between the performance of the Flash Player on MacOS X  and Windows. In Windows, Adobe has the possibility of getting extra computing power from the GPU. Flash on OSX is a complete different thing. To get extra power on OSX, Flash needs to use the Quicktime Plugin to get extra computing power from the GPU for Video Acceleration.

But now Adobe gets help from an unexpected site, Apple has announced the Video Acceleration Framework.

The framework allows Adobe to get the power they need to beat HTML5 on OSX. On Windows FlashPlayer 10.1 is much faster than HTML5.

Take a look at the last benchmarks.

There are exciting times in the coming months. Flash or HTML 5, what will be the fastest video player?

Update:

Adobe announced that the next version Flash Player 10.1 (Gala) will use the Video Acceleration Framework for MacOS X. Each Mac with a Nvidia GeForce 9400M, GeForce 320M or GeForce GT 330M gets extra power for displaying video content in Flash.

Ever since its release in 1996, Adobe (née Macromedia) Flash has splitted the online community in two factions: the ones who love it and the other who hate it. Adored by designers for its animation capabilities in the beginning, it became quite popular for web developers when ActionScript appeared on the scene. When FLV was introduced, Flash became the quasi-standard for watching online videos, streaming music and playing casual games.

But Flash has also grown to a big hardware-hungry monster, eating up your memory. Watching a standard quality YouTube-Video will heat up your CPU to 110%, accompanied by loud fan sounds and browser crashes.

“Whenever a Mac crashes more often than not it’s because of Flash. No one needs Flash, the world is moving to HTML5″ – Steve Jobs

I couldn’t agree more with Mr. Jobs – even though HTML5 isn’t an official standard yet, it provides a kick ass alternative for many many use cases of Flash.

But there are also people who disagree – “Flash is more than just animation”, they say,  “If a Flash web app uses to much system resources, it’s the programmers fault”. One of them is my esteemed colleague Paul, and after long struggles we decided on the ultimate battle:

Flash vs. HTML5

The idea is pretty simple: we both create a simple web application based on the same briefing – Paul will do this completely in Flash, I will do it completely without Flash. In 30 days we will present what we’ve done and a jury will decide which version works better, Flash or HTML5 – and clarify once and for all which one is the better technology.

The Briefing

“Create a simple web application called “Media Wall”. A media wall is the virtual equivalent of a pin board, it can hold any kind of media like photos, videos, songs, text messages … – whatever comes to your mind. Whether you use static or dynamic data is up to you, as well as the design and the behaviour of your app. Use as many effects and features as possible to enrich your application to demonstrate the advantages of the technology of your choice. The only rule is:

Use either 100% of Flash – or 0%!”

The Showdown

Well, 30 days from now. That means: 7. May 2010 – further details will be announced in this blog. We will also tell you later who’s in the jury and keep you updated about our progress.

What do you think, which is the superior technology, Flash or HTML5? What do you think who will win? And which technology do you prefer personally?

The Fighters

In the Flash Corner: Paul Schmidt

Paul Schmidt is a media developer from Potsdam, Germany. He is the founder of Webpacker, a Berlin-based media agency. Paul loves Flash for being more than just an animation tool and the many cool things he can do with PaperVision and ActionScript 3.

In the HTML5 Corner: Johannes Ippen

Johannes Ippen is a web designer from Berlin, Germany. He graduated in graphics design from the famous Design Akademie Berlin and works as an art director for a Berlin-based social gaming company. Jo hates Flash for displaying Lego bricks on his iPhone and crashing his little MacBook on a regular basis.