Diagonal line filled box with ActionScript3

Just a very quick post about a potentially useful code snippet that I recently wrote in ActionScript. I discovered, after attempting to Google my way through a small bit of development, that I couldn’t find the exact solution I was looking for.

I was attempting to find some code for making a rectangle using the AS3 graphics API which is filled with a background colour and some diagonal lines (illustrated above by the green and blue boxes). Fairly straightforward one would assume however most of the examples I found involved drawing the lines and using a mask to create the rectangular shape. Considering the overhead of using masks in Flash and the fact that within my application this box will be being rendered extremely regularly to simulate movement I decided to write a little utility using only the graphics API and some GCSE maths.

The code won’t format properly in the blog so I’ve uploaded the entire DrawingUtil.as class for download here.

This post was written by Gareth on January 26, 2011 at 12:30 pm

Flixel 2.0 – Flash game development

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.

This post was written by Gareth on June 2, 2010 at 10:00 am

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 can be viewed here. 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*

This post was written by Gareth on December 18, 2008 at 2:01 pm

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.

This post was written by Gareth on September 26, 2008 at 12:20 pm

Issues using multiple swcs in Flex Builder 3.0

As most of the Flash development here is now pure object-oriented in AS3 my IDE of choice is now Flex Builder 3.0 for all ActionScript projects. We left behind Flash IDE for the same reasons as most: it’s text editor is inadequate and the code visualisation for pure object-oriented projects is not sufficient; it also enables us to bring in line our development tools with other languages such as Java. Let’s face it, the Flash timeline IDE was never going to cut it as a serious development model!

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.

This post was written by Gareth on September 1, 2008 at 4:56 pm