Favourite blogs for Steve's blog

Warwick Blogs » [Ux]

May 28, 2009

FlashCamp Birmingham, June 16th

Here’s some news of what promises to be a great (and completely free) conference coming up in June for Flash Platform developers. FlashCamp Birmingham is being held on June 16, arranged by the Midlands Flash Platform User Group, and will consist of a range of presentations and talks for novices and experts alike. Events like this are a great opportunity to network with other novices, experts and developers and will also be an opportunity to see the new Flash Builder 4 in action. Some of the most knowledgable people in the Flash/Flex/AIR community will be there speaking, including Stefan Richter and Simon Bailey, while Adobe will be providing the keynote.

Whether you’re a novice or a seasoned pro, everyone will learn something at Flash Camp in Birmingham. We’ll explore existing Flash Platform technologies like Flash, Flex and AIR , before looking ahead at Flash Catalyst and beyond. Our keynote will be from Adobe Systems, who will also be running an hour-long session later in the day. We have a group of sessions dedicated to the creation and customisation of Flex components, and to add some creative inspiration, there will be presentations on real-time 3D in Flash, and how to take your Flash application architecture to a new level.

More information at http://www.flashcamp.co.uk/ and hopefully see you there!

April 12, 2009

Back to writing about Flex, AIR and Wowza

It’s been a busy few months since my last blog entry about anything related to Flex and AIR development. I blame a Twitter addiction, but there are still some things you can’t write about in 140chars and I do have a few development-related things to blog about, so expect some hopefully interesting entries over the coming weeks. Since November I’ve been working on two projects: an AIR-based media conversion client and a new chat application in Flex and Wowza Media Server. Some things I plan to write about: AIR file upload, more on using the local filesystem APIs in AIR, using Remote Shared Objects for communications, and lots of tips and tricks. I’ve also been playing with Gumbo, AFCS and PureMVC recently, so I hope to post some of my experiences with those as I go.

Anyway, good to be back. :)

November 04, 2008

AIR FileReference and scope

I ran into a small problem recently in my AIR application when using FileReference to initiate and monitor a download operation; no events from a FileReference object created within a method were being fired. After a quick check of the Livedoc entry I found the issue:

if the FileReference object goes out of scope, any upload or download that is not yet completed on that object is canceled upon leaving the scope. Be sure that your FileReference object remains in scope for as long as the upload or download is expected to continue.

So basically a FileReference object needs to be created in such a way that it stays in scope for the duration of your operation; if you instantiate it within a method it there’s a good chance it will go out of scope and any events you were waiting for from it will never fire. The easiest solution is to declare it outside of the method, so instead of:

private function download(event:MouseEvent):void 
    var fileRef:FileReference = new FileReference();
    fileRef.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
    fileRef.addEventListener(Event.COMPLETE, onComplete);
you need to do something like this:

private var fileRef:FileReference();
private function download(event:MouseEvent):void 
    fileRef = new FileReference();
    fileRef.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
    fileRef.addEventListener(Event.COMPLETE, onComplete);

Sorted. Afterwards I also found more info about this via a couple of useful blog articles here and here.

October 03, 2008

FOTE 2008 notes

My live notes from the Future of Technology in Education event at Imperial College…

Google lady (from the sales corps)
Talking about the cloud, storage vectors, 60% 3G phones by 2010
Asserting that edu is still catching up with this
Google says it ‘can help’ – by innovating for us(!)
Google apps for education – usual stack; Gmail, Apps, Gears
‘The Big Switch’, book by Nicholas Carr – moving to the cloud
Saying we should concentrate on our ‘core business’ and let Google do everything else.
Q. Why use Google apps? A. Because students already use these apps and expect to be able to use them – I’m not convinced by this, many students I’ve asked don’t know anything about Google apps, and what would we be providing over and above? Why not just let them keep using those things as individuals and promote their use? Provides continuity…
Q. What protection does Google offer regarding data, service models? A. Google guarantees via contract, 5-year rule. Google apps should attract users because its good. Response – what about the erosion of internal expertise over time? Argues that email isn’t core.

Mobile technologies
Saying that mobile has been with us for years, showing pictures saying its just got smaller/more convenient/ubiquitous
Mobile allows new ways of learning? Push content, TV etc.
Concept of centrality via device
(aside – looking round here, there are more Linux ultra-portables and Macs than PCs about)

Why portability matters – BBC Backstage
Users is now back in control?
Multiple accounts, identity management is hard, OpenID
Thin clients, EEE etc. cloud has propretiary pitfalls, Second Life
Mentions GetSatisfaction.com, Yammer, using Basecamp, saying that the info is being collated/stored by another party, has issues. Basecamp lets you export your data for instance when you close an account, Flickr suggests alternative/rival services when closing your account with migration tools
Downtime scheduling clashes with UK, is Twitterdown.com etc.
Shows how Flickr will ‘enhance’ your content with other stuff, tags, comments.
Some good stuff here in general about being careful about reliance on the cloud.

