Week 4 - Assets and Animating

I have now started creating or obtaining my assets and animating them together into the finished project.

My main method of creating graphics was to use Adobe Illustrator to live trace graphics made on Photoshop. As the majority of my graphics were typography, it didn't take long to source these, however, being at college we couldn't add fonts to the system. To get the American Purpose font I print screened the Dafont page (where you can preview the words you want. You can then import these into Adobe Illustrator and use the Live Trace tool. This vectorizes the image and makes it appropriate for use in Adobe Flash. They can then be broken down and re-aranged at will.

The other important asset was the 'horizontal sripe moving layer'. This consisted of a very long canvas. Using Adobe Photoshop, I did the time consuming task of drawing a horizontal line, duplicating that line and moving it a small gap to the left, grouping that layer and repeating. This creates a long pattern, which I then imported into Adobe Illustrator to Live Trace. When it is vectorized like this it can be broken down and the automatic white background removed. I animated this banner moving under the logo word shape. I wanted this to look a little smoother but still slower so altered the frame rate down slightly. I then animated a large block running over the shape. Initially this just ran from left to right at a constant speed. To make this look more appealing and more like the video game style loading bar I had envisioned in my storyboard, I used easing to go from fast to slow. This makes the animation ease to halt near the end of the tween. It looks more natural and dynamic. After all the animation is done, you then put the mask layer on as once it is masked, the layers beneath are locked.

I mainly used simplistic wipe masks for the remainder of the animation. This kept it clean and simple. I didn't want to over complicate the animation with any trasformations of transitions as firstly they often don't translate to web and also the wipe style was inkeeping with the simple bold font. Using mask wipes made it quick, fluid and simple, which is something you need for dynamic web graphics.