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");
}

Everybody has seen it. I’m sure Google will give us some options in the future to change it’s appearance, but for now it’s just there. It doesn’t necessarily look bad, it just might not fit with your browser’s overall theme. Well you don’t have to tolerate it. There is an addon called Stylish (Chrome, Firefox) that allows users to inject custom CSS to specific pages. So we’re going to do just that.

After you’ve installed the addon, go to the options and add a new style:

/* main bar background */
#gbx4{
  background-color: #f6f6f6!important;
  border-bottom: 1px solid #b6bac0!important;
}
 
/* main bar text */
.gbts{
  color: #777!important;
}
 
/* current tab */
.gbp1 .gbts{
  color: #333!important;
  background-color: #ddd!important;
}
 
/* current tab highlight */
.gbp1 .gbtb2 {
  border-top-color: #5893d6!important;
}
 
/* tab hover */
.gbzt-hvr span, .gbt .gbgt-hvr span{
  color: #fff!important;
  background-color: #888!important;
}

Note: We add !important to each parameter because some of google’s existing code will overwrite ours without it.

Firefox

Chrome

After implementing the above code, you should see this anywhere on the google.com domain:

Obviously, you can change these colors to whatever you like. The above style matches my current Chrome theme.

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).