2D Flash Animation

In the beginning of this unit, the tutor introduced us to Flash and how you can use different  animation tweens such as classic and motion to create smoother animation in less time. We all had to try and animate a bouncing ball using techniques like the easing effect and altering the size of the ball in the motion/classic tween that we used to help the ball look more like it’s actually bouncing rather than moving up and down. There were tutorials there to help us find solutions to make our animations.

Tweens in Animation

Bouncing Ball animation

My first animation involving the bouncing ball wasn’t my favourite task to complete. It doesn’t look like how a ball should bounce. I used the motion tween to make the bouncing sequence without needing to use a large amount of keyframes to animate the whole sequence a lot longer. I used the newer version of flash than the one used in the tutorials we had watched so I had trouble with finding the easing effect options and changing them to get the results that I wanted to give to my animation. The purpose of the easing effect was to slow some parts of the animation at some points, but I only managed to slow it down near the end. I would like to learn more about Flash and how to use some of the functions I have no clue how to use.

Walk cycle

Walk Cycle animation
My first walk cycle animation

In flash, I drew and animated this walk cycle using a walk cycle sheet as an reference. There was no tracing involved in creating this walk animation. I didn’t like how fast the movement of the stick figure looked when walking. If I look at other people walking and look back at my animation, I can easily notice just how fast-paced and sloppy my animation appears before my eyes.

Medium Shot Walking animation
An attempt at Medium shot walk animation

Out of my own extra free time I decided to try the walk cycle animation again, but this time I did it at a medium shot so that I could focus more on the top of the character and try to make them move more realistically as opposed to my original walk animation. I had no reference for this second animation. I animated this by the same technique as cel animation. I drew and traced over my drawings in flash using the onion skin button that allows you to trace over your previous drawings. It was hard for me to keep the drawing proportions equal in flash when in each frame, some of the lines get wonky from using a mouse/trackpad to draw.

Facial Expression

For more animation variety and practice, we each had practice animating different facial expressions for when we make animations in the future and any animated characters. I made different expression, changing from one to another just by hand drawing each frame instead of using different symbols and layers which seems to complicated for me to follow as a method.


Bone tool experiment

For an experiment, we had tried to practice animating with a new technique that not many people are familiar with when using flash. With the bone tool it was much quicker to animate movements for my character in these animations, but from time to time, I would with creating symbols and/or layers for each body part when using the bone tool to animate. Even when I do complete what I needed to do for this to work. Sometimes with using this technique I can cause mistakes/glitches from one of my videos down below. Even though, I did like the fluent movement as a result of the bone tool enabling me to move the body parts of my character in a frame to create movement much quicker. But sometimes I can mess up the presentation of my animation.



S.M.A.R.T. targets

  1. Aim: By the end of the session today, I want to have completed the character morph.

– Remember how to shape tween a shape

– I want to be able to reach the point where the character is back home. (yallery brown storyline)


My Yallery Brown Animation

This is my final animation that I had been spending over a month, adding and deleting parts from time to time and despite finishing the animation in a rush, I still the  constant need to to make more changes to my final animation. After the public viewing my animation to the audience, I had gotten positive on my style of art and animation from some of the audience, regarding the monochrome colours and minimal background.


Unit 02 Character and Concept development

The tutor gave us two stories to choose from for an animation that we need to create based around that story or interpreting that story in our own image that we would like. We had to choose ‘Yallery Brown’ or ‘The Magic Paintbrush’. I selected ‘Yallery Brown’ to base the animation around.

Down below is my poor attempt at creating a storyboard for the sequence of animation for how I may want my animated short to turn out. The point of the storyboard was for me to visualise my ideas for the layout of the animation before I can even think of finishing the final product. I had trouble with sticking with the right idea of how I wanted my animation to look, but I was quite fickle when it came to sticking with a concept that I was 100% satisfied. It’ll take some effort and time for me to accept an idea that I think will work.

My storyboard
yallery brown storyboard 1
page 1 of my new storyboard
yallery brown storyboard 2
page 2 of my new storyboard

Originally, I wanted my animation to be in colour, but when I saw how long it would take to colour and animate at least a minute or longer. So I thought that changing it to black and white would be much easier for me to colour in and animate. I wanted my animation to include music instead of voices for it to be like an animated silent film. Of course I will select music depending on the type emotion or atmosphere that I want to portray in the animation or at least try.

Character concept

Concept design of main character (Tom)

This was one of my first doodles of what I wanted the main character to look like for the animation. I wanted to design the character in a way that seemed modern, but casual. Soon, I didn’t like how I made the character resemble a child, considering the character is a teenager from the version that I had been told.

2nd design

With my second design I made, I avoided making Tom appear younger than he should be which I was happy with. I also decided to give him a plain shirt with a collar, still keeping the same image I intended to keep for the character. I did have an idea that Tom had gotten a eye scar from fighting off a beast a while ago, but that was just my own concept for the character to have.


In this idea that I had an idea for the character in an urban setting to have been trained to fight and defend himself by his father when he was younger. I tried to give a new, unique look for the main character. I wanted to give him a mini back-story, but I’m unsure whether that’s important for the main story.


