• Configure your After Effects workspace to handle working with elements in 3d space.
• Manipulate the x, y, and z position of your lights.
• Adjust cone angle, cone feather, light intensity and light color.
• Animate the position and light properties.

The video runs 7:05 – feedback welcome.

Screencasting notes:

In this video, I again focused on narrative structure, pacing and humanizing the videos, but I paid special attention to making the production value of the talking head footage much higher. I once again relied on my trusty Flip Mino HD, but decided to try and frame things up a bit better and feed the Flip some light (the Flip really struggles in low lighting conditions). So after convincing Santa Claus (my wife Nancy) that I needed a soft box or two, I set up in front of a bare section of wall in my living room and filmed a couple of talking head segments off the cuff. They turned out well and, much to Nancy’s chagrin, have led me to set up shop in the living room permanently. ;-)

• Humanizing your video.
• Using narrative structure.
• The editor’s role in pacing and its impact on audience attention.
• Lifting production value with sophisticated bumpers / credits.

As usual, we’ll begin with an exploratory screencast and then return to the article for a bit more color on the intent / techniques utilized.

Humanize

Screen video alone is not enough. You need to humanize your content by getting in front of the camera and engaging your audience. And no, I’m not talking about long-winded monologues either. Several 5-7 second talking-head elements can go a long way toward winning over and maintaining the interest of your audience. Let people see your face and don’t be afraid to be emotive / loose. Let them see the twinkle in your eyes and the smirk on your face. As social creatures its how we empathize and bond with each other.

Viewers are most alert at the beginning and end of your screencast (true whether its a meeting, presentation, or screencast). In a recent webinar, noted presenter / storyteller Andy Goodman emphasized how important it is to take advantage of these naturally occurring periods of high focus. That’s why its critical to let viewers see your face and make a connection with you at the beginning of the screencast. It’s also why there’s a talking-head call to action at end of the screencast (during the closing credits segment).

Structure

Screencasts aren’t just raw data spewing out of an organic database. Make your screencasts accessible by breaking them down into logical elements that together accomplish the emotional, psychological and instructive goals of your narrative. Structure can help you engage your audience, build your brand, send your message, and motivate your viewers to take action. In this screencast, the structure – intro, bumper, message, bumper – was deliberately constructed to: create rapport and pique viewer interest, establish credibility and build personal brand, teach software functionality, and build brand while motivating viewers to watch other screencasts.

Making a connection with viewers, getting them to watch, and teaching them something they want to know are obviously the most important elements of this screencast. However, by thoughtfully utilizing structure we can add credibility, build brand, and make calls to action in such a way that they actually reinforce / enhance our top level goals.

Pacing

In the context of filmmaking, pacing is the speed or rate at which the narrative happens, transforms, or develops. It’s important to realize that pacing is more about the viewers sense of narrative speed rather than the actual speed of the event itself. Pacing, then, can be controlled by the rate at which you change what or how the audience is seeing.

In typical filmmaking, lots of “coverage” (extra footage) is shot from a variety of different angles and distances. This allows the editor to control how long any single shot is used by cutting to other views of the scene. This cutting can give a sense of activity and motion, or be used to create dramatic impact. All of these elements keep the viewer more interested in the scene than they would otherwise be if a single camera from a fixed position was used.

How does this all apply to this screencast you might ask? Good question. In order get good “coverage” I did two things:

1. recorded the entire desktop
2. filmed all of the actual hand / keyboard interaction.

Recording the entire desktop allowed me to create a versatile array of wide, medium and tight shots. If you notice, the majority of the shots are either zoomed in (medium / tight shots) or zoomed out (wide shots) from the actual recording dimensions (you aren’t limited to just selecting quadrants of the screen at 1:1 scale). Filming the hand / keyboard interactions allowed me to cutaway to an alternate view of the scene (the hands interacting with the keyboard).

In order to control pacing I alternated between wide, medium, tight, and keyboard cutaway shots every 2-8 seconds (2-5 seconds is the optimum range). This technique creates visual interest and lends speed to the narrative by changing the shot frequently. In effect, I never let the viewer’s eyes get bored by frequently changing what or how they are looking at the scene and I get to “weight” the importance / impact of each shot by the length of time the shot is on the screen.

Production Value

Production value: A method, material, or stagecraft skill used in the production of a motion picture or artistic performance; the technical quality of such a method, material, or skill.

