ninja captain

Flex and Actionscript doesn’t handle TIFF images inherently. However, there is a library of TIFF decoding functions that I found buried in the interwebs (Big thanks to C.T. Yeung).

I made a few slight modifications because it wasn’t working when I downloaded it from Yeung. Speaking of which, this decoder doesn’t support TIFF compression. So you can’t load LZW or ZIP compressed TIFFs.

Here are the modified library files.

Here is how you would load a TIFF in Flex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import mx.controls.Alert;
import com.utils.Tiff.TIFF6Decoder;
 
private var tiffDecoder:TIFF6Decoder;
private var byteArray:ByteArray;
 
private function loadFile():void{
	var request:URLRequest = new URLRequest(
		"http://test.url.com/sample.tif"
	);
	var urlLoader:URLLoader = new URLLoader(request);
 
	urlLoader.addEventListener(Event.COMPLETE, onLoadComplete);
	urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
	urlLoader.load(request);
}
 
private function onLoadComplete(e:Event):void{
	byteArray = e.target.data;
 
	tiffDecoder = new TIFF6Decoder();
	if(tiffDecoder.decode(byteArray))
		img.source = new Bitmap(tiffDecoder.bitmapData);
	else 
		Alert.show("Failed TIFF decoding");
}

Here is an AIR example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import mx.controls.Alert;
import com.Tiff.TIFF6Decoder;
 
private var tiffDecoder:TIFF6Decoder;
private var fileStream:FileStream;
 
private function loadFile():void{
	var tiffFile:File = new File("C:/tiffs/sample.tif");
	fileStream = new FileStream();
	fileStream.addEventListener(Event.COMPLETE, onLoadComplete);
	fileStream.openAsync(tiffFile, FileMode.READ);
}
 
private function onLoadComplete(e:Event):void{
	var byteArray:ByteArray = new ByteArray();
	fileStream.readBytes(byteArray);
	fileStream.close();
 
	tiffDecoder = new TIFF6Decoder();
	if(tiffDecoder.decode(byteArray))
		img.source = new Bitmap(tiffDecoder.bitmapData);
	else 
		Alert.show("Failed TIFF decoding");
}

When applications made in Adobe Flash are resized, the default behavior is to scale the entire application. With Flex however, the default behavior is to resize the dimensions of the application container, without resizing any components. This is useful if you have designed a layout with relative positioning and sizing. But if you want your application to actually increase the size of each component, you will need to make a minor adjustment.

Add an event handler to the main application for addedToStage:

1
2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" addedToStage="stretchHandler()">

And here’s the code for stretchHandler():

1
2
3
4
5
6

private function stretchHandler():void{
	stage.scaleMode = StageScaleMode.SHOW_ALL;
	stage.align = StageAlign.TOP;
	this.width = stage.stageWidth;
	this.height = stage.stageHeight;
}

The SWF on the left is the flex application at its normal dimensions (160×80). The SWF on the right is the exact same SWF file, but I embedded it using double dimensions (320×160).

I don’t know about everyone else, but I think the default component skins in Flex 4 are a big mistake. Well, let me be clear: I know the new Spark components are now easier to customize. And that is great. I am all for improving customization and usability. But some people don’t like skinning the default components! Would it have been so hard to improve the functionality while still making the default skins pretty? Like the Halo skins from Flex 3? One of the best things about Flex 3 is that I could just pop in a bunch of UI elements and it would be a great-looking application right out of the box. With the addition of Spark, I am now forced to customize the look of the components.

So, for starters, I’ve corrected one of the main faults, which is the font. I found that simply changing the default Spark font, it makes a big impact. All you have to do is add the following style code to your application:

1
2
3
4
5
6
7

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	s|Application{
		font-family: "Verdana";
		font-size: 10;
	}
</fx:Style>

As you can see in the example below, the left UI is the default skin. The right UI is with this minor font change. I think it makes a big difference:

I’m sure there are some other things I can do globally, to make Spark a little better-looking out of the box. The font is just a small step in the right direction.

Another Method

 
Now, I will say that there’s another method of forcing the compiler to use the Halo skins. I don’t like this method though. For starters, the proper skins don’t show up in Design View. Also there are a few syntax issues with mixing the skins. Having said that, if you want to go that route, you can: Go to your project properties, then go to Flex Compiler, and append this text to the Additional compiler arguments:

    -theme=${flexlib}/themes/Halo/halo.swc