Friday 17th January 2014

Improvments

After I had screened my animation I decided to improve my animation reflecting on the feedback I had received. So this past few days I have been making amendments to my animation and adding more content to hopefully get it up to a passable animation.

The first improvement I made to my animation was adding colour. Colour is pretty essential for my animation as weather doesn't really occur (e.g. rain and snow) so without the colour scheme there isn't anything to help determine which season is which. I didn't add too much colour as I was unsure about what the houses and street colours should be, but I did change the grass, trees and sky, as well as some other minor things.

A before and after screenshot of the first frame of my animation. It's now a lot clearer what season the animation starts in and also looks a lot more vibrant.

Once I had recoloured everything that I felt needed recolouring, I then began to continue animating my scene. Again reflecting on the feedback I received this next scene I added a bus to act as a wipe to transition the animation into summer. I think this transition works really well and the season also is that representable of summer. I added shadows to the houses, bus stop and tree to give the effect that there is strong sunlight. Also the sky is cloudless so now the scene looks like a hot summers day.

The bus stop also received a slight improvement in the form of a poster that is now on the bus stop window. It's not that great of a poster as it's only a white sheet of paper with text on it but it's only there to tell people what season it is.

After the season changes I decided to have add a little animation in for my cat. I didn't have the time to make many changes to my cat so I kept it single and whilst it's sitting at the bus stop it scratches its head with its paw. I used a picture I drew before I was animating to use as a reference for this bit of the animation and it helped a lot. It didn't take too long to get the animation made as it was only a few frames and I reused some frames to save time.

Lastly, I made my animation turn into the autumn season. Originally I was planning to have a gust of blow through the street carrying autumn leaves to litter the ground, and that would act as the transition. But I was unable to get this too work to how I would like, so instead I decided to use the sky as a transition. I turned the sky from a clear blue to a grey with clouds entering from both sides. As the sky was changing I made the shadows fade away and the ground slowly became littered with leaves. Changing the sign this way was slightly awkward so I motion tweened a leaf across the screen and flying past the poster. As the leaf overlaps the poster, the text changes but it's not very noticable. I do think I could have done better with the motion tween but as I am limited with time, I decided to leave it as it is.

 

Wednesday 8th January 2014

Critical Evaluation

• Recolour each season
• Have a wipe transition
• Duplicate what I have to produce a looped sequence
• Possibly join each season from a separate file
• Bus stop has a poster to indicate each season
• Walk cycle was well done
• No sound
• Cat needs improving - tail
• Needs more action

After screening my animation too my peers I received some feedback on what I need to improve in my animation as well as what I have done well. Overall my animation needs a lot of improvements and there is a lot I believe I can accomplish from this feedback.

Good Aspects

The only main aspect that I got praise for was that of the walk cycle. The walk was fluid and didn't have much going wrong for it.

Areas for Improvement

I got quite a bit of criticism due to the fact what I screened really wasn't much. So it was to be expected that I got a lot of feedback regarding what I can do to improve my animation. I got told that I should take inspiration from a scene from a film called Noting Hill. Upon watching this video it's quite similar to my idea already, but there was something that I never thought about was having parts of the animation act as a wipe to transition into the next scene. I got suggested that I should make a looped sequence using the animation I have already made. This will mean I only need to recolour each scene and add little bits of animation like, for example, a bus driving past to act as a transition.

One bit of feedback I received was that I need to add colour to my animation. Each season also needs to have a different colour scheme. Having a grey as the only colour really doesn't make an appealing animation and it's hard to distinguish each season when there is no colour. Another way to indicate each season is to have a poster on the bus stop, and each season has a different poster representing something that usually occurs during the current season, for example a Halloween poster during autumn.

Other areas I need to improve the animation would be that nothing actually happens during the animation. There is no action. Something needs to occur during the animation other than a cat sitting down at a bus stop after 20 seconds. With the types of weather and various transitions between seasons this should provide enough action for the animation. It's fairly similar to Notting Hill in that way as the main character is show walking through a market, not really doing much, whereas the scenery around him is constantly changing.

Finally, and possibly a crucial area in need of improvement, my animation needs sound. Sound really helps drive the narrative of a story but my animation has nothing. Even if it's just sound effects for certain areas of the animation, it'll help my animation out. It's also worth considering a backing track, possibly even one for each season.

Personal Evaluation