This design was inspired by my three previous designs that I had designed for Tom. I decided that he would have a shirt and hoodie to wear which I thought would be simple enough to animate and draw as I wouldn’t want to animate details include clothing folds and wrinkles. That would be irritating and time-consuming for me to do.

Earlier concept art of the main character

This was one of the earliest concept designs that I had for the main character which started off as a doodle in the scraps. The art style I used for this concept art was inspired by a shooting games and the Ray man games I played in my childhood. This style may the simplest form for me animate in my final animation, but I want to have characters to have limbs for my animation. This was the original style I wanted to in the animation for the sheer simplicity.

My character running cycle

I had made a running cycle animation with the main character (Tom) from ‘Yallery Brown’. We had to create an animation of the character. Since I found it difficult to fit in detail and animate at the same time, I started off in steps in drawings the frames on A3 paper and adding details of the character along the way.

My character walk cycle sheet plan

With Flash I had made a quick running flash animation with the main character.

I still have made it too sloppy. The details aren’t brilliant for something that was made on Flash since I wanted to make it simplified for this animation. Originally we were meant to do it detail and colour, but being new to digital programs such as Photoshop and illustrator, I found it irritating to put in detail to animate as well as a running sequence. I have been told about how to sketchy style I have used can be adapted into my final animation.

I also thought it would be a good idea to practice some lip-synching for the main character as I have never really had any experience with animating mouth movement in the past before. I thought it was a lot more fluent in comparison to my previous animations I had done in terms of improvement which I am proud of. I do hope to improve the animation process that I use so that I can have more fluent animations in the future. I had generally gotten comments on how I should try to experiment with different techniques to achieve the same result.

My Unfinished Animation for Yallery Brown

We had showed our animation to our partner and we had a look at what we did well and what we could improve on in the future to do better. I was told by my partner how I managed to make the characters meet and briefly interact along with the soundtrack I had provided for my animation. I had been told that I could add more speech, either by speech bubbles or audio. I understand that putting speech and show the interaction between the characters and show off more of the personalities of the characters in cartoon and stories. I think that it would be helpful for the animation to have dialogue to show character development between Yallery and Tom.

Unit 53 2D Animation Production


What is animation?

Animation is a process where you create a series of images and create a rapid sequence images in order to create an illusion form of movement. This is a process which generally takes time and effort to finish, specially when you need it to look presentable as well as getting it finished. This isn’t a subject that I would have lots of experience of, but I have recently learned about animation and many ways of creating them.

Different types of animation

There are a variety of animation techniques, even techniques that I have been ignorant about until I’ve learned about the different forms of animation that have been used before. I had very little to no knowledge of the techniques of animation and how it began to begin with. I had learned more about animation along the way. There are many forms and mediums of animation used among animators throughout the years as well as the past.

Examples of animations

These are only a few examples of animation used by animators, meaning that there are more than techniques than most people would have known about.

The basic concept of cel animation

Cel animation is a technique of 2D animation done using sheets of celluloid paper, pens, pencils and a camera to draw images and drawing over them whilst taking pictures of them. Animators, with this technique, would generally use translucent paper to be able to trace over the previous images. As this process is going, a camera is used to snapshot each picture in the chronological order that they were created in. All the frames are put in a sequence to create an illusion of movement.

Just a hunch of how the process goes

Rotoscoping involves tracing photos from live action to make frames to animate. This is similar to traditional animation. A projector is needed display photos onto a canvas or a sheet of paper for the animator to trace over the image.

Quite an extraordinary animation technique

There are many different forms of animation that work similarly, but have a unique factor like sand animation. This process is fairly similar to cel animation, except that it only requires grains of sand and a flat surface. Creating frames would be done by using the sand and taking a picture. The process is done the same way for the illusion movement as well.

History of Animation

Animation was existed for as long as humanity had been around. There had been all different forms of animation in the world throughout time that different animators had used during that time. As time processed, so had the technology and tools needed to create animations. We find newer ways of animating, quality and process.

1831- Both men, Dr. Joseph Antoine Plateau  and Dr. Simon Rittrer created a machine they called a phenakitstoscope. This machine made a form of movement by letting a person look at a rotating disk with small windows; there was another disk of images behind the windows. When the disks were spinning at the right amount of speed, the synchronization of the windows with the images created an animated effect.

An animation sequence of a dance couple (how splendid!)

1889- Thomas Edison invented a kinetoscope, which was able to project 50ft of film in about 13 seconds.

The device made by the man himself.

1906- J. Stuart Blackton made the first animated film called “Humorous phases of funny faces.” He made this by drawing comical faces on a blackboard and film them. He would stop the film, erase one face to draw another, and then film the newly drawn face. The stop-motion provided a starting effect as the facial expressions changed before the any viewer’s eyes.

1910- Emile Cohl makes En Route the first paper cutout animation. This technique saves time by not having to redraw each cell, but only  needing to change the position of the paper.

En Route screenshot

1914- Earl Hurd first used the technique of drawing the animated portion of an animation on a  celluloid sheet of paper and later photographing it with its matching background which is known today as cel animation.