TV on the radio

Not the most original title for a blog post but hey. As Yasser posted on the Radio Labs blog, this morning we launched a new visual radio player running alongside the Chris Moyles show this week and Annie and Nick on Sunday. This is the first stage trial in a new project and we are keen to find out what the audience thinks of it.

Visual radio player

The pop-up player presents a webcam feed of the studio so you can see Chris and the team as well as hear them alongside which we display images, now playing track information and incoming SMS messages. In addition to this you will also see barcharts and swingometers representing a public vote or poll.

I joined the project to develop the front-end which is an AS3 flash application built in Flex Builder 3. The components are made up of individual SWFs loaded as necessary and the client is driven through messages sent over the same infrastructure which powers the live text widgets on network pages and the Radio 1 tag cloud.

Early comments on the Radio Labs post and elsewhere have been really encouraging.

Bits and pieces for 2008-11-19

  • Access your New Xbox Experience avatar
    While questions remain about Microsoft borrowing from Nintendo with regards Avatars, they have made their assets addressable which is a nice touch. Here’s me:

    Bowlage

    Can’t think what to do with him though…

  • Mirror’s Edge 2D (beta)
    Nice Flash version of the recent release from EA/DICE. Seems to be the tradition these day.

Links and things

  • AS3 coding conventions
    Worth a read. Some stuff in there I haven’t been doing :/ [via BIT-101]
  • BBC Sound Index
    Marketed under the BBC Switch banner, Sound Index attempts to build charts of the most popular artists using social networking sites. The idea has been kicking around for a while and under the primary-coloured exterior there lies a lot of data which will hopefully be opened up. Its in beta at the moment so will be interesting to see how it develops.

Run-time class and asset sharing across multiple SWFs in Flex (AS3)

I have recently ported some Flash 8 widgets to AS3 for use in a prototype site we will be launching in the next few weeks. The widgets are all quite simple, displaying graphs, but became fairly heavy due to an embedded font and graphics. All told the four SWFs totalled over 300K so I decided to do some optimisation.

Sharing library assets and classes at run-time means the user can download (and cache) the library SWFs once and use them across the visible SWFs in the page. Doing so has reduced the total footprint to under 100K and has the added bonus of meaning I can change the font for example without having to re-compiled the visible SWFs.

Sharing simple assets

For some of the widgets, access to remote assets was required from more than one class. To achieve this, I wrapped the asset and embedded font classes in classes with static access:

Shared assetsThe static asset access class looks something like this:

package com.fridayforward.sharedAssets {
    
    public class Library {

        private static _callback:Function;
        private static _assets:LoaderInfo;

        public static function init(callback:Function, url:String="../sharedassets.swf"):void {

            // set callback function
            _callback = callback;

            // load assets            
            var request:URLRequest = new URLRequest(url);
            var loader = new Loader();            
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
            loader.load(request);
        }

        private static function onLoaded(event:Event):void {

            // retrieve assets
            _assets = LoaderInfo(event.target);

            // callback
            _callback();
        }

        public static function getAsset(id:String):Sprite {

            // return asset class
            var c:Class = _assets.applicationDomain.getDefinition(id) as Class;
            return Sprite(new c());
        }
    }
}

The assets are loaded in the application constructor, with a callback to continue once assets are available:

package {

    import com.fridayforward.sharedAssets.Library;

    public class Application    {

        public function Application():void {

            // load assets
            Library.init(init);
        }

        private function init():void {

            // now have access to asset library
            // continue with application...
        }
    }
}

The assets can then be accessed from anywhere within the application:

var myAsset:Sprite = Library.getAsset("MyAsset");
addChild(myAsset);

This worked nicely for sharing simple assets but I also wanted to share embedded fonts used in TextFields. To do this, I created a separate AS3 application which contains a class that embeds any fonts I want to share and creates TextFields using them. This class is then made available through a static class to all parts of my applications.

The static Text class looks something like:

