Archive for the ‘ActionScript 3.0’ Category

Flixel ‘game engine’

Monday, June 22nd, 2009

flixel is a completely free collection of Actionscript 3 files that helps organize, automate, and optimize Flash games; an object-oriented framework that lets anyone create original and complex games with thousands of objects on screen in just a few hours, without using any of the Flash libraries.

Looks pretty impressive and very interesting!

Links:

Augmented Reality revisited

Sunday, June 21st, 2009

It looks like Saqoosha hasn’t sat still over the passed few months and actually developed the FLARToolkit a bit further.

The guys at Squidder.com have actually done some interesting work with it, an AR drum kit and a desktop racer :)

My old neighbour couldn’t resist and use his face as a drum kit!

Best code ever!.. NOT!

Thursday, May 28th, 2009

The company I work for has used a couple of 3rd parties to develop a some of our projects. The code you get back is usually quite bad to begin with, but yesterday I found the ultimate in bad code.

How not to code:

Actionscript:
  1. switch(imageList.length){
  2. case 1:
  3. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[0]));
  4. rowNum = 1;
  5. break;
  6. case 2:
  7. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[0]));
  8. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[1]));
  9. rowNum = 1;
  10. break;
  11. case 3:
  12. this._imageList.push(chooseType(pcurlImage0, curlImage0, typeArray[0]));
  13. this._imageList.push(chooseType(pcurlImage3, curlImage3, typeArray[1]));
  14. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[2]));
  15. break;
  16. case 4:
  17. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[0]));
  18. this._imageList.push(chooseType(pcurlImage4, curlImage4, typeArray[1]));
  19. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[2]));
  20. this._imageList.push(chooseType(pcurlImage9, curlImage9, typeArray[3]));
  21. break;
  22. case 5:
  23. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[0]));
  24. this._imageList.push(chooseType(pcurlImage3, curlImage3, typeArray[1]));
  25. this._imageList.push(chooseType(pcurlImage5, curlImage5, typeArray[2]));
  26. this._imageList.push(chooseType(pcurlImage7, curlImage7, typeArray[3]));
  27. this._imageList.push(chooseType(pcurlImage9, curlImage9, typeArray[4]));
  28. break;
  29. case 6:
  30. this._imageList.push(chooseType(pcurlImage0, curlImage0, typeArray[0]));
  31. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[1]));
  32. this._imageList.push(chooseType(pcurlImage2, curlImage2, typeArray[2]));
  33. this._imageList.push(chooseType(pcurlImage5, curlImage5, typeArray[3]));
  34. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[4]));
  35. this._imageList.push(chooseType(pcurlImage7, curlImage7, typeArray[5]));
  36. break;
  37. case 7:
  38. this._imageList.push(chooseType(pcurlImage0, curlImage0, typeArray[0]));
  39. this._imageList.push(chooseType(pcurlImage2, curlImage2, typeArray[1]));
  40. this._imageList.push(chooseType(pcurlImage4, curlImage4, typeArray[2]));
  41. this._imageList.push(chooseType(pcurlImage5, curlImage5, typeArray[3]));
  42. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[4]));
  43. this._imageList.push(chooseType(pcurlImage7, curlImage7, typeArray[5]));
  44. this._imageList.push(chooseType(pcurlImage8, curlImage8, typeArray[6]));
  45. break;
  46. case 8:
  47. this._imageList.push(chooseType(pcurlImage0, curlImage0, typeArray[0]));
  48. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[1]));
  49. this._imageList.push(chooseType(pcurlImage2, curlImage2, typeArray[2]));
  50. this._imageList.push(chooseType(pcurlImage3, curlImage3, typeArray[3]));
  51. this._imageList.push(chooseType(pcurlImage5, curlImage5, typeArray[4]));
  52. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[5]));
  53. this._imageList.push(chooseType(pcurlImage7, curlImage7, typeArray[6]));
  54. this._imageList.push(chooseType(pcurlImage8, curlImage8, typeArray[7]));
  55. break;
  56. case 9:
  57. this._imageList.push(chooseType(pcurlImage0, curlImage0, typeArray[0]));
  58. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[1]));
  59. this._imageList.push(chooseType(pcurlImage2, curlImage2, typeArray[2]));
  60. this._imageList.push(chooseType(pcurlImage3, curlImage3, typeArray[3]));
  61. this._imageList.push(chooseType(pcurlImage4, curlImage4, typeArray[4]));
  62. this._imageList.push(chooseType(pcurlImage5, curlImage5, typeArray[5]));
  63. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[6]));
  64. this._imageList.push(chooseType(pcurlImage7, curlImage7, typeArray[7]));
  65. this._imageList.push(chooseType(pcurlImage8, curlImage8, typeArray[8]));
  66. break;
  67. case 10:
  68. this._imageList.push(chooseType(pcurlImage0, curlImage0, typeArray[0]));
  69. this._imageList.push(chooseType(pcurlImage1, curlImage1, typeArray[1]));
  70. this._imageList.push(chooseType(pcurlImage2, curlImage2, typeArray[2]));
  71. this._imageList.push(chooseType(pcurlImage3, curlImage3, typeArray[3]));
  72. this._imageList.push(chooseType(pcurlImage4, curlImage4, typeArray[4]));
  73. this._imageList.push(chooseType(pcurlImage5, curlImage5, typeArray[5]));
  74. this._imageList.push(chooseType(pcurlImage6, curlImage6, typeArray[6]));
  75. this._imageList.push(chooseType(pcurlImage7, curlImage7, typeArray[7]));
  76. this._imageList.push(chooseType(pcurlImage8, curlImage8, typeArray[8]));
  77. this._imageList.push(chooseType(pcurlImage9, curlImage9, typeArray[9]));
  78. break;
  79. }

