Flux, Flex, and Other

Dear Mr. Cralle (my trigonometry teacher): You were right. The unit circle IS important to my life.

I’m working on a project where I’m trying to skew a component (an Image, actually) by an amount set by the user. But I’m running into problems with the skew amount calculation…

The actual project is much more complex, but I could replicate by problem in this simple example. I’m assuming something either in [ my understanding of the Matrix(), the way I’m calculating the offset, or the trig functions I’m using] are where it’s messing up, but I can’t figure it out.

A cookie for anyone who solves the problem…

Okay. The demo is here, and the source is here.

The blue canvas, on the left, is the source of the image I’m trying to skew. I’m drawing it, on the right, with two Image components. The slider says how far the right half should be moved up or down (as a percentage of the height of the right half)… and the left half should stay put but skew so that its right edge matches up with the right half.

It’s almost working, but the edges do not line up. The right half IS deflecting the proper amount, and from what I can tell, I’m doing the math right…

Anyone care to comment as to what’s wrong?

Sorry, Mr. Cralle…

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…

A coworker of mine forwarded this along to me today, and it was really inspirational. I love it when technology, an idea that probably got laughed at, and a little effort can give a big middle finger to the forces of oppression…

Most people have heard that China maintains the Golden Shield, a state firewall run in order to censor unapproved websites from the Chinese people, and to survey who is trying to access them.

Picidae is trying to change all that, with a very interesting, and relatively simple idea.

• A person in China surfs to a website run off of a pici-server — a computer running Mac OS X, which is outside of the Golden Shield. The URL to the server could be found by talking to someone outside of China, by word of mouth, etc.
  • There’s a whole network of these, and the network can be grown by adding an inexpensive new computer anywhere in the world, so it would be nearly impossible and massively labor intensive to Shield them all
  • The individual servers do not know that any other servers exist, nor does the main organizer keep a list, so literally anyone, anywhere could be running one of these, and there’s no away to find it.
• That website has a simple text box and a button.
• The person enters the website they want to see, that may be censored.
• The page, locally on their computer, encrypts the URL so snooping eyes can’t see what they are requesting.
• The pici-server decrypts the data, surfs to the requested website, and generates a single image of it — one huge JPG. It also looks where links are, and maps those areas of the image to be clickable, linking back to the pici-server. It’s called an ImageMap, and has been around forever…
• The image and its maps are sent back to the person — nothing incriminating other than a JPG image that the firewall can’t read…
• The person reads the information off of the image, clicks an area of the ImageMap, and the cycle continues

Here’s a link to the main site.

Here’s how it works.

Here’s what the user in China will experience. I tried it on this blog and it looked identical - you’d never know unless you looked at the code behind the page…

Obviously content shown in Flash (Flex) or any other dynamic content (Javascript, AJAX, video, etc) will not work on this type of network, but hey, a big fat hole in censorship in a great thing.  It also looks really easy to set up your website to proxy to a server or to use your webspace as a server if you’re so inclined — you can even use your Mac to run the server over your cable or DSL connection!

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.

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.