James Broad, Yahoo, Opening up the web
Works on finance.yahoo.com
Open standards driving adoption/innovation, esp. auth mechanisms
Mentions customisable pages, BBC, Facebook apps, integration of Facebook into Yahoo homepage, Read and Write web, microformats, YQL, WAI ARIA.
Says that Flash is the future (just checking you’re reading this)

Personalisation of Learning, Philip Butler, ULCC
‘Harnessing Technology Review 2007’, BECTA report
‘Technology motivates learning’ – going back to Google’s earlier message, does that suggest that the alternative is that technology integration actually is core business for HE? It’s easy to twist that argument both ways
Cultural shifts – networking, community, personalisation, immediacy, interactive, asynchrony, technologies in your pocket
VLE, Personal Learning Plans within VLE, progression, ownership
Taken screen from LearnZone (BBC), showing personal gateway, updates, timetable etc.

Tim Marshall, JANET
IPTV, trends, demo of HDTV stream, 1100kbps
Student-produced content, needs leadership, some kind of community of student producers?
IPTV briefing 6 Nov – better streaming technologies are inevitable, the key is ubiquity and standards. If this (quite cool) streaming platform requires students to install another plugin, it isn’t going to catch on unless it’s adopted as a standard

Miles Metcalf, Ravensbourne
User-owned technology, using commodity computing, no longer need to supply laptops, hardware
Opportunities for integrating with user-owned computing
Software as a service, user choice now matters, can’t dictate so much
Role of IT Services – arbiter of fair use, defender of scarce resource, agent of transformation, or just plain service provider?
Control is being lost, network access via 3G for instance
Extra-institutional practice into institutional learning
Personal Learning Environments – allows external and internal integration of material
Ad-hoc comms mean different social behaviours
Thinks the VLE should still be part of the stack, but still a bounded system
OpenID far from perfect, but says better than Shibboleth because it would cross boundaries (education/commercial)
Talking about why we shouldn’t be on Facebook as an institution

Building 21st Century LEs, John Hickey, Apple
Students creating new fields of study
Guidance, scaffolding
Different models of engagement, media-rich, producers of content
Going into a classroom almost like ‘taking a flight’, turning off devices, disconnecting
Widening gap between the outside world and education – perception of outside world being more advanced
‘Shift in power’, consumerisation of IT
Example – don’t provide generous email quota, students just move to Gmail – easy to do
Catch-up mode
Context/Core analogy; Core being the things you do yourself as an institution, Context is everything else – flip the 80/20 rule so that 20% is context – suspicious about the driver here, enterprise would say that, but Apple do have a track-record (e.g. iTunesU).
Showing iTunesU promo video, targets student/public – shows how to navigate, get to institutional homepages, how the feeds work, iPod use etc.

Tom Abbott, Warwick University
Explosion in HE – creativity, student as producers
Moving from extraordinary to ‘core’, sustainable output
Students are digitally-literate, but faculty generally less so
Lectures possibly outmoded (although still relevant)
Fail again, but fail better
Talking about Warwick’s toolset – CMS, blogs, easy publishing, video and audio
Recording applications demoed and worked!

Alastair Mitchell, Huddle
Good choice of Dilbert cartoons – ‘Everything is a platform’
I quite like Huddle – vastly different from the early betas, with doc workflow management and more collaborative features than most other platforms I’ve seen (that aren’t Sharepoint).

September 26, 2008

AIR: Rendering native system icons, Pt.1

I was asked how I got AIR to display native file icons in a component – it’s pretty easy to do, although my method is a little convoluted to explain without posting reams of code, partly because it’s buried in a sequence of Cairngorm events/commands but also because there a couple of important issues to watch for and handle (see bottom of this entry for those). Here’s an overview:

AIR has support for retrieving the native system icons in whatever supported sizes exist. The icons are stored as a property of each File object as BitmapData, in an array, File.icon.bitmaps. Each element in the array is the same icon at different sizes, e.g. 32×32, 16×16 etc.

In order to get at an icon at a given size, you can’t rely on what sizes are available at a given element position, so you need to create a new (empty) BitmapData object at your target dimension, then iterate through File.icon.bitmaps until you hit the matching-sized BitmapData object. Once you have a match, you can put the matching data into your own BitmapData object. Here’s a brief example:

