Week 3 - Designing the Animation

I have begun designing and planning the final product of the project. I have decided to stick with the idea of kinetic typography, but alter it slightly. The effect and method of kinetic typography is not very complicated, and doesn't really use any advanced techniques. To make the animation more interesting I will be using mutliple maks to create a varied and kinetic effect.

I have planned both simple and more advanced animations into the animation. For instance some words will use the conventional animation, quickly expaning from very small to big in a puncy style. Others will use more advanced techniques envolving masks. For instance, shape will be defined as masks and then other shapes will pass under the mask. This will allow things to be presented differently and more creatively. I have developed a story board that plans the animation action by action.

Using the style of the website, including taking backgrounds from that site, the existing logo and by using the American Purpose font, as well as the exisitng yellow (#ffcc00), grey, white colour scheme, i will keep the animation in the theme of my site. This also means i can cut down on the amount of original assets I need to create, but more importantly it will make my website seamless and professional.

I have decided the animation will be a welcome page. The animation and the web page will share the same background to fit seamlessly with each other, and in theory by clicking on the web animation, it will take you through to my site. 

Week 2 - Developing Ideas + Inspiration

I have started to formulate ideas and designs based on my current designs for my website. This will involve using similar imagery and style as well as bringing over elements such as logos and specific fonts.

To start this I have gathered a range of visual inspirations and started making a moodboard. As I myself am the focus of the website, the visual style must be influenced by and show off my visual inspirations. I started an A3 moodboard, which although currently unfinished, shows some the of influential graphics and imagery. the moodboard currently features  comic book and sci fi influences and will also feature music and sporting design styles.



Unfinished Moodboard

 These influences apply also to my web designs. The thing that influenced me most was using bold colours, thick typography and using stipes/lines for definition. This took influence from American sports designs similarly to my Designs for print.

This is the kind of inspiration that led me to my logo and text design. Using the previously mentioned AMERICAN PURPOSE font, the exisiting brand name Voltage Workshop and a sports style logo I made my logo.

Given the brand name and the bold design, I wan't an animation that is also striking. With this in mind I have started looking at Kinetic Typography. This is a type of motion graphic that is growing in popularity and starting to become part of our viusal vocabulary. Popular examples include the Comedy Central idents. the basi concept involves fast moving text appearing , often forming larger images or structres and  often in sync with a spoken word section.

I think I will use this, or atleast include aspects of this form of presentation as I think it best represents my brand and some of the ideas of the site such as high speed of use and the rolling of one ask into another. These concpets can be bought into a animation, using kinetic typography, as individual events can roll into one another and be fast and impactful.

Week 1 - Web Animation

For the first time we are going to be doing two projects in parallel, with two separate practical outputs later being formed into the same product. We are now focusing on two web projects, Web Authoring (making a full website portfolio for ourselves) in another lesson, whereas our mtoion graphics time will be used to create a web animation for that website.

i don't yet know what form my animation will take, as we have to design 3 and create one (similarly to the Ident project). To get me started though i have looked at some of the creative development and the visual style of my website (which is further into production). I plan to make the web animation very much in the style of my existing web work, so the visual inspirations and developments will be similar.

More than images, I want to focous on typography and interesting presentation of typefaces and solid imagery (as opposed to overly detailed graphics). With this in mind I made up an initial moodboard for my website which featured some of my intiial ideas and a range of typefaces I could possibly use.

I got a range of typefaces from this, such as the big bold American Purpose  and the more professional Typogrifico.

Week 8 - Animation and Exporting

After finishing my editing of the filmed aspects of the advert, I set to quickly animating a short Flash Sequence. I used new techniques which I had only touched on in previous tutorials, namely masking.

I was looking to create an effect whereby as the glass on the right hand side of the frame in the film was filled with liquid, in the empty space to the left, the Pulp logo would fill with colour from the bottom to top in a wavy motion, as if being filled by drink. To do this I had a vectorized version of my Pulp TV logo, which I imported into the library as a graphic. I then placed this on the film and used Brake Apart to split the individual elemtns apart, allowing me to delete the white background layer. Then by creating a new graphic and using a Paint Brush (with 100% smoothing to create a vectorized look) I made to rectangles of colour with a wavy top. These shapes were the height of my logo. I made the Pulp Tv logo a masking layer, which means that it does not appear in the animation and you can pass shapes under it to distort the images. I set the shapes in opposite bottom corners of the logo, before using the motion tween to move them to their opposite tiop coreners. This way the two shapes cross over each other and create a realistic flowing movement, more closely mimicking liquid.

Flash Shape Movement

To start the animation I had imported the shots that would be animated into the Flash project. This way I could sync up the Flash and Film and (in theory) reimport it back with ease (this was not the case, read further below for more details) I ran both the Flash sequence at 25 fps (my highest use yet) to create extra clarity and flow of movement, which is definetly necessary when animating something that moves as freely as water.

Lastly I used another masking layer, this time in the shape of a square. This covered the "drip" below the first P of the logo. In sync with the cream being sprayed onto the drink in the film, the mask moved down to create the dripping effect.

With the Flash complete i attempted to export as an avi and reimport to Premier. Unfortunatley this did not work at all. Despite me setting custom canvases for Flash to fit Premiere, the reimported file would either come back into Premier either too thin and squashed or with big black bars either side. No m,atter what I tired it wouldn not correct the aspect ratio to a widescreen format. This was when we discovered that the problem probably lied somewhere in the fact I was in a standard definiton project using high definition rushes. This caused them to compress and ultimately meant they couldn't understand that they could be widescreen. This was very frustrating. I had checked many an internet forum looking for a solution but could not find a certified answer.

I decided to work on it out of class and as college PCs were unavaible I had to attack it at home. This meant converting to CS4 ( i made mutliple backup copies in CS3 so i could work at college if needed, as there is no backwards compatibility). I planned to avoid exporting any rusyhes and instead would only animate the area that would be animated inside flash. That way my canvas would have no correlation to aspect ratio, instead to the shapes requirements. I set the bacground as a solid black. This was twofold as firstly black was pretty damn close too the ultra dark blue on the american flag in my rushes so would be difficult to notice and because if the balck bars appeared no one would be able to see them. This worked and I carried out exactly the same animation process described above.

This worked well, and simply had to be placed over the area, and then the gaps were filled in using black PSDs. With a little bit of splitting I managed to fit it perfectly to the video track. To save time on the final shot which was suposed to have a masked wipe, I instead used key frames and the crop effect in Premiere to create a logo that wipes in as if from nowhere.This was black as well although I would have prefered it a dark blue. My project was now finished but again, exporting was an infinite issue. I had it set to PAL Widescreen settings and codecs, and checked everything, including the ouput and source over and over. Unfortunately though, no matter what I did the file refused to be fully export as an AVI as intened. After mutliple tries and small tweaks including output files, nothing would work. My only option was to export as H.264. For some reason this worked meaning my file is now a .mov.