Archive for November, 2007

Inverting the alpha of a bitmap image

Friday, November 30th, 2007

A piece of code and a demo says more than a thousand words :). This code demonstrates inversion of an alpha channel in Flash8/AS2.

  1. /**
  2. * This example demonstrates inverting an alpha channel on an image.
  3. * Since Flash premultiplies the alpha, we need to keep two separate images: one with the color data, and
  4. * one with the alpha data. It demonstrates splitting the alpha from an image, inverting and proves
  5. * premultiplying the alpha destroys color information.
  6. *
  7. * @author J.C. Wichman / Objectpainters.com
  8. */
  9.  
  10. import flash.geom.Rectangle;
  11. import flash.geom.Point;
  12. import flash.display.BitmapData;
  13. import flash.filters.ColorMatrixFilter;
  14.  
  15. //set up some default params for the images
  16. var width:Number = 100;
  17. var height:Number = 100;
  18. var fillColor:Number = 0x000000;
  19.  
  20. /**
  21. * Simple function that checks how many bitmaps have already been shown on stage and
  22. * bases the location for the next one on that information. Never use code like this
  23. * out of context, since its bad programming practice:).
  24. */
  25. function showBitmap (pBitmap:BitmapData, title:String) {
  26. var imageCount:Number = this.getNextHighestDepth();
  27. var row:Number = Math.floor (imageCount/3);
  28. var columns:Number = imageCount%3;
  29.  
  30. var newClip:MovieClip = this.createEmptyMovieClip("image"+imageCount, imageCount);
  31. newClip.attachBitmap(pBitmap, 0);
  32. newClip.createTextField("title", 1, 0, 110, 10,10);
  33. var textClip:TextField = newClip["title"];
  34. textClip.autoSize = true;
  35. textClip.text = "Image "+imageCount+":\n"+title;
  36. var tf:TextFormat = new TextFormat();
  37. tf.font = "Arial";
  38. tf.align ="center";
  39. textClip.setTextFormat(tf);
  40.  
  41. newClip._x = (columns * 150)+10;
  42. newClip._y = (row * 170)+10;
  43. }
  44.  
  45.  
  46. //setting up demo rgb image, this is an image without alpha.
  47. //Since flash uses premultiplied alpha, adding an alpha channel will ruin the image for
  48. //further use when we want to invert the alpha channel, so we keep colours separate from alpha
  49. //(omg pink shirts!)
  50. var colorImage:BitmapData = new BitmapData(width, height, false, fillColor);
  51. for (var x = 0; x < width; x++) {
  52. for (var y = 0; y < height; y++) {
  53. //fiddle with the pixel data to show a dark gradient
  54. colorImage.setPixel( x,y, x<<16|y<<8|x+y);
  55. }
  56. }
  57. showBitmap (colorImage, "Colour w/o alpha");
  58.  
  59. //now we create a demo alpha bitmap. All color info is non existent, only
  60. //alpha data is set. When x<y the alpha value is near opaque, otherwise its near transparent.
  61. //we only use 0xAF and 0x10 instead of 0xFF and 0x00 to show partial alpha values are inverted ok as well
  62. var demoAlpha:BitmapData = new BitmapData(width, height, true, fillColor);
  63. for (var x = 0; x < width; x++) {
  64. for (var y = 0; y < height; y++) {
  65. demoAlpha.setPixel32( x,y, (x<y?0xAF:0x10)<<24);
  66. }
  67. }
  68. showBitmap (demoAlpha, "Alpha only");
  69.  
  70. //now imagine you didnt have a separate alpha bitmap to start with, but a starting image with alpha
  71. //which you needed to extract first:
  72. var alphaSplit:BitmapData = new BitmapData(width, height, true, fillColor);
  73. //copy the alpha channel of one image to another image
  74. alphaSplit.copyChannel(demoAlpha, new Rectangle(0,0, width, height), new Point(0,0), 8,8);
  75. showBitmap (alphaSplit, "Alpha channel copy\n (same as previous)");
  76.  
  77. //now we are going to invert the alpha. This can be done on a pixel by pixel basis, but this might just
  78. //be faster, you'd have to test it
  79. var alphaInvert:BitmapData = alphaSplit.clone();
  80. var matrix:Array = new Array();
  81. matrix = matrix.concat([1, 0, 0, 0, 0]); // red
  82. matrix = matrix.concat([0, 1, 0, 0, 0]); // green
  83. matrix = matrix.concat([0, 0, 1, 0, 0]); // blue
  84. matrix = matrix.concat([0, 0, 0, -1, 0xff]); // alpha, negate the alpha and add 255
  85. alphaInvert.applyFilter(alphaInvert, alphaInvert.rectangle, new Point(0, 0), new ColorMatrixFilter (matrix));
  86. showBitmap (alphaInvert, "Inversion of \nalpha channel");
  87.  
  88. //now the real action, we combine our original color pixels with the inverted alpha channel
  89. var comboImage:BitmapData = new BitmapData(width, height, true, fillColor);
  90. comboImage.copyPixels(colorImage, colorImage.rectangle, new Point(0,0), alphaInvert, new Point(0,0));
  91. showBitmap (comboImage, "Colours + \ninverted alpha");
  92.  
  93. //now to prove premultiplied alpha destroys color information:
  94. var colorImgWithAlpha:BitmapData = new BitmapData(width, height, true, fillColor);
  95. for (var x = 0; x < width; x++) {
  96. for (var y = 0; y < height; y++) {
  97. //fiddle with the pixel data to show a dark gradient
  98. colorImgWithAlpha.setPixel32( x,y, (x<y?0xfe:0x01)<<24|x<<16|y<<8|x+y);
  99. }
  100. }
  101. colorImgWithAlpha.applyFilter(colorImgWithAlpha, colorImgWithAlpha.rectangle, new Point(0, 0), new ColorMatrixFilter (matrix));
  102. showBitmap (colorImgWithAlpha, "Colour with\n premultiplied \n inverted alpha");
  103.  
  104.  
  105.  

