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


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.


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

Im free!! I Dont Matter Website

I don’t Matter Website

 Screen Shot 2014-05-22 at 11.28.08 AM

This project originally started out as a duo project with Larissa and I. Originally it was suppose to be a platform for creative and inspirational people, who can influence and inspire others to be different and create. Our project was called “Spark a Revolution”, then it change to “ I Don’t Matter” which was based off a web series for the project Spark a revolution. Spark a revolution ( which is now larissa portfolio) started as the main focus of our project, there was suppose to be a variety of things such as different types of videos. We started out using social media, which is still one of our sources, but we used it as our beginning platform to get the word out about Spark a Revolution.


Some of the videos were to consist of spiritual inspiration, music videos, displaying other creative people work and blogs. However, the out come was not that great because of mix communication and agreements between Larissa and I.


The conflict of agreement and arrangement came in during the middle of building this project. So we decided to switch up things a bit. Larissa and I decided to clarify our new roles and responsibilities as a team and switch up things. She renamed the project I don’t matter, the project became a web series of  “ I don’t matter” I became the web developer. This way we work together but not together.


So, Larissa series I don’t matter begin to launch as well as her blogs are featured on the website. Our content was based of off blogs and videos that’s what made up the whole website. We added an about us page, blog page and contact us page.


The process of this at first I must admit was crazy, after a little mixed communication of our roles in the beginning. I wanted to quit. However, I know my future was riding on this and Larissa.

Recreate process


Step 1: When we first started we were using square space, which is now Larissa Personal portfolio site. After much research compare and contrast of hosting site. We decide that Square Space will not work. Due to the fact that u have no real access to the back end, and if the choose today or tomorrow to stop there hosting, we would pretty much me screwed.  Another reason you cannot transfer your domain name to another hosting, nor can you switch your web hosting. Although it was easier for Larissa to maintain for the future, it was not the right choice.


Step 2:  As a web developer I did research on what would be the best for Larissa to maintain her site. I came across Adobe muse, which is similar to Square Space. I have the capabilities of Larissa for ease edits and building, however, I have full control of the back end and choice of my hosting. I don’t have to worry about loosing my website. This software is life changing for me and help me to create a creative, clean sleek website.


Adobe muse is a creative designer platform easy to us (with the knowledge of designing) to create. With the software there are endless capabilities to design and create. It’s a decoded site no coding, yes no coding unless you absolutely want to you have a choice. Adobe muse does have the capability where you can change the site to HTML etc. just to give a description


Here are the steps how Larissa can update her website


Step 1: I create a user name and password for Larissa such as (square space) this is to allow her access to log into the dashboard.

Screen Shot 2014-05-22 at 10.37.05 AM


Step 2: She can then click on the editable things she would like to change such as pictures, text and add videos

Screen Shot 2014-05-22 at 10.37.19 AM

Step 3: then she can publish her site

Screen Shot 2014-05-22 at 10.37.33 AM 

This is easer for her and even easier for me. So, I know she can maintain and update her site on her own in 123.



Final step: concluding the site and giving Larissa the logo in information to allow her to make the nessacary changes as needed.



As fore stated when we first started it was a duo project, however, it switched drastically. Larissa basically became my client at the end. I didn’t expect that I thought we were building a project together; we had different visions of what we wanted once we started working together. It enlighten me that group project are great but you must know how to communicate, and as a group I don’t think the communication and understand was there.


In the beginning process we were on one accord, but things begin to deviate slowly. But we got it together and came into an agreement and it worked out for the best at the end. Larissa launches a new web series that build a community and a lot of inspiration for many individuals. It’s gained a lot of recognition and impacted many. Thousands of views might I ad. On my end I create the website, basically transferring the information from the other site square space to Adobe muse.


Knowing what I know now, I would of solely just made the website. However, it taught me a lesson in reference to the importance of communication is key and is extremely important. The failure to understand your partner can destroy a relationship instantly. However, Larissa and I came to an awesome agreement. I got a chance to do what I love and do best.


I made an animation called THE TIGER’S tale, (part 2 The Family). For this animation I am responsible for everything except the sound production. A list of all the things that I did are.

  • Concept
  • Story line
  • Drawing
  • Animation
  • Writer
  • Direct the (sound engineer)

The animation is 3 minutes and 2 seconds long. The characters include—>        Forester (part tiger / part boy), male tiger (father), female tiger (mother) young tiger (baby).


http://www.youtube.com/channel/UC9UfZpcAaAWbcCsbWHYP4PA https://www.facebook.com/collinandgraphics


THE TIGER’S tale, (part 2 The Family) Only:



In addition to that, I created a promotional poster that indicates that (THE TIGER’S tale, part 2 The family) was coming soon.


The first thing that I did to make this animation possible was to be creative. This involves me thinking about the concept and tried not to mimic an existing idea (at least not to mimic too much) were the viewers can’t differentiate it from an existing work.

Tools Used:

Adobe Illustrator (For Drawing)

Adobe After Effect (For Animation)

Adobe Photoshop (Crop, Format to PNG, Resize – Poster)


The process of creating this animation involves:

A lot of messing ups and redoing the things that I finished, because of changing the name of a file and also making mistake like forgetting to save a file at times when i should have. lost a background on 05/21/14, because I made changes that replaced the content I wanted to keep and I had to draw it again.