public function get32Icon():BitmapData {
            var myFile:File = new File("C:/foo.txt");
            var bmpData:BitmapData = new BitmapData(32, 32);
            for (var i:uint = 0; i < myFile.icon.bitmaps.length; i++) {
                if (myFile.icon.bitmaps[i].height == bmpData.height) {
                       bmpData = myFile.icon.bitmaps[i];
               return bmpData;

Obviously you need more than the code above to handle situations where the 32×32 icon isn’t available, but that’s a basic way to grab the icon as BitmapData. At this point you could create a new Bitmap object and give it the captured data, but for my application I set the icon data back onto an Object that represents the File object (I actually used an ObjectProxy because I wanted to bind this data to an ItemRenderer later) – again this becomes important later on.

Okay, so now I have my icon data, in an object that also contains other information about the file, like its name etc. To display it in a TileList, or other component, I just use a custom ItemRenderer. I set up an image tag for the icon within the renderer:

<mx:Image width="32" height="32" source="{getIcon(data)}" />

...and then create a method in the renderer to return the icon data to the image component:

private function getIcon(data:Object):Bitmap {
        var bmpData:BitmapData = new BitmapData(32, 32);
        bmpData = data.icon;
        var iconBmp:Bitmap = new Bitmap(bmpData);
        return iconBmp;

Now each time the ItemRenderer has to render an item, it gets the relevant icon, the filename etc. and displays them within the TileList – easy! Here’s the result, showing the app running in XP and OSX:
Files part screen grab

But there are caveats; AIR does not behave consistently on all platforms with icon data. Here are couple of the problems I encountered:

  • Performance. There seem to be some differences in execution time for file system queries in AIR. Originally I had an ArrayCollection of File objects as the DataProvider for the TileList, retrieving icon data for each one in the ItemRenderer as required. On Windows this seemed fine, but on Mac OSX it proved to be very slow, to the point where my app was unusable. I overcame this by using the Flex Profiler to see what was causing the problem, finding that the underlying get icon() execution time was very long on OSX. By grabbing the icon data once, then caching it and other key File properties into an ObjectProxy, I was able to get OSX performance almost on a par with Windows, and this also sped things up elsewhere because I was calling get icon() once, rather than per-item in the renderer. It also improves scrolling performance of the TileList because that component renders items dynamically as they are displayed. In fact you could go one step further than I did and extend UIComponent to improve render performance even more.
  • Missing icons. AIR on Windows won’t retrieve some icons, in particular for .EXE, .TMP and .INI files. These are stored in shell32.dll on XP, but for some reason AIR can’t get to them. I also found one or two similar issues in OSX. AIR on Linux using the most recent AIR beta just returns a null value for File.icon.bitmaps, so rendering native icons is currently impossible. You need to add some way of checking for a missing icon in these cases, and swop it out for an embedded one if you can; I created a temporary workaround where I parse the BitmapData for null pixel values.

The next part of this article will deal with how I got native icons to render for remote files, but I bet you can already guess how that’s done…

September 25, 2008

AIR: Creating a custom status bar

It’s easy to create your own customised status bar for AIR applications. For my example, I wanted to be able to display a network status icon that indicates whether the application is connected – this is bound to a state set by AIR’s network service monitor, via Cairngorm.

First of all, in your application MXML file, make sure showStatusBar is set to true, add the statusBarFactory parameter and point it to your custom component:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    statusBarFactory="{new ClassFactory(CustomStatusBar)}">

Then just make a new MXML component called CustomStatusBar and add any elements you want to display in your new status bar. There are a couple of things AIR will be expecting from a StatusBar, most importantly the status setter and getter methods required to display status text:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox width="100%" 
            import mx.events.FlexEvent;
            import uk.ac.warwick.filesclient.model.AppModel;
            [Bindable] private var modelLocator:AppModel = AppModel.getInstance();

            [Bindable] public function get status():String
                return this.statusText.text;

            public function set status(value:String):void
                this.statusText.text = value;

            private function showNetworkStatusIcon():void
                var path:String = "";
                    statusIcon.source = "greenlight.png";
                } else {
                    statusIcon.source = "greylight.png";
    <mx:Label id="statusText" paddingLeft="7" fontAntiAliasType="advanced"/>
    <mx:Image id="statusIcon" 
    toolTip="Network status"  
You can add almost anything you like in there with this technique; animations, custom text etc. Here’s a quick screen grab of my basic custom status bar with its status light on green after a bit more tweaking of the layout and styling – nothing amazing, but its useful to be able to add your own elements when required (click to enlarge);

Status bar

September 18, 2008

Flex unit testing and continuous integration with FlexUnit, Ant and Selenium

Here’s a couple of really useful guides to setting up a continuous Flex testing and integration framework using FlexUnit, Ant and Selenium, written by my friend and ex-colleague Kieran at Black Pepper, and his colleague Julia. The articles cover setting up FlexUnit and Ant and then creating acceptance tests using FlashSelenium:

September 10, 2008

Flex IoC frameworks: which?

I need some Flex framework advice; I’m about to start a couple of new AIR projects, and decided that instead of using Cairngorm again it would be a good idea to try a different framework. There’s no particular reason to move away from Cairngorm – I’ve become reasonably comfortable with how it works and what it does, and I like it, but I’d also like to explore other approaches to Flex development. Last time I looked around there were a few alternatives, but in the few months since I posted that entry a number of new frameworks have appeared, and the amount of choice has increased considerably.

At first I thought I’d go for PureMVC – it seems like a popular framework in general, but around here our Java development is based on Spring, and I’d quite like to explore the dependency injection/IoC concepts at the core of Spring in a Flex app, to learn for myself how to apply such patterns in a context I’m familar with.

As far as I can tell, there are three IoC frameworks – Prana is a lightweight IoC container for PureMVC, Mate, which looks really well-thought out, with good documentation, and finally Swiz, which also looks interesting. I’m just not sure which will help me get into IoC as quickly as possible, coming from Cairngorm. I suspect I’ll go for PureMVC with Prana, but if anyone has any advice/insight it would be useful!

September 09, 2008

Silverlight to support H.264, AAC

Follow-up to <video> and Flash from [Ux]

Microsoft has announced that Silverlight will be supporting AAC audio and H.264 video. With regard to my previous entry about the video tag, this will make it even harder for Theora and can only consolidate H.264 as the current codec of choice. The announcement comes as no surprise to industry experts, but this move proves that MS is aggressively going after online video in a big way, but I’m not sure anyone really wins – based on browser/OS install base Silverlight may become more of a threat than the video tag would have been.

I’ve also been thinking a little more about Chrome – given that YouTube is part of Google it’s likely that when Chrome supports the video tag, the embedded codec(s) Google chooses could have a huge impact. Considering that H.264 is already being used on YouTube, perhaps that would be the default choice?

September 08, 2008

<video> and Flash

The availability of a Firefox 3.1 alpha (and Safari 3.1) with video tag support has prompted a few people to proclaim that Flash will soon be replaced as the primary medium for playing video on the web. I think predictions of Flash’s demise are both premature and inaccurate, and also think there’s a possibility that the introduction of the new tag could cause more problems than it was intended to solve. Why? – codecs…

Firefox (and Opera) will support one embedded codec in the first instance, Theora. Theora is completely open-source but based on an older-generation codec, On2 VP3. Flash currently uses VP6 and H.264, Quicktime Player supports H.264 and Silverlight adds support for VC-1, one of the newest kids on the video block. All are newer, higher-quality formats than Theora (typical comparison here). That’s not to say Theora is a bad codec, far from it, but in the world of video codecs it is at least a generation old, maybe more, and as such doesn’t represent the current best of breed in terms of video quality/performance.

Secondly, in order to take over from Flash, Theora needs to be on all or enough browsers to work as a standard. The HTML5 specification doesn’t advocate or recommend any codecs, and as the specification notes, this is problematic:

It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.

So, if one browser advocates Theora, will every other browser follow? After all it’s a fairly trivial (and zero-licencing cost) thing to include support for it. Firefox and Opera combined currently have around 25-30% share of the browser market; while 30% (and growing) is an excellent starting point to build from, IE’s and Flash’s dominance in terms of installed base will make it difficult forTheora to overtake the current popular formats unless they support it too.

We’re not starting with a blank sheet of paper here either; many video services and sites that use video have spent a considerable amount of time and investment in encoding to a specific platform, one that is currently supported by enough browsers/platforms to make it worthwhile. At best a move to Theora would have to be transitional, and likely to take several years, as people migrate content over to the new format. IE is the most common browser by a considerable margin, and Microsoft has its own favoured formats; WMV via Windows Media Player and/or VC-1 via Silverlight, plus the formats supported by Flash Player. It’s hard to see these not being with us for a while yet, unless IE starts supporting Theora at the expense of Windows Media formats (unlikely); if Theora isn’t included in IE, it simply isn’t going to get traction as quickly as it needs to to become the standard. Similarly unless Webkit (as the core engine of Chrome and Safari) or YouTube also add native support for it (AFAIU latest Safari builds that support the video tag currently support Quicktime’s supported formats, which doesn’t include Theora as standard), it’s hard to see it taking over. While users will be able to add new codecs manually, assuming they will do so in order to view a new video format could be risky. Then there’s streaming support via RTSP/RTMP, etc.

My point is we are going to have to live with multiple formats whether we like it or not, and that Theora is a technically a backward step; it will only take one browser vendor to ignore Theora and it will become void as a standard, yet HTML5 isn’t forcing or even recommending a standard to follow. At this point video on the web will be in danger of becoming a mess as people find they don’t have the required codec and have to install support for it. I wouldn’t go as far as to suggest the video tag is going to create chaos where relative calm currently exists, but it might. I can’t see a good technical reason why the current model of using Flash as a wrapper for video and codec support is broken, or why it needs to be replaced with what may become a mess of format support where we move from two or three dominant formats to five, six or maybe more competing ones, plus multiple downloads for users. In my experience proprietary formats tend to be better, that’s why they cost, and neither do I buy into the ‘everything has to be open-source’ argument, especially considering that the dominant audio format is MP3, which isn’t an open-source format at all (even AAC codecs require patent licence).

Most importantly though, while all this takes place a solution already exists; Flash Player. It supports H.264, VP6 and Sorenson, most people already have it and it works on all the browsers mentioned above, across Windows, Linux and Mac. “But Flash is a terrible resource hog!” I hear you say, but when you consider that Flash is decoding and rendering video, in software, it’s worth noting that this takes CPU cycles and is a processor/memory intensive task. Even if you could run fully-hardware accelerated video (which Flash is moving towards), video is still relatively intensive work for the average desktop/laptop. In the first instance, Theora decoding in Firefox is going to run in software, just like Flash, and presumably consume CPU cycles in a similar way.

With all this in mind it would seem to me that the only reason for wanting to take Flash off its video pedestal is that it is owned by a commercial entity, ignoring the fact that Flash Player has been a key enabler and driver of the dramatic increase in use of video on the web, without any of the ‘payback’ people seem to fear. Without advocacy from W3C, the reality is that browsers are going to be free to implement their own choice of favoured codecs, but those choices are likely to be driven by different criteria, not necessarily whether they are open-source. It could be about to get messy.

Alternatively, we could all start using Mike Chambers’ workaround for getting Flash to display video wherever the video tag is used, and everyone could just carry on. ;-)

August 28, 2008

David Tucker's 10 common mistakes when building AIR applications

David Tucker recently posted an article on the Adobe Developer Centre citing 10 common mistakes with developing AIR applications and how to avoid them. I thought I’d quickly compare David’s points against my current AIR project, a remote file-system/transfer manager:

1. Making an application platform specific

David primarily refers here to the UI/UX differences between platforms, but I also found it essential because I encountered significant performance differences with some file system operations (icon getters, mostly), which were fixed with the help of the Flex Profiler. At the moment we can’t test it on the Linux Alpha, but hopefully we’ll be able to try that soon.

2. Not including update capability in an application

We included this as soon as the framework became available and it works very well – whenever the application starts it can check for a newer version of itself, and the user has control over whether to update or not.

3. Changing the application ID after an app has been released

Oops – I ran into this early on; changing the application ID means the update framework will break, amongst other things. Changing the name of your application halfway through the project also risks confusion.

4. Not planning for offline support

Our application relies on a live connection to work, but it does use AIR’s network monitoring APIs to check for a valid connection at startup and then continually monitor connection status, and warns the user if connectivity is lost.

5. Not thinking in AIR

I didn’t find this too difficult – some things were relevant and others weren’t. There have often been moments where I’ve discovered a capability and thought “I didn’t know it could do that”; we do use the application storage directory and the user’s temp directory for file transfers though, and the File , FileStream and FileReference classes were the key to making it work.

6. Using custom chrome to create confusing interfaces

We used the standard chrome, but most of the AIR applications I’ve seen that use custom chrome have done so pretty effectively. One of the most powerful aspects of AIR is that you have very fine control over the UI. As a counter to this though, in addition to the native window chrome there are valid use-cases for having access to native system controls, like toolbars, buttons etc. – platform UI differences can make this even more acute, so I’d like the ability to use standard UI elements where appropriate.

7. Not using the seamless install badge

We implemented this early on – having an install badge makes installation a snap for most people and like the update framework it works well – installation of the AIR runtime can be managed automatically and so far the whole thing has worked fine, except when I broke it myself by not updating the right fields in the updater XML file.

8. Not encrypting sensitive data

Not relevant for this application (yet) – we don’t store any information other than the last file-space used, using a standard SharedObject. AIR has an EncryptedLocalStore for this kind of thing though.

9. Not preserving native interaction

As yet we haven’t got a complete set of keyboard interactions in place (e.g. cut, copy and paste) but some are there. The core interaction type is dragging and dropping, and Flex/AIR gives you control over the process by splitting this action into discreet event-driven stages, so providing visual feedback about whether a drag/drop is allowed can be controlled via your own logic. Something I’ve not yet overcome is how to work with internal and external drag handling at the same time – I may be wrong here but so far it looks like the external drag management only knows about drag in/out operations at the application level, not at the component level, so I need to work on how to use the external drag management to allow items to be dragged into components with the same level of control as the internal drag manager.

A more difficult problem is when a standard component doesn’t quite mimic the operation of a native system control – take the Tree for instance, which will close when its DP is refreshed – in situations like these its nearly always possible to closely replicate the native behaviour by extending or over-riding the component default, but there can be some work involved when finding out what to do. At this point I’ll thank Peter Ent and the excellent Flex Examples Blog for their invaluable resources; they saved me a lot of time.

10. Assuming performance doesn’t matter outside of the browser

In this case, the performance issues highlighted when checking across platforms also highlighted the importance of using the Flex Profiler, the net result being a five-fold increase in speed on OSX and smaller but useful increases on Windows, plus reduced memory usage. The original performance on OSX was bad enough to almost make the application unusable, but after identifying and fixing/working around the problems, the application performs similarly in Windows and OSX.

Thanks to David for writing about what to avoid – fortunately most of them we’d already come across and fixed, so that’s good!

August 19, 2008

FlexCamp London, Aug 28th

Writing about web page http://www.flexcamp.co.uk/

I really want to go to Flex Camp London but I can’t, so I’ll plug it instead because the programme looks great, the event is free and maybe someone will send me a free t-shirt :-)

July 18, 2008

On Dialogue Boxes…

I’m currently writing a few dialogue and interaction menus for my current AIR project, and the thought had occurred to me that having established a reasonable methodology for handling and displaying modal dialogues within my Cairngorm-based app, I was perhaps using them almost by default, without thinking too carefully about whether a modal dialogue was the most appropriate means of interaction. By modal in this context we mean “A state of a dialogue that requires the user to interact with the dialogue before interacting with other parts of the application or with other applications”.

At the same time, Chris and I have been talking about metadata recently (another entry to come, but the premise was that persuading users to input metadata about assets is hard to incentivise). Related to that, Chris sent me this great link to an entry by Jeff Attwood that in turns talks about an entry by Eric Lippert on how dialogue boxes are perceived by users:

* Dialog boxes are modal. But users do not think of them as “modal”, they think of them as “preventing me from getting any work done until I get rid of them.”

  • Dialog boxes almost always go away when you click the leftmost or rightmost button.
  • Dialog boxes usually say “If you want to tech the tech, you need to tech the tech with the teching tech tech. Tech the tech? Yes / No”
  • If you press one of those buttons, something happens. If you press the other one, nothing happens. Very few users want nothing to happen—in the majority of cases, whatever happens is what the user wanted to happen. Only in rare cases does something bad happen.

In short, from a user perspective, dialog boxes are impediments to productivity which provide no information. It’s like giving shocks or food pellets to monkeys when they press buttons—primates very quickly learn what gives them the good stuff and avoids the bad.

I liked that, especially the bit about “Teching the tech” – while it’s quite funny it’s also a pretty accurate reflection of my experience as a user.

This is also related closely to what Chris and I were discussing about metadata; expecting the user to fill in information that has no obvious purpose and slows down the primary task of upload/publish or whatever it is that they are trying to do, is likely to be ignored. If those fields/dialogues are modal or conditional, it’s worth thinking carefully about whether there are alternative ways to complete the operation or gather the infomation. That’s harder to do of course, and there are cases where modal dialogues should be considered appropriate, e.g. where the application is about to do something destructive like deleting or overwriting a file, but there are alternatives, like how IE and Firefox avoid breaking the flow of interaction when blocking certain actions.

July 01, 2008

Flash SEO, Adobe manoeuvres

Kudos to Adobe, Google and Yahoo for creating the mechanism for Flash content to be indexed on search engines. With one or two reservations (like how to distinguish between application content and a site) I think this is another significant move towards maintaining the ubiquity of Flash. It seems as though Adobe is steadily, but impressively quickly, removing piece by piece the most-cited drawbacks of Flash. Some of the most significant announcements (in no particular order):

  • H.264 video support
  • Open-sourced Flex SDK, BlazeDS
  • Opened access to Flash Player APIs
  • 3D support (thanks to Papervision, Away3D etc.)

Obviously it doesn’t take a genius to work out that, in part, Adobe has had to make some of these moves – HTML5, advances in Javascript and browser technologies promise or already offer many features that up until now Flash had to itself; the canvas and video tags in HTML5, DHTML effects, processing.js, SproutCore, the list goes on – it was inevitable that some of Flash’s functionality would be adopted and integrated into other technologies, but I think that those people who still maintain that they ‘hate Flash’ should still agree that it has been a primary driver of change on the web. This is particularly true in three areas; animation, user experience and video. Flash may responsible in their eyes for evil banner ads and inaccessible sites/UIs, but those things are created by people, and a technology that provides a degree of creative freedom is open to abuse – there are plenty of bad DHTML sites around and more than a fair share of annoying DIV-based floating ads out there already, but there is also a great number of fantastic and successful experiments in user interface design, animation and application experience. Flash has enabled developers to do things on the web they could not have easily done by other means, and those people that attribute bad practice to Flash are both ignorant and in for shock if they believe the same things won’t happen when other technologies catch up. Up until now it’s been far too easy to blame Flash, when Flash isn’t the problem. Use it where it works, not where it doesn’t (like whole sites).

In addition to the technology itself, Adobe has provided the means to develop and deploy it effectively, with the Flex SDK and FlexBuilder. Personally I have no objection to proprietary technologies when they a) work, b) don’t break anything and c) positively drive change and allow people to do things that standards-based technologies often take much longer to enable (and often not quite as well). Flash and Flex won’t be the standard, they will peacefully co-exist with other technologies (along with man, and fish); a single unified standard just isn’t possible in a competitive world, nor is it always desirable. Someone has to innovate, and attacking Flash (or Apple come to to think of it) for being proprietary is like attacking Ferrari for making a better sportscar (and charging for it). If it enables you to go faster, better, and (similar to Java and JS) is on 90-something% of desktops, who can blame Adobe for adding features and functionality that will maintain or increase edge and adoption? And at the same time if it is making key components of its platforms open, regardless of motivation, it’s A Good Thing*. So long as the standards do catch up, it’s fine.