Regarding all of the feedback I mostly agree with it all. My animation needs a lot of improvement and all of the feedback should help me accomplish a better piece of work. As for my opinion on my work so far, I am very discontent with how much work I have actually managed. I have not put in nearly enough effort and because of this my animation is unfinished and still needs a lot of work to get it passable. However, although my animation isn't exactly up to a good standard, I am content with the outcome so far. 

The fact people also said that my walk cycle worked fairly well is good enough for me as that was probably the hardest part of the animation. I have learned quite a bit about walk cycles just from creating this cat animation, however I still need to improve on my walk cycles as I was unable to get a natural bounce and tail swing for my cat.

Regarding the cat, I should have found references, during the development of my idea, to use during the animation. With the lack of references for this kind of animation I struggled greatly and this caused the animation to be very boring as there is no animation involving the cat other than the walk cycle. I did have a scene prior to the walk cycle however, this ended up being cut out due to me being very unhappy with the outcome.

If I had spent time on the animation earlier than I probably could have added some animations of the cat into the movie, but due to my poor time management this didn't happen.

Tuesday 7th January 2014

Cutting the Animation

This was an outcome that I probably should have done earlier. After leaving the animation yesterday I returned to have a fresh look on the significance of this portion of the animation and if I would benefit from using it. In the end I decided to completely cut the first part of the animation and instead focus on getting the animation moving as I haven't actually got anything other than a walk cycle. It was probably a wiser move to remove the beginning scene as I was able to get some animation prepared for screening on the 8th January.

Removing the first scene has caused a slight problem though. The first scene was there as an establishing shot and to provide a smooth transition into the walk cycle. As I was unable to complete this part of the animation I now don't have an establishing shot and either need to create a simple one that I can easily accomplish, or have the animation start without one. Doing either creates its own problem. If I decided to create a new beginning segment it'll take some time to make which will mean I lose time to finish the animation, if I chose to do the latter everyone viewing it just jumps straight into the animation which really doesn't work well.

Continuing the animation

Now I'm not focused on the establishing shot, I managed to get some progress in my animation. Although nothing much really happens, it's enough to screen and get something to write a critical report. So far the cat walks along a street with and sits down in front of a bus stop. The background consists of some houses, all looking exactly the same, with a few difference concerning what is in front each house. There are also hills in the background that received a bit of a tweak from the ones seen in the beginning segment from yesterday. Also the clouds were made and moved across the screen along with the previously mentioned drawings. Each layer moves at a separate speed to each other to give a more realistic walking effect. The houses, wall, trees all move together at a moderate speed and this speed dictates how fast the cat appears to move. All of the houses are on the same layer are tweened across the stage. The first keyframe is at frame 1 and the last is at frame 350. To create this tween I positioned the houses in each key frame and then right clicked on the timeline and selected 'Create Motion Tween'.

The position of the houses in the 1st frame, underneath is the position of the house at the 350th frame.

After doing a similar tween for all of my background I then worked on the clouds in the sky. The clouds were fairly easy to make. All I needed to do was to randomly draw with the paint tool with a couple of shades of grey and then convert to a movie clip. I then added a blur filter and changed the value to 45 px, this gives a steam or cloud effect. I wanted to try something with the clouds and that was to see what exactly would happen if I made the clouds tween in one direction inside the symbol, but tweened the symbol in the opposite direction for the animation. There really was no gain from me doing this as I could of had the clouds moving in one direction for the entire animation, however I wanted to experiment a little bit and see what would happen if I had a tween forcing the clouds to move in an opposite direction. The result is a bit of a glitch. The first time playing the cloud will work fine, it'll move in the opposite direction once the tween has ended, however when continuing to play the loop the cloud will then have a new starting position and when it reaches the end of the tween it'll jump to a different spot to begin going the opposite direction. I'm not surprised it does this but I still wanted to test it a little bit. So I decided to compare the cloud against another cloud, this time without a tween inside the symbol, and see if there was any difference in the speed. To my surprise there was a difference. The first cloud moved at a slower pace compared to the second cloud and also stopped a lot earlier.

