Ballroom Dance Channel: Video Widget
May 13th, 2008
Moving on with life from the disaster of Spring 2008, I landed what I think to be the coolest job yet. The deal is, work from home, and design mind blowing web stuff. I believe the company, “Ballroom Dance Channel”, is a primarily California based company that obviously deals with dancing but also sells their own how-to dance videos. The guy that hired me is actually also a student at UAT, so the interview was on campus. The guy called me at like 7 in the evening and scheduled an interview with me for that same night, about an hour later. At about 9 o’clock, I walked out of my school with what I think to be the best job I’ve had yet.
The first project was to carry on where the previous designer left off. That is, the online Flash video player skin. The previous designer apparently used the default video player skin that comes with Flash CS3, and simply added a banner going along the top and bottom of the frame. Also, the previous designer added what appears to be some sort of sculpture of a couple dancing. I think he cut out the hole for the female dancer’s armpit, and then tried to position the play button on the default flash skin inside of that hole. It didn’t work so well, and the company wasn’t the most happy with these results.
Check out the photo gallery for this project and you can see the original design along with each of the designs I came up with. Below is the fully functional final version of the video player. The way I made this is simple. I designed all of the graphics from scratch in Photoshop using the basic shape tools and configuring the blending options for each one. The flowers came from a dings font with a lowered alpha. The progress bar is two circles layered on top of each other. The play button is simply a rotated 3 sided polygon. Once the design was finalized in Photoshop, I merged all of the static background artwork together into one layer. The “Wedding Dance” copy had to be a separate layer so that it could be positioned above the video in Flash. The play / pause, stop, and progress bar ring were also left on separate layers so they could be configured as buttons in Flash. There are currently no rollover effects for any of these buttons. The only rollover in this Flash application is actually for a hidden button- the company logo. I just merged the logo into the rest of the background art before exporting. To activate the pop-up link the company requested, I simply drew a rectangle around the logo in Flash and converted it to a button symbol. I moved the rectangle artwork to the hit state, and used action script to trigger the pop-up on and off, similar to the drop down menus I created on the Somos Hermanos 2008 slide show banner. All of the video playback controls were associated to the flv component included with Flash. Perhaps the next video player I create will be written entirely from scratch instead of using any components.