There is I think, one thing left to do at the moment, the final hurdle as I see it – accessibility. It’s kind of in there, but if Adobe could make Flash and Flex as accessible as a typical web page, or at least as easy to make accessible as a web page, it would remove the one last stick with which it gets beaten. In fact and to bring this full circle, the same mechanism by which search indexing now works may also prove the key to unlocking accessibility, so maybe that’s already possible?

*None of these arguments apply to Microsoft, especially the Ferrari analogy. Silverlight is neither better or faster.

June 02, 2008

Yahoo BrowserPlus and AIR

Writing about web page http://browserplus.yahoo.com/

Yahoo has entered the RIA domain with BrowserPlus, a technology that allows you to create functionality that bridges desktop and browser. Some reports I’ve seen say that BrowserPlus is a direct rival to AIR, but from what I’ve read on the Yahoo site I’d say it sits closer to the browser than the desktop, like Gears; applications are still browser-hosted, whereas AIR sits more evenly between the two (albeit with much stronger emphasis on applications being system-based), but I’m wondering how many more niches there are left to fill in the RIA paradigm. BrowserPlus does offer some genuinely useful capabilities that are similar to those offered by AIR, like file drag/drop and system tray capabilities so comparisons are inevitable and in some ways justified, but these are currently a limited subset. An area which I think does justify close comparison to AIR is the development ‘gateway’, simply because both technologies allow HTML/JS developers to create RIAs with their existing skill-set.

