Flash on the Beach 09 – Play with Vectors

This year I was only able to go to Flash on the Beach on the very last day. Never the less it was once again a really awesome experience and I learned a lot and got a lot of inspiration as well. I’ll try and post my notes from all the talks I’ve seen, but it might take a while…

23-09-2009 9.00 Koen de Wieggheleire – Play with Vectors
Koen did a very in depth talk about the Vector class in AS3.

The Vector class is a dence array which means that it can’t have any gaps, so something like the below would throw an error:

ActionScript

  1. myVector[0] = 'bla'; // See how we're skipping positions 1 and 2?
  2. myVector[3] = 'something else';

You can you an array as a ‘data provider’ to populate a Vector:

ActionScript

  1. myVector = Vector.<String>(myArray);

Using the Vector class will give you a performance boost of about 40 to 60%.
Unfortunately you can’t directly bind to a Vector in Flex, you can however write a wrapper class and bind to that. 😉

How to use in 3D

The Matrix3D class is somewhat complex to understand, but the image below should clarify it a bit

You can use myDisplayObject.transform.matrix3D to retrieve a DO’s Matrix3D or assign a new matrix3D to it. There are also build in methods to user rather than creating a new Matrix3D all the time, see http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/geom/Matrix3D.html

Nice thing I only found out now about matrixes: You can skew objects with it! Rock on!!! \m/

How to use with 2D

Pretty much the entire graphics API in Flash relies on Vectors. The drawPath() method below (which is pretty much the core of drawing vector shapes) takes two Vectors (the Vector data type) as arguments.

ActionScript

  1. graphics.drawPath(commands, data)
  • the commands argument is a Vector containing GraphicPathCommands
  • the data argument is a Vector containing x and y pairs that determine the path to draw.

The new Illustrator can export to FXG and you can actually import this FXG data on the fly in Flash, parse it and draw the exact same.

Some notes on UVT (texture) mapping:

  • U matches up with the x location
  • V matches up with the y location
  • T determines the focal length

The right value for T can be calculated with the following formula: T = focalLength / (focalLength + z)

Useful links:

Interesting PV3D finds

It’s been a while since I’ve used PV3D. I ran into a couple of very interesting PV3D related post some time back, completely forgot I had bookmarked them somewhere and now ran into ’em again.

PaperVisionX

PapervisionX is the next version of Papervision3D built from the ground up based on Flash10’s new 3D api.

An article explaining what PVX is and what it isn’t: http://blog.papervision3d.org/2009/03/16/papervisionx-what-it-is-and-what-it-isnt/

3D fur

Using (old) gaming techniques to create a faux fur effect in 3d: http://kode80.com/2009/06/25/papervision-fur-3d-texture/

VisualPV3D

VizualPV3D is a Flash Visualization Application that provides a GUI interface to create and manipulate objects in 3D scenes using Papervision3D.

More info and download here: http://www.juxtinteractive.com/work/vizualpv3d/

SourceBinder

SourceBinder is a node based visual development environment for Flash 10.

Instead of writing code you assemble a set of building blocks on a canvas and wire those blocks together. This allows you to rapidly create Flash applications.

You can export those applications into regular Flash SWF file.

SourceBinder will be available free of charge for any purposes.

It reminds me a lot of Lego MindStorms 😉

Links:

Five3D multiline wordwrapping text

A couple of days ago I had a look into Five3D just because I had some time on my hands and I wanted to check out Five3D for a while now. One big thing I missed in this vector based 3D engine was word wrapping for text. A Google search led me to an inaccessible blog, so I decide to write the word wrapping myself.

Download the file here: Updated DynamicText3D.as (Compatible with v2.1.2)

Usage:

ActionScript

  1. var text3d: DynamicText3D = new DynamicText3D(HelveticaBold);
  2. text3d.size = 40;
  3. text3d.color = 0xffffff;
  4. // set a maximum width for the text
  5. text3d.maxWidth = 220;
  6. // flick word wrapping on
  7. text3d.wordWrap = true;
  8. text3d.text = "Something long enough to actually wrap...";
  9.  
  10. // Traces out the height of the text
  11. trace("text3d.textHeight")

I know it’s not perfect, but it’s working for me! 😉

Flixel ‘game engine’

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:

Best code ever!.. NOT!

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

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

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.