Casting to Array

Friday, November 16th, 2007

Casting to Array, well that’s easy enough right?

Imagine you have:
var my2dArray:Array = new Array();

my2dArray.push ([1,2,3,4,5]);
my2dArray.push ([6,7,8,9,0]);

And now you want to access and cast an element of myArray to an array:

var firstArray:Array = Array (my2dArray[0]);
trace (firstArray.length);

Right?

Yeah if you’re compiling in MTASC. The Flash IDE (more…)

Old skool AJAX

Friday, November 16th, 2007

I was thinking about how I used to program Java before I got hooked onto Flash. I started on Java because of its conceptual beauty. And I loved how all the academic OO concepts taught and studied at the University could be tested and implemented in Java. Hell, I even swore Composition Filters amounted to Object Oriented Salvation for a while :twisted: .

My thoughts wandered back to my first java projects at TriMM back in 1999 and onwards. My boss at that time (more…)

Ideas for asset and code separation

Wednesday, November 14th, 2007

I had an idea this afternoon for simple asset from code separation in Flash8/AS2. You might have been in the situation were you wanted to load in your views, or have your views and other assets external from your code. If these assets happened to be V2 Components you were even having a bigger party.

I am usually working on a kind of hybrid projects, I create a fla with assets and code runnable from the IDE, and use the resulting swf as an injection swf in FlashDevelop. The cool thing of working this way is that -seeing the project is hybrid and all- you can either work on the project in the Flash IDE, or crank some code in FlashDevelop. There are a few drawbacks however.

  • you are using an swf which already contains all code as an injection swf. Since we use only intrinsic mx classes, we can’t use the keep flag to remove all classes from the swf, since we lose the mx classes from the swf. However especially refactoring where new superclasses are introduced or interfaces, requires recompilation of the injection swf in the Flash IDE. And in general it’s bad practice, and bloates your swf
  • you need the code to export the swf from the IDE
  • you need the injection swf to run your application from FlashDevelop

