Sometimes you’re an idiot and you spend a lot of time reinventing the wheel because you misread one little line of documentation. This is one of those times where I get to be that idiot. I invented a solution for bilinear resampling in Flash Player when I didn’t need to. You can actually get the same results pretty simply using just BitmapData.draw() method with smoothing on (I had read this didn’t work when down sizing), but it requires creating a temp BitmapData object if the source you’re feeding the BitmapData.draw() method is not another BitmapData object (i.e. a DisplayObject). Here’s what that scenario would look like.

            // source in this example is a DisplayObject
            var temp:BitmapData = new BitmapData( sourceWidth, sourceHeight );
            temp.draw( source );
 
            var output:BitmapData = new BitmapData( outputWidth, outputHeight );
 
            var matrix:Matrix = new Matrix();
            matrix.scale( outputWidth / sourceWidth, outputHeight / sourceHeight );
 
            output.draw( temp, matrix, null, null, null, true );
            temp.dispose();

Many thanks to Felix for leaving a comment that made me question myself and go back to the problem with fresh eyes.

Now I can take some consolation in the fact that I actually learned a lot by going down this path. I dug in to Pixel Bender again and learned how to use ShaderJob. To that end, portions of this “tutorial” illustrate how to use a PixelBender shader and a ShaderJob together. ShaderJob, when run with the async flag (false), is as close as you can come to creating new threads in Flash–that’s some pretty neat Flash hackery.

So, if you find yourself reading this, you’re advised to skip down to the code included below and take a look at the embedded filter, Shader / ShaderJob portion.

*End of Update*

If you’re looking to generate high quality scaled bitmaps in Flash Player / AIR, you’ll need to do some form of bilinear or bicubic resampling. Why you ask? Because, Flash Player resampling is, by default, nearest neighbor and that looks, well, like ass (see evidence directly below).

If you dig around long enough on the net you’ll find some AS3 libraries (Java ports) like clevrlib which will do bilinear or bicubic resampling using BitmapData methods like getPixel / setPixel. As seen below, clevrlib definitely decreases jaggies and improves the legibility of text, but its extremely slow–scaling a 960×540 BitmapData object to 640×360 takes around 1.5 – 2 seconds for bilinear resampling and around 3 – 5 seconds for bicubic resampling (mileage will vary based on the type of imagery and size of the picture). Also, the results, in some cases, exhibit noticeable resampling artifacts (check out the fullscreen icon in the right corner of the examples immediately below).

I was looking to implement bilinear resampling in ThumbGenie, but, as the old saying goes–speed kills. I just couldn’t tolerate 2 or 3 seconds to resample an image–there had to to be a better way. After a bit of thought I fell on the answer–PixelBender.

Flash Player 10 PixelBender bytecode is designed to manipulate individual pixels in a bitmap super fast. In fact, it executes fast enough to apply real time filter effects to video. This seemed promising and sure enough after reading through the sdk docs and playing around for awhile (read I spent a Saturday evening trying to wrap my little melon around the issue), I was able to find a built-in PixelBender method that does bilinear sampling. Slap a parameter on that biatch (aka kernel) controlling the desired scale of the output and little ol’ me was rendering silky-smooth, scaled bitmaps out of Flash Player in mere milliseconds (8-13 milliseconds scaling a 960×540 bitmap to 640×360–take that suckaz).

Interested in chasing the same dream? Here’s, the rough outline you’ll need to follow:

