Wednesday 16th October 2013

Walk Cycle - Bone Tool

This time we needed to create another walk cycle, however, for this exercise we was to use the bone tool instead. The bone tool is a tool in Adobe Flash that allows you to create a skeleton for your character.

Again we were given a demonstration on this exercise and we were also given a file that contained an already built character with bone tool skeleton. This was only for us to have a slight play around with to understand how the bone tool works and how it moves. To move the character you only need to click on the body part and move it, this will cause all the connecting bones to move as well. Though without the use of constrain, the skeleton will move unnaturally. For example, the head should not be able to be upside down and lower than the neck, so to combat this you would set the constrain at the desired. Unless you are fine with fiddling around with the body parts to get the desired position, it is a good idea to add contrain to some areas, for example the arms and legs. You can also disable joints from moving, this is useful for the bone acting as the spine.

Just like the previous exercise the character again needed to have each body part a speerate symbol. However, this time each body part needed to be on the same layer as each other. Each symbol needed its own bone with the body requiring two. A problem with the body needing two is that only one bone can be on a symbol, it cannot have mulitple bones. So to correct this I added a small symbol and put it underneath the body to act as a second point. I then connected the symbol to the body and it allows me to have a point for the pelvis, to connect the legs, and a point for the shoulder, to connect the arms.

To the left is the character I created along with the skeleton I added using the bone tool. The two green crosses on the skeleton mean I have pinned those joints. It means you can move this joint.

However I had created my skeleton wrong slightly which means I need to remake the skeleton because I didn't realise my problem until I had spent some time trying to animate it. The problem is that one of the legs had the bone connected at the wrong area. Instead of connecting at the top of the leg, instead the bone was connected half way down the symbol which made animating very difficult.

 I did try to combat this by using the transform tool to move the leg into place on each frame, however every time I did this, it would affect the previous frames and move other body parts out of place. I would try and go back and reposition everything however it was too time consuming so I decided it would be best to start again and remake the skeleton.

Update: Wednesday 23rd October 2013 

I decided to redo the skeleton for my character and do the animation as I was having trouble animating last week. So this week I made a working skeleton and managed to create a walk cycle. For the walk cycle I tried to create a brisk walk, however it went a bit quicker than expected so it could do with keyframes inbetween some of the frames to slow the cycle down.

Seeing as I remade the skeleton, I wanted to avoid making the same mistake twice. So this time I correctly positioned the bone tool on each symbol. To make sure I attached everything completely I seperated every body part and then made the skeleton. After the skeleton was made all I needed to do was to position the body parts together and arrange which parts needed to go to the back and the parts that need to come to the front.

As I said before I wanted to make my character do a brisk walk, however it could have been done better as the pace of the walk cycle is a bit too fast. To fix this I will need to add extra frames inbetween the keyframes, this will slow the animation down a bit. Another way I can slow down the animation, is by changing the frames per second. The reason my animation seemed too fast was because the frames per second was on 24 fps. When changing the frames per second to 12 fps, the animation goes to a more suitable walk cycle. However, I want a brisk walk for my walk cycle, so I'm leaving the frames per second at 18 fps. This gives the animation a bit more speed but it isn't too fast like it is on 24 fps.

Wednesday 9th October 2013

Walk Cycle

For the exercise we needed to create two walking animation. One through frame by frame animation, the second needs to be created using the bone tool.

We were given a demonstration on how to create a walk cycle as well as given handouts that showed various walking animations and each stage of the walk cycle.

To ready the body for the walk animation we needed to seperate all the body parts into single layers and then make each part a graphic symbol. The body parts were seperated into:

This is the order I had my layers.

• Head
• Body
• Upper Arm Left
• Upper Arm Right
• Lower Arm Left
• Lower Arm Right
• Hand Left
• Hand Right
• Upper Leg Left
• Upper Leg Right
• Lower Leg Left
• Lower Leg Right
• Foot Left
• Foot Right

We used an example of the walk cycle to guide us to how the positioning of the walk should be. So on one side of the stage would be the example, and on the other side is my walk cycle. To create this walk cycle all we need to do was use hinge rotation as well as repositioning the body parts into the correct area. Hinge rotation is using anchor point on a symbol and rotating around this anchor point. You can move the anchor point to anywhere on the stage so you can set up the body parts to have anchor points where the joints are.

This image shows the anchor point I set on the lower left leg. The anchor point is roughly where the knee joint would be on a human leg.

Wednesday 2nd October 2013

Animate a change of facial expression

For this animation we needed to animate a change of facial expression.

We were shown a couple of tutorials for this exercise as well as a demonstration on creating facial expressions. The tutorials we were shown were for blinking and rigging an eye in Flash.

http://www.youtube.com/watch?v=_JNWQRZ_FC0
http://www.youtube.com/watch?v=zMKyQi8GDCo