Especially when working with a designer where the designer (more…)

220-BPM - a new flash framework is born

Monday, November 12th, 2007

I had an idea for a flash framework, and while I’m not fully there yet, the first of proof concepts at TriMM are very promising. It solves a lot of the problems I can think of up till now, so I’m curious to see where this will go.

Design patterns were clear enough, but their implementation is often less than straightforward. Take an MVC pattern. Have you ever found one straightforward implementation? Instead of 100k hits on google all with a slightly different twist? The same patterns that should make it easier to communicate with your coworkers come back to haunt you, since responsibilities in classes are slightly differently allocated than you are used to, mediators are called controllers, and everything is untyped or abstracted away for the sake of ’simplicity’ etc…

The ideas I’m currently having are in blueprint phase including an almost working example as well. Just a quick overview of the design goals that are (more…)

Grants linked to Behrloo

Monday, November 12th, 2007

Today my project manager informed me that a dutch organization, M&ICT, which came about through an intensive cooperation of several departments of local government such as the department of Justice, Eduction, Culture & Science and more, is holding another competition (the 5th to be exact), called ‘Serious Gaming and Simulation for better safety’.

The documentation can be found here (although it’s in dutch) http://www.m-ict.nl/, and to my pleasant surprise, Behrloo, the system of which I am the lead frontend architect, is prominently featured as an example project and might even be a contestant as well. Check out page 11.

Another preliminary research report can be found here: https://www.rijkswaterstaat.nl/rws/wnt/toolbox/ Rij-Assistent%20-%20Rapport%20Serious gaming%20-%20mei%202007.pdf, check out page 40 onwards!

Very nice read, although not all the information is correct. For example they mention that Behrloo has been built in .Net using flash for the graphical elements. The truth is that the backend was built in .Net and the frontend is a fullfletched object oriented system, which -yes- displays graphical elements, but has no less than 300 classes and several subapplications under the hood. No timelines were hurt during the development of this system :).

Nice to see TriMM is mentioned as well!

Signing off!

Hans Wichman

A solid brick wall

Saturday, November 3rd, 2007

Sometime you come across posts or pages that really amaze me.

At times like that I am amazed at the amount of bunglers that are in this line of work. I am amazed at the poor level of self-knowlegde these individuals posses. And I am amazed at the arrogance & cockiness with which these people go through life. And last but not least I am amazed at the ease with which these people seem to twist the facts without any remorse or sense of shame at what they are doing. I cannot conclude otherwise than that these individuals have been hiding behind, or rather are glued face first onto a solid brick wall, since apparently all the do’s and don’ts in the industry (or in general for that matter) got lost on them over the years.

Coming across an article like this:
http://maximporges.blogspot.com/2007_05_01_archive.html, shows I’m not alone in this and I couldn’t agree more (only the locations are different).

Anyway I’m getting side tracked, the main reason I’m writing this article was a page I came across yesterday.

The person who created this page was involved (more…)

New Behrloo Developments

Friday, November 2nd, 2007

There are some new exciting developments going in Behrloo. The number of hits in Google seem to grow every day, and we have some exciting new plans for upcoming releases. I wish I had more time to develop content and cases myself, but being the (frontend) technical architect of a system this big is challenging enough as it is.
At the moment we are diving into the controversial subject of application frameworks, which is something really enjoyable to sink your teeth until it’s dark outside and everyone’s sound asleep :)

We had some very nice talks with Stefan Richter from FlashComGuru last week as well when he came over to TriMM to discuss one of our other projects called YPKA. We managed to sneak away to a mexican dinner for a while with the other Flash Geeks :) to share ideas etc.

All in all an exciting and good week, which ain’t over yet, so if you’ll excuse… I’m off back to work :)