Final Animation

Here's my completed animation as it would run without the clicking/interactive element. I will provide the interactive swf. file on disk since neither Blogger nor Youtube support that file format.

I added the extra frame just before the yelp and I think the slight pause it adds makes it look a lot better. Overall I'm pleased with how its all turned out, and I think it flows together well. Once the animation was finished I played around a little with colour and the paper effect, keeping the simple, mostly-white-with-only-patches-of-colour style of the 'There She Is!!' music videos in mind. I created a new layer in Photoshop and set the blending mode to Multiply so that the paper would still show through, then coloured in the eyes, nose, patches, tail, and ears in different shades of grey; then flattened the image and colourised it, giving it a pale blue hue. I quite like this effect, but it seems a little too obvious that it was done in Photoshop... I really want to keep the piece looking as hand drawn as possible, as though the character I've just finished doodling has suddenly come to life and started moving on its own, rather than me having spent a great deal of time carefully animating it.

I also tried deleting the paper background around the character to see if the contrast between the bright white background and the papery character would be a nice effect, but again, it just seemed to detract from the 'doodle coming to life on paper' feel. I also think the lack of paper background makes it look sparse and empty... I could create an entirely new background in Flash, but I feel the sharp vector images would clash with the nice roughness of the hand-drawn character... To be honest, I found myself really missing the way the paper background flickered as though moving, due to the light of the scanner. As plain and simple as it is, I think the paper is what makes this animation personal to me, and I'd like to keep that in tact. I also found an example of how having the background the same colour and texture as your character can work well to show the world they live in, even if that colour is white:



In my character's case, his world is the world inside my paper.

Below is the small test I did just with the run cycle to show the possibility, but I'm going to keep the final piece in greyscale with the paper background.

Yelp and Run Test

The final part of the animation before it loops back into the run cycle. I decided to change the plan from my storyboard slightly at this point, just because I felt like looking both behind and in front of him wasn't necessary. He's been watching the path ahead all the time he's been running, and the tumble would have carried him forwards past the point of clicking, so really its logical for him to only look behind. I also decided to take out the scene where he touched the 'screen' before freaking out, simply because I felt that by doing so, his reaction would seem really delayed. If he can see the person in front of the screen who clicked him, then he should be able to see them as soon as he turns his head to the front, not just after touching the screen. So instead I've drawn him catching sight of the viewer as he's turning back to face the right and yelping immediately in surprise. I think this more sudden action is much more convincing and amusing to watch, and after seeing how well it works in this test, I think I'm going to stick with it. The only thing I might add is one more frame just before the anticipation for the yelp... I think a slight pause is necessary to show him realising what he's seeing.

Standing Up Test

Here's the next part of the my animation, with the cat pushing himself up and looking behind him for whatever tripped him up. I wanted him to push himself up a little slower at first to show he's still recovering from the fall, then stand and turn around quite quickly once the confusion takes over. I acted this movement out myself several times while animating to get a good feel for how the weight should be distributed and how his body should arc as he pushed himself up. I also asked a friend to photograph me acting this out so I could use the photos as references.

Again, I had to adapt the poses for my cat's small, squishy body, so I tried to add subtle squash and stretch to the paws and feet. I'm really pleased with how this turned out; I didn't expect to get it right first time but the timing seems to work well, so I don't think I need to change anything at the moment.

Actionscripting

Now that I've got about 2/3 of the animation complete, I decided to try adding the interactive element to check everything will work okay before I finish. I will be using Actionscript 2 again for my cycle, since Actionscript 3 is still causing problems that we've yet to work out... But 2 is more than adequate for what I need to do now.

First I pasted the eight frames of my run cycle into scene 1, then added a second layer above it for my button. On that layer I inserted a new symbol (button) and used the Rectangle Tool to create a white fill box with no stroke, then set the Alpha of the white fill to 1%, making it practically invisible. I dragged it from my library onto the button layer and scaled up so it covered the main all of my cat except its tail, then inserted a new scene. On scene 2 I pasted the frames of the second part of my animation (the trip, fall, and tumble).

Back on scene 1, I opened the Actions box for the button layer and selected Global Functions. I then chose "On (release)" in order to make the button clickable, and then went into Timeline Control and added "Gotoandplay (1)" and then "Gotoandplay (Scene 2, 1)" to make the animation jump to the first frame of scene 2 after being clicked.

I then went back to layer 1 and opened the Actions for the last frame of the run cycle, then selected "Gotoandplay (1)" from Timeline Control to make it loop until the cat is clicked.

At first I had problems trying to get the second part of the animation running back into the loop once it had finished, but I eventually realised that Scene 2 doesn't need any actionscripting at all so can just be left alone. Pasting the run cycle after the trip/fall also helped the flow of the loop, and now its working really well! Unfortunately I can show the click test here since Blogger won't accept Flash files, but now that I've figured what actionscripting needs to be used, it should be easy to add last part of the animation to Scene 2 once its finished. The only flaw I can see now is that the eighth frame of the run cycle only seems to last for one frame instead of two, which looks a little odd while its playing. I think it must be because the loop action can only be added to the original frame rather than the extra one I inserted... So I'll try removing the extra frame and just pasting the eighth frame again instead.

