Download demo files (2.3MB zip)

Firstly, install Wowza Server and the Wowza IDE (I’m assuming you have Flash Builder installed already). Then, from the zip file:

1. Copy Drawing.jar into your Wowza server’s /lib directory

2. Make a directory in Wowza’s /conf directory called ‘drawing’, and copy Application.xml into it

3. Also make a directory called ‘drawing’ in Wowza’s /applications directory

4. In the Wowza IDE, import the project

5. In FlashBuilder, import the client project supplied

Run the server from the IDE run/debug button, or using the server’s own Start/Stop commands – this should start the server. Then, run/debug the FlashBuilder client application, and start two instances and try drawing. As I mentioned earlier, the resolution isn’t quite there in this example, but in a subsequent post I’ll talk about how we can tune that further.

Enjoy!

In its review of the Macbook Air recently Ars Technica stated that using Flash resulted in a 33% reduction in battery life, a figure that has since been used by a number of anti-Flash campaigners and others to justify its demise in favour of a combination of HTML5, CSS3 and Javascript.

I thought I’d take a sample of some HTML5/CSS3/JS demos and measure the effects they place on my CPU. I was doing these tests on a Intel Core i5 iMac using Safari 5 – on a mobile device CPU usage is only part of the battery life equation but the harder you work the CPU, the less battery life you can expect.

A few points to begin with:

• I’m not trying to make some sweeping statement about the real-world effects these results would have on battery life, nor am I going to pretend this was in any way scientific, it’s merely to demonstrate that rich content doesn’t come for free, regardless of the technology driving it
• I’m not attempting to create a Flash vs HTML5 post either – I’ve seen real-world tests where HTML5 outperforms Flash, and vice-versa. Both have benefits and disadvantages
• Similarly, I’m making no judgements or comments on the quality or efficiency of the demos shown below, they were all done by very talented people and the demos themselves are prime examples of what’s possible with HTML5, CSS3 and Javascript
• For all these tests the methodology was the same – open Safari 5, then run the demo and take a screenshot during the demo
• Finally, apologies for the lack of a LightBox view for the grabs, must fix my WordPress

Starting off, here’s Apple’s home page – it’s running a simple CSS transition in the Store div, but only taking 0.4%CPU -

Next, one of Apple’s own demos of another simple CSS3 transition, I didn’t quite catch the transition happening in the screenshot but the CPU is at 15.5% just after the transition completes;

Next, Apple’s VR demo – as I scroll the content, CPU averages about 20%;

Over to Andrew Hoyer’s blog now, with his demo of CSS3 animation, maxing out at an impressive 4% CPU;

Moving onto the <canvas> tag now. This draws directly into the browser using Javascript.

Firstly, the Voronoi demo from www.chromeexperiments.com. This demo takes up nearly 100% of my quad-core CPU;

Another <canvas> demo,  Deep Sea Stress – I added 5 ‘creatures’ here and ran the demo, 97.8% CPU;

A simple <canvas> gradient effect, 53.3% CPU;

A <canvas> particle effect, 27% CPU;

Ball pool by Mr. Doob, 27.7% CPU;

Finally, I tried a HTML5 game, Infiltration at Dusk, to see what the real-world effect was on CPU. It ran at around  41.5% CPU;

Conclusions

I like to see and experience rich content on the web. If I didn’t, I’d go read a book and save battery power that way. I expect that content to take CPU and memory and in return provide me with better experiences, and I understand this has implications for battery life. Here’s Apple’s own information on battery life for iPhone:

iPhone 4 can get 10 hours of video playback, or 40 hours of audio playback on a full charge at original capacity. In addition, iPhone 4 features up to 300 hours of standby time.

Why? Because decoding audio requires more CPU than standby, and video uses more CPU than audio. Even with dedicated decoding chips the device has to work much harder to display the rich media over static content.

A large part of the problem is that the Flash Platform is over-used by advertisers and this has a significant effect on CPU load. I hate Flash adverts as much as anyone, not least because they have given Flash a good degree of its bad reputation on the web. Multiple instances within a page, multiple tabs and windows compound the problem further. The reality is that if Flash is replaced by another technology like HTML5/CSS3/JS, the tests above demonstrate that any rich-media technology will require more processing power to render that content, versus plain text. It has the same potential for abuse too; it’s equally possible to write bad Javascript as it is to write bad Actionscript. There are so many factors involved that measuring the actual effects accurately will be difficult – some of these demos ran much faster in Safari than they did in Chrome, and vice-versa. Similarly I realise that Flash runs less optimally on OSX than Windows, but that debate is out of scope here.

