Monday 9th December 2013

Walk Cycle Completion

Walk Cycle

So today I made it my goal to complete my walk cycle fully, so now the cat has facial features and I also redrew the shape of the head to make it appear more like a cat. To redraw the head and neck I used the onion skin tool again. 

This is what my cat now looks like. I don't intend to add colour to the cat and instead plan to keep it white. However if I have time once I have finished my animation I may consider add colour.

As you can probably notice there is a blue border around the cat, this is because I have also made the walk cycle a symbol so I can use it whenever I need to and it'll loop constantly when put into the time line of my animation. This particular symbol is a movie clip. There are two types of symbols I could use for my animation - graphic and movie clip. I chose to use a movie clip over a graphic as a graphic is only used for static images, whereas movie clips are like small little animations designed to loop is put on the timeline for long enough. To create a symbol you need to go to Modify and then select Convert to Symbol. Then a small window will open and you can select which type of symbol you wish to use.

Once you have finished the symbol will appear in the Library and then you'll be able to access it at any time and put it onto your stage whenever you need it.

So after selecting the first frame of the walk cycle and converted it into a movie clip I still need to add all of the other frames or otherwise the walk cycle will be incomplete. So all I needed to do was highlight all of the frames (excluding the first frame because it is already part of the movie clip). Once highlighted I right clicked and selected Copy Frames. Then I needed to double click on the image which was the symbol to get inside the movie clip and paste the frames onto the timeline (Right click on the frame and click Paste Frames).

The last objective I needed to complete to finish off my walk cycle was to again alter the frames in the move clip. I have been working at 13 fps during the walk cycle, however, I will not be able to work at 13 fps during my animation. I need to be working at 24/25 fps as this is industry standard. But I cannot just put the animation to 24 fps and just leave it because this will slightly alter my walk cycle. What will happen is that the walk cycle will turn out to be nearly two times faster than it is supposed to be. This is because when playing the movie the walk cycle will be playing nearly twice a second as 13 frames is now just over half a second.

So this is what I have done to fix the issue caused by putting the frames per second up. I have added a frame to each keyframe so now each image plays for two frames. However this now means the movie clip is now 26 frames instead of 24. It may seem like a problem but it will not actually make a difference as the cat is going to be on screen for much longer than one second. If the cat was only on screen for one second it would mean the animation would cut off the last two frames of the walk cycle but this won't be an issue for an animation longer than one second.

Scrolling Backgrounds

Adobe Flash Tutorial: Scrolling Background

So as I was finished with my walk cycle I then needed to learn how to make a scrolling background effect in Adobe Flash. After watching the above video I learned very quickly which is really good to know it's very easy. To make a scrolling background all you need to is have a background that is larger than your stage size.

Here's an explanation:

I am working at a stage size of 1280 pixels by 720 pixels (width x height). I want to use a side-scrolling background so that would mean I need a background with a width greater than 1280 pixels but the height would still need to be 720 pixels. For the purpose of explanation lets suppose I use an image of the ratio of 2560 x 720. I would need to then set a keyframe at a certain frame, for now I'll use frame 150 but in my animation I would need to set it at a specific frame because the background would need to match the speed of the cat.

This is my 2560 x 720 image.

The next part would be to right click on the timeline and select Create Classic Tween. Once the tween is set the background is then completed.

This is just a simplified version of how I intend to use my backgrounds. Just like it was explained in the online tutorial I will need to set different speeds for my background, midground and foreground to give a better effect. I will most likely also use a looping background which will mean that the background I use will need to be able to provide this effect.

Wednesday 4th December 2013

Walk Cycle Continued

I continued where I left off with my walk cycle and complete it. Though I still need to add the features and fix it up a little bit.

 This is my first attempt at a walk cycle for an animal and I'm quite happy with it to use in my animation. Like I just said, I do need to finish it completely by adding in the features but I will do that in the coming days. I will also need to fix up the way the animation is supposed to bounce. It's really not worked how I hoped as it seems to be very unnatural.

Another edit I should try an attempt is to try and make the animal look more like a cat rather than a dog. After looking at how my original drawing of a cat looks like compared to my animation it looks like it's just that I need to alter the size of the neck and possibly the shape of the head.

 From looking at the two together you can pretty much see I am right about the neck and head of my animation. Hopefully it won't be too hard to alter but it should be possible to accomplish without having to redo the entire animation.

Wednesday 27th November 2013

Walk Cycle

