Let Me Out! I Wanna Be Free!| A Final Post

Work Completed

For my final project as a Communications Technology major, I created a kinetic type project of my favorite speech from Charlie Chaplin’s The Great Dictator. I completed this project solely using HTML and CSS for the kinetic type part. To get the music, I chose a creative commons song, ripped Chaplin’s speech from YouTube and edited both in Adobe Audition to be two minutes and fifty-eight seconds in length. I used two fonts from Google fonts called Oswald and Monserrat. I also stuck with a black and white color scheme because visually, there is a lot going on in the looping video in the background. In addition to Chaplin reciting the speech, I decided to also add the music in the background to evoke emotion. I felt it would give the project a serious but longing tone. A longing for peace, the ultimate reason for the speech in the first place in my opinion.

Check out Charlie Chaplin’s speech

Process

The Original Plan:

Before I signed up for final project, I was certain that the project I had in mind would come to pass. My original idea was to create an interactive web site that visually represented Charlie Chaplin’s famous speech in The Great Dictator, using HTML, CSS, and some jQuery. This is by far my favorite speech and I had never seen it depicted in such a way before. I quickly learned that there was simply not enough time to create this idea by May 23rd. This idea had too much depth and it would take probably months of research, trial and error, and testing. These tasks would take longer than one semester to complete. I most definitely was too overly ambitious to the point where I had to water down my original plan.

Example of original goal

The New & Final Approach:

The general concept is still apparent in my project, however, the pictures and the parallax effect I had originally planned to use are missing. I decided to add a creative commons video of stars and stick with a simple black and white color palette, with some splashes of gold here and there. As stated earlier, the only tools I used was HTML, CSS, and a hosted sub domain. For the most part, things worked accordingly. There were many times of frustration on getting the timing right, however. This project may look simple but it is definitely not. Tinkering with the code to get it to look and animate the way one wants is pretty tricky. In the end though, it worked out with tons of trial and error.

Reflection

In all, the original plan had changed a bit but I am still confident the project was a success. I had never done anything like this before. As a result of that, I learned a lot along the way. Specifically, using @keyframes in CSS3. Most would say, it would have been easier to do this project in After Effects but I have a fascination with animating using CSS3 and I feel like this project has brought about a greater understanding of it as a whole. No, I probably would never do a kinetic typography project using CSS3 again because it is extremely tedious but I can in the future maybe animate a simple drawing, small quote, or something of that nature that won’t take a lot of time to complete because I did this project. From this project I learned it is important to know more than 90% of what you are trying to do. It is always great to learn as you do it, but remember time is of the essence and it will run out on you quickly.
So, with that being said, I am excited to take what I learned from this and what I learned as a CT major as a whole and apply it to my life as an adult in the real world.

NOTE: This project is best viewed in Google Chrome.

My Final Project

Update: Minor Adjustments

My final project is coming along well. I decided to cut a lot of things out due to the fact I may not have adequate time to pull off the original idea successfully. So, instead of incorporating pictures into my interactive site, I’m simply going to use on typography. So the main idea still stands, however, this project will be focused around kinetic type. I remember Dan instructing this kind of animation to the CT 345 a while back and they were told to use After Effects. My concept will be done solely in HTML/CSS and some jQuery, as originally planned.

The Great Dictator Interactive Site

For my final project idea, I decided to make an interactive website that is a visual representation of Charlie Chaplin’s final speech in the Great Dictator. Interactive websites are going to be pretty big this year in the web design world and I admire them a lot. So I thought it would be a fun challenge to make the message in the Great Dictator come to life through this site.

I already started writing some code for the animation. I’m strictly going to try to use HTML and CSS3 animations.

Screenshot 2014-02-11 21.54.03Screenshot 2014-02-11 21.54.04Screenshot 2014-02-11 21.54.06

 

Below are a list of interactive sites that inspired this idea:

http://ihatetomatoes.net/merry-christmallax/

http://www.createyourelf.com/

http://volumes.madebyfieldwork.com/making/