Trip/Fall Test Complete

Here's my second attempt at the fall and tumble with the extra frames added. I think it looks a lot better now; the motion's a lot smoother and it looks about the right speed. My only concern is that it almost looks like there's too many frames where the body's supposed to fall... My character almost seems too light and floaty now. I think I'll try removing one frame from the initial drop into the tumble, and possibly one from after the tumble when the body hits the ground to see if it looks any better.



Here's the test again with the two frames taken out. I think it look much better now that the falls are faster, since it gives the illusion of weight.

UFO

This is the UFO I created in class when we were taught how to animate along a motion guide. To make it, I first set the stage dimensions to 500px by 300px with a frame rate of 12 frames per second, and filled the background with a dark blue. I then created the UFO as a new symbol, then used the Oval tool to make the planet and filled it with a Radial Gradient, using the Gradient Modifier to experiment with the spread of different colours. I made a new layer above the planet layer and dragged the UFO onto it from the library and resized it accordingly. I added a motion tween to the UFO for 40 frames, then added another new layer above it, on which I used the Oval tool to create a pale blue outline of a squashed oval around the planet. I locked the UFO and planet layers, then zoomed in and erased a tiny part of the oval outline near the UFO before changing it to a guide layer and dragging the UFO layer onto it in order to link the two. I dragged the UFO's center point to one end of the oval outline on frame 1, then positioned it at the other end of the outline in frame 40. Lastly, I unlocked the planet layer, selected the top half of the planet, cut it, and pasted it in place on a new layer above the guide and UFO layers to give the impression that the UFO is travelling around the planet. I found this to be a very useful and interesting way to teach motions guides, and I feel I could repeat the process should I need to for a project of my own in the future.

Trip/Fall Test 1

The next stage of the sequence is the trip and fall, which I've started from the eighth frame of the run cycle. I was worried that the jump from the clicked point in the run cycle to the start of the trip would be too obvious, but since the the four drawing formula is so fast, I'm hoping that no one will be able to notice. The trip was fairly easy, but I had to plan the tumble out a lot before attempting to draw it. I found this rather long-winded tumble tutorial on YouTube which I used as a reference to get a good idea of how controlled tumbles work. It takes her about two minutes to actually get round to tumbling, but once she does she repeats the movements slowly a few times, which I found very helpful. I made sure to tuck my cat's chin into its chest to make the roll smoother.



After watching how she finishes the tumble with her feet on the ground before standing, I realised that I'd need the feet to catch on the floor again to make my character come out of the roll and hit the floor, which I added in. I also made sure to over-exaggerate the body's follow-through motion to make it come up and start to flop over the head before crashing down. The tail's follow through is naturally exaggerated even more and is slower, since its much lighter than the rest of the body. However I think I need to add more frames into the roll, as at the moment its much to fast and doesn't feel like it has enough weight. Likewise, the body flips up and falls to the ground too quickly once it comes out of the roll, so I intend to go back and add some more frames there as well. I also think another frame or two is needed at the trip in order to properly anticipate the fall... And I don't like how the eyebrow changes expression at the end... it looks like its floating around the face rather than actually being a fixed eyebrow. I'll make sure to amend that when I go back to add more frames.

Run Test 2

Here's the neatened up run cycle with all the details added and the tail animated. The tail was rather tricky to move convincingly using the four drawing formula, since I needed it to flick up and down with the bobbing of the body, but at the same time if couldn't flick too fast otherwise it would just be a blur. In the end I managed to find a decent compromise, and I think it works quite well. I used and example of a cat run cycle as a reference for the tail positions, again from the Animator's Survival Kit.


On a separate note, even now that I've tidied up the line art significantly, I'm still really liking the slightly rough, pencilly feeling it has, as though the drawing of my cat has suddenly come to life and started moving on its own. I think that if I digitalised it fully by tracing over the frames in Flash, the sharp vector line would ruin this illusion... And while someone could easily argue that a character quickly doodled straight onto flash could also come alive and move on its own, I think it would be harder to believe because of how clean and crisp all the lines would be... I think its that "still a work in progress", sketchy feel that really brings it across, or at least that's how I feel personally. I'm also enjoying how the paper is flickering in the background as my character runs, almost as if the cat's movement across the paper is causing the paper to move as well. It may be an accidental side effect of scanning in each frame, but I think it looks brilliant while the clip is playing and it would almost be a shame to get rid of it... The background may just be blank paper, but because you can tell it is actually paper rather than just a devoid white space, it doesn't feel so empty.

Run Test 1

This is my first pencil test of my cat run cycle. Since I'm animating on paper by hand, I'll be scanning in all the frames individually and saving them in Photoshop before importing them into Flash. The Flash file is set at 24 frames per second, so all frames will be doubles.

