The team that does the MTV website certainly knows their stuff. So I was excited about the challenge when I was asked to recreate an RIA (Rich Internet Application) that they had on the MTV homepage. (open example)

But I had to go one step further. Where MTVs held 5 images I had to create the same functionality to hold an arbitrary number of images.

Oh, but wait, there’s more. I also needed to build in navigation. We needed to be able to scroll horizontally between groups. Of course the last group may not have enough images to fill the space - no problem.

And while we’re at it let’s build in tabbed navigation. Of course the data is all XML so we can change the images, groups, sizes, number of tabs, everything without opening up the Flash file. Here’s an example of the final product.

The Lenzer can currently be seen on the Zune.net homepage and also in the Marketplace homepage of the Zune software. Later on it’s going to be used in other places but I can’t say which since it isn’t public yet.

While the Lenzer doesn’t look that complex at first glance there’s really a lot going on here.

How it moves : Here’s a quick breakdown of how the images change size. There is a setInterval running at all times. I know that it isn’t a great idea to leave intervals running that when they aren’t doing anything but this is the only interval in the RMA so it doesn’t drain the system resources much. The first line of code in the interval is a check to see if the mouse is over any of the images. If so then enlarge the image that the mouse is over. Now run through all the visible images (images that are off screen have their visibility set to false and are not checked for changes.) and see how many are larger than the rest size. Get their combined width. That’s how much room is left for the other images. Take the remaining space and divide it by the number of images that are not larger than the rest size. Now resize them and finally position all the images across the screen. That’s the simplified version.

If the mouse is not over an image then check to see if any are larger than the rest size - this is where the images are set back to their rest size when the mouse is not over any images. Make the large images a little smaller, check to see how much room is left over. Make the small images a little bigger and then position them all. That’s the gist of it.

XML : Since all the data for the RIA - from the image URLs, to how fast the images slide during group changes - is in XML I needed to do some heavy duty parsing. Fortunately I wrote a class called XO (XmlObject) to do just that way before this project. I use it for every XML driven project I work on, and that’s a lot. It’s pretty tight code but it has a few issues here and there. As much as I like it I can’t wait to start using the new E4X parser for AS3.

DrawingAPI : The DrawingAPI was used to create the gradient that is then used as a gradient mask for the reflected image.

BitMapSmoothing : Since these images are being scaled from their original sizes they look a little chunky. It’s just the rendering of the images by the FlashPlayer at non-native sizes. This is fixable in the authoring environment but there’s nothing that can be done about it at runtime. That is until the 8.5 FlashPlayer came out. That’s when they added support for bitmap smoothing. You can get to it via the bitMapData class.