AS3 PrintCanvas update: Loupe and Display

Check out the demo. But don’t just click on the swf when it comes up. A click saves an A2, 300dpi PNG. Just be warned that this could crash your browser, depending on memory. Don’t say I didn’t warn you.

Got some nice new features into PrintCanvas. It’s all very well having a massive BitmapData for print, but it’d be nice to see what it’s doing on-screen without actually shoving the whole thing into the display list. Particularly when doing time-based generative stuff, I want to watch it happen!

I’ve built this into PrintCanvas using a matrix to pull out a scaled version for display. You can easily return this display Bitmap with

1
createDisplayBitmap($width:Number):Bitmap

Stick that on your stage, then in a Timer, EnterFrame or whenever you need it, call

1
updateDisplayBitmap();

to refresh the BitmapData linked to the Bitmap. Simple.

Then I thought well, this is nice and quick, but really I want to see what’s going on at pixel level. So I built in a loupe that returns a 100% window on the big BitmapData. Just pass a width and a point on the display Bitmap – usually the local mouse position – into

1
createLoupeBitmap($centre:Point, $width:Number):Bitmap

to get another Bitmap back. Then refresh it as above by calling

1
updateLoupeBitmap($centre:Point);

In the demo above, I’ve stuck the loupe Bitmap to the mouse and masked it with a circle because it looks nice. So there. And the blue squares aren’t intended as anything pretty – they’re just there to show it updating and give you something to look at with the loupe. I’ll get something nice going soon, I promise.

I’m pretty impressed with the performance on this, even on my 4 year old MacBook Pro! If you consider in the demo it’s getting both sets of data from an unseen A2 canvas at 300dpi, every frame, that’s not bad. Seems a good deal faster still in the standalone FP10 player/IDE for some strange reason.

So here, have the code if you must.

40199 Sids

40199 Sid James Heads

I’d been wanting to play with Mario’s “image foam” experiments since I saw him present them at FOTB a couple of years ago and finally got round to it yesterday. The Late, Great Sid James was just the first image to hand. Here’s a disturbing detail:

sid_closeup

Turns out Mario never posted the source, or at least I can’t find it. So I had to work it out for myself, which I suppose is better really. At least now I more or less understand Bitmapdata.hitTest(), getBounds() (yeah, never really needed it before), finding transparent pixels, etc. It’s set to keep scaling up the Sids to fill transparent areas till the space is 95% full, which equated to 40199 swirling Sid heads. Try not to stare at the big one on Flickr for too long. You’ll go into a Carry On trance.

So next I need to get this onto my PrintCanvas and try using different images and rotations for grey levels – like you would with perlin noise – to make up a huge picture. Should be fun. Might use porn…

Oh and cheers, Jamie, for putting me straight on some of the more complex Bitmapdata stuff!

Tut tut

Here’s a little sneak peek from my first Computer Arts tutorial on how to make proper freaks. Warped with AS3, of course. Six fingers crossed it should be in there sometime next month.

warp_preview

Easy AS3 Print Canvas

About 18 months ago, I’d been looking for a decent way to circumvent AS3’s annoying BitmapData pixel size limit to easily produce print resolution generative stuff. According to livedocs:

In AIR 1.5 and Flash Player 10, the maximum size for a BitmapData object is 8,191 pixels in width or height, and the total number of pixels cannot exceed 16,777,215 pixels. (So, if a BitmapData object is 8,191 pixels wide, it can only be 2,048 pixels high.)

Keith Peters had the same problem, but there in the comments was a mention of this fantastic hack by Martin Rädlinger at formatlos. BitmapUnlimited does some clever hack thing to do with a GIF that somehow tricks the player to make bigger bitmaps. Works great too.

So in order to make print res bitmaps even easier, I’ve wrapped it in PrintCanvas, a simple little class of my own. Here’s how to use it:

1
2
3
4
5
6
7
8
9
10
11
12
import tv.palmerama.display.PrintCanvas;
import tv.palmerama.utils.CustomEvent;

var printCanvas:PrintCanvas = new PrintCanvas();
printCanvas.addEventListener("PrintCanvas ready", onPrintCanvasReady);
printCanvas.createPaperType("A2", 300, "landscape", 0xFFFF00);

function onPrintCanvasReady(e:CustomEvent):void
{
addChild(new Bitmap(e.params.bmd));
printCanvas.saveImage("PNG", "PNG_test_image");
}

So that creates an A2, 300dpi, yellow landscape canvas, adds it to the stage in a bitmap once it’s ready and saves it as a PNG. You can have a JPG too with quality setting, plus saveImage() returns its FileReference object in case you want to track progress etc. It can take a while.

Basically, you can have any size you want at any dpi. But beware memory issues! This eats it fast, so the A2 at 300dpi in this example could easily be a killer. That said, currently supported sizes from what I could find on Wikipedia are:

A0, A1, A2, A3, A4, A5, A6, A7, A8, Letter, Legal, Tabloid.

I couldn’t seem to find out much about standard American sizes beyond Letter and Legal (oddly, on the internet). Any help much appreciated.

Grab the zip here.

One big drawback of BitmapDataUnlimited is that it can’t handle filters beyond the usual BMD size. EDIT: See Martin’s comment below. That saves me some work! I’m only really bothered as the look of the screen res images I was playing with a long time back played heavily on the use of glows. Maybe now I can get on with making pretty things again, this time big enough to go on the wall.

AS3 AutoCompletion in TextMate

I know some more hardy Mac users than I have forced themselves to get used to some flavour of Eclipse (FDT or FlashBuilder), but I just cannot bring myself to do it. It’s a Windows app that still feels like a Windows app on OSX. It just looks a mess to me. Nearly every other app I use on a daily basis functions as I expect OSX apps to function – beautifully and intuitively – with the notable exception of just about anything by Adobe, but that’s to be expected.

Thus, I love TextMate. It’s light, it’s quick, it’s OSX to the core and its sidebar is the Finder. But the main thing that makes TextMate great is its expandability with Bundles. Simon Gregory has for a while now been maintaining the only AS3 bundle worth a look and a good while ago now it got really, really good with the addition of text completion.

Check out the video:

Not to be too melodramatic, but this little bundle has changed my life. No word of a lie. Recommended.

Carrier

Quite how I forgot to mention this huge project on here, I don’t know. That’s most of last autumn unaccounted for.

Carrier are a high-end holidays company, so they wanted a high fashion feel to permeate the site.

We at LOVE. tried to make a silky-smooth flash site as easy to navigate as your usual information-rich xhtml, with gorgeous full bleed photos, smooth fades aplenty, nice image galleries and easy text scrolling. And it all sits within a browser-height stretchy interface that adapts all text boxes and search results to fit snugly to the footer.

carrier4

The Flash was built with the Gaia Framework for its built-in templating, SWFAddress, google analytics and so on, which worked like a dream once I’d dug into the forums to “get” Gaia and figured out pulling all the data out of Mark’s enormous backend through CakePHP. So to speak.

carrier1

carrier2

carrier3

carrier5

The ABC data is corrupt!

Yesterday, we were about ready and done with a nice shiny new Flash project, when right at the end (as always) our slideshows just stopped working. Loads of them, all over the site. The strange thing was that the first one seemed fine – whichever one you checked – then the rest were just dead. Plus, this was the same image loader class that had worked a treat on other projects, happily loading and displaying hundreds of images concurrently with no complaints. The images were all loading to 100%, but Event.COMPLETE just wasn’t firing, so the bitmaps never got smoothed or added to the stage. Weird.

Then we noticed this unusual error:

VerifyError: Error #1107: The ABC data is corrupt, attempt to read out of bounds.

It seemed to come up every time we rolled off anything at all, and it appeared to be this that was killing the slideshows. Couldn’t see any connection at all, but there it was. But it only happened in the 2D sections, not in the main PV3D world. Troubling. So it’s an error I’ve never seen that makes no apparent sense and doesn’t seem to refer to anything specific in the project at all. Marvellous.

After extensive googling and sifting through reams of comments, I noticed a couple of people were hinting at the same thing – anonymous functions, but only in comments from many player versions back, a couple of years ago. I’ve never used them, I thought – and never would. It’s just lazy. Then I remembered we’d used the trick of a stage-sized invisible MC with no mouse cursor but an empty roll over, to act as a screen to prevent click-through when in a section (an oldie but a goodie), and it was that empty ROLL_OVER that we’d done as possibly my first ever anonymous function, to save time and space and typing. And it made sense that this was causing the error not when rolling out of anything at all, but when rolling onto that background MC. Never again!

I’m still none-the-wiser about what the hell it means, what the hell ABC data is, why it couldn’t be verified or why it killed the completely unrelated COMPLETE events and nothing else. Even the youtube vids still streamed fine. Bizarre, but at least removing that anonymous function sorted it. Hopefully this might be of some help to someone, somewhere, someday. Might save them all that googling.