Category: actionscript

Doom and gloom or a new beginning

Doom and gloom or a new beginning

Redundancy… world shrinking economy… depression… company cutbacks… is this a bleak time or is it a time to make and face new challenges in the RIA world (particularly in the Flex and Actionscript areas)?

Well after the unfortunate news that the company I work for are no longer wishing to partake in the RIA party that’s changing the way we look at and use the web/desktop and hence are making myself redundant. I’m looking at this as a great opportunity to expand my knowledge so that I can work with as many forward thinking companies as possible that deal with Flex/Actionscript/AIR or for that matter any RIA technology.
Also I should now have more time to create and sell my own components, of which I had a cracking idea this morning (more on this later hopefully).

Hect I’ll event look at Silverlight or JavaFX 🙂 if I get the time or the chance. So anyone out there fancy taking on a new contractor with 4 years+ experience in Flex as well as a bunch of other languages I’ve used along the way before I even heard of Flex.

Feel free to contact me at this address.
[kml_flashembed fversion=”10.0.22″ movie=”/flex/contact/Contact.swf” targetclass=”flashmovie” useexpressinstall=”true” publishmethod=”static” width=”300″ height=”50″]

Get Adobe Flash player


I’m going to continue to post hints and tips on anything I do as well as posting any new components so watch this space and feel free to contact me if you need any work done in the UK, remote working is always an option as well.

[ad name=”ad-1″]

Simple tip #2 – random colours

Simple tip #2 – random colours

Their are so many times I’ve used a random colour in my apps (mainly for testing) that I thought I’d add this way of using a getter method with actionscript to simplify the process.

