I really like how they add lots of dynamic movement to make a very simple style visually grabbing. This is the closest example of the animation style I intend to use.
Monday, 7 October 2013
Investigating Animation Styles
I want to keep a very simple visual style with very dynamic movements and effects using skewing, transformation, motion blur and selective focus. One piece I found very inspiring was the 'Blue Dot' advert made for American Express by Ogilvy and Mather:
Rube Goldberg Machines
As part of the idea I have at the moment I want to make and animate a Rube Goldberg machine to symbolise things (furniture?) being passed on without anything being wasted. To get some more inspiration for it I took to youtube to find some examples of Rube Goldeberg machines. The first one I found was built for the band OK GO's music video for This Too Shall Pass:
I found this video very helpful in developing my idea as it validates my choice to keep the building blocks of the machine part of a consistent theme. The way they only use car parts keeps it very obvious what is being advertised as well making things visually more interesting as components are used for things they aren't normally used for.
I really like this example because of its huge scale and variety of objects used, but for mine I'll have to narrow it down a lot more in terms of what I use to make sure my theme stays consistent. There are also 2 cuts I noticed that must have been done because the machine didn't work as correctly as they'd hoped. Animating one instead of building one for real will be much easier for me as all the parameters will be fully under my control, something that I need to mindful of due to time constraints.
Another good example of a Rube Goldberg machine that I found was made for a Honda advertising campaign called The Cog:
I found this video very helpful in developing my idea as it validates my choice to keep the building blocks of the machine part of a consistent theme. The way they only use car parts keeps it very obvious what is being advertised as well making things visually more interesting as components are used for things they aren't normally used for.
Sketchnotes
To further my idea development I watched the film by Al Gore called The Inconvenient Truth, which covers most of the topics discussed in the brief. In order to organise the information I gained from it I used a technique shown to me called Sketchnoting. This is process of not only writing down useful information but using mostly drawings to interpret what you are trying to remember. I didn't find it very helpful for remembering what was being said in the film, but it making the process of note-taking much more fun for me. Below are some examples of Sketchnoting I found on the internet:
In future I probably wont use this technique very much but I'll save it for times when note taking becomes a struggle as its a very engaging process to use.
Principles of Animation
As part of our initial research we were asked to investigate the 12 principles of animation. I found this a very helpful exercise as it helped me clarify what I was trying explain when forming my ideas. The 12 principles are as follows:
Squash and Stretch:
This action gives the illusion of weight and volume to a character as it moves. Also squash and stretch is useful in animating dialogue and doing facial expressions.
Anticipation:
This movement prepares the audience for a major action the character is about to perform, such as, starting to run, jump or change expression. A dancer does not just leap off the floor. A backwards motion occurs before the forward action is executed. The backward motion is the anticipation.
Staging:
A pose or action should clearly communicate to the audience the attitude, mood, reaction or idea of the character as it relates to the story and continuity of the story line. The effective use of long, medium, or close up shots, as well as camera angles also helps in telling the story.
Straight Ahead and Pose to Pose:
Straight ahead animation starts at the first drawing and works drawing to drawing to the end of a scene. You can lose size, volume, and proportions with this method, but it does have spontaneity and freshness. Fast, wild action scenes are done this way. Pose to Pose is more planned out and charted with key drawings done at intervals throughout the scene. Size, volumes, and proportions are controlled better this way, as is the action.
Follow Through and Overlapping:
When the main body of the character stops all other parts continue to catch up to the main mass of the character, such as arms, long hair, clothing, coat tails or a dress, floppy ears or a long tail (these follow the path of action). Nothing stops all at once. This is follow through. Overlapping action is when the character changes direction while his clothes or hair continues forward. The character is going in a new direction, to be followed, a number of frames later, by his clothes in the new direction. "DRAG," in animation, for example, would be when Goofy starts to run, but his head, ears, upper body, and clothes do not keep up with his legs. In features, this type of action is done more subtly.
Slow-Out and Slow-in:
As action starts, we have more drawings near the starting pose, one or two in the middle, and more drawings near the next pose. Fewer drawings make the action faster and more drawings make the action slower.
Arcs:
All actions, with few exceptions (such as the animation of a mechanical device), follow an arc or slightly circular path. This is especially true of the human figure and the action of animals. Arcs give animation a more natural action and better flow. Think of natural movements in the terms of a pendulum swinging. All arm movement, head turns and even eye movements are executed on an arcs.
Secondary Action:
This action adds to and enriches the main action and adds more dimension to the character animation, supplementing and/or re-enforcing the main action. Example: A character is angrily walking toward another character. The walk is forceful, aggressive, and forward leaning. The leg action is just short of a stomping walk. The secondary action is a few strong gestures of the arms working with the walk.
Timing:
he basics are: more drawings between poses slow and smooth the action. Fewer drawings make the action faster and crisper. A variety of slow and fast timing within a scene adds texture and interest to the movement.
Exaggeration:
Exaggeration is not extreme distortion of a drawing or extremely broad, violent action all the time. Its like a caricature of facial features, expressions, poses, attitudes and actions. Action traced from live action film can be accurate, but stiff and mechanical. In feature animation, a character must move more broadly to look natural.
Solid Drawing:
The basic principles of drawing form, weight, volume solidity and the illusion of three dimension apply to animation as it does to academic drawing. The way you draw cartoons, you draw in the classical sense, using pencil sketches and drawings for reproduction of life.
Appeal:
A live performer has charisma. An animated character has appeal. Appealing animation does not mean just being cute and cuddly. All characters have to have appeal whether they are heroic, villainous, comic or cute. Appeal, as you will use it, includes an easy to read design, clear drawing, and personality development that will capture and involve the audience's interest.
Squash and Stretch:
This action gives the illusion of weight and volume to a character as it moves. Also squash and stretch is useful in animating dialogue and doing facial expressions.
Anticipation:
This movement prepares the audience for a major action the character is about to perform, such as, starting to run, jump or change expression. A dancer does not just leap off the floor. A backwards motion occurs before the forward action is executed. The backward motion is the anticipation.
Staging:
A pose or action should clearly communicate to the audience the attitude, mood, reaction or idea of the character as it relates to the story and continuity of the story line. The effective use of long, medium, or close up shots, as well as camera angles also helps in telling the story.
Straight Ahead and Pose to Pose:
Straight ahead animation starts at the first drawing and works drawing to drawing to the end of a scene. You can lose size, volume, and proportions with this method, but it does have spontaneity and freshness. Fast, wild action scenes are done this way. Pose to Pose is more planned out and charted with key drawings done at intervals throughout the scene. Size, volumes, and proportions are controlled better this way, as is the action.
Follow Through and Overlapping:
When the main body of the character stops all other parts continue to catch up to the main mass of the character, such as arms, long hair, clothing, coat tails or a dress, floppy ears or a long tail (these follow the path of action). Nothing stops all at once. This is follow through. Overlapping action is when the character changes direction while his clothes or hair continues forward. The character is going in a new direction, to be followed, a number of frames later, by his clothes in the new direction. "DRAG," in animation, for example, would be when Goofy starts to run, but his head, ears, upper body, and clothes do not keep up with his legs. In features, this type of action is done more subtly.
Slow-Out and Slow-in:
As action starts, we have more drawings near the starting pose, one or two in the middle, and more drawings near the next pose. Fewer drawings make the action faster and more drawings make the action slower.
Arcs:
All actions, with few exceptions (such as the animation of a mechanical device), follow an arc or slightly circular path. This is especially true of the human figure and the action of animals. Arcs give animation a more natural action and better flow. Think of natural movements in the terms of a pendulum swinging. All arm movement, head turns and even eye movements are executed on an arcs.
Secondary Action:
This action adds to and enriches the main action and adds more dimension to the character animation, supplementing and/or re-enforcing the main action. Example: A character is angrily walking toward another character. The walk is forceful, aggressive, and forward leaning. The leg action is just short of a stomping walk. The secondary action is a few strong gestures of the arms working with the walk.
Timing:
he basics are: more drawings between poses slow and smooth the action. Fewer drawings make the action faster and crisper. A variety of slow and fast timing within a scene adds texture and interest to the movement.
Exaggeration:
Exaggeration is not extreme distortion of a drawing or extremely broad, violent action all the time. Its like a caricature of facial features, expressions, poses, attitudes and actions. Action traced from live action film can be accurate, but stiff and mechanical. In feature animation, a character must move more broadly to look natural.
Solid Drawing:
The basic principles of drawing form, weight, volume solidity and the illusion of three dimension apply to animation as it does to academic drawing. The way you draw cartoons, you draw in the classical sense, using pencil sketches and drawings for reproduction of life.
Appeal:
A live performer has charisma. An animated character has appeal. Appealing animation does not mean just being cute and cuddly. All characters have to have appeal whether they are heroic, villainous, comic or cute. Appeal, as you will use it, includes an easy to read design, clear drawing, and personality development that will capture and involve the audience's interest.
Monday, 30 September 2013
AF201: Animation
You have been
commissioned to produce a short (20 – 30 seconds) animation which promotes a
message of engagement in activities which will limit CO2 emissions as part of a
public information campaign.
The themes you need to consider are as follows:
· The
General Message: This
needs to express the seriousness of the message that time is running out, but
be optimistic that we still have an opportunity to shape our future. The message about the consequences of no
action on global warming can be scary but your film should be designed to
motivate to action.
· Food:
The food chain contributes significantly to climate change and food is
essential for life. Actions you can take
to make the food supply more sustainable include growing your own veg, buying
local and eating seasonally.
· Transport: Flying gives you a huge carbon footprint, so
your film can encourage holidaying closer to home. There’s really no excuse for driving a car
round towns like Eastbourne or Brighton where catching the bus is cheap and
easy, cycling is good for your fitness and walking slows life down to a liveable
pace and creates a sense of community.
· Consumption/Lifestyle: We live in a throw away culture in which we
buy new stuff and bin our old stuff without a thought. Your aim is to get viewers of your film to
question this acquisitiveness, to ask questions like ‘do I really need to
upgrade that phone’? You also want to
promote a message of ‘reduce and recycle’, to promote mending, sharing,
swapping and buying second hand. Look at
services like Freecycle and Furniture Now for inspiration.
The tone of your animation should be positive and
encouraging, and avoid a hectoring, lecturing or accusing tone. Your animation must have a sound-track, which
can feature any combination of a voice-over script, music and sound
effects.
As the first brief of the year I'm quite excited to get back and animation is something I've wanted to do for quite a while now. The subject for the animation is something that I feel quite strongly about to I feel like I can really apply myself the any of the more specific aspects of it. The thing I'm looking forward to most is learning new software and learning a new workflow.
Friday, 24 May 2013
Reflection on AF103/106
Overall I've found this combined unit to be a very challenging one. The task of managing 2 projects in parallel was something I found particularly difficult as one project was always being neglected in favour of the other one. The requirement to produce a production schedule was something that did help me quite a bit as it helped me place what I was doing on any day/week into the context of the whole project very effectively.
One aspect I did really enjoy about having two projects at once was the fact that if I got particularly fed up or stuck with either project I could take a break from it while still being productive and working on the other one. I also really enjoyed taking basically the same content and laying it out in two very different contexts and using two very different skill sets. Learning html and css in a structured way instead of the very poor self taught stuff I'd done before was also refreshing.
The fact that the whole class was working on separate subjects as part of the same series and getting to choose our topics was quite exciting and helped me get enthusiastic about the project from a very early stage. I think both my projects have turned out how I had hoped and that they retain a consistent design style across both, while adding just enough variety to keep them interesting.
One aspect I did really enjoy about having two projects at once was the fact that if I got particularly fed up or stuck with either project I could take a break from it while still being productive and working on the other one. I also really enjoyed taking basically the same content and laying it out in two very different contexts and using two very different skill sets. Learning html and css in a structured way instead of the very poor self taught stuff I'd done before was also refreshing.
The fact that the whole class was working on separate subjects as part of the same series and getting to choose our topics was quite exciting and helped me get enthusiastic about the project from a very early stage. I think both my projects have turned out how I had hoped and that they retain a consistent design style across both, while adding just enough variety to keep them interesting.
Reflection on my Schedule
At the beginning of the project I drew up a production schedule to help me manage the project, as it was twice the amount of other projects:
At the beginning I stuck pretty well to my schedule but as the project progressed everything became far more compressed towards the end. The main reason for this was most likely my iBook being far more work than I thought, so it became slightly neglected and ended up running a little over the self-imposed deadline. My 2 weeks of finalising my website were also too much and in future web projects I will only leave one week for finalising, depending on the size of the project.
Using jQuery for my Sticky Nav
As I thankfully had the time to, I decided to try and implement a 'sticky' navigation bar using jQuery. The way it works is reading the scroll position on the page and when it reaches the point where the navigation is at the top of the page, it changes the position of the navigation element to 'fixed'. It is also assigned a z-index which allows the content to slide underneath it. To prevent the content from jumping up to the top of the page when this happens padding equal to the height of the elements that become fixed added to the top of the content wrapper.
The added z-index is also helpful in keeping the drop-down part of the responsive navigation above the main content of the page.
The added z-index is also helpful in keeping the drop-down part of the responsive navigation above the main content of the page.
Making My Menu Responsive
When the screen reaches a width of 1006px, the triangle elements disappear using the display:none; function and the menu bar wraps in from the sides. The reason I did this was that the ribbon elements of the nav bar were fixed in place using absolute positioning, making it virtually impossible to scale and move them in a smooth and responsive way.
The next major break point for my navigation came at 720px (iPad portrait.) This collapsed the menu down into a drop-down format. The menu icon indicating a drop-down menu also became visible.
In order to have the contents of the menu slide down over the rest of the page, the nav element was assigned a z-index of 9999 (just to be sure!)
Live Storm Tracker
To make my website much more interactive, I decided to embed a live tracker for storms in Tornado Alley. After some searching I found an amazing one where you could stream live footage from over 100 storm chasers and comment on the inline feed that was linked to Twitter. It first I thought it would be as easy as reading through their source code, finding and downloading the flash element and then putting it up on my own website. Sadly due to the way their website was structured, most of the content was being stored on separate places within a server and being referred to by the flash element, making it impossible to use. I then decided the best way to include this information would be to use an iframe element to embed their entire web page into my own.
The only problem with this was that I ended up with the whole menu system, ads, logo and footer of the Tornado Alley Live website being visible. The change this, I placed a div element around the iframe and used the following CSS to zoom, fix and scale the contents of the iframe. I also removed the scroll bar from the iframe to make it impossible to accidentally move the contents, as well as keeping the scroll wheel functionality working on the Google maps portion of the embedded web page.
Here is a screenshot of the live storm tracker and twitter feed running within my web page:
Menu Dropdown Logo
As a small design feature on my website I decided to part from the norm by slightly altering the what has now become standard icon for drop-down menus. I shaped the bottom 3 lines to try make it resemble a tornado.
Subscribe to:
Posts (Atom)