Last Instinct

The fast asynchronous JPEG encoder made by Mateusz Małczak has been updated. I made a tutorial on how to use the fast JPEG-encoder in Adobe Flash earlier. The new release has resolved memory leaks and the asynchronous encoding shall also be faster. I have not had time to try it out, but you can read all about it and download it at segfaultlabs.

Thanks for the update Mateusz!

If you want to encode JPEG images in AS3 there are a number of encoders to use and obviously there is one that is better than all the rest. Mateusz Małczak has made an excellent JPEG encoder based on the libjpeg C-library compiled into Actionscript using Adobe Alchemy. It not only produces small JPEGs with high quality really fast, but it’s also asyncronous meaning that it doesn’t lock up your application while encoding, like many of the other encoders do. This way you can also monitor the progress of the encoding process while encoding. The disadvantage is that you need an extra click from the user to save the file when the process is complete. This is due to limitations in the security model in the Flash Player, which only allow file saving exactly when you make a click, which doesn’t work with asynchronous scripts. However, this isn’t a big problem if you make a logic design.

Step 1

Start by making a new Flash File (Actionscript 3.0) and save it in a folder of your choice.

Step 2

Download the jpegencoder.swc from segfaultlabs. Just click on the jpegencoder.swc in the folder /libs/.

UPDATE: The library has been updated and is now faster and not leaking memory. Also, you can download it directly on segfaultlabs without going into the source.

Save the file to the folder where you have your .fla file.

Step 3

Open the publish settings in flash and select the flash tab.

To get the SWC library working when you publish your swf you need to do a little magic trick, otherwise you will get the error ReferenceError: Error #1065: Variable MainTimeline is not defined when publishing or testing the SWF. To deal with this error we need to include the required things to use SWC libraries in the SWF.

Check the Export SWC checkbox in the publish settings.

Note: this setting will also produce another SWC file with the same name as your SWF when publishing. This file is not needed when distributing the SWF to the web or similar and can be deleted.

Step 4

Click on Actionscript settings.

Go to the Library path section. Click on Browse to SWC file and locate the jpegencoder.swc and include it.

Click OK to save your library settings.

Voilà! Now you are ready to use the Alchemy JPEG Encoder in your code!

Initializing the library

To initialize the Alchemy JPEG library use the following lines in your actionscript:

import cmodule.jpegencoder.CLibInit;   
 
/// init alchemy object
var jpeginit:CLibInit = new CLibInit(); // get library
var jpeglib:Object = jpeginit.init(); // initialize library exported class to an object

Starting the encoder

To use the encoder simply call the jpeglib.encodeAsync function and use it with a ByteArray. There is also a non-asyncronous function you can use which is a little bit faster. Even if its faster I recommend using the asynchronous function, since it doesn’t lock up your application while encoding.

// Refer to your own BitmapData object
var imgBitmap:BitmapData = someBitmapDataYouHaveAlreadyCreated;
 
// Prepare Alchemy objects
var imgData:ByteArray = imgBitmap.getPixels(imgBitmap.rect);;
var imgEncoded:ByteArray = new ByteArray();
imgData.position = 0;
 
// Function called when completed
var encodeComplete:Function = function() {
    trace("Encoding complete");
};
 
// Start JPEG encoder
trace("Start encoding");
var jpegQuality:Number = 80;
jpeglib.encodeAsync(encodeComplete, imgData, imgEncoded, imgBitmap.width, imgBitmap.height, jpegQuality);

Monitor progress

To see the progress of the encoding you need to set up a function that monitors the position of the ByteArray reader in the encoder. This is done by simply using a setInterval function during the encoding. Don’t forget to clear the interval when the encoding is complete.

// Encoding progress monitor function
var encodeProgress:Function = function() {
	// Listen to the position of the data reader
	trace("Encoding progress: " + Math.round(imgData.position/imgData.length*100) + "%");
};
// Start monitoring the progress of the encoding
var progressMonitor:Number = setInterval(encodeProgress, 20);
 
