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.
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.
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.
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.