Finally, a note about mobile devices – all of the above tests were carried out a desktop machine with a fast processor and 8GB of memory. On a mobile device the demos would be subject to much higher constraints/limitations. Some of the demos ran at well over 50% of CPU, and would either not run at all on a mobile device, or be very taxing on CPU and battery life. That’s the trade-off though – again I can accept that I can’t expect to run all rich content on my smart-phone, but I should be able to run some of it while knowing I will be using more battery when I do.

It’s the same as the difference between standby and talk-time to me.

Update 1: On the subject of HTML5 adverts, here’s a link to a HTML5 ad page, deliberately non-optimised and typical of the kinds of Flash advert used everywhere. On my machine this page took over 90% CPU. Thanks to John Auger for the link. See how your system performs.

Update 2: I tried the excellent HTML5/Flash Pong demo, and here are the results. As I stated before it’s not my intention to try and compare the two technologies, but as some people seem to think that guesswork is a good enough reason to assume HTML5 is less taxing on CPU, real-world results might be more credible. The developer says there’s a known performance issue on Safari, so I’ve posted the results for Chrome and Safari, but in my testing Flash outperforms <canvas> for CPU load here by a factor of around 4. Chrome actually seemed to be slightly worse than Safari in my tests.

Safari:

Chrome:

• An Introduction to AS3 Signals – great intro article by Aiden Taylor on InsideRIA about AS3 Signals, a very flexible and easy to use alternative to the internal Flex event framework
• Zoomooz JS – just goes to show how <canvas> is really starting to come alive now – this is a great demo of a dynamic zoom – I can imagine Prezi doing something with this before too long
• 2010 – What’s next for Flash & Flex Developers, Jesse Warden – a really insightful, well-written piece by Jesse on something that will be on a lot of Flash Platform devs minds right now
• Adobe Cross-domain Policy File Specification (PDF) – a handy reference if you need to build any kind of x-domain file for Flash/Flex apps

The project statement says:

webinos is an EU-funded project aiming to deliver a platform for web applications across mobile, PC, home media (TV) and in-car devices. The webinos project will define and deliver an Open Source Platform and software components for the Future Internet in the form of web runtime extensions, to enable web applications and services to be used and shared consistently

And a quote from the project leader:

That’s what we want to address – to provide a system that runs on all these platforms and domains, where the developer comes up with one application for one platform and lets you run it on all these devices – mobiles, automotive, gaming, and so on.

Sound familar? Thought so. Isn’t a ‘web-runtime extension’ a similar thing to Flash Player? Don’t solutions for cross-platform already exist in one form or another, like PhoneGap?

I’m sceptical; while I’m all for anything that helps developers to deliver and extend functionality across platforms (hell, I’m a Flash Platform developer!), throwing €10M of public money into a commercial/public partnership seems like we’re reinventing the wheel. What’s the ‘win’ here? The consortium is an odd mix of academic/commercial entities, and the large number of service providers backing this makes me wonder about the real motivation.

So, one to watch? Not sure yet.

This project is called ELVIN (ELectric Vehicle with Interactive Noise) and is a cute little van that will drive around playing a range of sounds. The purpose of the application is to allow people to evaluate the sounds used by the van, and the data gathered will be used to inform further research into safety and a number of other factors, including nuisance and brand perception – imagine living next to a busy road full of all-electric cars generating the same monotone sound, or a hybrid Ferrari that sounded ‘wrong’. There’s also big potential for aftermarket products; in twenty years’ time instead of a performance exhaust system you might just purchase an upgraded sound.

It’s interesting stuff, and it was fun to create a little app to help this research along. It’s already gathering useful data about perceptions to the current sounds the van is evaluating, but they need as much data as possible – to find out more about the project and to try it for yourself, head to http://go.warwick.ac.uk/elvin

