We have finished an enjoyable project for SPAR International, which involved creating an athletics game based around the button bashing classic, Daley Thomson’s Decathlon. When creating the graphics and style for this game we wanted to utilise the nostalgic bitmap effect which you see quite often in Flash games and in the graphic style of Pixel Art. From a development perspective this was very convenient because I have been looking for an excuse to try the Actionscript 3 game framework, Flixel, which I have seen lorded around the Internet as perfect for this purpose.

It has it’s own global render cycle which simplifies the process of adding bitmap graphics to the stage and creates a predictable fps independent game loop. Forum posts on the Flixel site state that this rendering process is more efficient than Flash player alone due to the fact that is purely geared toward low resolution bitmapped graphics. There where many elements which increased the speed of development such as the inclusion of the FlxObjects which are already set-up with simple motion facilities such as acceleration and velocity on both x and y axis which allow for the simulation of horizontal character movement and also vertical forces (i.e. gravity).

There are many other noteworthy features of the Flixel framework such as Sprites for Animation and the global/static FlxG control class which have been very well designed to make game development in Flash easier. I will, however, not go into detail about these because a concise post about Flixel from the Inside RIA blog has covered these. For those (developers mainly, I suspect) interested in understanding the affordances of using this framework over creating a game from scratch, reading this and also exploring the host of games and tutorials on the Flixel site will be worthwhile. Canabalt is a particular favourite game due to the intense screen shaking and accompanying music.

The game we created is called Beat Barni and is online now. Due to time constraints we created a pentathlon (5 events) rather than a decathlon, so feel free to challenge Barni to any of the following events; 100m, 400m Hurdles, Javelin, Pole-vault and Long Jump.

We have recently built a Flash Game – Traitors – for the Top Gear website:

The game, sponsored by Nissan, requires the user to speed through 3 levels controlling their speed by repeatedly pressing X-Y buttons as fast as they can and using their booster. For the purpose of data submission and receiving data while interacting with the webserver we decided to use AMFPHP which is open-source implementation of the Action Message Format (AMF) and allows binary serialisation of Action Script (AS2 and AS3) native types and objects to be sent directly to server side services. Phew…

The crux of this is the ease of implementing data transfers to and from the webserver (less code on both client application and on the webserver) and the efficiency of the resultant transfer (the data being transferred is binary format which is also compressed further in AMF3 so the amount of data being transferred is smaller). This is brilliant for rapid development (which we do a lot of) and performance of the finished article.

For instance, on the webserver you don’t have to loop through a database recordset, compose some XML and return that XML to Flash which would then load and parse the XML: you can essentially return the recordset directly from php to Flash and the query is automatically converted to the corresponding ActionScript type. There are several processes being skipped and the data being transferred is far smaller (being compressed binary as opposed to XML).

We’re so close; I can smell it! Our new site is careering dangerously towards completion. One element of the homepage is a frivolous physics environment which I was kindly allowed the time to make in Flash using the Box2DFlash physics engine.

The engine has been ported from Eric Catto’s powerful C++ physics engine (Box2D). It took a little time to adjust to some of the coding conventions that have also found their way from the C++ version but after that initial steep learning curve the engine is fantastic to work with.

I’ve released this today before the site launch so that people can play with it and inevitably find the bugs which I’ve lovingly engineered into it. Feel free to put it through its paces!

http://demos.ultravioletdesign.co.uk/physics/

An internal build error has occurred. Right-click for more information.

&

Classes must not be nested

..neither of which specify a file or line at which the error occurs. Very helpful.

This is not a new bug by any account and from my research seemed to be particularly prominent in Flex Builder 2. This article which lists a few of the reasons which this may happen is very useful and I’ve just noticed that in the comments there is the solution I was looking for. I however didn’t get that far through the comments and have had to painstakingly comment out my code, line by line until the error dissapeared. To add to the fun, it was a possibility that leaving comments within conditionals could have been the cause of the problem as well. Eventually I discovered that the cause of my bug was an empty switch statement:

switch(pageId){

}

…..why I dont’ know.

Anyway I thought I’d add to the documentation about this as it is a very annoying time consuming bug. I hope this will be resolved in Flash Builder!

I have recently been researching small scale desktop application design for a video project we are producing in Flash. The obvious place to start in this instance was with showcases of Adobe AIR applications. Due to the ease with which applications can now be deployed using the AIR runtime, it already seems to have encouraged the development of applications with greater focus spent on the usability and aesthetics of the user interface and experience. Critics of this low threshold may say that this will lead to a lower standard of overall application functionality and perhaps to dirty code powering inefficient and buggy applications. I’m sure there will be many examples of this but considering the small scale and usually simple nature of AIR apps, I think this will not be the case in the long term.

In any case the main reason I wrote this post was in order to make note of two applications that I found during my research, which are notable more for their utility than their design.

Doc? Air Local LiveDocs
As an Actionscript developer without a photographic memory I am forced to regularly visit LiveDocs for Actionscript3 and Flex component references. If I’m unfortunate enough to be coding in the Flash IDE then I use the built in help docs which are slow and clunky and in Flex Builder 3 they are not much better. Doc? enables you to access LiveDocs for Flash CS3/CS4 and Flex all in the one application providing you have those applications installed (you have to point Doc? to the location on your hard disk where the reference files are installed – instructions for this are on the site FAQ). You can also create bookmarks for the pages which you use regularly.

Polaris
Polaris is quite simply a desktop application for viewing you Google Analytics accounts on your desktop. It’s incredibly compact and easy to use plus you still get all the lovely graphs and visuals which you’ll be used to from the Google Analytics web interface.

