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

John Grden and some of the other 3d elites in the Flash world don’t feel Flash 3d is good enough.

Is either party correct? Is the answer, almost? Or, does it lie to some other web rendering engine to wrest yet another Silmaril from the clutches of old media? It’s enough to make me wonder if the Mozilla cats won’t get jealous and make 3d gaming a part of the html 5.1 spec( three cheers for FOSS and yet another browser land grab in the Flash world). ;-)

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.

An ISO 8601 date and time string comes in two flavors, basic and extended. As you can see below, the basic format simply eschews dashes and colons in favor of a more compact syntax.

• Basic – 20090221T090000Z
• Extended – 2009-02-21T09:00:00Z

The standard requires a fixed number of digits to represent a date (8 digits) or a time (6 digits). When fewer digits are needed to represent a date / time the number must be padded with leading zeros. The Z at the end of the string designates the UTC “Zulu” timezone (GMT or so called universal time).

I took a quick buzz around the interwebs, but couldn’t find an AS3 lib that could convert one of these strings into a date object or take a date object and have it generate a correctly formatted string, so, you guessed it–I spent my Sunday evening whipping together a utility class that will do the trick (download the source here).

I’m not claiming compliance with every nook and cranny of the spec, but it covers the fundamentals decently. Hand the util an AS3 Date object and you can generate a date, time or date + time in the basic or extended format. You can also parse a basic / extended date, time or date + time string and have an AS3 Date object returned with the appropriate UTC values set on it.

Here’s what the basic usage would look like for a date + time scenario:

// instantiate a ISO8601Util object
 var util:ISO8601Util = new ISO8601Util();
// parse a date + time string into an AS3 Date  - takes either a basic or 
// extended representation         
var date:Date = util.parseDateTimeString( "2009-02-21T09:07:59Z" );
 
// to turn a date into an ISO 8601 date + time representation grab a date object
var currentdate:Date = new Date();
// create a string with the extended or basic format
var extended:String = util.formatExtendedDateTime( currentdate )
var basic:String = util.formatBasicDateTime( currentdate );

Hopefully, I’m now the only poor bastard who has to do this!

The player was built with Flex (easy to tell as I never quite got around to creating a custom preloader) which makes her a bit of a pig file size wise, but having a mature framework and consistent approach to component creation was worth it in my opinion (I should add that the Google Analytics lib added a bit to her heft).

Besides being a branded experience, the player does some neat scaling tricks which makes it behave a lot more like an HDTV. Feed it a SD / HD stream and it elegantly handles the scaling and position (pillarboxing, letterboxing and windowboxing in video parlance) of the video. This makes it much easier to embed because you can make the video fit anywhere (big video, small blog post–no problemo). So throw on your flak jacket and check out this “full metal” homage to the Jing Pro video player.
Go fullscreen to see the video in full 1:1 pixel clarity.

The simple answer of course is to point him to the “script” tag (let’s just forget code behind support was ever added to Flex). Rather than typing up a long winded response I made a quick and dirty Jing video to “show him around” Flex’s script tag (no deep explanation, I’m just teaching by “doing”).
Go fullscreen to see the video in full 1:1 pixel clarity.

Instructions: Press the “play” button, then select the effect you’d like to see applied to the video.

The ten thousand dollar question is what’s the value outside of gratuitous eye candy? It seems that in some cases you might want to apply a particular stylistic treatment (wouldn’t it be great if the cartoon effect that ships with After Effects would compile for Flash Player). There’s also the opportunity to animate the filters and create some really killer transition effects–anyone with a media player component or video editing / mashup RIA ought to see the potential there. And that’s just the tip of the iceberg, I’m sure there are far grander ideas being born as I write this.

FYI – All of the filters were gathered up out on the interweb (mesh, exchange, pixelero).

Yep, its old news, but its a great example of the type of quick and simple knowledge nugget you can share with Jing and I’ve got a new years resolution to do that a bit more often.

