Online Portfolio of Michael Wach

Not even a week before the official launch of demitregarza.com, I met with this local Phoenix visual effects artist, Demitre Garza. Not only was this week his 21st birthday, but he was also graduating with is bachelors at Collins College. Now he needed a place on the web to show off his demo reels. I’m not the only person that knows how to use Photoshop; Demitre began putting together a design. The original plan was to have about four or five different pages: home, reel #1, reel #2, resume, and contact. The design was good, but we didn’t use it.

After almost four days (eight different website designs), we began to worry if the design would take longer than the actual website development. I sat down in front of Photoshop that evening and created another new website design (Design 9). This time, I made two pages. Each page contained an embedded 720p demo reel, and Demitri’s contact information at the bottom. The design was short, sweet, and good enough to pass Demitri’s approval, so I began to slice it up into smaller 256 color GIF images. Next I exported the slices from Photoshop to an XHTML 1.0 table. I opened up the source file in Dreamweaver and recoded it using CSS for all of the background images and styling information. I deleted the Photoshop generated XHTML table and replaced it with W3C standards compliant <div> and <span> tags. This way the site can be easily accessed from nearly any type of web browser.

Once the XHTML and CSS template was prepared, the next project was to create a custom Flash video player using Actionscript. After seeing my recent FLV slow motion demonstration, Demitre was certain he’d like a copy of that function embedded into his site. I put together the video player skin inside of Flash using the vector drawing tools. A few tests and samples were developed using Fireworks, but overall the skin was produced without importing anything into Flash. This method yields more possibilities in the future to resize the video player and match resolutions other than 720p without distorting the controls. Once the player looked finished, I embedded the Flash generated SWF using the free SWFObject javascript. I chose this javascript over the Flash generated javascript file because it utilizes W3C standards compliant code.

One feature I wished to include in the Flash video player, was a download progress bar. On average, the On2 VP6 encoded videos totaled 7 to 10 megabytes. This would be a hefty download for slower internet connections. Figuring that most visitors intentions were to view Demitri’s demo reel, I configured the player to automatically begin playing once about 60% of the file was downloaded. The only problem was once I uploaded this to the server at Micfo, actionscript could not determine the file size. I spent a few hours researching the issue on Google and Micfo’s website but found no solution. Frustrated, I decided to take matters into my own hands. I figured by the time Google revails to me a solution, I could have very well programmed around this issue. Therefore I wrote a simple PHP script that detects the file size of the selected video and feeds it into my actionscript as a Flash variable integer using javascript. Now we were guaranteed a properly displayed download progress bar.

Lastly, we needed to register the new domain, demitregarza.com, and configure the web host. Micfo quickly set everything for Demitre and sent him the login information. From there we mirrored everything on the development site over to his new domain through FTP. Buying a web hosting package typically includes a certain number of email accounts. I also walked him through getting that set up, so now you can email Demitre at mail@demitregarza.com.