These are currently my two favourite AIR apps but I’m sure there’s a plethora of others which I’m yet to find. Feel free to present us with any further contenders.

The main point of contention between the traditionalists and those wishing to push the bar on technology in education is whether or not traditional exam assessment is indicative of a students abilities in a certain subject areas. Throughout modern education ICT is used to support and enhance learning yet when it comes to the all important exam assessments students are forced into sweaty school halls and, in isolation, encouraged to recall facts and figures under pressured circumstances. I think I may be showing my opinion in this matter however this is not an academic paper so never mind!!!

The project which we have developed these tools for enables students to be assessed for their Design and Technology course work through various different means; photographs, voice recordings, drawings, written work and mind-mapping. These tools are all controlled through a parent/client application which leads the students through predefined questions or requests which require them to use the creative tools to evidence parts of their work. e.g. Sketch your initial designs for new type of pill holder / Take a photo of your prototype / Mind-map some ideas for new features.

Whilst the work is being created it is being immediately stored in the individual students online portfolio. The evidence and work collected facilitates a more subjective approach to student assessment called ‘Comparitive Pairs’.

Although this system is currently being piloted for Design and Technology only, I hope that further down the line that this type of assessment could be used more widely and potentially offer an alternative to archaic pen and paper type assessment.

The creative tools we have developed at Ultraviolet are a painter tool, text editor and mind mapper. All the tools were created in Flex / AS3. As concepts they are in no way groundbreaking, in fact at some points during development it seemed a little fruitless re-inventing the wheel, but the functionality for each tool is prescriptive to the project and clients needs.

Feel free to play and let us know what you think. Or if you find any bugs!! *Gulp*

Anyhow, the project is pretty decent, it’s built as an actionscript project using Flex to compile and an example of it is posted online here.

Whilst talking to a friend who has recently started using Flex Builder for AS projects I discovered that he hadn’t as yet used the method of importing swcs to gain access to graphics, sounds, animations, etc which have been created in Flash IDE.

So far he has been using the Loader class to import the swf at runtime and then to gain access to the individual items in the fla/swf library. There are obvious advantages to this method, for example loading the swf at runtime avoids the increased file size of your project which you will incur from importing the swc which will add the graphics/sounds at compile time.

However for smaller projects where file size isn’t an issue or for importing the fundamental graphical elements which will be re-used throughout the project a swc is a quick and easy solution.

Firstly when creating you or a designer is creating the graphical elements in the flash library you can also add a class path to each movieclip or asset in the library.

1) Right click on the assets in the library and click Linkage…..

2) Tick the checkbox marked Export for Actionscript

3) Enter a class path which relates to the path structure of your application into the Class text field e.g. uk.co.ultravioletdesign.graphics.ThisAsset - nb If you just put a simply identifier/class name without a full class/package path (e.g. ThisAsset) the item will be available throughout your application which sounds useful but is the same as making classes public which if avoidable is good practice and good for application performance.

This also enables you to organise your assets in the Flash library into convenient packages. For example putting all sound assets in uk.co.ultravioletdesign.assets.sounds and all graphics into uk.co.ultravioletdesign.assets.graphics. You don’t need to worry about creating the equivalent folders and packages within Flex Builder because they will be discreetly generated when the swc is imported.

4) Go to Publish Settings (File > Publish Settings) and then click the Flash tab. Providing the Fla is AS3 the checkbox Export SWC will be available. Check it!

5) Now once the movie is published a .swc file will be snuggling up next to your .swf which you can promptly delete (if you feel the need).

In Flex Builder:

6) Right click on your Actionscript project in the Flex Navigator window and click properties. Click on Actionscript Build Path and then on the Library path tab.

7) Click on the Add SWC button and browse to your newly generated .swc file.

Flex now adds your library assets to your project and these are made available within classes using the import directive:

import uk.co.ultravioletdesign.graphics.ThisAsset;


var thisAsset : ThisAsset = new ThisAsset();

Using this method in my experience has been invaluable and a massive timesaver. Despite this it is very useful to have the knowledge to be able to import assets from swfs at runtime. There is very handy for other strategies and techniques such as the importing fonts at runtime. This article by Chris Rebstock has been very valuable.

An aspect of not developing in Flash that I had to adjust to was coping without a convenient library of graphical assets to drag into my application. There are various ways of importing or loading graphical assets into a 100% code application which nearly all involve and temporary return to Flash IDE. My preferred method is to create my graphical assets in Flash IDE, giving each of them linkage names relevant to the class/package structure of my application. I then publish a swc and import this into my ActionScript project within Flex Builder (project Properties > ActionScript Build Path > Library path > AddSWC).

So far everything works like a dream. All of my graphical assets are appearing within code hinting in Flex and are totally accessible. During a large scale project I decided to try to segregate my graphical assets into different swcs to help me organise my assets. This alone did not present any problems however I occasionally needed to go back into Flash to change or add a graphic to a swc. On exporting the amended swc, I returned to Flex Builder and found that all of the graphics contained in this swc where missing from the project. I tried renaming the swc and re-exporting it in Flash and also removing it in Flex Builder and adding it again. The only solution to this problem was to create and entirely new Flash file and copy all the graphical assets from the old (broken) fla file into the new one and re-export it again.

In a later project the same issue occurred again and this time it only began when I added more than one swc. That is essentially the solution I came to however it does not by any means explain the problem in the first place. Anyone who can fill in the gaps please feel free.