Quake Live Signature Generator

Saturday, May 23rd, 2009

Generate your Quake Live signature here: http://ansuz.nl/toys/quakelive/

So why did I build it?
I love playing video games and I love Quake Live (QL). So I was a little disappointed to find out that there was no signature generator available yet for Quake Live. After a bit of 'Googling' I found a post on how to show your stats on mIRC. The example used a socket connection to retrieve QL profile page and using good ol' web scraping technologies to retrieve all relevant data.

How?
I started building this in Flex using a socket connection to load the QL profile. I then managed to retrieve all relevant date and store it in a usable way. When I uploaded the app, I found out you need a special cross domain policy file for socket connections on your server. Also, this socket cross domain policy needs to be served from port 843. As my hosting provider doesn't give me control to that level I had to find something else. Quite obviously a URLLoader did the trick. It's funny how you can get quite mislead by an example you find somewhere else.

After that I realised that most forums don't allow you to use Flash in your signatures and if they do, they usually limit it to something like 15KB. My signature is nowhere near 15K.

I decided to finally take the smart approach and use PHP to retrieve the QL profile and generate an XML file with all relevant data. After that I started messing around with the GD Lib to create a PNG version of the signature. The script that creates the image first loads the XML and then creates the signature, you can see the result of that above. As you can see this image is quite large, so I'm planning to create a medium and a small version in the near future.

All in all getting data from point A, modifying it at point B and using it at C is a lot of fun!

Links:

Flex Builder issue

Wednesday, May 6th, 2009

I keep on getting the following error:

Buildfile: C:\Projects\*****\flex\ant\build.xml
compile_main_debug:
[exec] Loading configuration file C:\flex3sdk\frameworks\flex-config.xml
[exec] Error: C:\Projects\*****\flex\bin-debug\main.swf (The process cannot access the file because it is being used by another process)
[exec] java.io.FileNotFoundException: C:\Projects\******\flex\bin-debug\main.swf (The process cannot access the file because it is being used by another process)
[exec]     at java.io.FileOutputStream.open(Native Method)
[exec]     at java.io.FileOutputStream.<init>(Unknown Source)
[exec]     at java.io.FileOutputStream.<init>(Unknown Source)
[exec]     at flex2.tools.Compiler.mxmlc(Compiler.java:283)
[exec]     at flex2.tools.Compiler.main(Compiler.java:53)

BUILD FAILED
C:\Projects\******\flex\ant\build.xml:44: exec returned: 1

Total time: 4 seconds

This occurs whenever Flex Builder fails to launch the application and you try to compile after that.

The only way to solve it at the moment is to close Flex Builder. When it's closed the application gets actually launched in the stand alone Flash Player. Close the SA Flash Player. Start Flex again and compile.

