Video: SearchTransition

The video for my SearchTransition demo has just been posted on Adobe TV:

Check back in a few days for the source code to this demo (dangit, more code to go clean up...).

Springtime

Here, finally, is the source code for the Spring effect seen in the video posted on Adobe TV last week. I took my time posting it because I didn't want to spring it on you too suddenly. Or maybe it was the wrong season (not the winter of my discontent, but the summer of my abject laziness). Or more probably, I just had other stuff to do, like code to actually write and check into Flex 4.

But also, tink brought up some good points in the comments to that blog that I wanted to look into and it turns out he was completely correct; there were two problems with my previous version of Spring, as shown in the video. Both are related to memory, although one is more significant than the other.

The first, and most important, issue is that I should have dispose()'d the BitmapData object, in order to release the memory that it had allocated for the bitmap copy of the component. You might think (as I did) that this would be automatically released when its referring objects go away, but that's not the case. Perhaps this is because the BitmapData object can be shared among multiple objects (as in the case of the Bitmap object, which I now use for the sprite), so it's more difficult for the Flash engine to tell when it's not needed anymore.

In any case, you should dispose() a BitmapData object when you no longer need it, particularly in a case like the Spring effect, where we create a new one every time we play the effect. If you bring up TaskManager on Windows, you can see the memory leaking away in nice 64k chunks, which makes sense given that the icons are 128x128, and a bitmap is typically 4 bytes/pixel, so that's 65,536 bytes, or 64k.

Note, however, that you have to wait until you don't need the BitmapData any longer. This is really only the case when the effect ends, as it is used as a source for the drawing while the effect is playing. So the new version of the code declares bmData as an instance variable and calls dispose() in onTweenEnd(), after we're done with it:

        override public function onTweenEnd(value:Object):void
        {
            super.onTweenEnd(value);
            component.stage.removeChild(springer);
            // dispose of the bitmap to release its memory
            bmData.dispose();
        }

The second change issue in the code is much more minor, but could be important in applications that use many more objects than this one. I chose, for no particular reason, to use a Sprite object to hold my bitmap data. But a Sprite is more than I need. All I really want is an object to hold the BitmapData; a Bitmap object is much simpler (both to create and in functionality). So I've changed the code to use that instead of Sprite:

        springer = new Bitmap(bmData, "auto", true);

Check out the source code, or play the demo for yourself:

Spring is in the AIR?

Adobe TV has posted another of my 'filthy rich' videos. My favorite part of this one (at least on the Adobe site - not sure if it holds true for the embedded version below) is the still frame in the thumbnail on the Adobe TV home page. I look like I'm holding up a field goal for the extra point in a game of paper football.

In this video, I show the "Spring" effect, with a Flex app that I wrote based on an original Java application by Romain Guy. Check out the video for now, and I'll get around to sanity-checking the Spring source code and posting it Real Soon Now.

MAX Out

The MAX 2008 conference schedule and details are posted: http://max.adobe.com/na/experience/. I'll be giving a talk on "Filthy Rich [Flex] Clients," just one of many talks on Flex and other development goodies. Check it out and join us November 16-19 in San Francisco (non-US MAX conferences to follow later) to hear about Flex, Flash, tools, and all that designer/developer stuff.

Pulse of the Geek Nation

You saw it on Adobe TV, now you can see it in code....

Here is the running demo and source code for the Pulse application seen on the Developer channel of Adobe TV.

Rather than spend time here reiterating on what I said on the video, I'll just refer you to the video to get the motivation for the effect as well as the code walkthrough.

The Video

In case you didn't manage to make it to Adobe TV, here's the video presentation for Pulse:

The Demo

And here's the running demo itself:

The Code

And finally, here's the source code. I'm tempted to put snippets of the source code inline and go over them, but I would be basically duplicating what I already did in the video, so watch the video instead.

Thanks to Romain Guy for the original (Java) version of the demo, which he wrote for our book.

Video: Pulse

Adobe TV surprised me today by posting my Pulse demo much sooner than I thought they would. Four videos posted in just over a week. I feel like Ben Affleck, where everyone will probably get sick of me when I'm just getting started. Except that Ben has a way bigger jaw and whiter teeth. And I bet he can't program graphics applications. This demo is the first in a series of "Filthy Rich Client" applications, where I look at what it would take to enable specific graphical or animated effects on the Flex platform. The Pulse demo in particular is a Flex take on an application originally written in Java by Romain Guy. The only problem is that I wasn't quite ready to post the source (just have to go through it and make sure it's ready for leaving the nest: nicely commented, teeth brushed, lunch packed...). So watch the video for now and check back here soon if you're interested in seeing the source code and application. By the way, this kind of content is also being posted on the Flex Developer Center, so you might also put that site on your list of Flex learning bookmarks.

Video: Top Drawer (Parts II & III)

Adobe TV has posted the second and third installments of the Top Drawer videos that we made, showing how we turn mouse events (Part II) into graphical shapes (Part III). Be sure to also check out my original Top Drawer postings (here, here, here, and here) that link to the source code for the project.