One of the simplest ways to improve the production value of a screencast is to use sophisticated bumpers and closing credits. The quality of these segments affects the perceived value of the enclosed content, reinforces the message, helps establish your credibility as an expert, and, as an added bonus, can help you define your personal brand.

Remember, you’re not just presenting static information. You’re selling it. You’re selling your authority as a subject matter expert. You’re selling the quality of the content the audience is about to watch. And, all the while, you’re establishing a style and building your image / brand.

High production values set your screencasts apart and give your audience another reason to believe in their investment in you. At the beginning of a screencast you’re looking to make your audience believe they should invest their time. At the end, you want to reinforce that the message they just heard was special and significant. Use these elements wisely and you can make all that effort expended recording, editing and compositing worth it.

It’s interesting to note that filmmaking itself started out on this same path by merely recording theatre productions from a stationary position in the audience. Viewers were presented with an an unmoving, uninteresting wide shot from a stationary position in the theatre. Fortunately for us, filmmakers quickly realized that this wasn’t all that interesting for viewers or themselves and thus began the art and science of cinematography.

cinematography – the art of making motion pictures, or as Blaine Brown says, “from the Greek roots meaning, ‘writing with motion.’”

In light of the parallels between early filmmaking and screencasting today I’ve begun to explore screencasting as an art form. How can we make screencasts more engaging? What can we learn from the masters of visual literacy, cinematographers, about pacing, depth, emotion and visual narrative? These sorts of questions are important to explore if we want people to engage with, learn from and, dare I say, enjoy our screencasts. That’s the mindset I think we need to establish for screencasting. We’re not just recording the screen, we’re telling a story and there is a well established historical record of the art and science behind motion picture narratives.

The screencast below, a tutorial on creating animated text-on-a-path in Adobe After Effects, is an early effort to explore this verdant terrain. After watching the video read on for an explanation of the some of the techniques used and the artistic intent behind them.

Cartoon effect. This effect is one part pure stylization, one part psychological effect on presenter and one part impact on the viewer. The latter two are the more interesting concepts, so I’ll try to break them down a bit more.

First, we know that many people are very uncomfortable with the sound of their own voice or with seeing themselves on screen and yet one of the best opportunities they have for connecting with their audience is to directly engage them in front of the camera. The cartoon effect (one of many that should be experimented with) takes some of the edge off of the presenter and diminishes the realism of the shot which is strangely reassuring to the presenter. For instance, while looking at the original footage I was super focused on how fat my face was, how pasty white I looked and how the lighting was too intense. After applying the cartoon effect I felt more comfortable with “me” being on the screen. This isn’t unique to regular schmoes like me, A-list hollywood stars often insist on being shot with filters / lighting that softens the skin–a less realistic viewpoint they’re comfortable with putting on the screen.

It seems likely that the viewer will more quickly identify with the cartoon effect as well. In fact, I’m just echoing concepts Scott McCloud puts forward in Understanding Comics: The Invisible Art. McCloud argues that cartoons are very basic depictions of people (lacking realism) that are much closer to the representation of self we carry around in our heads. Our ultra powerful brains immediately latch onto this representation allowing us to more closely identify with comic book characters. This engagement in turn makes the narrative more compelling. So the comic effect can help presenters be more comfortable and allows viewers to more closely identify with the presenter. Food for thought.

Establishing shot. Usually a wide or medium shot (sometimes a sequence of wide, medium, tight) that sets the scene and provides context (i.e. this screencast is taking place on a mac laptop at my desk). Notice I used the establishing shot during the intro and immediately after the headshot. There’s continuity there–I’m making sure the viewer doesn’t have to think about where they are, or how they got there.

Window matching / door matching (a cheat technique that assists continuity) is also used. Observe that when we zoom-in to the computer on the desk the office establishing shot fades away, but the desktop remains framed around the edges with what looks like a macbook pro aluminum case. As we move from point of view to point of view this frame is visible if the edge of the desktop is visible. In film this technique would be called window matching or door matching. For example, establishing shots are often shot on location (a person at a window is shot outside from street level). However, the film will immediately cut to the interior of the building where the character is–this is typically shot on a sound stage and so they recreate the window or door (or enough to fake it) seen in the previous shot. This provides continuity–the viewer doesn’t have to step back from the narrative to try and figure out where they are. We’re doing the same thing with the pseudo aluminum edges–whenever the edge of the screen is in view we give the viewer subtle reassurance about where they are rather than just dropping off into black filmspace.