Today I began to work on my walk cycle for my cat. I decided that I should create the walk cycle first as I have never drawn a walk cycle for an animal and I need it to be able to create my animation. As it was my first time drawing a walk cycle for a cat I decided to use an already made animation as a reference.

Using this gif I began trying to make my cat animation. I have been finding it relatively difficult because I need to keep redrawing the legs and paws in the correct positions but the animation is coming together. I've been using the onion skin tool constantly as it allows me to know where the last frame was, this allows me to make sure that the legs and paws are moving. The only downside about my animation so far is that the animal resembles a dog more than a cat. I haven't added any features to the drawing yet so that may help but for now I'm going to get the walk cycle finished and worry about the details later.

This is how I have been drawing each frame of my animation. On the left is a still image of the already completed animation and on the right is my attempt. As you can see I have left out the facial features of my animation and this is because I felt that I should learn the walk cycle first. Once I have completed it I'll then edit it to fix any errors and also draw the features in correctly.

To get all the still images of the animation I just imported the gif file into the Flash library and it automatically cut the animation up into 13 images. I then set my FPS (Frames Per Second) to match the amount of images. The reason why I needed to have my animation at 13 FPS is because if it was at the standard 24/25 FPS the animation will need to play nearly twice per second and this will cause it to be faster than it should be. So leaving it at 13 FPS the animation will run once per second so it'll be at a normal pace.

This shows that the onion skin is being used as well as the FPS has been set at 13.

Wednesday 20th November 2013

Planning

Drawings

To begin with my planning I decided it would be best to first learn to draw a cat. I used a range of tutorials [link here] to help me understand the drawings and then managed to draw a few images in various poses. I needed to learn how to draw a cat before I could storyboard my idea as it would have been very difficult for me as I have never really been good at drawing cats.

These are the drawings I have made with the help of the drawing tutorials. These will help me not only for my storyboard but also for my animation. I can use these as templates when I need the cat in this position and it'll really help me.

Wednesday 13th November 2013

Character Designs

Today I began looking at cats as I intend to have one as the protagonist of my animation. To start with I looked at images of real life cats and also some drawings. I mainly looked at cats walking as I feel the hardest task of the animation would be to create a walk cycle. This is because I need to animated 4 legs compared to 2 legs, if I had a human as my character.

From the still images I have looked at I can get a rough idea of how the cats walk, however, I felt that I should look at some animated walk cycles to get a better understanding and to use as a reference when I begin my animation.

 Although it's not really a animation of a cat, it does have the same walk cycle. By watching this animation I can see how the walk cycle occurs with 4 legged animals. It's almost like there is an imaginary mirror dividing the front legs and the back legs. For example when the left leg (front) goes forward, the back left leg goes backwards. When the front left leg goes backwards, the back left leg comes forwards. The same occurs on with the right legs. Knowing this will help me with the walk cycle as I know how each leg should act. There is also a noticeable bounce with the walk which I should make sure I include.

Whilst I was looking at some walking animations, I felt that I should also have a look at how cats are animated in Japanese animation (anime). There is an anime called Sakurasou no Pet na Kanojo which I know has plenty of animated cats so I felt I should check out a few gifs.

I found these two gifs of the anime which show a little bit of animation of the cats. The first one has a walk cycle which will be very useful as I can see the posture of a variety of different sized cats as well as useful for making the walk cycle itself. The second gif isn't as useful however it does show me that when the cats head moves, the tail also moves. The body however doesn't move so when at a stand still I won't have to worry about animating the body.

Whilst I was looking at some animations of cats, I got recommended to watch Simon's Cat. Simon's Cat is a popular animation on YouTube which is just have short skits involving a cat and its owner. These animations use most of the techniques we learned prior to this task (Walk Cycles, Facial Expressions, Squash and Stretch) and can be useful for me to use as a reference when I begin my animation. The animations will be a good reference for how the cat jumps, walks, and any other movements.

 

Tuesday 12th November 2013

Ideas Generation

Today I began my ideas generation for my 2D animation. I have only managed to come up with 1 idea so far but I feel I have enough basic planning to elaborate further. The idea I have come up with so far is a cat walking through the streets whilst the weather is constantly changing. Its a rather basic idea considering the requirement of using the seasons, however, I feel I should be able to execute this and also test my abilities using Adobe Flash and Adobe Photoshop.

 

Influences

