Flux, Flex, and Other

I’ve always been interested in the user’s experience.  Ask my coworkers at Booz — sure it was cool they could make a database that tracked and manipulated all the cargo being taken up to, or returned from, the International Space Station — but if the interface wasn’t equally or more powerful that the logic behind it, I complained…

So it pleases me immensely to see richer experiences showing up all over the web recently.  (and not because I moved to a comany who is all about making that happen).

(well, not only).

I’m especially happy to see those experiences NOT target at geeky, internet savvy, uber-users.  When it reaches the general public, that’s good stuff.

Andy posted about how rich internet applications made a cameo on The Office.

And then Kellen forwarded us an email about the Sony Bravia website.  It’s very design-y and has a lot of interaction, feedback, and experience built in.  It makes you want to see what else is under the other areas.  Much MUCH more engaging than a flat website…  The cube and navigation effects are interesting, and the interface is catchy, if not intuitive.  We followed on the email with a discussion about how we get lots of requests for cubes, etc.  For serious, daily use applications, maybe not the best design… but for an occaisional, marketing, kiosk, emotional punch it works well.

Now, if you go play with the website, find the Rabbit claymation section.  Watch the commercial and then the making of.  Nothing to do with Rich Experiences… it’s just really cool.

… and my dad told me not to be an art major…

… you see how well Pre-Med worked out…

“Hallo!  My name is Inigo Montoya.  You send me mislabeled crap.  Prepare to die” …

I’m not a Microsoft fan. I think the combination of their relatively crappy product(s), assuming their non-commercial customers are criminals and/or mindless drones, and the inaccessibility of their support system (I’ve found it far easier to Google for Microsoft support issues rather than using Microsoft’s support search site… and can you find a phone number on there anywhere?) make them a good candidate for technical hatred.

But the thing that really gets me is the lack of even remotely honest labeling. There was the instance where they upgraded everyone to the new (crappy) Internet Explorer 7 via the “Critical Updates” section of Windows Update… Which then followed on with future (actual) critical updates to fix the holes in IE7…

And now, this… I needed to sign up for Windows Messenger MSN Messenger Hotmail Windows Live whatever they’re calling it now since we use the Microsoft messnger at work.  It gives you a hotmail address, so now I have a hotmail address.  Fabulous.  I never use the Hotmail address, but occaisionally my messenger pops up an alert telling me I have email in my inbox.  It’s always marketing crap from Microsoft, so I found my way into the preferences to turn off all communication from Microsoft, other than the required “Updates, changes to the service, or information vital to the service.

I’m okay with that…  “We have a security flaw”, “Your storage just got upgraded to X gigabytes”, “Here’s your lost password” — all relevant and useful information that I am totally willing to accept.

Then this arrived this morning…

Now, I’m sorry, but I seriously doubt that getting Spooky haloween packs, Getting Sweet Stuff Now, and getting marketing emails for Windows Live OneCare counts as “Updates, Changes, or Information vital to the service”.

I think it’s especially telling that they REMIND you that this email is being sent under those pretenses, and that if you don’t like it, don’t let the e-door hit you on the e-butt on the e-way out.

I hope this post will help other people easily use PNG files, with transparency, as masks in Flex.

I was working on a project where I needed to draw a colored rectangle using the drawing API, then mask it into a non-rectangle using a user-selectable PNG file. The transparency in the PNG would determine what parts of the colored rectangle shows through, and at what alpha.

Easy enough…

After an hour or two of screwing around with it, I finally figured out that you need to set the CacheAsBitmap setting for BOTH the mask image as well as the masked object for the transparency to be used in the masking.

So do this:

myRectangleComponent.cacheAsBitmap = true;
myMaskImage.cacheAsBitmap = true;
myRectangleComponent.mask = myMaskImage;

Here’s an example flex application (with source) showing all combinations of cacheAsBitmap for the rectangle (Canvas) and the mask image. Notice on all but the last one, the Canvas is masked by the extents of the PNG image and not the transparency.

So the takehome message is to set both the mask-er and the mask-ee to cache as a bitmap. I’m not sure exactly why this is necessary, framework-wise, but it mentally makes sense - when the player internally represents it as a bitmap, it can examine the transparency of each pixel and use that information in the mask. I’m less warm and fuzzy about why the masked object needs to be cached as well — I guess it’s for the same reason so the player can evaluate the pixel being shown through the mask, but hey, it works and that’s 99% of what I care about…

Oh - for my friends and family — this is what I do at work. Sorry to be geeky in front of you, but expect more coming soon.

I had run across this a long time ago, before working for Cynergy… The the other day on a project I had a need to pan, zoom and mask off a component I was using, and Andy reminded me that he had a free ImageZoomer component out on his Cynergy blog.

The component as is zooms an Image, but the code can easily be modified to zoom any other component, whether a built-in Flex component or a custom UIComponent you just made (as was my case). An added bonus is the mouse centric zooming using the mouse wheel, and the fact that it is preset to be ready to use any easing or other effects on the animations.
Anyway, I found it really useful, and as always with Andy’s stuff, it’s top notch. Have at it!

Adobe Max just happened in Chicago this week. I couldn’t go and drink the Kool-Aid, but it was nice of some people to videotape the sneak peeks a the upcoming features of Flash.

I never was a Flash guy - I just couldn’t get my head around the timelines, keyframes, and setting up tweens and such. It was too scattered for me. Looks like some of the new features will help this. But…

Peter Elst posted videos to his blog showing most of the features in development. All of these are cool in some fashion or another, but the author- and runtime- inverse kinematics shown at the end of the Flash Next video is really cool, and is the foundation (that I was missing) of an idea I had a long time ago that should, if my estimates are correct, make me a multi-millionaire.

Sweet. Stay tuned for more at a much later date…

Oh, and the Seam Carving demo is still really cool. You just can’t beat stuff like that.

1 Comment »