Something that I have learnt which is very beneficial after I did Part 2 and is used in Part 3 is, knowing when to use a composition instead of a folder from an illustrator file because my work space will be a lot less crowded if I implement this technique.

My work space for THE TIGER’S tale, part 2 The Family consisted of almost 400 files ( very hard to manage) even scrolling back and forth, top to bottom was a hassle.

Additionally using quick time files, (for finish animations that I previewed so that I can see the results in real time) is great, because those files have been compress and will make rendering of addition work done much faster.

_ _ _ ____________________ _ ____________________ _ _ _

THE TIGER’S tale, (part 3 Meets The Ocean)

                            — Work Is Still In Progress —

  • Some drawings are done (Characters and Environments)
  • Some animations are done (Beginning)
  • Temporary music was selected

_ _ _ ____________________ _ ____________________ _ _ _

THE TIGER’S tale, (part 3 Meets The Ocean)


Final Project Update 4/11

My project is coming along. I have shot about half of what I need, most of it being b-roll. The real shoot begins next weekend where I organized an actual party just to be able to get some footage. The party has no purpose apart from that. A projector will also be present but I wont be able to access it until friday, so on that day I have set aside time to get that footage as well. My music pieces have been altered and a skeleton on premiere has already been made. I just have to fill in the missing gaps of footage and do some post editing. If all goes as planned I will be done with my shoot by next weekend and have the rest of the month as well as may to edit. I still have to update my outline which is currently 100% wrong. Irresponsible on my part, but once I get a grasp of my timing I will update it. Things are just kind of falling into place slowly. Time frees itself and I take advantage that instant. Working alone allows my schedule to flex completely.

Apart from the actual project, I have been building this tumblr in which I post content that fits the theme of the video itself. Everyday I go on and reblog or post a picture that will be the inspiration for my next film shoot. I actually use it as a tool to keep me in line with the rest of my stuff. Take a look and follow my page!


Animation Update

So I haven’t posted an update in a while, this is because I have been spending the time to finish up most of the animation. I am happy to say that I am almost done with the drawing. Once I am done with this, the next phase will be adding the environments. I still haven’t gotten my voice actors to perform the words of the poem yet. I am starting to realize that I may have to end up doing it. Other than that everything seems to be flowing smoothly. I have also placed some of the drawing in Adobe After Effects so I am able to place the story in the order I wish for it to happen.

Final Project Update

Well the one thing I didnt take into consideration whilst planning my project was the weather. Most of my scenes are to be shot outdoors in the city. Now that the weather is clearing up and sunny days are among us, I can get more work done. In the meantime I had been creating the music to go along with my film. I have created over 10 pieces for this, but ultimately boiled it down to three which are presented in the link below. More layers will be added once the films are being shot to coincide with whats on screen. As for my party scene, a friend of mine is supposed to be getting the perfect place for me to film. All that is left is the final paperwork and I can begin. I already purchased a black light and borrowed a pocket projector for this.

As for these three drafts, they are numbered Track 1, 2 and 3 respectively. This represents the order in which they will be in the film. They also all use a similar flanger effect except for one. This is to ease the transition in between them when the scenes change. Im overall left behind as far as my schedule goes. Again, a combination of weather and me spreading myself thin is at fault here. But no excuses, I am determined to have everything shot by the second week of April the latest, leaving me a couple of weeks to edit.





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.

Easy As Pie Not!!!

Milestone Update:

I have started going threw my footage and piecing together my story and like Mike (so cliché’) said I am seeing that there are other angles that I can present a particular scene. I have decided to start off with a flashback narration to the beginning segment of my piece. In changing  to this I realize that I may need a little more footage in this new approach so I  am in the process of collecting some flashback footage of my self and my subject as well as trying to capture our natural relationship on film. I realized that things don’t always go according to plan, and I have hit a technical difficulty that I am kind of stuck on : one I lost/misplaced one of my sd cards  and second the audio from one of the sessions is a little scratchy and has a lot of static I am open to suggestions as in how to remove it I have tried audacity and I am not a fan of how it came out so if anyone has any suggestions please share.

I must say that through all these hardships I am learning a lot about myself and my taste as well. I am still drawing little things from my original inspirations and so far I like the way things are beginning to piece together.




So How Does My Plan Look?

cc licensed ( BY NC ND ) flickr photo shared by Mark Bridge

You are going to work in groups of 2-4 students with a combination of CT 399 and CT 401 students. The CT 399 students will present the idea for the final project to the group. They will assess what is still needed by using the proposal skeleton as well as advice for how to draft a final project.

Notes of a summary of what is needed for the proposal should be taken in the comment section of the post for proposed idea.

At the next meeting you will draft your final project proposal incorporating the suggestions from your group and any additional ideas.

Jazzy Lifestyle Update

I set up a shoot with Lummie Spann Jr. and it was suppose to be last week thursday at a club he was going to be performing at but the owner of the club did not respond back to either me or Lummie Spann Jr. so we have to push the shoot back by another week, in order to shoot his performance.  I have his bio and the way i plan to shoot the film in order which will b starting from his childhood to what he wants to end up doing in the future, with jazz music.