1. Create Pixel Bender kernel that does bilinear resampling.
2. Compile Pixel Bender bytecode for Flash Player 10 (.pbj file).
3. Embed PBJ bytecode in AS3 class.
4. Generate BitmapData from a DisplayObject (BitmapData.draw( obj )).
5. Create an AS3 Shader object, instantiate embedded Pixel Bender bytecode, configure Shader.
6. Create an output BitmapData object (this will hold the scaled bitmap we create.
7. Create a ShaderJob – this is a process that will run the Shader and return its output to an object (as opposed to being applied to a DisplayObject wrapped in a ShaderFilter).
8. Run the ShaderJob by calling the ShaderJob.start( true ) method.
9. Do something with the BitmapData thumbnail (display, push to server, or encode and save to disk)

Ouch, that’s pretty painful. And believe me, I did some serious bleeding before figuring this one out–I really had to push the two or three sleep deprived brain cells I have left in order to get the job done. And well, this is just a long-winded way of saying that I’ll be providing y’all the Pixel Bender kernel (.pbk) and bytcode (.pbj) plus the AS3 implementation that I developed for ThumbGenie (just my way of saying thanks for all of the code you Flash / Flex cats so liberally share all of time).

Whew, you made it this far, now its time for the good stuff. Download the PixelBender source / bytecode here and feel free to peruse / use the implementation seen below.

/**
 * Copyright 2009 (c) , Brooks Andrus
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 * 
 */
package com.brooksandrus.utils
{
    import flash.display.BitmapData;
    import flash.display.DisplayObject;
    import flash.display.Shader;
    import flash.display.ShaderJob;
 
    public class BilinearResample
    {
        [Embed ( source="../../../../assets/bilinearresample.pbj", mimeType="application/octet-stream" ) ]
        private var BilinearScaling:Class;
 
        public function BilinearResample()
        {
            super();
        }
 
        public function resampleBitmap( input:BitmapData, desiredWidth:int, desiredHeight:int, cleanup:Boolean = true ):BitmapData
        {
            var aspectRatio:Number = input.width / input.height;
 
            var factor:Number = Math.max( input.width / desiredWidth, input.height / desiredHeight );
 
            // create and configure a Shader object
            var shader:Shader = new Shader();
            shader.byteCode = new BilinearScaling(); // instantiate embedded Pixel Bender bytecode
            shader.data.src.input = input; // supply the shader with BitmapData it will manipulate
            shader.data.scale.value = [factor]; // scale factor. shader params are all stored in arrays.
 
            var outputWidth:int;
            var outputHeight:int;
 
            // determine output bitmap dimensions
            if ( input.width > input.height )
            {
                outputWidth = desiredWidth;
                outputHeight = desiredWidth / aspectRatio;
            }
            else
            {
                outputWidth = desiredHeight * aspectRatio;
                outputHeight = desiredHeight;
            }
 
            // create a bitmap - our shader will return its data (an image) to this bitmap
            var output:BitmapData = new BitmapData( outputWidth, outputHeight );
 
            // shader jobs are wicked cool
            var job:ShaderJob = new ShaderJob();
            job.target = output; // ShaderJob returns to this object
            job.shader = shader; // The Shader assigned to this job
            job.start( true ); // true flag runs the job synchronously.
 
            if ( cleanup )
            {
                input.dispose();
            }
 
            return output;
        }
 
        public function resampleDisplayObject( source:DisplayObject, desiredWidth:int, desiredHeight:int ):BitmapData
        {
            var aspectRatio:Number = source.width / source.height;
 
            var factor:Number = Math.max( source.width / desiredWidth, source.height / desiredHeight );
 
            var input:BitmapData = new BitmapData( source.width, source.height, true );
            input.draw( source );
 
            // configure the shader
            var shader:Shader = new Shader();
            shader.byteCode = new BilinearScaling();
            shader.data.src.input = input;
            shader.data.scale.value = [factor]; // scale factor. shader params are all stored in arrays.
 
            var outputWidth:int;
            var outputHeight:int;
 
            if ( input.width > input.height )
            {
                outputWidth = desiredWidth;
                outputHeight = desiredWidth / aspectRatio;
            }
            else
            {
                outputWidth = desiredHeight * aspectRatio;
                outputHeight = desiredHeight;
            }
 
            var output:BitmapData = new BitmapData( outputWidth, outputHeight );
 
            var job:ShaderJob = new ShaderJob();
            job.target = output;
            job.shader = shader;
            job.start( true ); // true flag runs the job synchronously.
 
            input.dispose();
 
            return output;
        }
    }
}

ThumbGenie 1.2 makes some very noticeable improvements to the quality of scaled thumbnails, as seen below, by doing bilinear resampling using a Pixel Bender kernel.

The update also includes some bug fixes:

• Fixed bug that caused aspect ratio to be incorrectly displayed in the output dimensions field when “retain” was checked and video of a different aspect ratio was loaded. Because this bug has been fixed the “R” reset button has been removed from the UI.
• FIxed bug that prevented text from being pasted into the embed code window when the the keyboard shortcut for paste was used.

If you’re dying to get your hands on ThumbGenie, or have no idea what it is, check out its home page for an overview and some helpful videos:

http://www.brooksandrus.com/blog/thumbgenie-an-air-thumbnail-generator/

I created a short video that explains how embed code generation works and what you need to modify or replace the sample template code.
Go fullscreen to see the video in full 1:1 pixel clarity.

If you’re using Jing Pro + FTP the ability to generate thumbnails and embed code should significantly enhance your blogging workflow. Here’s a short example of how I use ThumbGenie in my workflow.
Go fullscreen to see the video in full 1:1 pixel clarity.

If you’re interested in generating thumbnails from MPEG4-AVC files or SWF files created by Jing hit the install badge below. After installing, head over to ThumbGenie central to view some helpful videos.

1. Capture video.
2. Save video to local disk (desktop).
3. Open video with QuickTime Pro ($30).
4. Select a video frame and Choose QuickTime’s “Export Movie as Bitmap” option.
5. Open .bmp file generated by QuickTime Pro in Fireworks (beaucoup $$$).
6. Resize image in Fireworks to fit my embed dimensions (embed dimensions are different than video dimensions).
7. Export out JPEG file (.jpg) with some compression applied (trade quality for size).

Jing’s supposed to be all about the easy, but the workflow above is decidedly not. It shouldn’t be that hard to generate thumbnail images from your JIng videos and it shouldn’t be ultra expensive. Enter ThumbGenie, an AIR application, written by moi, that allows you to load MPEG4-AVC or SWF files, select a video frame and generate a thumbnail image as either a JPEG or PNG file. Wait, it gets better. You can apply JPEG compression and scale the exported image down. Best of all its completely free, as in beer. So what are you waiting for, download ThumbGenie and start generating thumbnails pronto!

If you head over to ThumbGenie central you’ll find some helpful “getting started” videos as well as the installer badge.