Flexmaniak.pl

[Modules] Check if class implements interface

damian — Sun, 02 Oct 2011 07:36:49 +0000

Problem:

I have module that implements my interface:

class MyModule extends ModuleBase implmenets IMyInterface
{
...
}

After loading module from external file:

var moduleInfo:IModuleInfo = ModuleManager.getModule('module_path.swf');
moduleInfo.addEventListener(ModuleEvent.READY, this_READY );
moduleInfo.load(null,null,null ,FlexGlobals.topLevelApplication.moduleFactory);

And creating module object:

private function this_READY( moduleEvent:ModuleEvent ):void {
var moduleInfo:IModuleInfo = moduleEvent.module;
var m:Object = moduleInfo.factory.create();
}

The expression:

m is IMyInterface;

returns false instead of true.

Solution:

The solution for this problem is following:

After creating the module object using factory, we must use the expression presented above. I do not know why, but after the first use of this expression or casting (operator as) it behaves right.

Therefore we must add the following line:

private function this_READY( moduleEvent:ModuleEvent ):void {
var moduleInfo:IModuleInfo = moduleEvent.module;
var m:Object = moduleInfo.factory.create();

m is IMyInterface;
}

It looks like error in Flex for me, as I cannot find an explanation for it.

Two way data binding

Piotr Wierzgała — Fri, 23 Sep 2011 12:48:04 +0000

If you bind a variable to some component’s property by just adding [Bindable] metatag above it you may notice that component’s property changes when variable changes but it doesn’t work in the opposite direction. So what to do in order to achieve to way data binding?

In MXML you have to add twoWay=”true” attribute to your Binding tag.

<fx:Binding source="slider_1.value" destination="slider_2.value" twoWay="true"/>

<s:HSlider id="slider_1"/>
<s:HSlider id="slider_2"/>

In ActionScript you have to add @ before binded variable in component’s property.

[Bindable]
private var value:Number;

<s:HSlider value="@{value}"/>

png2swf: a way to keep transparency and small PNG file size

Piotr Wierzgała — Sun, 07 Aug 2011 19:06:59 +0000

png2swf utility is a part of SWFTools package. It is capable of converting PNG to SWF format and it can really save your life if you are in need of having small PNG files.

PNG supports transparency and it has good compression for images consisting of solid blocks of colors but if it comes to photo-like quality PNG is really terrible. With png2swf you can combine transparency of PNG and small size of JPEG format. In order to compress your PNG image (with preservation of transparent pixels) you need to specify -j flag with it’s quality level (1-100).

png2swf -j 70 -o output_file.swf input_file.png

Here are several examples of my results (quality 70):

315KB (PNG) -> 58KB (SWF) output is 18% of input
294KB (PNG) -> 60KB (SWF) output is 20% of input
101KB (PNG) -> 29KB (SWF) output is 28% of input
193KB (PNG) -> 45KB (SWF) output is 23% of input
203KB (PNG) -> 72KB (SWF) output is 35% of input

If you are going to use this solution you may be also interested in the follwing two posts:

BitmapData and transparency

Piotr Wierzgała — Thu, 04 Aug 2011 21:06:09 +0000

If you used draw method from BitmapData class to copy some DisplayObject with transparency you may notice that all transparent pixels turned white. This is because you didn’t set properly parameters in BitmapData construcotr.

BitmapData(width:int, height:int, transparent:Boolean=true, fillColor:uint=0xffffffff)

By default BitmapData fills it’s background with white and to avoid this you have to set fillColor parameter to any transparent color.

var bitmapData:BitmapData = new BitmapData(someWidth, someHeight, true, 0x00ffffff);
bitmapData.draw(someDisplayObject);

ByteArray to BitmapData. Loading image in SWF format.

Piotr Wierzgała — Thu, 04 Aug 2011 20:32:19 +0000

If you load an image saved in SWF format and you would like to have it as BitmapData then the following three functions will solve the problem.

private function loadSWF(url:String):void
{
var swfLoader:SWFLoader = new SWFLoader;
swfLoader.load(url);
swfLoader.addEventListener(Event.COMPLETE, swfLoader_COMPLETE);
}

private function swfLoader_COMPLETE(event:Event):void
{
var bytesLoader:Loader = new Loader();
bytesLoader.loadBytes(event.target.content.loaderInfo.bytes);
bytesLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bytesLoader_COMPLETE);
}

private function bytesLoader_COMPLETE(event:Event):void {
var content:DisplayObject = event.target.content;
var bitmapData:BitmapData = new BitmapData(content.width, content.height, true, 0x00ffffff);
bitmapData.draw(content);
}

ByteArray to BitmapData. Loading image with FileReference.

Piotr Wierzgała — Wed, 03 Aug 2011 17:02:31 +0000

If you load a graphic file with the FileReference class you will get it as a ByteArray and you will probably like to convert it to BitmapData.

Let’s assume that you have successfully browsed, selected and loaded the image. After that you have to use Loader object to load ByteArray available in fileReference.data field. Finally, in Loader COMPLETE event you will have Bitmap object in content property of the target.

private function fileReference_COMPLETE(event:Event):void
{
var loader:Loader = new Loader;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_COMPLETE);
loader.loadBytes(fileReference.data);
}