We could use either frame by frame animation or tweens for this exercise and I went for frame by frame animation.I chose to do frame by frame animation as I felt I would have more control over creating the expressions. Before I started my animation I searched via Google images for an image of various facial expressions as references for the expressions I decide to use. I decided to use the expressions grumpy and shocked for my animation.

The face I made is extremely basic however it has the features needed to make the facial expressions, so I went ahead and animated it. The first expression I made was a grumpy expression. Since I was using frame by frame animation I was using the onion skin tool on each frame so that I don't draw in a completely different area to where I am supposed to. I animated the eyebrows, eyes and mouth to replicate that of the image I was using as a reference. After I animated it I then left it as a still for a few frames to then start animating the shocked face. Again I used the image as a reference whilst making the animation. Then to finish the animation I made the face to return to its original expression.

I feel I should have done a better job on this animation as it's very basic and the expressions could be improved to look a lot better. So I may redo this exercise at a later date and also include a few more expressions.

Wednesday 25th September 2013

Squash and Stretch

For the exercise we needed to make an example of squash and stretch.

Before we created our own animations we were given a demonstration on how to do a bouncy ball animation. This was done by creating tweens and then also use an option called ease which allows you to adjust the pacing of the tween. We was also shown the timing of the animation as well the exaggeration of the squash. The timing is key in the animation as if it sticks to the ground for too long it won't act like a bouncy ball, however the same can apply if you leave no time for the ball to hit the floor as it won't have much opportunity to squash.

I created my bouncy ball animation and used the same techniques as shown in the demonstration. I created my ball using the oval tool and gradient transform tool. The gradient transform tool allows me to repostion my gradient to give the ball a bit of a 3D look.

I then went on to animated the ball using tweens. I made a keyframe at frame 13 and position the ball directly below the starting point. I then converted the frames into a classic tween and adjusted the ease. The ease I wanted was to have the ball slower at the start and then to gain momentum as it nears the floor, so I needed to set the ease at -100 to get this effect.

The top image shows the animation at an ease of -100 whilst the lower image shows the animation without ease. In the lower image you can see how each frame is evenly seperated whereas compared too the image above the frames start close together and then start to space out a little bit. This creates the effect that the ball is gaining momentum as it appears to get faster the closer it gets towards the ground.

 

Once the tween was finished I needed to then add the squash effect. I added another key frame at 14 and 16. These frames are the squashing phase of the animation. For frame 14 I positioned the ball slightly lower than frame 13 and used the transformation tool to alter the shape into an oval. This is going to be the start of the squashing animation, frame 16 has the end of the squash. For the final part of the squash I once again used the transformation tool and altered the shape of the ball, but this time I slightly exaggerated the shape into an almost flat ball. This shape of the ball will only last for the one frame so it won't be too noticable but it will give a bit of life to the animation. I then added a tween to combine frames 14 to 16. This tweens ease was left at 0 as it did not need altering.

This image shows the stages of the squash effect in the animation.

As it was just an animation of a ball bouncing I copied the frames 1 to 15 that I had just made and pasted them onto the timeline again. I then reversed the frames and adjusted the pasted tweens ease to +100. This is because I wanted the same effect that the ball is faster the closer to the ground it is. However, since the ball is now leaving the ground and going up into the air the ball needs to start slowing down the further away from the ground it gets.

This shows the timeline of my animation.

Wednesday 18th September 2013

Frame by frame animation loop

For this exercise we needed to create a frame by frame animation loop.

Before we began the animation we were shown a few examples to get an understanding on what is meant by an animation loop. An animation loop is a short animation that has a character or an object do an action and is able to play over and over again seemlessly. An example of this would be a character entering one side of the stage and leaving on the other side. We were shown some aniamtion loops created by Andy Martin and then given a tutorial on frame by frame animation and the onion skin tool in Adobe Flash CS6.

Andy Martin - Mini Sketchbook Animations (http://vimeo.com/6491362)

Onion skin is a tool in Adobe Flash CS6 that allows you to see previous and upcoming frames at the same time. This helps with animating, a lot with frame by frame drawings, as you can see the positions of your animation at different stages. When doing frame by frame animation this helps you see where the animation is whilst you draw the next frame.

This shows how you can see previous frames whilst working on the animation.

The highlighted box is the onion skin tool.

The frame by frame animation I done was of a moon orbiting the Earth. I also added a few shooting stars in as the scenery didn't have anything there.

Wednesday 11th September 2013

Stages of pre-production

For the first task we needed to create a powerpoint to explain the stages of pre-production.

The stages are:

• Mind Maps / Spider Diagrams
• Research
• Storyline
• Production Schedule
• Mood Boards
• Backgrounds & Environments
• Character Development
• Storyboards
• Sounds
• Animatic

I created a powerpoint explaining the purpose of each stage and added illustrations to use as examples.