// Encoding progress complete function
var encodeComplete:Function = function() {
	trace("Encoding complete");
 
	// Stop monitoring the progress
	clearInterval(progressMonitor);
};

Full example

Here is a full example of encoding some graphics into a JPEG while monitoring the progress and then saving it onto the user’s hard drive.

A great source for inspiration and making your own color themes is Adobe Kuler. It’s a free service and features all the common color picking techniques. They also have an API available for non-commercial use. It’s perfect for use with flash and its really simple to use thanks to the ColorMunch AS3 class by Ben Kanizay. I used it for color picking in my ChannelColorizer.

Here is a basic example for making a search for “banana”-themes from Kuler in Actionscript 3. To use it you need the ColorMunch class an your own Kuler API key. There are some more examples in the ColorMunch wiki, but you’ll find the most useful information in the documentation provided in the ColorMunch zip-package.

• Register for a Kuler API key
• Download the ColorMunch class and extract it to your fla-folder.

Example of using Adobe Kuler in Flash AS3 via the ColorMunch class:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import beekay.colormunch.*;
 
// creates a new ColorMunch instance with your Kuler API key
var colormunch:ColorMunch = new ColorMunch("INSERT_YOUR_KULER_API_KEY_HERE");
 
// At a minimum listen for the 'resultReady' event
// This will fire when the result has been recieved and processed
colormunch.addEventListener(ColorMunchEvent.RESULT_READY, onResultReady);
colormunch.addEventListener(ColorMunchEvent.ERROR, onResultError);
 
function onResultReady(event:ColorMunchEvent) {
	trace("Kuler recieved");
	var theme:Theme = colormunch.getRandomTheme();
	var themeSprite:Sprite = theme.getThemeSprite();
	themeSprite.width = stage.stageWidth;
	themeSprite.height = stage.stageHeight;
 
	// Put the theme sprite on the stage
	addChild(themeSprite);
 
	// Get information about the selected theme
	trace("Loading theme: " + theme.getThemeTitle());
 
	// access swatch information through the theme object
	var swatch:Swatch;
	var col:uint;
	var cR:uint;
	var cG:uint;
	var cB:uint;
 
	for (var i:int = 0; i < theme.getSwatchCount(); i++) {
		// get the color
		swatch= theme.getSwatchByIndex(i);
		col	= swatch.getHex();
 
		// Split the color into RGB
		cR 	= (col >> 16) & 0xFF;
		cG 	= (col >> 8) & 0xFF;
		cB 	= col & 0xFF;
		trace("RGB:", cR, cG, cB);
	}	
}
function onResultError(event:ColorMunchEvent) {
	trace("Kuler error: " + event.data);
}
 
// Everything prepared, now search for 10 "banana" themes starting at 0
colormunch.searchThemes(ColorMunch.FILTER_NONE, "banana", 0, 10);

Try the live demo of the Channel Colorizer Pixel Bender filter I made a couple of weeks ago. You can load an image or use your webcam and then change the RGB colors to some cool theme using coloring by Adobe Kuler. And naturally, you can save your images back to your disk to use them for anything you like.

Adobe Kuler gives the coloring an extra dimension. You can search for whatever comes to your mind: bananas, fire, happiness, an author or a specific color. Just keep in mind that you have to be a little bit patient with the search times, since the kuler-servers seems to be a bit overloaded.

The demo features a couple of really cool techniques:

• The Pixel Bender filter running live with webcam support.
• Coloring themes using Adobe Kuler via the ColorMunch AS3 class by Ben Kanizay
• Asynchronous saving of JPEG-files in Flash based on libjpeg using the Alchemy JPEG-encoder AS3 class by Mateusz Małczak

Go ahead and make some cool images and feel free to post some comments about it!

ChannelColorizer by Klas Lundberg is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Sweden.
Feel free to contact me if you want it for commercial use.