private function loader_COMPLETE(event:Event):void
{
var bitmap:Bitmap = event.target.content;
var bitmapData:BitmapData = bitmap.BitmapData;
}

FlexPrintJob, TypeError: Error #1009: Cannot access a property or method of a null object reference.

Piotr Wierzgała — Wed, 03 Aug 2011 12:07:33 +0000

Full error text:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.printing::FlexPrintJob/addObject()[E:\dev\hero_private\frameworks\projects\framework\src\mx\printing\FlexPrintJob.as:252]

What caused the warning?
I was trying to print dynamically created image. The error occured in function addObject from FlexPrintJob class.

What is the solution?
You have to add printed object to a stage before you add it to FlexPrintJob.

var flexPrintJob:FlexPrintJob = new FlexPrintJob();
addElement(image);
if (flexPrintJob.start() != true)
{
removeElement(image);
return;
}
flexPrintJob.addObject(image, FlexPrintJobScaleType.SHOW_ALL);
flexPrintJob.send();
removeElement(image);

Note that the printed object will not be visible on a stage even for a second because it’s immediately removed from the stage after sending to FlexPrintJob.

Nested inner functions as event listeners

Piotr Wierzgała — Wed, 03 Aug 2011 11:47:47 +0000

Sometimes it happens that you need to pass some paremeters to you event listener function but because it can’t be done you declare additional class fields specially for this purpose. Let’s consider the following sitiation:

We have a function that takes three parameters: url to some image, x coordinate and y coordinate at which the image should be drawn. Before the image will be drawn it should be loaded and here’s the moment where our parameters stuck. We have to assign them to class fields in order to use them in loader COMPLETE event listener.

private var imageX:int;
private var imageY:int;

private function addImage(url:String, imageX:int, imageY:int):void
{
this.imageX = imageX;
this.imageY = imageY;
var loader:Loader = new Loader();
loader.load(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_COMPLETE);
}

private function loader_COMPLETE(event:Event):void
{
var bitmapData:BitmapData = event.target.content;
graphics.beginBitmapFill(bitmapData);
graphics.drawRect(imageX, imageY, bitmapData.width, bitmapData.height);
graphics.endFill();
}

To avoid such inconvenient situation we can use nested inner function as event listener (closure). Here’s how it looks:

private function addImage(url:String, imageX:int, imageY:int):void

var loader:Loader = new Loader();
loader.load(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
function (event:Event):void
{
var bitmapData:BitmapData = event.target.content;
graphics.beginBitmapFill(bitmapData);
graphics.drawRect(imageX, imageY, bitmapData.width, bitmapData.height);
graphics.endFill();
}
);
}

Using this solution:

You have access to local variables in the scope outer function.
You keep all the logic in one place.
You don’t end up with lots of functions.

But:

You do not have access to inner function from any other place in you code.
Functions with inner functions are usually not as readable as their casual equvalents.

How to get RGB color values from BitmapData?

Piotr Wierzgała — Sat, 30 Jul 2011 08:51:03 +0000

BitmapData object has two methods: getPixel() and getPixel32 which return hexadecimal color value without and with alpha channel respectively. You can easily extract RGB values from hexadecimal notation using the code below:

var pixel:uint = bitmapData.getPixel32(x, y);
var alpha:uint = pixel >> 24 & 0xff;
var red:uint = pixel >> 16 & 0xff;
var green:uint = pixel >> 8 & 0xff;
var blue:uint = pixel & 0xff;

How to disable mouse events on transparent parts of PNG image?

Piotr Wierzgała — Fri, 29 Jul 2011 22:43:08 +0000

Transparent area in vector graphics doesn’t generate any mouse events simply because it holds no data. In case of raster graphics every transparent area is a solid block of pixels with aplha channel equal zero. All transparent pixels in a PNG file behave like non-tranparent ones what sometimes can be treated as unwanted feature.

There are at least two solutions to that problem: the first uses masks and the second checks alpha channel value of a selected pixel.

First solution

In first solution you have to add a mask to your PNG layer (Sprite, UIComponent) which will cover every non-transparent pixel of a PNG image. Here is a helper function which you can use to create such mask:

private function createMask(bitmapData:BitmapData):Sprite
{
var mask:Sprite = new Sprite();
mask.graphics.clear();
mask.graphics.beginFill(0xff0000);
for (var y:uint=0; y<bitmapData.height; y++)
{
for (var x:uint=0; x<bitmapData.width; x++)
{
if ((bitmapData.getPixel32(x,y) && 0x000000ff) != 0)
{
mask.graphics.drawRect(x,y,1,1);
}
}
}
mask.graphics.endFill();
return mask;
}

Pixels covered with mask will respond to mouse events and the others not.

Second solution

Let’s say you want to move PNG layer with mouse only if your cursor is over non-transparent pixel. In such case you can check alpha channel value of selected pixel and if it is different than zero (non-transparent) perform move action. This approach is much more efficient than the previous one. Here is a helper function which returns TRUE if specified pixel is transparent.

public function isClickedPixelTransparent(pixelX:int, pixelY:int, bd:BitmapData):Boolean
{
return (bd.getPixel32(pixelX, pixelY) && 0x000000ff) == 0;
}