If it’s easy to detect the existence of the BrowserPlus runtime within a page, it could get some traction; on our own web applications I can see it being useful to provide users who have it installed some extra functionality, like dragging and dropping files to the browser, or page update notifications, but it would be important not to rely on it being there for core functionality, partly I think because it would be harder to persuade users to install something that isn’t so ‘tangible’ as an AIR or Webstart application. Security may also be a concern – AIR and Java applications need to be digitally signed whereas it’s not clear yet what Yahoo will do here. I guess though it will depend on how useful and ubiquitous applications built on BrowserPlus become, and Yahoo has some fairly prominent applications for it within its own portfolio (e.g. Flickr). AIR is fast approaching that stage I think – Ebay Desktop, Google Analytics AIR, Twhirl, Adobe Media Player and Snackr are now core applications for many people I know, and the new and rather lovely Acrobat.com suite (and not forgetting Aviary) will be a major driver for further adoption, especially if the the AIR version can be extended to include desktop versions of the applications. I’m sure Yahoo will have the detection aspect covered – in addition they have done something similar to JavaFX with an extensible runtime that can be added to without re-installation, so it’s really only a case of getting that important first-install.

One final thought – it seems to me that if you could combine BrowserPlus with Prism you would have something closer in concept to AIR, if not execution; a browser-based application that looks like a desktop application, with a desktop integration runtime on top.