• Acoustic Echo Cancellation Coming To Flash Player – Stefan Richter blogs about this upcoming feature in Flash Player. With that and the availability in LCCS of screen-sharing and recording, plus the release of FMS4, things are looking good for collaborative apps built in Flash/Flex.
• UX Movement – a great blog with some handy tips on UI/UX, I especially liked the article about form label placement
• RobotLegs Simple Walkthrough – best video example I’ve found so far on getting started with RobotLegs, from NumbKnuckle
• Flex Hero SDK – the first release of Hero, with optimisations for mobile/multiscreen applications, is now available
• Adobe AIR launchpad – a handy AIR-based app for authoring AIR projects

Tune in next week for more

After reading the article, I wondered how well Adobe AIR could really address these considerations, especially versus tools like OpenPlug ELIPS that export native code from a Flex project; at the platform level it will remove the need to code in native languages, and arguably would be more ‘native’ than a HTML web app, but AIR won’t be able to reach every platform, and doesn’t directly address the other issues discussed; we need more than the AIR platform on its own to solve this one.

Adobe has a strategy for this  – something it terms ‘multiscreen projects’. This concept goes a long way to allowing developers to get applications onto as many devices/platforms as possible, but it’s still a tricky thing to attempt to solve.  If the tools support the idea of decoupling application logic and views, the abundance and maturity of AS3 MVC frameworks out there now should make it even easier to design an application and target different devices. Good tooling and component libraries has been one of Flex’s strengths, but it would also help to have a strong set of mobile-optimised UI components for each platform. Flex 4.5 (Hero) is the first evidence of this at Adobe’s end, but I’m hopeful we’ll see other open-source and paid component frameworks for mobile Flex being made available.

Finally, going back to Suzanne’s article, all the UX articles I’ve read so far on mobile UI development seem to concentrate on catering for different screen sizes and resolutions with a fixed layout, but part of me wonders why this can’t be partly addressed with fluid layouts. We’ve been doing this for years with HTML (and Flex), and while it can’t deal with extremes, it is possible with careful scaling and layout work to achieve a UI that can work on different resolutions and screens. It’s not ideal, but it’s nothing new either.  One of the key differences between a desktop UI and a mobile UI is windowing, so there is emphasis on a full-screen fixed layouts, but I wonder what the scope is for ‘best-fit’, flexible fullscreen UI layouts in future?

It’s been a rollercoaster year in so many ways, and in the Flash development community things have been so frenzied sometimes it’s been hard to keep up with events as they emerged. We’ve had the CS5/Apple debacle, Flash 10.1 hitting desktop and mobile, and AIR on Android, plus a lot of FUD surrounding the future of Flash with HTML5 coming onstream.

I’m sure I’m not the only Flash Platform developer out there to have been incensed by Apple’s move to block the Flash CS5 iPhone exporter; YAY! had several enquiries about possible client projects that were effectively canned because of Apple’s amendment to its developer terms and conditions, and Steve Jobs’ subsequent open letter that was so full of inaccurracies it was the last straw for many. But enough’s been written now about that now, the best way forward is to continue to demonstrate that Flash is a strong and mature platform for application development.

As for YAY! and me, I’ve just completed my first commercial Flex 4 project using Flash Builder 4, and loved it. I’ve also been trying out some other MVC frameworks other than my native Cairngorm, and I’m really liking RobotLegs; it’s lightweight, easy to get started with and I’m finding it less difficult to learn than PureMVC. I’ve also been working in OSMF, which is turning out to be a great framework for developing media delivery components, and I’m working on a test project using Flex 4.5 Hero for an Android side-project I want to do. I’m also very excited to be heading back to work alongside the University of Warwick’s Web Development Team on mobile applications, including iPhone (pragmatism is a wonderful thing). Expect more updates from now on about my adventures with the Flash Platform, but also with these new areas of interest. I might even start posting some HTML5 demos if time allows.

YAY!MEDIA provides a range of Wowza application development services and we’re pleased that Wowza remains a popular and powerful platform for streaming and collaborative application development.

For Wowza streaming services, we recommend streamingwizard.com.

Congratulations to the Wowza team!

1. Download the CVS client package from the eclipse.org site and unzip it somewhere
2. Start the Wowza IDE and select Help > Software updates > Find and install
3. Select the option that says ‘Search for new features to install’ and click ‘Next’
4. On the next screen select ‘New local site’ from the right hand side
5. Navigate to the folder you just unzipped above and select it

Eclipse will then proceed to install the CVS Repository client. Restart Eclipse after the installation and once restarted, go to the Add Perspective button and the CVS option should be there in the list. And that’s it!