The video navigator for the Xbox.com homepage is quite similar to the Lenzer RIA on Zune.net. They both have horizontal scrolling and a reflection. Since I did the Lenzer first that made everything much easier for this app. I wrote a class for doing the reflection so that was already done. I also have a class that makes using the movieClipLoader much easier.

There are only two things that are unique here. The easing of the horizontal scrolling had to be just right. The designer had something very specific in mind for the movement. So the code for sliding gets it parameters from the XML so we could tweak the motion just to his liking.

The only tricky part was getting the images to wrap around as they scroll. If you play with this app you’ll notice that there are three groups of four images. If you keep scrolling in one direction you’ll cycle back through the groups. There’s a pretty simple solution for keeping things in order so this turned out to be a pretty straight forward project that only took about 10 hours to finish.

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.

One of the great things about the Xbox360 is that it can be upgraded. Since it’s launch in late 2005 there have been numerous upgrades to the dashboard. (The dashboard is the interface for the console where you download games, play movies, manage your gamerTag, etc.)

Before anything is changed or added to the Xbox dashboard we build prototypes to use in user testing. That’s where I come in. I have created a Flash based version of the dashboard that has all the functionality of the Xbox - maybe even a little bit more. Most importantly the prototype is all XML driven.

Obviously this work has to be kept behind closed doors so I can’t produce an example. Instead I’ll give a brief description of the functionality:

• History: if you have used the 360 dashboard before then you probably know that it remembers where you are from screen to screen. This is like building a Flash website that remembers where you have been from page-to-page and reproduces the scene as you left it.
• No mouse: don’t forget that the 360 doesn’t work with a mouse. You use the controller to move around on the screen. All input is captured with a Key listener. This is where the 360 prototype differs the most from a typical Flash application. Typically when the user interacts with the interface that changes a state in the data. Here it’s just the reverse. The user interacts directly with the state data and then when that changes the user interface is updated.
• Dynamic navigation: each page has it’s own XML file. The XML is structured much in the same way that an XHTML site using CSS-P would be. Each element on the page is a node in the XML and that node contains information about where it is placed on the page and where the navigation can go.
• Rapter360 stands for RAPid protoTypER260. As long as no new elements are being tested I can create a new demo, or demos, in a matter of 4-6 hours. All without opening the Flash authoring tool.

This RMA for the Xbox.com homepage was originally built to rotate between five heros. (Hero: a big advertisement at the top of the page.) You know what that means: five now but maybe more later. Of course programmatically there is no difference between 5 and 21. It’s all just the length of an array to me. The one caveat I asked for is that the number of heros had to be odd. That’s because only three thumbnails are ever visible and it’s the center one that starts out as the selected one.

All in all this is a fairly straight forward RIA. The biggest lesson I learned on this project was how to create dynamic text fields populated via an XML file that contains international text. They didn’t ask for this until I was pretty much done with the project - don’t you just love it when your just about done and someone asks, “Oh yeah, and we need it to do blah, blah as well.” In this case it was the international text thing. Now it turned out that it only took a few hours of research to get everything set up and I had it displaying Chinese, Hebrew, Russian, even Sanskrit - no joke, the Xbox is a big hit in Sanskitland. :-)

Now as a rule I look at what the UX team and designers ask for and then try to anticipate what they might think of later. The first rule that I’ve learned is: declare every conceivable variable in the XML. (My XO class types variables declared in XML which is very nice.) I even use settings in the XML to position things that are loaded at runtime. It’s really nice when some designer emails and says, “hey, can you move the what’cha’ma’callit over over 3 pixels” and I respond back with, “change the whatChaMaCallit_x in the node.” I’m not sure if they love me or hate me for doing that for/to them. :-)

That is an instance of the programmers prime directive (PPD): work hard now so that you can be lazy later.

I’ve found that the PPD never really allows me to be lazy later because I’m always busy with the next thing but at least I’m not bogged down in minuscule changes 10 times a day.

I also learned that the Flash authoring tool always uses GET with the getURL method no matter if you set it to POST. That set me and the production team back a spell before we figured out what was what.

For the launch of the Zune.net website we needed a photo viewer and video player combination that I call the ZMP. I I whipped this little thing together in about a weeks time. There are instances of the ZMP all over Zune.net. They are changing all the time so I can’t link directly to one.

This, like most every RIA I produce, has one empty keyframe. On that keyframe is a bit of code that loads the XML - using my XO class - and when converted to an object then calls the appropriate class that calls other classes and loads external images or whatever and eventually builds an application. But, the FLA has a timeline with nothing but a small bit of code.

The ZMP uses the DrawingAPI to create the panels that you see in the interface. It would have been simple to create MovieClips in the library that could be attached at runtime. The problem with that is that they wanted to be able to theme the ZMP differently for each artist. By using the DrawingAPI I can keep all the colors, thicknesses, alpha settings, etc., in the XML where it can be easily edited by the production crew and artists. I don’t have to be involved with it at all.

One thing that I discovered during this process is that the DrawingAPI centers strokes over the position where they are drawn. (read more about that here.) Once I had that down it was simple to draw the interface in pixel perfect positions.

There are three main skills that I can offer in the workplace.

1. Actionstript coding
2. User Experience Design
3. Web Design

The list is pretty much in the order of my talents.
I’m not bad at design. I know my way around Photoshop as well as anyone. Basically I have the technical aspects down solid. Where I fall short is in being able to design in different genres. I can do designs that are very usable and aesthetically appealing, especially if they have a tech look to them. But if you want hip-hop pop-culture coolness then you probably want to talk to someone who knows what those things are. That said, I’ve gotten many compliments on my design of XanaduWest.com, which is an artistic site.

UX design is something that comes naturally to me. It brings together many skills and hobbies that I have - such as chess - in that you have to analyze different paths and try to come up with the best one. And there’s my background in philosophy that also comes in handy for UX design. In philosophy one must think critically, break ideas down into their elements and then build them back up into a whole. This form of critical thinking is something I’ve done for decades.

Coding is where I’m most comfortable. I wrote my first code back in the early 80s and have loved it ever since. I don’t have a degree in CS but my background in philosophy and mathematics more than makes up for it. And this is the skill-set that I spend the most time improving on.

What I’m looking for:

• A place that is doing some cool work with Flash and needs some amazing Actionscript work. If you frequently find yourself needing the impossible done then I’m very interested in working with you.
• Is looking to expand into Flex and Apollo.
• Would like to find someone who can handle advanced coding along with UX and graphic design work.
• A work environment that balances being conductive to long hours of hard work and playful fun between co-workers.

Things you should know before contacting me with job offers

Current situation: I’m working for the EXG team at Microsoft as a contractor. My first year will be up in February and that means it’s transition time. I’ll probably be signed on as a vendor or something like that. It’s possible that I could get an offer to work directly for MS. Right now I’m just looking to see if there are any better positions out there. That said, I have a pretty damn good one right now.

As I mentioned above, I work for the EXG team at Microsoft. That’s the team that built the XBox/360, Zune and others. That means I’m prototyping some really cool stuff and I get to build RIA for Xbox.com and Zune.net. Getting to work on cool shit goes a long way with me. I’m excited about technology, science, entertainment and such. If you have a job opening for a real estate firm or something like that then you might want to just go to the next resume. I’m not going to be interested.

• Relocation: there are a number of cities in California that I would consider. British Columbia is an option. And my wife and I love to live in London or Northern Europe, Australia, New Zealand, or Asia.
• I’m looking for a pay rate in the 90k range, with benefits, vacation and training.