I kept it quite rough to begin with and didn't bother adding all the character details like the patches and whiskers, since it saves time and I can add those later once I've ensured the animation works. I also left out the tail since that will need to be animated separately to the run. (I need to do research into the movement of animal tails before I can draw it convincingly) I wasn't really sure how to go about animating such a small character running fast, especially since the cat's legs are so wide from its stuffing which makes them overlap a lot more than thinner legs would. I know easily definable poses are essential in animation, but at the same time I feel a thinner cat would lose its squishy, rag-doll, plush toy look, so I really want to make the run feel convincing. While reading through the Animator's Survival Kit in search of run references, I discovered the that the four drawing run is best suited for small characters with short legs like mine, since it takes fewer positions for each stride to look convincing in less time than a taller character, because the positions all overlap.


I tried to vary the the poses slightly on the downward contact position of the run like the book suggested (to help the viewer read the two legs separately), but I didn't really like the idea of my cat just holding his arms out in front of him while running, so I decided to adapt the arms so they swing back and forth like they would for a taller character. I used the arms swings from a five drawing run formula on another page as reference for this, though I had to be careful of the spacing and made sure they worked as I went along by always flipping my paper back and forth.

I also tried to make the cat's feet squash slightly more when in contact with the ground to show his weight and to again emphasise how soft he if really. Overall I'm really pleased with how the run turned out! I was afraid it would be too fast once I'd got it playing on Flash, but it seems to be just the fight speed for what I want at the moment, since I want the kitty to be running in fear and confusion. Now I can add the rest of the detail and concentrate on animating his tail.

Storyboard

This is my storyboard for my 5 second cycle animation. My character will start off running, then trip when clicked and fall into a tumble/roll before landing hard on the floor. He'll then push himself up and look left and right for whatever tripped him, then look to the front and discover the 'wall' (the computer screen to the viewer), which he'll test. By doing so he discovers something/one is there watching him, so he yelps/jumps in shock and runs again, freaked out, allowing the animation to loop back to the beginning. I didn't just want a normal fall because I felt that would be too boring and not comical enough, so a roll should be much more exaggerated and interesting to watch. I'm hoping this is a pretty fun idea (it feels fun to me!), so I'm looking froward to animating my clumsy kitty~

As for how I'm going to animate it, I've decided I'm going to draw it by hand on paper rather than straight into Flash. After experimenting on Flash and trying to draw a decent rendition of my character using my Wacom, I've discovered that I'm actually very bad at drawing with graphics tablets... I'm sure I could get better with practice, but we don't have a great deal of time and I doubt I'd ever be able to get that degree of precise control that I can get drawing directly onto paper. I want to focus on making this animation as smooth, consistent, and convincing as possible rather than just making something brightly coloured and vectorised but not very well animated on Flash. So for now I intend to work on paper and scan the frames before importing them into Flash. I may try to digitalise them more later... but it depends on how the style of my animation develops in my head as I'm drawing it.

Character Design

Naturally since I want my character to be a plushie cat, I've been looking at a lot of plush toys as references, some of which can be found on my mood board. But in particular I want my character to be a rather old, worn looking toy that's been around for years and played with a lot (and damaged in the process). So rather than a modern toy, I decided to look more at traditional teddies and rag dolls, toys with patches that are imperfect. But even thought I want it to look like its been around for years, I don't want it to look old in personality... In its mind it hasn't aged, so it can still come across as cute and innocent, despite the wear and tear. My idea is that a cute toy can look even cuter if its a bit worn, since then it'll win the sympathy vote with the viewer because its not in the best condition. I want my cat to be a little forlorn looking... So I looked at plushies with obvious stitching flaws or patches to start with. The first being the C'mon Corsa mascots.


The Comfort fabric softener's mascots also show great stitching and different patches of cloth making up hair and faces, which I thought could be useful.I then remembered the Blue Nosed Bear and his friends all have patches and are usually a little sad looking or seem bewildered, making them look adorable. Their designs are typically traditional, but still very sweet and good for


And here are some other cartoon cat references that I found useful or liked the shapes of:

I especially like the glued on eyes for the Gatomon plushies above... mostly because they're large and have light spots which can be used to show where the character's looking, plus they're black with a white 'pupil' rather than the usual white with a black pupil. I can imagine my character having one big eye like that and one smaller one which is the opposite in colour... Perhaps because its original eye was lost somewhere and that was the only replacement its owner (or its owner's parent) could find.

Here are the rough ideas I sketched after looking at all my research:

My notes on what I thought of each idea are written on the page... hopefully they're readable if you click on the scan to enlarge it. I liked the bottom two best, but since I'm going for cute and pitiful, I didn't think the drawing on the right would be quite suitable on account of it looking rather sly and haughty... Plus as much as a love that curved, crescent moon shape while its laying down, I don't think it'd work standing on two legs. So in the end I decided to go with the left drawing which is much cuter and more rag-doll like, which is what I was aiming for. I incorporated the patches and different sized eyes from the references, and got the idea to tie a knot in its tail to make the tail look more like an old strip of cloth, and to make its whiskers bent. I'm quite pleased with the design and I like it a lot. Below is the refined version with some expression experiments to get an feel for how the character will react to things. I exaggerated the ears to make them much larger so the can be used along with the facial expression to convey emotion. Flat ears are a great way of showing sadness, and are perked up ears for surprise or fear.