May 29, 2008

Features vs Functionality

I’ve just spent a few days trying to implement a specific feature in my current AIR project. Having tried several approaches and workarounds with varying degrees of nearly-but-not-quite-ness, I’ve had to admit defeat for now and have moved to a different implementation that I’m less happy with, but still allows basic functionality. At the same time Kieran has recently started work on his first Flex project and it’s been interesting to see how an experienced developer, when faced with a feature or issue he can’t easily implement or find a solution for, has quickly fallen back to a ‘next best’ solution, and moved onto getting the application functional and usable.

Time pressures obviously play a part here – the amount of time you have available before the project has to go out the door is going to impact on how much you are able to include desirable features over essential ones, but I think what I’ve picked up from this is that as soon as you encounter an issue, if you can’t predict reasonably accurately how long it’s going to take you to solve it, you need to set limits on how long you spend trying to make it work and at same time identify what is achievable if you fail to get it done within that limit.

If all this sounds like common sense, it is of course – but I found that in this instance I got too focused on a specific feature, rather than on getting the application functional enough that users can start using it sooner rather than later.

May 15, 2008

Flash Player 10 ('Astro') pre–release on Adobe Labs

Writing about web page http://labs.adobe.com/technologies/flashplayer10/

A pre-release of Flash Player 10 is now out on Adobe Labs. Astro has a number of new features; P2P support, Speex voice codec (no more having to use ASAO!), dynamic streaming support and RTMFP, 3D, improved hardware acceleration and more sophisticated text control being the ones I’m most looking forward to.