Lighting. First off, the ambient light of all the screen footage is dropped way down. This of course has some impact on the feel of the piece. We want the viewer to feel like they’re watching something special and so ambient light becomes important (restaurants having been using this technique for ages). It also allows the spot lighting to work just as it does in a darkened photo studio or at a theatre performance. Think about how the lighting at a theatre impacts your attention and immersion–we’re trying to replicate that feel. Spot lighting is then used to focus the attention of the viewer and provide stylistic shadows. On a side note look at how Hulu allows you to dim the lights for the entire site–yep details like this matter…a lot.

Depth. Camera angle, framing and lighting are the key elements here. Much of the art and responsibility of the filmmaker is in trying to create, or recreate, 3d in a 2d space. We need to create something that’s visually interesting if we’re going to hold our viewers attention. If its a flat representation of a computer desktop that’s being watched on a computer desktop there’s nothing there to pull me into the narrative. Remember, we’re trying to help the viewer engage with the story which means we need to give their brains and eyes a reason to pay attention (there’s actually quite a bit of learning theory behind this concept). All this leads us to an understanding that we need to add depth. That’s why perspective is used on every single shot in this piece. Combine perspective (camera angle) with lighting and you start feeling like you’re not just looking at a flat 2d screen–you’re looking at something with depth, something interesting, something that makes your brain sit up and pay attention.

Framing (what is visible in the viewfinder and therefore the screen). This contributes to depth especially when combined with changing camera point of view. In fact, using wide, medium and tight shots has long been one of the most important narrative tools in the filmmaker’s bag of tricks. What you see in the frame can give you context, tell you what’s important and set the emotional tone. It’s normal to see today’s filmmakers change camera point of view and framing every three to five seconds unless there’s a very good reason to stay longer with a shot (a compelling narrative, a climax or emotional scene). Changing point of view and altering framing creates visual interest and can have dramatic impact on the pacing of the story (something hugely important for screencasts). It prevents us from getting bored and moving our eyes and brains on to something that’s more interesting.

Close-ups have a huge impact as well. We aren’t used to seeing the person (substitute application, window or screen area) this close–it’s a powerful signal to the brain that it should sit up and pay attention. Hitchcock had a rule of thumb that the objects on the screen should fill the frame relative to their importance to the narrative. This is a pretty good guideline for how wide or how close you should be on a particular element (much of the time you just want to be medium to tight). This goes hand in hand with the old photographers saw that for most shots you should, “first get close, then move closer still.” Our brains pay attention to close-ups and are remarkably good at sewing together context if medium or wide shots are thrown in occasionally.

Cutaways. In this piece, keyboard shortcuts are cutaway shots. You might think this would break continuity, but the shots actually show the action being described on screen and often the keys being pressed are synched to the audio recording of the keyboard. It takes less time to cutaway to the actual keyboard shortcut action than it would to display a message that the viewer would need to read and interpret. The very act of forcing the viewer to read a keyboard shortcut takes them out of the visual narrative whereas showing them the action via cutaway is an effective cinematic storytelling technique. In this case the first cutaway is actually poorly executed (the camera is moving enough to distract you), but the subsequent cutaways were filmed on a jerry-rigged tripod keeping the shot still (that’s what allowed us to move in and out of the cutaway very effectively).

Bumpers. We’ve become culturally conditioned to seeing cool titling and motion graphics on the front and back of video. The point is, bumpers suck unless they are, again, visually interesting or entertaining. There’s a huge opportunity to really work on creating cool bumpers viewers will watch that build your personal or corporate brand.

Whew, you made it through this deep dive into screencasting as art. I hope you enjoyed it, and maybe even learned a little something. If you have feedback, comments, insights or artistic quibbles please feel free to rage away in the comments.

Go fullscreen to see the video in 720p High Definition.

It’s that easy–time for y’all to get Jing Pro and set up a screencasting channel for your favorite piece of software or dev project!

If you’re feeling your inner freak coming on stop by the 360Flex TechSmith booth for some organic, cured pork embedded in a salty maple hard candy; on a stick.

As Flash Platform devs, the easiest way to get access to the XMP data in a video file created by Adobe Premiere is to make sure you handle the onXMPData callback that NetStream fires (Flash Player 10 only). One way to do this is by extending NetStream and adding a callback handler method that looks like this:

// callback handler inside a NetStream subclass dispatches a custom event that  
// forwards the xmp data found in the callback handler
public function onXMPData( info:Object ):void
{
	dispatchEvent( new XMPEvent( XMPEvent.XMP_STRING, info.data, true ) ); 
}

Next you need to make sure you’re listening for the XMPEvent, then load the MPEG-4 AVC / F4V / FLV media:

// pseudo code
var video:NetStream = new NetStream( connection );
video.addEventListener( XMPEvent.XMP_STRING, xmpHandler, false, 0, true );
video.play( "h264_captions.f4v" );

Now its time to see what XMP looks like. We’ll use the AS3 XMP library that Adobe has up on labs:

private function xmpHandler( e:XMPEvent ):void
{
	// XMPMeta is root data structure for xmp data. Pass in the xmp data
	// we received from the NetStream callback
	var xmp:XMPMeta = new XMPMeta( e.xmp );
 
	 var xml:XML = xmp.serializeToXML();
	 trace( xml.toXMLString() );
}

The output of the previous trace should look something like this (full example xml available here):

As you can see in the example above the much of the XMP information is stored in the Adobe Dynamic Media schema that uses the xmpDM namespace.

XMP itself builds on top of another metadata framework called RDF (Rich Description Framework). You can think of RDF as the raw building blocks or data structures necessary to generically describe data.

The gigantic mess of RDF and XMP namespace elements that need to be mixed and matched can be overwhelming, but keep yer cool–Adobe’s AS3 XMP library makes it relatively simple to parse, modify or create XMP metadata.

First off let’s come to a basic understanding of the core RDF elements used in XMP:

• Description – the basic data structure of RDF, this sucka holds just about anything.
• Bag – an array structure. I just think of these as unordered all purposes arrays.
• Seq – an array structure that’s ordinal by nature.
• li – an item. If yer a Bag or Seq and aren’t just an empty vessel then plenty of these will be present.

Luckily, Adobe’s AS3 XMP library has a similar ActionScript object data model:

• XMPStruct – the core data structure of XMP.
• XMPArray – there are bag and seq flavors, but for the most part these are implicitly derived.

Let’s take a look at the speech-to-text data again and see if we can piece together some of the details.

Now lets see how we could use this information to parse the XMP data and extract values:

private function xmpHandler( e:XMPEvent ):void
{
    var xmp:XMPMeta = new XMPMeta( e.xmp );
    // define a namespace that will allow us to "dot down" into the data
    // the XMP lib provides constants for many of the common XMP schemas
    var xmpDM:Namespace = XMPConst.xmpDM; 
 
    // "Tracks" is a Bag array containing XMPStruct types.
    // Let's take a look at how we can parse out the values in
    // first XMPStruct. NOTE: All XMP arrays start at 1 rather than 0.
    var track1:XMPStruct = xmp.xmpDM::Tracks[1];
    trace( track1.xmpDM::trackName );
    trace( track1.xmpDM::frameRate );
 
    // the second struct contains the array of speech-to-text
    // markers that we're interested in.
    var track2:XMPStruct = xmp.xmpDM::Tracks[2];
    var markers:XMPArray = track2.xmpDM::markers;
    var item:XMPStruct;
 
    for ( var i:int = 1; i < markers.length + 1; i++ )
    {
        item = markers[i]; //  a reference to the current marker of type XMPStruct
 
        // now we can simply look at all of the property values for each 
        // item in the array
        trace( "startTime: " + item.xmpDM::startTime );
        trace( "duration: " + item.xmpDM::duration );
        trace( "name: " + item.xmpDM::name );
        trace( "speaker: " + item.xmpDM::speaker );
        trace( "probability: " + item.xmpDM::probability + "\n");
    }
}

Ok, so that wasn’t too bad was it? Armed with some basic RDF knowledge, the Adobe AS3 XMP lib actually makes it pretty easy to parse out any XMP metadata you’re likely to run into. But we can do better than that, right? Let’s use the XMP lib and our reverse engineered knowledge of the Adobe XMP Dynamic Media schema to create some XMP marker data from scratch.

