Online Portfolio of Michael Wach

Charity Pictures is a local Phoenix nonprofit organization “designed to improve the quality of life for civilization”. Charity Pictures also severely needed a website makeover. This is a project I’ve been plotting and doodling ideas for over a year since they were originally going to have me do it. There were tons of ideas for designs. We needed something that looked cool and related to motion pictures.

The original idea was to have an entire desk with interactive props sitting on top of it. Each prop, such as a camera, or a reel of film, would take you to a gallery related to that medium when you clicked on it. The challenge was taking a real photo of a charity pictures desk and cutting out each prop in a way that could later be programmed interactive. If you’ve visited the charitypictures.org website before today, you may have witnessed an attempt at what I am talking about. The site was a bloated, inaccessible, glitchy disaster.

After reviewing the content posted on the site already, I decided to think outside of the box and maybe go with a completely new design. The site was already broken into three categories of videos; charitable sponsors, corporate sponsors, and independent productions. The rest of the site was worthless. I decided since the only thing we have to show visitors is these three categories of videos, we should probably ensure they are easily accessible.

Both web designs used the Flash plugin for video playback. The original design used the generic drag-and-drop video component. The new design used a custom Actionscript document class to precisely control each progressive video download stream. This method also entitled me to full control over the skin of the player. The new player was completely customized, and reusable for every other video uploaded on the site.

The old site was strung together with several static HTML pages. Each page contained it’s very own Flash .swf file that was pre-configured to play one specific video off the server. Each one of those .swf files takes up about a half megabyte. Multiply that by the number of improperly compressed .flv files found scattered throughout server, and you have at least 300 megabytes of wasted storage space and I can only imagine the bandwidth. Luckily they didn’t get very much traffic at the time, or else the site would’ve been frequently disconnected, but obviously no traffic isn’t good either.

There was about 20 videos on the site by the time I got to it. When I finished backing up the original site (the number one step before you even think about messing around with a server), everything added up to about 400 megabytes. My new design for the site consisted of one home page, which included one Flash video player, and weighed in at almost half a meg. This obviously doesn’t include the videos, which were all compressed in random aspect ratios and resolutions. The new design is optimized for videos up to 720p resolution and 400 to 700 kb/second.

I tried my best to keep the design simple and accessible. I didn’t want to overwhelm the visitors with graphics everywhere and all sorts of chaos. I kept the three categories of videos always listed directly underneath the currently playing video. You don’t need to dig into menus anymore to access the videos, which makes it more likely for the visitors to watch more of the videos. Even when I was developing the site, I still didn’t notice all videos that were there until they were all clearly laid out in front of me at, easy to click on, and start watching. This was yet another reminder of how small design details have such a large influence in the overall product success.

As simple as the design could be, there still needed to be at least one jazzy element in there. I had the header area of the page in mind for that. I was thinking something along the lines of a roll of film wrapping around the currently playing video, but I wasn’t quite sure how to achieve this using design software. I automatically looked to Blender 3D for this task at first, only to eventually give up and revert to 2D tools. I recalled the warp and distortion manipulators available through the free transform tool in Photoshop. The wave preset sort f followed where I was going with this idea, but literally not to the edges. I want the film to span horizontally across the top of the currently playing video and naturally curl up at the ends, like real film looks. I don’t think this is possible with any Photoshop tool, but if I’m wrong, please correct me, because I’d love to know about it.

The film texture with the Photoshop wave effect was good enough to carry on with the rest of the site development, until towards the end I began to worry if there was still any hope for making the film look realistic, or at least good. It was just OK, but I wanted it to be eye popping! My Dad sent me an original Ansel Adams film negative to work with and try to create a texture from, but unfortunately it didn’t make it to the final design. When I showed Charity Pictures what I had so far, they just so happened to have an old blank negative to a real motion picture camera. I think the Ansel Adams negative I had was a much higher quality still photo negative, with barely any film grain or noise. I wanted the film’s distortion to be noticeable if possible, so that it looked more realistic.

I toke the negative home that Charity Pictures gave me, and scanned it with my HP Photosmart C4280 all-in-one printer, scanner, and copier. Surprisingly, I found myself working on this project in Adobe Fireworks. You would predict a task involving formatting a scanned image and maybe compositing things onto it would be performed in Photoshop. It very well could, but I had plan for a bit more complicated vectors than Photoshop is really designed to handle. Each of the frames in the scanned negative were completely empty besides any scratches or other noise. I decided to fill these frames in with something everyone should recognize in motion pictures as the old-school 3,2,1 countdown (commonly shown on old projectors).

I did some research on Google images and it didn’t take long to find an example of what these frames really used to look like. After the quick refresher, I opened up the vector tool pallet it Fireworks and continued my mission. I really like how Fireworks keeps the bitmap tools and vector tools neatly separated into two groups, and each group contains tools universal to many other design programs.

The final Fireworks PNG document sized up at over 5,000 pixels wide and only 200 pixels tall (72 dpi). This is probably the oddest image size I’ve ever saved on a computer. The document included frames for each number counting down from 5 to 1 (left to right).

With a finished PNG in hand, there was no need to export to any other file format in Fireworks to import the texture into Blender 3D. This second time around I chose a different approach. The first time I tried subdividing a very long and skinny plane at least a thousand times, and rigged the mesh with an IK chain (thinking this would be easy to manipulate). The result was a worthless distorted texture spanning beyond the design’s boundaries and wildly curving out of control. The second approach to Blender (about 3 days later), I didn’t use a subdivided plane. Instead, I drafted a NURB spline from the top perspective of the negative. Next I extruded the spline into it’s third dimension so that the Fireworks texture rests between the two parallel splines. The results were much more rewarding. A few tweaks with the lighting and shader settings and the film was ready to be exported back into Fireworks as a rendered PNG + alpha channel. The new “approximate” method of ambient occlusion released in Blender version 2.46, really sped up the render times and honestly produced better looking results than the full ray-trace.

The final Blender render was easily integrated into the Fireworks design and later exported to Flash, where it would be stacked and displayed in your web browser using a combination of Actionscript, Javascript, XHTML, CSS, PHP, and MySQL. The PHP and MySQL part are for behind the scenes work. The new site uses a dynamic content management system which only authorized users can access. The CMS is so simple and straight forward that it’s made up of only two PHP files. One file is for the login page, and the other is for the CMS. When your logged in, you can list the videos stored on the server and easily add, edit, or remove each video without ever seeing one single line of code.

It’s kind of cool to know that it only took a little over 30 hours in front of the computer to produce this website. I think it’s something worth showing to people now and it should definitely help out the organization. Check it out at charitypictures.org or on the testing server, charitypictures.mikewach.com