The full feature list can be found here

May 14, 2008

Flash H264: Moving the MOOV Atom

I just had to encode a couple of videos from AVI to H.264 format for playing via a Flash-based video player and noticed that the player was having to download the whole file before playing it. I checked out this Adobe Tech article on H.264 encoding and here’s why:

One important thing about playing an H.264 video file as progressive download is that the moov atom needs to be located at the beginning of the file, or else the entire file will have to be downloaded before it begins playing. The moov atom is a part of the file that holds index information for the whole file.

I was using SUPER to encode to H.264, and by default the moov atom gets placed at the file end. Fortunately, Renaun Erickson at Adobe has kindly created a small AIR application (a port of a C++ application) that will take a standard H.264 file and relocate the moov atom to the front of the file, and then progressive download works properly.

Edit- thanks to Marshall’s comment, if you’re using SUPER there’s an option to select ‘Streamable H.264’ – do that and the moov atom will be put at the beginning of the file. :-)

May 09, 2008

AS Development skills sharing at Warwick

Chris was talking today about intra-team/department skills sharing, which I think is a great idea. With regard to Flash and Flex development at Warwick we’ve recently embarked on something along these lines, with the formation of a University Flash and Flex developers group consisting of people actively using (or just interested in) Actionscript development. It started with a forum that was initially populated with ITS people (plus one or two others), but since starting to deliver some Flash courses for ITS Training I wanted to maintain contact with what attendees did with the skills they’d acquired after the course, and the forum was opened up to allow more people to contribute. We held the first ‘skills session’ a couple of weeks ago, in the Teaching Grid. It was purposely an informal gathering, consisting of developers from ITS and departments, plus lots of coffee and biscuits. The session was an opportunity for everyone to show what they’d been working on and share expertise and a mix of ongoing Flash, Flex and AIR projects were demonstrated, plus discussion on development approaches and potential applications in the future.

