Archive for the Category Flex

Action Message Format (AMF)

Traitors Flash game title image

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

Flex Builder 3 – Internal Build Error bug

I’ve been struggling with a Flex Builder 3 bug for the last two days where an Error is dispalyed which rotates between:

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!

AIR app review: Doc? and Polaris

Adobe AIR app icon

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.

Creative Tools for e-assessment

One of our most recent projects has involved developing a set of creative tools in Flex / AS3 which are part of a larger academically funded project in which digital tools are used in Design and Technology to encourage creativity and teamwork. This is part of broader discourse in education as to the value of the pen and paper, exam structured methods of assessment which we are all familiar with.

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*

Friday feeling (x52)

Everyone must have had that project? The one that keeps on trukin right through the project deadline, right through the next week and for whatever reason (and there are numerous legitimate ones) right through to a point when you don’t remember a time without it? I *think* we have just completed one of those projects and somehow, although there is relief that we may well get paid for our hard work, it’s left a hole where once it existed as wee bit of code!

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.

Importing a swc into Flex Builder for pure actionscript projects

I have previously written a post about the potential bug which seems to occur when importing multiple swcs into Flex Builder 3 for pure actionscript projects. Despite this I cannot express how handy it is to be able to import swcs into Flex Builder; for one reason because it renders the Flash IDE even more redundant (which is a good thing).

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.

Search