Now, not being a really codey type person, I have been excited to start playing with jQuery as I don't need to know too much technical stuff to use it and some of the marvellous associated plugins out there.
I've just updated a site I look after with my first experiments: a gallery and vertical accordian.
I'm especially interested in the ways in which you can use it to provide some really elegant interfaces - I think this, or something like this is the key to us being able to design more engaging and intuitive user experiences. I'm mostly interested in it for this IA/UX aspect, I'd like to be able to wireframe ajaxy type interfaces more quickly for user testing and early client feedback - i have html and css skills - this feels like the third part of the triangle.
For those of you interested in learning more, here are a few resources I'm gathering:
http://del.icio.us/electricelephant/jquery
I'd love to see what any other non-coders/IAs like me are doing with it, especially in terms of wireframing and playing with the interface for enhancing the user experience.
Monday, 26 November 2007
Friday, 23 November 2007
how to animate a walk using a flipbook
A word about walks...
Walks are strange things - everybody's is different. We can actually consider a walk as a series of falls. Each step we take, we shift our weight and 'fall' onto the front foot.
At first, they may seem confusing things to animate as there's so much going on, but we can actually break a walk down into several steps to make the process easier.
A word about flipbooks...
Flipbooks work because of something called 'persistence of vision'.
There are 3 main techniques you can use to animate a walk.
1. The scientific method
2. The 'feel it' method
3. The 'rotoscoping' method
We will start by looking at the scientific method.
There are 2 ways you can animate a walk:
1. 'In place'
2. 'Forwards'
'In place' is where the character walks on a spot
Forwards is where the character walks from one side to another across the page. We will animate a forward as it is a little easier.
The Poses
Within a usual walk, there are 4 key poses:
1. Contact
2. Recoil
3. Passing
4. High
1. Contact
The feet are at their furthest extension in the walk. That is their most extreme position in the cycle. Note that the heel of the back foot is just off the floor as are the toes of the front foot.
2. Recoil
This is the frame where the character impacts the ground. It is also the lowest point in the cycle. The characters arms are furthest from the body as a result of the force of hitting the ground. The front foot is fully in contact with the ground; the rear foot has just lifted up from it.
Note that the leading foot is directly beneath the body, supporting the weight above it. Too many beginners produce recoil poses where the foot is not beneath the body, but several inches ahead of it. Try to avoid this.
3. Passing
The head is slightly higher than the contact frame head. The character is standing on one leg whilst the other leg passes it.
4. High
This is the highest point in the cycle. The character's body is stretched to the maximum as he lifts his leading leg forward to reach the next contact position. The heel of the trailing foot is just beginning to leave the ground.
Whilst just these poses will pretty much work as a walk, it will be incredibly fast. To slow it down, we need to add an 'inbetween' frame between each pose. A usual walk will have 8 frames in each cycle (8 frames per one foot moving from front to back).
If you feel like trying this out for yourself, start by inventing a walk. Get up and act it out. See if you can do it slowly and 'feel' where the main poses are in your walk. Then try to draw each pose as you act it out, bearing in mind the key poses we discussed earlier. Don't forget your inbetweens, although you can always add these later if you feel it's easier. If you want, pair up with someone and draw each others' walks.
Further resources:
a great walk cycle tutorial by idlewild
an online flipbook maker and gallery
eadweard muybridge walkcycles for rotoscoping
walking - an animation by Ryan Larkin (1968)
adjustment - a great film by Ian MacKinnon about love, loss and flipbooks (2007)
Walks are strange things - everybody's is different. We can actually consider a walk as a series of falls. Each step we take, we shift our weight and 'fall' onto the front foot.
At first, they may seem confusing things to animate as there's so much going on, but we can actually break a walk down into several steps to make the process easier.
A word about flipbooks...
Flipbooks work because of something called 'persistence of vision'.
There are 3 main techniques you can use to animate a walk.
1. The scientific method
2. The 'feel it' method
3. The 'rotoscoping' method
We will start by looking at the scientific method.
There are 2 ways you can animate a walk:
1. 'In place'
2. 'Forwards'
'In place' is where the character walks on a spot
Forwards is where the character walks from one side to another across the page. We will animate a forward as it is a little easier.
The Poses
Within a usual walk, there are 4 key poses:
1. Contact
2. Recoil
3. Passing
4. High
1. Contact
The feet are at their furthest extension in the walk. That is their most extreme position in the cycle. Note that the heel of the back foot is just off the floor as are the toes of the front foot.
2. Recoil
This is the frame where the character impacts the ground. It is also the lowest point in the cycle. The characters arms are furthest from the body as a result of the force of hitting the ground. The front foot is fully in contact with the ground; the rear foot has just lifted up from it.
Note that the leading foot is directly beneath the body, supporting the weight above it. Too many beginners produce recoil poses where the foot is not beneath the body, but several inches ahead of it. Try to avoid this.
3. Passing
The head is slightly higher than the contact frame head. The character is standing on one leg whilst the other leg passes it.
4. High
This is the highest point in the cycle. The character's body is stretched to the maximum as he lifts his leading leg forward to reach the next contact position. The heel of the trailing foot is just beginning to leave the ground.
Whilst just these poses will pretty much work as a walk, it will be incredibly fast. To slow it down, we need to add an 'inbetween' frame between each pose. A usual walk will have 8 frames in each cycle (8 frames per one foot moving from front to back).
If you feel like trying this out for yourself, start by inventing a walk. Get up and act it out. See if you can do it slowly and 'feel' where the main poses are in your walk. Then try to draw each pose as you act it out, bearing in mind the key poses we discussed earlier. Don't forget your inbetweens, although you can always add these later if you feel it's easier. If you want, pair up with someone and draw each others' walks.
Further resources:
a great walk cycle tutorial by idlewild
an online flipbook maker and gallery
eadweard muybridge walkcycles for rotoscoping
walking - an animation by Ryan Larkin (1968)
adjustment - a great film by Ian MacKinnon about love, loss and flipbooks (2007)
Monday, 19 November 2007
Wednesday, 5 September 2007
Stu's write thing
Stu's write thing is a new blog by a friend of mine. Stu writes letters of feedback - good and bad - to companies whenever something catches his eye. I think they are funny and informative, hope you enjoy them too.
Tuesday, 26 June 2007
three cities and a thousand islands
just got back from a holiday to the usa and canada. it was ace. i took some pictures - here's one below taken on a door in new york and there are a few more on flickr.
Monday, 21 May 2007
how to make information pretty
fantastic little blog dedicated to collecting beautiful examples of information aesthetics. i love it.
information aesthetics
information aesthetics
Subscribe to:
Posts (Atom)