package com.fridayforward.sharedFonts {

    public class Text {

        private static _callback:Function;
        private static _textField:Object;

        public static function init(callback:Function, url:String="../embeddedFonts.swf"):void {

            // set callback function
            _callback = callback;

            // load assets
            var request:URLRequest = new URLRequest(url);
            var loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
            loader.load(request);
        }

        private static function onLoaded(event:Event):void {

            // retrieve assets
            var tfClass = event.target.applicationDomain.getDefinition("EmbeddedTextField") as Class;
            _textField = new tfClass();

            // callback
            _callback();
        }

        public static function textField(text:String, size:uint, color:uint=0, ...):TextField {

            // pass to EmbeddedTextField object
            return TextField(_textField.textField(text, size, color, ...));
        }
    }
}

The root class of the EmbeddedText application simply acts as a wrapper to allow access to the contained EmbeddedTextField class:

package {

    import com.fridayforward.sharedFonts.EmbeddedText;

    public class EmbeddedText extends Sprite {

        public var embeddedTextField;

        public function EmbeddedText():void { }
    }
}

The EmbeddedTextField class provides the functionality to create TextFields:

package com.fridayforward.sharedFonts {

    import flash.text.AntiAliasType;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;

    public class EmbeddedTextField {

        [Embed(source="...VAG Rounded BT.ttf", fontName="VAG", mimeType="application/x-font")]
        private var vagFont:Class;

        public function EmbeddedTextField():void { }

        public function textField(text:String, size:uint, color:uint=0, ...):TextField {

            var format:TextFormat = new TextFormat();
            format.font = "VAG";
            format.size = size;
            format.color = color;

            var tf:TextField = new TextField();
            tf.text = text;

            return tf;
        }
    }
}

This is then accessed in the same way as before:

package {

    import com.fridayforward.sharedFonts.Text;

    public class Application {

        public function Application():void {

            // load assets
            Text.init(init);
        }

        private function init():void {

            // continue with application...
            addChild(Text.textField("Application Title", 20, 0));
        }
    }
}

If you have a large library of assets you need to load it might be a good idea to display a preloader while waiting for them to download.

Resonate

Last month, Tom Kershaw and I worked on a project for Silent Studios called Resonate. Resonate represents the studio’s music services and the web site showcases it very nicely, accompanied by some beautiful illustrations.

Resonate logo

The site is written in AS3 and uses a page template structure so that any additional pages or structure changes can be done very easily. If you look closely when you load the site or resize your browser window, you should spot my favourite feature: the lines slowly redraw to the edges :-)

  • 6:05 am, 12th December 2007
  • flash, play
  • 1 Comment

Doodle Wars

During the summer I spent a few weeks looking into XNA because I decided if I love playing video games so much maybe I should try writing one. After few trips on the train reading XNA Game Programming, I realised I should stick to what I know and try building something in Flash first. The result is Doodle Wars, a simple Geometry Wars style shooter.

Doodle Wars

I plan on tidying up the code and doing a post about how the game works, because in writing it I have learned a great deal about how to structure a game – in the end the principles I learned from XNA proved useful.

So give it a try!

  • 1:25 pm, 14th November 2007
  • events, flash
  • No Comments

Inspirational Flash on the Beach

After last year’s inaugural conference was hailed as one of 2006′s best Flash event, Flash on the Beach 2007 had a lot to live up to. With technical sessions on AS3 from Grant Skinner and Brendan Hall to inspirational sessions from Neville Brody, Brendan Dawes and Robert Hodgin, this year’s event proved to be bigger, better and broader. Flash on the Beach especially provides a great opportunity for those of us who prefer writing code to using the pen tool to get some inspiration from some very talented people.

I went to Flash on the Beach having not got my hands dirty with ActionScript for several months. Work has recently revolved around Ruby on Rails and I went with the hope that I would leave Brighton with some new impetus to finish some personal projects and give me some new ideas. In short that’s exactly what happened.

There are too many highlights so I’ll just talk about a few sessions which I particularly enjoyed… and weren’t actually about Flash (shock!)

First, I have to talk about Robert Hodgin, even though the work he showed was all written in Processing. Although I saw more particle systems than anyone needs in three days, Robert’s physical modelling videos were by far the most beautiful, especially when driven by music (although the actual video he presented isn’t published yet).


