Links and things

Labels: , ,

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.

Labels: , ,

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:

packagae com.fridayforward.sharedAssets
{
public class Library
{
private static _callback:Function;
private static _assets:LoaderInfo;

public static function init(callback:Function, url:String="../shared/assets.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:

packagae com.fridayforward.sharedFonts
{
public class Text
{
private static _callback:Function;
private static _textField:Object;

public static function init(callback:Function, url:String="../shared/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:

packagae
{
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:

packagae 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="/Users/bowlec02/Library/Fonts/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.

Labels: ,

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 logoThe 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 :-)

Labels: , ,

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.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!

Labels: ,

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.

Labels: ,

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!

Labels: ,

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 :-)

Labels: , ,

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.



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.

Labels: ,

3D flash logo

Flash on the Beach was a great conference and the session which left me most inspired was Seb Lee-Delisle's on the basics of 3D in Flash. I took Seb's example ActionScript 2 and built a simple 3D engine in AS3, as much an experiment with AS3 and open source compiliation as 3D in Flash. My recent MacBook purchase caused it to take a little longer to get something working but my first results are now ready.



Click and drag to rotate the logo.

The SWF reads a couple of XML files which configure the camera position and field of view and specify the structure and layout of the objects. You can toggle the amount of perspective blur and I left in the ability to highlight each letter which was useful during debugging z-ordering.

Developing AS3 in Eclipse on the Mac is made much easier thanks to Steve Nelson's ANT build template (which Keith Peters has posted on BIT-101). There is still no code highlighting or hinting a la FlashDevelop for OS X but at least you can avoid using terminal to compile your code.

I'm going to tidy up my 3D classes and will hopefully post them up soon.

Labels: