Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

Bitmap Fonts in Flex (via Flash)

I’m not a big fan of working with fonts in Flex overall. Truetype font file embedding is hit or miss, and even embedding system fonts seems a little unreliable. Likewise, managing character sets (ie. the glyphs to embed) in Flex is quite rudimentary (unicode character codes? editing the global config XML? blech!). These features are manageable within Flex though, even if they are a little ugly.

One font related feature that’s completely missing from Flex though is support for creating bitmap fonts. This is a shame, because bitmap fonts are sharp and aliased, and look great at small sizes (ex. 9pt Arial is quite readable as a bitmap font).
Continue reading →

We got Dugg.

Puki 3D made the front page of Digg…. cool! I think this is our first front page Digging, and I somehow missed it (it hit the front page 2 days ago). 50,000 visitors in one day, and as far as I can tell the server stayed up – kudos to Media Temple! Here’s a link to the Digg topic.

While I’m blogging about Puki, here’s a trick: Type “oldskool” before you start a game (make sure you’ve clicked to focus the game first), and you’ll get classic arcade graphics.

One day I’d like to revisit this game. Maybe with Papervision3D.

DisplayObjectWrapper for Flex

One of the challenges in using rich assets like images or Flash symbols in Flex is making them compatible with the Flex layout managers. There are a few ways to do this (some of which will be topics of future posts), but one of the easiest is to wrap the asset in a UIComponent instance that translates between the Flex layout API, and the basic Flash Player transformation API shared by all DisplayObjects.

I built a simple example of such a class, called DisplayObjectWrapper, which you can download and use or extend freely. It does a good job of translating Flex layout into resizes for it’s content, and vice versa. It’s super simple to use via mxml:
Continue reading →

Flex Loves Flash? Embed and Beyond.

Last week I had the pleasure of speaking at the 360Flex conference at EBay’s North Campus in San Jose. My presentation was titled “Flex Loves Flash? Embed and Beyond.”, where I explored the different methods available to Flex developers to work with rich assets. I started by covering existing approaches like asset embed, and Flash symbol embed, and discussed strategies for organizing those assets. From there I looked at more advanced techniques for using Flash content, like “shake and bake SWFs” (embedding a SWF as a bytearray, then extracting full classes from it), and using classes/symbols from SWFs that are loaded at runtime. I finished off by looking at new integration techniques that will work with Flash CS3, and some of the approaches I am working with Adobe to develop that will help simplify this integration. I also touched on some related topics like font / svg embed issues, data embedding, and how to use bitmap fonts in Flex.

You can check out the session notes at gskinner.com/talks/.

Over the next few days I will release some of the code I showed, and blog about a couple of the more important topics, like Shake and Bake swfs. You’ll have to wait for some of the more advanced pieces until after Flash CS3 ships though.

Above all, I want to get people thinking about this topic. Flex applications are so much cooler when Flash is involved in the workflow. If you have any tips or ideas on enhancing this workflow, please feel free to leave them in the comments.

Flex Bug with List and toString

I stumbled on this simple and interesting bug with the List component in Flex: Adding an item with a label of “toString” to a List component will break the List, and take down much of your application with it. Just add the following to a new or existing mxml app (tested in Flex 2.0.1):

<mx:List dataProvider=”[‘toString’]”/>

I find this bug interesting because despite thinking it over last night (when I should have been sleeping), I still can’t think of a good reason for why it occurs. The obvious culprit is the correlation between the string value, and List calling toString to get the label, and this somehow causes a conflict. I can’t think of a scenario where this would cause an issue though – calling toString on a string will merely return the string value, regardless of what that value is. I even tested (amongst other things) calling toString on a “toString” String (wow, convoluted) to ensure this wasn’t a deeper player level bug.

I haven’t had time to track down the cause in the framework yet, but I plan to soon. It’s bugging me, because I can’t see why there would be any correlation between this specific value of the label, and the rendering of the list item. I also have a programmer’s natural aversion to edge cases (what if my user adds an item named “toString”, and my whole app blows up?).

Hopefully there will be more, in-depth blog entries to come in the not too distant future. There’s been a lot of interesting stuff going on here at gskinner.com, including our work developing the v3 components set, continued work on our computer vision software, and our expansion into doing Flex work, which I’d love to blog about. Alas, my time is very short at the moment, between work, conferences, traveling, and building a new house (originally designed in Flash, though that’s a story for another entry).

The Coolest Flash 3D Demo Ever!

Last week, I was hunting around for a compelling speed comparison demo that I could use to show how much faster AS3 execution was than AS2 for the MacWorld Flash Forward keynote. I wanted something exciting and very visual that ran in both AS2 and AS3. Remembering that the awesome open source Paper vision 3D project by Carlos Ulloa and John Grden had recently been updated to AS3, I pinged John to see whether he could put together a cool demo in the meager 4 days I had before the session. Let me tell you… the man came through with gusto! Not only did he throw together an amazing demo contrasting AS2 rendering 900 faces at 5fps versus AS3 rendering almost 8000 faces at 25fps, but he did it in only two days, while doing normal work and accommodating all of my anal retentive requests (admit it John, those requests were the cilantro in your salsa *grin*).

The demo totally blew away the audience at MacWorld. Not only is it an amazing speed demo, but it’s the coolest piece of 3D I have seen to date in Flash. 7 x-wing fighters, 7 tie fighters, 1 death star, and Endor all flying around a star field with a chase-plane style camera.

If you want to see a stunning example of AS3’s speed gains, or just want to check out where 3d in Flash is headed, you should click over to John’s blog. Then, head over the OSFlash page for the Papervision3D project for more great demos and info.

(btw – the demo runs beautifully in full screen mode on a MacBook – as John says, Flash doesn’t look like Flash anymore)

Camera Interaction In Flash Goes Public (w/video)!

We recently had the pleasure of working with Tequila (TBWA \ Chiat \ Day‘s interactive arm) to build a very unique interactive piece to market Nissan’s new Sentra model. The concept was based on the interactive webcam systems I’ve been playing with at incomplet.org[Moved to incomplet.gskinner.com]. Media vans (trucks with big screens on the side) in seven US cities would act as mobile installations, and users could play on screen via camera input.

Users standing in front of a red screen are masked out and projected over a video running in the background. Users can play with any of five interactive “lessons”: Catching virtual leaves, controlling the volume of different tracks of music with their movements, wiping fog and water drops off the screen, being chased by a swarm of fireflies, and kicking around a beachball sized soccer ball.

We even rigged it so that the software could all be operated by the van operators using a wireless remote from in front of the screen.

Continue reading →