Masking and Interactive Buttons

A really simple star mask I did to practise masking in class... I made it by creating two layers, the bottom layer containing the image and the top layer containing the motion-tweened star. I then selected the 'Mask' option in the top layer's Layer Properties to convert it into a mask layer. I selected the 'Masked' option for the bottom layer.



A week later we were taught how to make interative buttons, using the the previous masking experiment as an example. I didn't have the previous file with me at the time, so I quickly made a new mask using the same theory but with a different image. To create the button, I went to Insert > New Symbol, then chose the behaviour as a 'button'. I used the PolyStar tool to make the triangle 'Play' button, then changed the colour for each of the Up, Over, and Down states. In the Hit state I made a rectangle over the button to define the active area. I then dragged the button onto a separate layer in the scene.

Next I selected the button and opened the Actions window, then chose "On release", and "gotoAndPlay (1)" to make the mask play when the button is clicked. Finally I selected the final frame in the mask layer and added the "Stop" action in Timeline Control to make the movie stop at the end rather than loop back and repeat. This is my first time using any sort of Actionscript, so as simple as this is, I still found it rather confusing at first. But now I think I've got my head around it, and I look forward to learning more types of actions and implementing them in my own cycle animation.

Mood Board

Here's a photo of the concept/mood board I made for this project to help with my character design. I printed out my favourite elements of my research and tried to keep the 'cute but simple' style theme showing. Its stuck up on my wall as we speak; hopefully it will inspire me.

Further Research

During my search for anthropomorphic feline inspiration, I looked at many of the usual cartoon suspects such as Top Cat, Felix the Cat, and even Blaze the Cat and the other Sonic the Hedgehog characters, but they just felt too... traditionally cartoony. The Sonic characters are great examples of all kinda of creatures being given a human twist, but at the same time you can tell that they're supposed to be real animals (or at least 'real' in the sense of their world) rather than toy characters. They're also very detailed and stylised, which made me think that I might be better off looking at the Sonic plush toy merchandise rather than the official art, so I can observe how the designs have been simplified for the toys.
















The Sonic characters also gave me the idea of possibly having a plush human type character with animal characteristics rather than just a straight plush animal. I found an animation while scouting YouTube for references which is a good example of this, as both characters appear human but have animal ears and tails. I think its a nice idea, but I'm not sure its the most interesting character design choice... (Though it works well in the animation) I think I'll probably continue down the plushie cat path for now, but its a nice alternative to explore. But even if the character designs didn't prove to be as helpful as I initially thought, the style and feeling of the animation throughout more than make up for it.


"Draw With Me" by Mike Inel.

I love how sketchy and hand drawn this animation feels... even when the characters aren't moving, each frame is sketched slightly differently to give the illusion that they're never still which is something I feel I'd like to incorporate into my work... I also really like how empty the background is. He never really shows anything other than the characters and the glass wall, giving the impression that they're alone it the world, yet the empty background never actually feel empty... I suppose the colours and glowing light balls help that, though it makes me wonder if paper could create a similar feeling.

I also found a series of five short Flash animations created by Sambakza called "There She Is!!" which I found to be a great help. Not only do they demonstrate excellent timing to the music and lyrics of their chosen songs, but they're also cute, funny, and have a simplistic, cartoony style that works really well. Most of the characters and settings are shown in just black and white with only certain things coloured, like the green scarf the cat wears; and backgrounds such as the sky often look like a wash of blue water colour or crayon. I might consider using this kind of style in my own work later on, perhaps just colouring my cat's eyes or ears to make them stand out. I've posted the fifth (and last) video in the series as an example because I think it has the best animation of the five, as well as a nice example of a walk turning into a run near the beginning, and the cat tripping over at the top of the stairs which could be used as references.

Research and Ideas

When I heard that the five second animation project would include some sort of interaction with the viewer, I immediately thought of what the character's reaction would be to an outside presence invading their world, rather than just continuing with a different action as though they haven't noticed the click of the mouse. I love the idea of breaking the fourth wall and artists/authors meddling with their characters' well fare as they see fit, sometimes just for their own sheer amusement... I guess its my evil side, but the idea of a character's shock and confusion as they're suddenly controlled by an outside force always makes me smile. While I've always had this sort of idea in the back of my mind, I first thought of it properly in terms of an animator messing with his/her animation after seeing this student film by Don Hertzfeldt. Some of the content is a bit nasty and crude for my liking, but I still think the overall concept is clever and well done.