Once I had finished experimenting I decided to make a cloud, again with the tween inside the movie clip. It is probably possible to get the same effect without forcing the tweens against each other, but I don't want to waste much more time working it out. The next step after creating my cloud was to duplicate it. I didn't want to use the exact same image for every cloud as there is never two clouds the same, so I would drag the symbol from the library onto the stage and then use the transform tool to alter the image. I did this for every cloud and once I felt I had enough for the sky I tweened them to go along with the background.

 The first image is the original drawing of the cloud. As you can see I only did a few little scribbles with a couple of shades of grey. I then, after converting it into a movie clip, added a blur filter at 45 px to get to the final image. Once it's like that I can copy and paste at will and alter the image by using the transform tool. I can also change the blur, for example I can change it to 95 px for a thinner looking cloud. I can make it thicker by lower the px as well however if I do that I need to avoid putting it too low otherwise the strokes of the brush will become noticeable.

Monday 6th January 2014

Animation of the cat

I left animating very late but I have gotten around to retrying the animation of the cat stretching and then walking forwards. This was certainly a big improvement compared to the first attempt, however, it still does not work as well as I have hoped. The beginning part where the cat stretches it's paws out and then stands up, I personally believe it works pretty well. In the first attempt the animation just looked a lot like shape-shifting, this time however, I think it looks like the cat is stretching. So after I was happy with it I needed the cat to walk forwards and also turn so it could like into the already prepared walk cycle. This did not go at all to plan. To begin with I had drawn the cat at an awkward angle and it would require me to pretty much redraw it all again. The angle I drew the cat at meant that the cat would walk at a diagonal rather a straight line, that isn't really too bad except instead of going from left to right, the cat starts walking from right to left. This means it begins walking in the opposite direction than the walk cycle. I don't want the cat to be walking from right to left for the entire animation as I find it easier to have the animation moving from left to right. Another problem I once again encountered was maintaining the cats face during each frame. It once again diverted from the original image as I continued to struggle to make the face look the same. 

Although this attempt was also pretty much a failure again I feel that make the cat walk forward wasn't done that badly. Because of the awkward angle, I once again struggled to find any useful references to assist me in my animation, I decided to draw the walk cycle using the reference I used for my first walk and then tweak the drawing to suit the angle. It wasn't done as well as the first walk cycle but it worked slightly. More importantly the cat didn't look like it was either sliding or stuttering across the stage.

Compared to the first attempt I used many more frames for this animation. Although most of it is actually of the walk cycle, the first 15 keyframes are all for the stretching of the cat.

Backgrounds

After I had finished with my second attempt, I decided to work on the background some more as it was very bare. I didn't really know what colours to use for the majority of the scene so I decided to colour everything in a mixture of whites, greys and blacks. This gave the animation a bit more to it, although the colours do not represent the season well at all. The beginning segment of the animation is supposed to be set in spring. The usage of grey gives it a very gloomy feel so it doesn't portray spring well at all. If anything the greys would be more suited to autumn as it's typically a raining season, so I need to add more suitable colours to my animation but for now I'm going to leave it grey and focus on the main animation.

Wednesday 18th December 2013

Animating

Today I began animating the beginning portion of my animation. This scene begins with the cat peacefully laying down in front of a house. At this point in the scene only the clouds are animated. The scene stays this way for a few seconds and then the cat begins to move as well. It is going to stretch and then get up and walk towards the pavement and then proceed to link into the walk cycle I have already created. However, animating the cat is proving to be increasingly difficult. I have a very limited amount of referencing for animating this cat so I am trying to work from still images of cats in similar poses and then guessing how the body looks in between frames. It is clear to me that I need to redo this part of the animation again after my first attempt as the cat does not move in a realistic way. In fact the cat instead looks like it is actually shape-shifting in a way.

Another problem I am facing is trying to keep the cats face to look the same throughout this animation. It's not a case of having the face look exactly the same, as in there is no change during the animation because that would not help make the animation better. Instead I need to maintain a similar expression as I draw the cat from a different angle. The more frames I draw the cat becomes less and less similar to the first frame. This may be the cause of why the cat just looks like it's shape-shifting to me rather than stretching but I think the main cause is just due to poor animation. When I retry the animation I also need to make sure I use a lot more frames. I think I used too little frames in this first attempt and more frames will, hopefully, give a smoother and more believable animation.

 The first image shows the starting position of the cat. I used the drawing I did a few weeks back as a template and redrew it into Flash. The second image is what the animations last frame ended up like. It's not the worst drawing but the animation in between does not work at all, however, that is not to say this was completely a waste of time. It was actually a worthwhile experience as now I know that I need to do a lot more drawings and maybe even a few more practices to get this bit of animation working.

This is a screenshot of all the frames used during this first attempt. There was only 9 keyframes in total which really was not enough.

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.