Overall I thought it went well (we ran out of time in the end) and although next time some structure to the session might help us cover ground more efficiently, the informality and range of projects kept it interesting, and it was especially good to share ideas with others while receiving questions and feedback. As a result of the session, I’ve been asked to present a more formal hour-long session on AIR to the CIS Team next week, which I think I’ll prepare some slides for.

Anyway, my point is that personally I found it quite fun/rewarding to find out what other people were doing or planning to do with the technology, and to see and discuss approaches/methodologies and alternatives; we should definitely do more of this kind of thing in future. Time will tell whether we maintain the Flash/Flex/AIR group sessions but I hope we can.

Warwick staff interested in Flash/Flex/AIR/AS3 development can join the developer group forum here. For students, Warwick Game Design have expertise with Flash for game development.

May 06, 2008

Flex–Spy – Live Component Inspector

Writing about web page http://code.google.com/p/fxspy/

I’ve been using Flex-Spy today for the first time, and it’s really useful. It allows you to inspect and affect pretty much any parameter of a component while the application is running which is way faster than constantly building and running the app for trying small tweaks, and saves waiting for the CSS previewer or refreshing the Design View. Installation is a snap as it’s packaged as an SWC.

View a demo of Flex Spy (press the FlexSpy button top right to launch the inspector)