Flock of birds from flight404 on Vimeo

Must play with strange attractors and perlin noise…

Rob Chiu also presented some of his portfolio which was comprised of mostly short films created using his still photography and 3D effects in Adobe After Effects. He also does a lot of print work, including the artiwork for the .Net magazine article in which our BBC API featured.

There were lots of inspirational sessions (alongside AS3 sessions which taught me something knew) at this year’s conference but I don’t want this post to become a Flash on the Beach love-in so I should close. And I haven’t even mentioned Papervision. Perhaps when I finally get my arse in gear and do something with it, when v2.0 is released… In short, roll on September for Flash on the Beach 2008.

  • 7:36 am, 3rd August 2007
  • flash, web
  • No Comments

Gravity Pods

Keith Peters has provided my first proper ‘friday forward’ 18 months after registering this domain. I’m in the middle of writing my own AS3 game and Keith’s Gravity Pods is the perfect example of what casual, addictive flash games should be about.

A word of warning though, it really is addictive and quite a chanllenge. So much so that I have felt the need to prove my achievement of completing the game. A very productive friday afternoon :-)

Gravity Pods - completed level 50!

Radio 1 wins Webby

In much-belated news, Radio 1 won the Webby award for radio. This is a great achievement and I’m really proud because the homepage contains a couple of flash apps written by your truly :-)

  • 7:38 am, 12th April 2007
  • bbc, flash
  • 1 Comment

Find Listen Label

After months of internal development, we have today launched a public beta of our Annotatable Audio tool. Titled Find Listen Label, the trial will be available for the current series of the Radio 4 science programme All in the Mind which runs for 4 more weeks.

Find Listen Label

If you’re new to Annotatable Audio, here’s a brief summary of what its all about. The project is an exploration of collaborative segmentation of radio programmes. By allowing users to annotate our programmes, we are hoping to make them more navigable using simple factual descriptions and keywords. Interaction is in the form of a wiki, so anyone can create, edit and delete annotations and we hope the community will be self-moderating. Applying a wiki metaphor to time-based media has not been easy and we have had to restrict interaction to non-overlapping annotations, to simplify both the code and the user interface. At the end of this trial we hope to gain information about how people use such a tool, both through simple interaction (listening to discreet programme segments) and more advanced interaction (creating and editing aegments).

On visiting the page, you are in playback mode. You can listen to the programme by moving the playhead, clicking on segments in the timeline or by clicking the various play buttons. Editing a segment or creating a new segment requires you to be logged in (sorry, BBC policy I’m afraid) and selecting either of these actions presents you with the edit page. Here you can alter the start and end times of your segment and edit its title, description and keyword tags. As is the modern way (and so that the audio stays loaded) all of this happens in the same page.

Consuming media on-demand is becoming more prevalent and expectations are rising. Podcasts are not simply recorded radio programmes, they are a new form of content. With the volume of content available to us and information discovered through search rather than browsing, segments of programmes become more valuable but harder to find. Collecting and presenting information about programmes is vital in order for the information they hold to be more visible.

The first Annotatable Audio prototype was developed back in October 2005 and led by Tom Coates (here’s his write up of our month’s work). When I joined BBC Radio & Music interactive (cough… Audio & Music) we began working on the second phase of development which resulted in an internal wireframe trial last summer. A year after Tristan and I began on the project, we were joined by technical project manager Joti Brar and designer Sarah Challis, who is responsible for the look, interaction and even the name Find Listen Label. Without Sarah we would still be playing with wireframes.

I began working on the project as a Flash developer but during the course of development have become responsible for the entire client application. The basic architecture of which has not changed. I have tried to use Flash only where necessary which has resulted in heavy use of JavaScript to build the interface. One significant change has seen communication with the server move from within Flash to JavaScript which has its drawbacks but results in a single point of entry. I would like to go into more detail about the code, but I’ll save that for another day.

I’m really proud of what we have done and I really hope the trial is a success both technically and in terms of user experience. Those of us who have worked on it believe this is a significant step forward in on-demand listening and hope you do too.

Last.fm

  • No recently listened tracks.

Twitter