Brookfield Zoo Explorer

Here is a nice piece I’ve been working on at DK for the next version of the Brookfield Zoo’s site.

The cool part is the scrolling zoo explorer. Click the “Zoo Explorer” tab at the top left and then play with the scrolling functionality at the bottom left. I had to use a combination of enter frame events, setInterval, and tweening to get the right feel. Notice the elastic bounce when you hit the end of the slider. And notice that the momentum / inertia increases as you hold down the buttons. The animal scroll bar is built dynamically, with paths to each animal’s SWF file, its name, and its link defined in the XML. As each animal loads, the slider is dynamically resized, and animation variables adjusted.

The rotating images under “What’s New” and their respective links are defined in an XML file. Under the “Zoo Explorer” the text and links in the drop down (or up) are defined in another XML file. As the file is parsed, the menu is built dynamically to the correct size.

Technologies Used:

  • Flash / AS2
  • Fuse Kit
  • XML

Update: The new Brookfield Zoo site is up. Here is the live zoo explorer with a Noah’s Arc-boatload of animals. One improvement I could have made would be to have used 9-slice scaling for the roll over background rectangles behind each animal. Oh well.