One of the oft heard and most annoying claims is that Silverlight will be a ubiquitous runtime quickly. This argument posits that all that it takes to be a ubiquitous runtime is a few killer apps. These killer apps typically are either viral content repositories or social in nature and therefore will quickly reach nearly every web enabled computer on the planet. Microsoft assured us during the Silverlight launch buildup that multiple killer apps would be released with the official 1.0 launch ensuring quick and massive penetration.

This claim that all it takes to become ubiquitous is a couple of killer apps has always struck me as off. Microsoft, and even some folks in the Adobe camp, like to point to YouTube and MySpace as what “made” Flash while conveniently forgetting that Flash Player adoption was at 98% of web enabled computers long before YouTube and MySpace came along.

It’s probably much more accurate to argue that Adobe Flash Player’s high penetration is what enabled the success of MySpace and YouTube. YouTube’s roaring success validated that Flash video had already won on the web despite the fact it supported fewer codecs of lesser quality than did the other embeddable media players.

When Flash MX and Flash Player 6 hit the streets in July of 2002 there were a lot of us who bought into the potential of video when paired with Flash Player’s ubiquity and its strange but wonderful scripting, graphics and animation capabilities. We envisioned a world of custom interfaces embedded seamlessly inside our rich applications and designs. We fought battle after battle just for the opportunity to use the technology. “Back in the day” no one was a believer and video on the web was a bad joke constantly undermined by the big three’s attempts at media player domination.

The point is that 6 years ago we started building the foundation for YouTube and it wasn’t by having a few killer apps, but rather thousands upon thousands of sites with a level of richness and creativity that was unimagined (I’m continually blown away by the creativity and talent that lives and breathes in this community).

Finally, VC-1 seems to be completely dead in the water. It’s my understanding that Microsoft’s strategy of driving adoption from the top down via major media studios and broadcasters has been a major failure. Hell, back in 2002 when Flash Player 6 sported its first video capabilities Windows Media 9 was being hyped like crazy by the softies. Six years later Microsoft has the same codec sporting a new name officially standardized under SMPTE and still can’t find a date to the prom. Instead, industry support has coalesced around h.264. The h.264 tooling and licensing options are available on a variety of different platforms and are an integral part of many media technology stacks.

It’s clear that Apple’s strategy of winning the war by focusing on the content creation tools, dominant portable media playback, cross OS playback / encoding, and media purchasing has soundly beaten Microsoft in the codec / media platform war. Adobe’s decision to include the h.264 codec instead of VC-1 in Flash Player and ditch its proprietary container format should be read as a slap in the face and a clear sign of VC-1′s impotence. In one move they walk away from vendor lock-in strategies and indicate how unappealing Microsoft’s codec offering is.

Microsoft’s track record over the last 10 years lends little comfort. They’ve managed to make a media player that is universally despised and which has progressively gotten worse with each subsequent release. They have a retread codec that’s worn many skirts and names and still can’t get a date. They make a portable media player no one wants and have backed a next generation dvd format that is now officially dead. Let’s see, there’s QuickTime competitor ASF which pales in comparison and has never taken off and it replaced the universally maligned “video for windows” container–AVI. Oh and let’s not forget gems such as Windows Movie Maker and Microsoft Producer. I could go on, but you should be able to connect the dots. I actually feel sorry for the Microsoft employees when I hear them pitch this stuff–it can’t be good for the self-esteem. Note to Microsoft–maybe stop tanking in the media sector and work on making an operating system that people don’t hate.

In the end, perhaps Silverlight will take off, but I doubt it will happen overnight. If it does, it will mean a long, hard, consistent battle in the trenches where winning over the hearts of small shops and individual artists is just as important as pumping up MSDN groupies and stroking ISVs. It will mean building a community of stunning talent and incredible heart (its not a numbers game in my book). It will mean winning over the trust of a massive population trained not to trust new browser installs and increasingly cynical of Microsoft and its aggressive monopolist tendencies as a whole.

If Microsoft is able to overcome all of the hurdles in front of it, Silverlight may become more than a lifeless corpse, but until then it appears they’ll be relying on Jedi mind tricks and their silvery tongue to convince developers and consumers to ignore their repeated missteps and failures in the media sector. Good luck with that MS, you’re going to need it. ;-)