EVAN J WARDEN

MONKEYDOCENT.COM

Screen Shot of the Landing Page

www.monkeydocent.com

This website was developed for a photography client who wishes to remain anonymous – hence the monkey. The idea was to create a virtual museum that would dynamically display images pulled from the client’s PhotoBucket account; it was no small task, and the results were anything but a conventional UI.

MouseOver Arch Overlays

To begin, Matt, my designer on this project, designed the museum world in Cinema4D and then comped the lighting in After Effects. He also animated and implemented the monkey design in After Effects. The camera moves for the museum were rendered out in Cinema and everything was compressed in Adobe Media Encoder (FLV) – email me for specific bitrate breakdowns.

This is where I come in: I took the encoded FLVs and added them as such to my FLA project. Movements in the environment are based around user clicks – notice the arches? On mouse over, the site adds the overlays pictured.

Upon clicking, the camera moves you into the environment. Here was the tricky part – trying to do frame by frame 3D rendering of a wall in Flash was next to impossible. After failing at that initial strategy, we decided to use that method for the back wall only as there was no masking, 3D, or exaggerated movement necessary. For the side walls, we simply “flash” in a dynamically created wall at the end of the camera move. Basically a long wall is put in placed and then moved side to side to mimic the look of the camera movements – works pretty effectively in my opinion.

The Frame Template

The last big hurdle for me was taking a frame graphic and having it resize dynamically to each orientation and size of the thumbnails generated by PhotoBucket. So, applying a CSS trick that I picked up, I cut off the right portion of the frame from the end of the matte area on. Then, after the thumbnail is brought in and resized to optimal dimensions (based on it’s orientation) it is placed in the frame’s left half. Then, applying scaleX/scaleY in Flash, I resize the left, and copy the scale to the right half, or “cap”. I then move the right cap over to create the illusion of a full frame that is scaled to fit the size of the thumbnail.

It’s heavy code but the result is pretty great. Check it out.

JW

This entry was posted on Thursday, July 1st, 2010 at 10:47 pm. It is filed under WEB DEVELOPMENT. You can follow any responses to this entry through the RSS 2.0 feed.