So I decided I wanted to cause something amusing to happen to my character by clicking it, most likely for them to trip and fall in a comical fashion, since the brief says the cycle should include a walk of some sort. In order to get the most out of the situation, I believe the character needs to have a cute design... after all, its not as fun to be mean to a mean-looking character. This lead me to think of toys and stuffed animals, since children play with and control the actions of their toys in much the same way that an animator controls the movements of his/her model or drawings, plus all plush toys are made to be as adorable as possible. I started with the stuffed animals on my bed at home as reference points; those being a bear, a leopard, and a dragon. I felt the dragon was too complicated to simplify into a nice design, and the bear (while ideal) just feels too normal, since bears are the most common plush toy... That left the leopard, which gave me the idea of a cat and how cats tend to paw windows when they want to get inside. I thought this could be a nice action to animate, as though the character has just realised there's an invisible wall (the screen/paper) blocking him/her from the unknown force meddling with his/her life. So I next did some research into how cats can be simplified and animated, which lead me to two animations in particular: the first being an advert for Felix cat food, depicting a cat fairly realistically. The second being a fun little animation called "Simon's Cat: Let Me In", which exaggerates the cat's antics and gives it human-like characteristics without making it appear human in design.





Watching these really made me like the cat idea, and I love how simple and effective the design for Simon's cat is. But at the same time, I want my plushie cat to be more human-like and run on two legs so it can trip, so I next I'm going to look at examples of anthropomorphic cats in animation.

Ball Bounce

A bouncing ball I made to test motion tween in Flash. I tried to add squash and stretch principles to the ball when it hit the sides of the frame to make it seem more realistic... but I think the timing's too slow for it to look convincing. Nevertheless, it was a useful experiment and I think I feel confident using shape tweens now.

Shape Tween

A simple shape tween we were shown how to do in class. I made a yellow fill square in keyframe , inserted another blank keyframe at frame 24 and made a green fill circle on the opposite side of the stage, then simple added a shape tween. I was surprised at how easy it was to do; Flash certainly seems to make some things a lot simpler. In a way I find it similar to Photoshop, so I'm hoping I'll pick it up fairly quickly.

My Walk Cycle

This is my version of the basic walk cycle which we were set for homework. I decided I wanted to try animating a full character rather than just a pair of legs, since I wanted to apply weight and timing to the walk. I wanted the walk to be happy and a little bouncy, so I chose a young girl character, keeping her as simple as possible so as not to over complicate things with clothes and hair. I used this page from the Animator's Survival Kit as a reference for the foot movements, arm swing arcs and for the rise and fall of the head/body:


I also tried to make the hair bounce up and down a little with the steps as shown above. While the timing's not perfect, I'm still quite pleased with the result as she seems to walk quite smoothly and the bounce in her step does show. I drew the frames on paper first, then scanned them and imported them into Flash to animate them, which is why the background looks so grainy. I also had to overlap the images to make the walk cycle (since I drew her moving across the paper rather than walking on spot), which is why the line of the paper edge appears half way through.

Basic Walk Cycle

In our first class we were given templates of the leg positions required to create a basic walk cycle and told to put them together in Flash so they walked across the screen. Above is the resulting animation. Other than lining up the feet correctly, all the work was already done for us, so this was basically na exercise to demonstrate basic animation using Flash's timeline. Our next task is to take this example and create our own version of a walk cycle, which I'm looking forward to trying out.

And so it begins...

For this module I shall be diving into the unknown and exploring the previously unexplored (for me, anyway) wonders of 2D animation in Flash. ...And when I say diving, I mean tentatively dipping in my toes first. But in all seriousness, I like the program and I think I'm going to enjoy working with it for this project. We have been set the task of creating a 5 second cyclic animation with an interactive element, which should include some kind of walk cycle.