Let's start with how I came to this idea. My main influences are these two stop-motion animations: Sorry I'm Late & Her Morning Elegance. Although these are stop-motion animations I really like the style of how they have been done. The one camera angle view works really well in these animations and it is similar to how I want to have my animation. I want to have my cat walking along the streets and interacting with objects it passes as well as being affected by the change in weather.

In the animation 'Sorry I'm Late' the man is making his way home but each method of transport either fails him or he needs to change due to other limitations. For example at first the man starts riding a bike, but because he went too high after going over a hill the bike got stuck in a tree. Later on he tries to take a hot balloon home but a stormy occurs and he has to change transport again. 

With my animation I don't plan on having the cat constantly changing method of transport, instead I want the weather to affect how the cat will adapt to the situation. Like finding shelter whilst it rains to avoid getting soaked, or holding onto a lamppost to avoid getting blown away in the wind.

Incorporation of the seasons

Each season will be represented by the weather. The weather in each season will be:

• Spring - Rain and Sun
• Summer - Sun
• Autumn - Wind and Rain
• Winter - Snow

Each season will also get corresponding backgrounds to enhance the expression of the seasons. The sky will be the biggest representation of the season (excluding the weather) but the houses and other background environments will also represented a season.

• Spring - The sky is fairly blue with a few clouds. During the rain the sky will be consisting of light/dark shades of grey. Flowers and tress will begin to bud.
• Summer - Clear blue sky throughout the season. Some houses will have sprinklers in the gardens going off.
• Autumn - Cloudy sky throughout the season, clouds get darker during the rain. Red/Brown leaves scatter across the floor. Houses will have a Halloween decoration halfway through the season. Trees do not have leaves.
• Winter - White sky throughout the season. Environment is covered in a layer of snow. Houses are also decorated for Christmas.

I also need to transition between each season so that it seems like one endless cycle. This can be accomplished pretty easily.

• Spring to Summer - The sky becomes a clear blue sky with very few clouds being seen.
• Summer to Autumn - Wind starts to occur and clouds fill the sky. The ground is also littered by leaves. Trees and flowers begin to shed leaves.
• Autumn to Winter - Ground and backgrounds begin to get covered by snow. The sky begins to fade into a clear white with hints of light grey clouds.
• Winter to Spring - The snow on the ground begins to melt away. Flowers begin to bud. The sky changes from white to blue with some clouds.

As of right now I am unsure which season I should begin with. I am thinking of starting in Spring and finishing in Winter, however, I am likely to change this.

Outline of Idea

As I have stated at the beginning of this blog entry, the idea for this animation is going to be about a cat walking the streets whilst the weather and seasons are constantly changing around it. The idea itself stems from the fact that most cats wonder around outside with their owners oblivious to what the cat is doing. The influences of 'Sorry I'm Late' & 'Her Morning Elegance' helped me with how I want to style me animation, using only one camera angle to follow the events of the main character.

To begin the animation I will have the cat curled up and then stands up to begin the walk. As I have mentioned I am unsure with the beginning season but for the purpose of explaining the idea I'll begin with Spring. The cat will walk past houses, possibly stopping at one point to smell a bouquet of flowers. During the walk it will encounter a rain shower so it'll take shelter somewhere, e.g. a bus stop. Another encounter will be with a road that it'll need to stop at because of cars going past.

The season will then transition into Summer where the cat will start to walk on walls and other objects. However, the sun will take its effect on the cat so it'll need to drink water from somewhere, e.g. a sprinkler in the garden of a house or a pond in a field. Walking through the field the cat will become slightly exhausted at this point and take a short nap.

This will then transition into the Autumn season and the leaves will begin to litter the ground. The cat will have woken up during the transition and continued its walk. As the leaves begin to hit the ground the cat will go out of its way to step on some leaves to hear the satisfying crunch sound. The cat will eventually walk back into the streets after spending a little while in a field and a strong wind will roll in. The wind will be strong enough to blow the cat backwards, however, it will quickly grab hold of a lamppost to avoid being blown back even further. After the wind subsides, the houses will start to become more decorative as it nears Halloween. Halloween will pass and rain will begin to fall quite heavily, again the cat will need to find some shelter until the storm passes.

Once the storm does pass, Winter rolls around so snow begins to line the streets. At the same time houses once again get decorative for the festive season. The cat will enjoy jumping in the snow but at one point it jumps into a pile too deep and disappears. But I intend to do the cartoon like effect where the eyes are still visible through the snow. The cat will them make it's way out where a silhouette of Santa and his sleigh will go across the sky. A present will fall in front of the cat and that is where (possibly) the animation will end.