private function createXMPMarkers():void
{
    // create an xmp object and create a namespace for the Adobe DynamicMedia schema
    var xmp:XMPMeta = new XMPMeta();
    var xmpDM:Namespace = XMPConst.xmpDM;
 
    // create some markers and set some properties
    var item1:XMPStruct = new XMPStruct();
    item1.xmpDM::name = "XMP Standard Schemas";
    item1.xmpDM::startTime = 0;
    item1.xmpDM::duration = 15000;
    item1.xmpDM::type = "Chapter";
 
    var item2:XMPStruct = new XMPStruct();
    item2.xmpDM::name = "Dublin Core schema";
    item2.xmpDM::startTime = 0;
    item2.xmpDM::duration = 9999;
    item2.xmpDM::type = "Index";
 
    var item3:XMPStruct = new XMPStruct();
    item3.xmpDM::name = "XMP Dynamic Media schema";
    item3.xmpDM::startTime = 10000;
    item3.xmpDM::duration = 5000;
    item3.xmpDM::type = "Index";
 
    var item4:XMPStruct = new XMPStruct();
    item4.xmpDM::name = "Specialized Schema";
    item4.xmpDM::startTime = 15001;
    item4.xmpDM::duration = 50000;
    item4.xmpDM::type = "Chapter";
 
    // create an sequenced array to hold all of the markers
    var markers:XMPArray = XMPArray.newSeq();
    markers.append( item1 );
    markers.append( item2 );
    markers.append( item3 );
    markers.append( item4 );
 
    //Create Tracks Struct
    var tracks:XMPStruct = new XMPStruct();
    tracks.xmpDM::trackName = "TOC Markers";
    tracks.xmpDM::markers = markers;
 
    // Add the "Tracks" property to the xmp object and set its value equal to the track variable.
    xmp.xmpDM::Tracks[1] = tracks;
 
    var xml:XML = xmp.serializeToXML();
    trace( xml.toXMLString() );
}

That’s it for now kids – y’all should be XMP parsing and generating machines by now. Look for an upcoming tutorial on creating and using custom XMP schemas / namespaces to store application specific metadata in your media files.

In addition to the new look, videos are now scaled in the preview window to match the output dimensions. This should make it easier to get a handle on what thumbnails of various sizes will actually look like.

• Import Jing video.
• Create and select clips.
• Add transitions.
• Use lower thirds.
• Introduce your screencast with a title clip.
• Create credits.
• Export an HD MPEG-4 video.

Go fullscreen to see the video in full 1:1 pixel clarity.

Go fullscreen to see the video in full 1:1 pixel clarity.

No one wants change–it screws up your business, but its inevitable and how you react defines you (1:10):

Don’t just have contigency plans for the Internet–embrace it (1:17):

Working together in the face of danger from an environment teeming with more physically gifted competitors requires information to flow in rapid asynchronous bursts that allow our massively parallel brains to consume and respond to many near-simultaneous inputs. We need to be able to quickly pass to and interpret messages from each other. Things like facial expressions, eye dilation, body posture and gestures are all asynchronous messages that can be quickly passed by a single individual and just as quickly interpreted by all members of the group that see them. Analyzed carefully, the constraints imposed on this universal language of the human network are speed and asynchronicity – you can’t have massively parallel consumption and efficient network cooperation without both.

With its 140 character limit and asynchronous broadcast to self-organizing networks on the web Twitter has asynchronous speed messaging in spades. It groks one of the fundamentals of human networks–the needs of the audience are more important than the desires of the individual. The ability to quickly consume and react is way more important than the individual’s desire to monopolize and pontificate. This is the lesson that user-generated web video needs to learn–it needs to be Twitterfied.

Evan Williams on the importance of constraints – Charlie Rose interview.

The Web isn’t about passive broadcast, there are far too many delicious distractions, and even if it were, most don’t have the tools or narrative capabilities to hold the attention of an audience for any real span of time. This is especially true in the screencasting realm which is why I’d like to propose the notion of TweetCasts–120 seconds or less of webcam or screen video. That’s all the time you get to make your point. If you need more time, break your content into chunks, give viewers a rest between segments and try engaging them through a different medium.

Follow these rules and there’s huge potential to further humanize the web and empower each other via massive web-based human networks. Remove the audience’s biggest impediment to engaging with video (long-form passive broadcast boredom) and we’ll all be motivated to create and watch more user generated video. If that happens I wouldn’t be surprised to see training / teaching, maybe the entire education system, crowdsourced. Just remember–whether you’re a producer, content-creation tool vendor or social media site–constraints are your friend and we’ll all be the richer for it.

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/