Or just open up Windows Task Manager and kill FlashPlayer.exe.

Colors and bitwise operators

Friday, May 1st, 2009

I found this very interesting post called "Hex colors & bitwise operators" on www.tracestatement.com a while back and I've been meaning to blog about it.

Actionscript:
  1. // From hex value to r,g,b values
  2. var hex:uint = 0xFF8811;
  3. var r:uint = rgb&gt;&gt; 16;
  4. var g:uint = rgb&gt;&gt; 8 &amp; 0xFF;
  5. var b:uint = rgb &amp; 0xFF;
  6.  
  7. //From r,g,b values to hex value
  8. hex = (r &lt;&lt;16) | (g &lt;&lt;8) | b;

This tiny bit of code allows you to rapidly subtract the Red, Green and Blue values from a hexadecimal colour code. Once you have the R, G, B bits you can then manipulate them and once done convert them back to a single Hex value.

An important thing to remember is bitmasking, this can be used to switch a set of bits either on or off.

Flex 3 CSS Properties list

Wednesday, April 15th, 2009

Nice reference: http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm

Augmented Reality

Sunday, March 1st, 2009

This seems to be the new buzz word on the web.

After seeing a couple of examples from Boffswana and Toyota I wasn't that convinced. The response usually isn't too good and the quality seems to lack a lot.

I printed out the markers on A4 and gave it a try. Since A4 isn't that sturdy the marker got distorted and both examples had a lot of trouble picking it up. Also I tried it at night in the study with a single light on. This resulted in a glare on the marker and of course this interfered with the recognition. The low light conditions didn't help much either, it seems a low(er) contrast really throws the marker recognition off. All in all AR software seems to be quite sensitive to imperfections.

Of course this could stop me from trying something myself and see why exactly it is so sensitive.
So what I did is combine the FLARToolkit with Flint particles.

Augmented Reality test

[Click the image above to run the example, I've used the same marker as the Boffswana example.]

If you run my test, you'll see that it's quite sluggish as well, you're lucky if you get 6+ frames per second. This is due to the marker detection method ( FLARSingleMarkerDetector.detectMarkerLite() ). Sometimes this method takes up to 1300 ms to detect the marker, on average it takes about 150 ms.

The Flash community has always been really fast on picking new technolgy up, but I'm afraid this is a little bit too high end for Flash at the moment.

Some possible solutions:

  • Glue the printed marker to a piece of cardboard to get it a bit more steady so it won't be bent as much and is easier to pick up by the AR software.
  • Marker detection doesn't work that well with low light conditions. When I was at FlashCamp Seb (from PV3D) had a good idea. Just process the camera image, make it black and white and crank up the brightness and contrast.
  • As for processing speed, maybe something clever with pixel bender? Could Alchemy help?

Flash Camp London

Saturday, February 28th, 2009

13.30 - 14.00 Keynote
Serge Jespers (Adobe)

...

14.00 - 14.30 Work / Play
Seb Lee-Delisle (Plugin Media / PV3D)

...

15.45 - 16.30 Scripting with AS3
Mike Chambers (Adobe)

...

16.30 - 17.00 Spore Microsite
Richard Dean (Creative Lead - Lightmaker)

...

17.00 - 17.30 Custom Chrome in AIR
James Whittaker (Front-end technical architect / Adobe Community Expert)

...

18.15 - 19.00 Flash CS4
Lee Brimlow (Adobe)

...

19.00 - 19.45 Flex workflows in CS4
Serge Jespers (Adobe)

...

Custom graphic for Google maps polyline

Friday, February 6th, 2009

I've been looking into the question wether or not it is possible to use a custom graphic for polylines (and/or polygons) in Google Maps. The result so far is very promissing and the answer is yes!

Click to launch

NOTE: right click and save as.. then run, as the gmaps API key used is not for this domain.

The feet are taken from a MovieClip and repeated for the length of the line.

I've achieved this by implementing the IPolyLine and IOverLay Interface. It took quite some figuring out to determine what each function was meant to do.

TBC...

TODO:

  1. Multi point line
  2. Exact line fill
  3. Flag for toggling image stretching / repeating
  4. Fixing a bug with Event dispatching