Stumbling Poncho Productions


Twitter LinkedIn

Anatomy of a Snake


Metal Gear Solid 3 is one of my very favorite video games.  When given the assignment to create an interactive instructional graphic, I figured it might be fun to make it about Mr. Snake from MGS3.  While the plot and events of the game are absurd and completely fictional, the protagonist’s equipment is mostly historically accurate. Initially, it was to be a wall poster, but I decided to use the assignment to learn the MooTools javascript framework.

The figure and it’s highlights are a series of .png images with transparency that are absolutely positioned on top of each other.  The rollover hotspots are created using an image map on top of a completely transparent .png.  The image map was created using Fireworks.

The interaction uses very simple rollover MooTools code.  The code uses the ‘id’ attribute of the hotspots to match the link with the images and content to be displayed.  While the whole thing runs on javaScript, specific states can be bookmarked thanks to the hash information in the URL.

While the actual implementation was not graded, the graphical aspect of the application received an A.

Click here to view