First of if you haven’t got one already, create a uiltily class so features that you use regulary across projects (you could turn this file into a SWC and reference that in you various projects – now that I think about it I explain this as simple tip #3 🙂 )

So inside your utility class place the following code

public static function get randomColour() : uint {
	return Math.random() * uint.MAX_VALUE;

Then lets just say you require a random colour for anything just call Utility.randomColour, no brackets, no = signs. Because you’ve set the function as a getter using the function name will be enough. This method also means that you don’t need to remember the max/min values for a colour. The uint min and max values are the same as the the min/max values for colours.


Utility is the name of the class that holds my utility functions.

Previous Tip

Next Tip

[ad name=”ad-1″]

Simple tip #3 – Utility SWC (library project)

Simple tip #3 – Utility SWC (library project)

Do you frequently use simple actionscript functions in more than one project. Perhaps you’ve got a function to do tracking, parse strings to dates, or return a random colour etc.

I’m sure most folk will have struggled to think of what project they last used a generic function ABC in as they could do with using it for project XYZ and would rather spend 30 mins searching for said function rather than rewrite it.

Well as explained below is a way to stop this from happening and hopefully save you a heap of time.

  • Step 1

    – Create a library project.

  • So using flexbuilder, go to File->New->Flex Library Project.
  • This will create an empty library project.
  • Step 2

    – add in your Utilty class to the library project.

  • To do this add/create a Utility actionscript file that contains your static functions. Save, and this should then automaticlaly create a SWC file inside the library bin folder. (If it hasn’t and the file added has no errors then check the project properties to make sure the newly added file is being included – see pic)

  • Step 3

    – add the reference of the newly created SWC file to any project you intend to use it in.

  • So go to your project you wish to use the SWC with, then select the projects properties and inside ‘Flex build path’ select ‘Add SWC’.
  • Browse to the the previous library project and select the SWC from its bin folder.

You are now done, any time you update the code in the library project, those changes will be reflected in any project that references the SWC file automatically.

Previous Tip

Next Tip

[ad name=”ad-1″]

Show dual coloured highlight for a DG

Show dual coloured highlight for a DG

If you have a datagrid that has different coloured columns, then why should you have to do with only using a single colour for the highlight.

Below is a simple soloution using actionscript to solve this.

First I should state that you need to use the AdvancedDataGrid even if you only need a normal DataGrid.  This is because the AdvancedDataGrid has a method called drawHighlightIndicator(…), which as you’d expect from the name draws the highlight.  Normally this is a single colour, but with a little overriding you’ll be able to change this.

Below is the main snippet of code from the extended AdvancedDataGrid.

override protected function drawHighlightIndicator(  indicator:Sprite, x:Number, y:Number,
	width:Number, height:Number, color:uint,  itemRenderer:IListItemRenderer):void
	//The indicator is the highlight, so grab its graphics and clear them
	var g:Graphics = Sprite(indicator).graphics;

	var xPos : Number = 0;
	var yPos : Number = 0;
	//loop through the number of columns in the datagrid
	for(var i : uint = 0; i < this.columnCount; i++){
		//get a random colour
		//draw the rectanlge that fills the first column
		g.drawRect(xPos, y, this.columns[i].width, height);
		//update the starting X position so that it starts at the begin of the
		//next column
		xPos = xPos + this.columns[i].width;

using the above you could create a DataGrid like the below which has some left hand columns in light purple and the rest in white. Then on highlight that same light purple colour is used for the white cells and the existing light purple becomes a slightly darker purple.

Twin DG colour example

Check out this link to see a very simple/colourful demo. As ever right click app for full source code.

[ad name=”ad-1″]

FormItem, adding an icon

FormItem, adding an icon

Adding an icon to a form item is (yet another) one of those really annoying things in flex. I’m sure its something that loads of people wish to do but you can’t.

Well just to see if I could, I set about and extended the FormItem class so that I could add an image/icon.

After a quick look at the source code of the FormItem you can see that it only has two children. One, the label and two, the indicator. So if you do wish to add anything else you’re going to have to extend the FormItem.

Thankfully the FormItem is based on the Container which makes adding anything fairly straight forward. I prefer to do any extending in actionscript but you could do the below in MXML with a bit of actionscript code at the same time.

There are 3 steps you need to make.

  1. Override the createChildren method
  2. Set the image source
  3. Override the label

Override the createChildren

protected override function createChildren():void {
    //you could move the image creation into a seperate function when and if the imagesource has been set
	//but for this example I've kept it simple.
	this.image = new Image();
	image.width = 16;
	image.height = 16;
	//again I've hardcoded these values for simplicity
	//You could if you wanted to create a versitile custom component load these values in from a CSS file
	image.setStyle('verticalCenter', 0 );
	image.setStyle('left', 5 );
	image.source = _imageSource;
	//bind the string property to the image source property.
	BindingUtils.bindProperty(image, 'source', this, 'imageSource');

from the above code you’ll see that all I’ve done is create an image, set its various properties and add it to the form.

most of this could and probably should be moved to a separate function (but for this demo I haven’t) so that you only add the image if it is actually required.  Also the style settings should come from a CSS file but for simplicity of the demo I haven’t done this.

Set the image source

private var _imageSource : String = '';

public function get imageSource() : String {
	return _imageSource;

//Sets the imageSource and I've added a number of spaces at the start to offset the 
//width of the image.
//The overall form width will be calculated from the width of the label (this is done inside the FormItem) 
public function set imageSource(str : String) : void {
  _imageSource = str;
  if(_imageSource.length > 0){//setting the label (not using _label) will resize the form/formItems
  //add spaces to the trimed version to make sure you don't end up with 100's of spaces at the start.
	label = "   " + StringUtil.trim(_label);
  } else {
	label = StringUtil.trim(_label);

In the above code you can see that I set the variable _imageSource (which bound to the images source – see first snippet of code).  If the source is not “” then I add spaces to the label, make sure you set label and not _label.  This makes sure that the label width gets recalcualted.

Override the label

//Sets the label.
//If the imageSource has been set already then this will add spaces to the label
public override function set label(str : String) : void {
  _label = str;
  if(_imageSource.length > 0){
	_label = "   " + str;
  } else {
	_label = StringUtil.trim(str);
  // call the super last, this will also force the remeausing of the formItem and Form
  super.label = _label;

The above code is very similar to the setter that set the imageSource but this time it sets _label then makes sure that the super function gets the new label.

Check out the simple demo here. (Right click for source)

[ad name=”ad-1″]

Dates, how many days? (DateValidator)

Dates, how many days? (DateValidator)

It’s been a while since I last looked at this, and it annoys me that there isn’t a simple function to do this. So if you are wishing to find out how many days are in a month for a given year then feel free to use the below.

Of course it’s going to be virtually the same result for most years, but I still think it should be a function inside the Date class (or maybe a DateUtil class).

Start off with a standard Switch statement as all months (apart from February) have a fixed number of days.  This of course isn’t exactly rocket science but how do we figure out how many days February has?

Well the solution still isn’t rocket science but I like it, if you create a DateValidator and you give it a date of 29/02/2003 (yes this is a UK date – date at the start) and get it to validate that, then it will fail as 2003 isn’t a leap year. So February for 2003 must only have 28 days.

That’s it.  You could of course just divide the year by 4 and check to see if there is a modulus of 0, if so then it is a leap year.  If you chose to use this approach you’d need to make sure that the date range you are using doesn’t include anything unusual (I’m not sure how constant the leap year really is, if it’s anything like the clocks going forward or back 1 or 2 hours then you’re best just using the internal date validation). The flash player gets its time from the operation system, so (AFAIK) its rules for working out if a date is valid is also comes from the operating system.

the below code also shows an example of using the DateValidator that doesn’t use the month/date/year input, which is another reason why I like it.

public function getNumberOfDaysInMonth(month : Number, year : Number) : Number{


    case 0://January
    case 2://March
    case 4://May
    case 6://July
    case 7://August
    case 9://October
    case 11://December
    return 31;

    case 3://April
    case 5://June
    case 8://September
    case 10://November 
    return 30;

    case 1://February
    return getNumberOfDaysInFebruary(year);//

    return 0;//should never reach this - if it does then 0 is an error

private function getNumberOfDaysInFebruary(year  : Number ) : Number {

  var isValid : DateValidator = new DateValidator();
  isValid.inputFormat = "DD/MM/YYYY";
  isValid.allowedFormatChars = "/";
  var result : ValidationResultEvent = isValid.validate("29/02/"+ year);
  if(result.results == null ){//29th is a valid date
    return 29;
  } else {//29th is NOT a valid date
    return 28;

[ad name=”ad-1″]

Flex & Version control

Flex & Version control

Ever had a project where your client has some kind of odd/unusual caching issue with their servers that you have absoulutly zero control over?

Well if you have (which I have had) then the following swc file may help you to diagnose the problem. Its a very simple swc file that you can place inside your code and pass it a version number. Next time you build your app and deploy it to your clients servers you can type ‘version’ then whatever number you gave inside your code will appear inside an Alert box.

This has helped me sooooo many times, as after deploying some code, if they (client) appear to be seeing something different to what I’m seeing then I can get them to type ‘version’ and if it’s the old version number I have to tell them to clear their cache & wait for their internal servers to refresh (again I/they have no control over this), then a few hours later they will have the correct version.

So it just helps when you roll out a minor update and you say its fixed, then they come back and say that they can’t see the changes, you can then show that its the internal hardware and that they just have to wait to get the new swf.

As a little extra feature on the version SWC I’ve given it the ability to listen to your own functions should you wish. It works by listening to the keypress event on the stage (so their is nothing visual to worry about). By default the version number is shown by typing ‘version’ when the app has focus. If you wished it to do something else on a certain word or set of key presses (a-z, 0-9) then you would do the following:

//There is a addKeyListenerFunction and a removeKeyListenerFunction
addKeyListenerFunction('whateverSetOfKeyPressesYouWantToListenTo', someFunction);
//remove listener by passing in the word that you where listening for

Click here for runnable demo, right click for source code. (just make sure app has focus for it to work)

If you’re interested in file size, using the above example with and without the version SWC changed the file size by just under 3K (3057 bytes).

The version SWC is case insensitive, so if you ask it to listen to HELLOWORLD, this is the same as helloworld.

Get the SWC file here.

[ad name=”ad-1″]

Simple tip #1 – custom events

Simple tip #1 – custom events

Today while coding I was creating some classes that required them to dispatch custom events. I know that this is a fairly common thing to do but sometimes it is these little things that can trip you up or take a while to find out how to do them.

So I thought that each time I come across something that is ‘simple’ (only simple after you know it!) that I’ll try to create a quick blog entry and take note of it.  Each time I create a new ‘tip’ post I’ll link it to the previous/next tip so that it will be quick and easy to browse through a load of tips.

Tip #1

So for my first tip, this is how to implement your own custom events.

First if you are firing the events from a custom MXML file then you need to create a metadata tag. I make this the first node inside the MXML file.  For example:


	[Event(name='jump', type='')]


If your custom class is an AS3 file then you would put something like the following are the imports

[Event(name="previous", type="")]
[Event(name='jump', type='')]

Then inside the MXML file (script block) or anywhere in the AS3 file to fire the event I’d do the following:

//custom event, the extra value is handled by the JumpEvent class
dispatchEvent(new JumpEvent("jump", specificValueForTheJumpEventClass));
//standard event
dispatchEvent(new Event("next")); 

If you do the above and lets just say your MXML/AS file is called ‘GreatComponent’ then in order to use the new custom event, its as simple as the below bit of code. 

That’s it, now you can fire of any custom event that you wish and make sure that it gets listened to.

Next Tip


[ad name=”ad-1″]

Custom Class & Custom Itemrenderer

Custom Class & Custom Itemrenderer

Today (not for the first time – but it’s been a while) I needed to create a custom class that took a custom itemRenderer.

Having used itemRenderers for ages I thought it was going to be straight forward, but I’d forgotten a few little bits of info needed to implement them from scratch (i.e. not using say a menu or datagrids itemRenderers). It’s all very well to just give a flex component a class name in the MXML but how does the class that contains the itemrenderer implement it?

Test app

So I created a very small test app to make sure that I could create a custom itemRenderer for my custom class.

  • Step 1, create the custom itemRenderer.  For the test I just made this a Canvas and made it 100% * 100% and the background colour was red.
  • step 2, display the class that you are going use as an itemRenderer as a normal display object (place custom class inside a Canvas)
  • step 3, create a custom class that will take and display an itemRenderer. Once created assign your new custom itemRenderer to the new custom class.
  • View the test app, all going well you should now see two instances of your itemRenderer. One is the actual class as a displayObject and the other as an itemRenderer inside your custom class.

I’ve placed my small test app here purely so that you can look at the source code (right click app).  The app does NOTHING and is not interactive, it’s just to show the source code and how to make sure you set things up correctly.


Once you’ve looked at the code this bit will make sense.

  • step 1 & 2, display a canvas in the top left. This canvas contains only the custom class that is to be used as an itemRenderer.  This just proves that the itemRender will display what you think it should.
  • step 3,  create a custom class that will contain your itemRenderer. Then place custom class into app and set the itemRenderer to your custom itemRenderer class.  

All you need to do now is create a itemRenderer slighty more complex than a red box, but as long as it’s a DisplayObject then its going to be the same.

That’s it, as ever feel free to comment (especially if you’ve found this helpful).

[ad name=”ad-1″]

Tiles and the packing problem

Tiles and the packing problem

On more than one occasion in the past I’ve been wishing to create a custom component that is totally dynamic so that I don’t have to worry about hardcoding any sizes.
So lets just say I have a list/tilelist and it contains pictures. Normally what I’d do is make sure that the pictures are a set size and I’d just make the list dynamic in one direction so it may end up showing 4.5 tiles which is normally fine as it’s a scrollable list.

But what if you have a list that will only ever contain say 10 items and you wish to use as much of the users screen as possible then each time the user changes the screen size you need to work out the optimal size of a tile/item.

Check out the demo here. This actually took me quiet a while to figure out how to do, I think the function to work out the size has gone through several iterations. (the example is based on the Tile class as that handles the layout and lets me do the nice animation moves when one tile moves around the screen on resize)

Here is the actionscript code that will work out the optimal size. I know that this function can be optimised further, but this will do to show you how its done. (possible optimisations: SQRT is not a nice function to call for the processor, use it sparingly, reducing number by just -1 each time isn’t great either, could reduce it by larger amounts then swing back a forth until I get the best fit).

//total number of tiles
var tile_count : Number = numberOfSlides;
//height of rectangle
var b : Number = unscaledHeight;
//width of rectanlge
var a : Number = unscaledWidth;

//divide the area but the number of tiles to get the max area a tile could cover
//this optimal size for a tile will more often than not make the tiles overlap, but
//a tile can never be bigger than this size
var maxSize : Number = Math.sqrt((b * a) / tile_count);
//find the number of whole tiles that can fit into the height
var numberOfPossibleWholeTilesH : Number = Math.floor(b / maxSize);
//find the number of whole tiles that can fit into the width
var numberOfPossibleWholeTilesW : Number = Math.floor(a / maxSize);
//works out how many whole tiles this configuration can hold
var total : Number = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;

//if the number of number of whole tiles that the max size tile ends up with is less than the require number of
//tiles, make the maxSize smaller and recaluate
while(total < tile_count){
	numberOfPossibleWholeTilesH = Math.floor(b / maxSize);
	numberOfPossibleWholeTilesW = Math.floor(a / maxSize);
	total = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;

return maxSize;

If anyone else has a solution or knows of a better solution using actionscript (or anything else for that matter) I’d love to see it as although this works I’m thinking there must be a faster solution.

Looking at links like the following these problems can be pretty complicated!

[ad name=”ad-1″]