SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 1
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 2
Contents
1. Reference list 3
2. Aim and objectives of the project 4
3. Target audience and profile characteristics 5
4. Summary of research and review studies 5
CHOW Hoi-suen’s 5
CHAN Ka-yin’s 15
LOO Kam-tong’s 24
Ng Wing-ting’s 30
5. Analysis of context and scope 36
6. Approach and sketches of creative design solution 37
CHOW Hoi-suen’s 37
CHAN Ka-yin’s 42
LOO Kam-tong’s 44
Ng Wing-ting’s 45
7. Work breakdown and implementation process 48
8. Work schedule 49
9. Details of technical approach 50
10 Man-power allocation 51
11. Team members’ profiles 52
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 3
Reference list CHOW Hoi-Suen - 馬瑟斯 (Mathers, Douglas.), (1994) .《我們的身體:腦》
- 布賴恩 (Bryan, Jenny.), (2002) .《透視腦的奧秘》
- 邦謝特里 (Benchetrit, Andre.), (2008) .《沒有大腦,會發生什麼事?》
- 曹恩受, (2004) .《大腦夢工廠》
- Barille, Albert, (1993).《指揮管制中樞:腦》
- Afwina, (2009). 2nd Hand Smoker, http://www.youtube.com/watch?v=9hHJpymPkh8.
CHAN Ka-yin - 지코(2009), “Oola Boola Show (Coyote vs. Sheep)”, http://www.youtube.com/watch?v=GYN67cmko7w
- Mark Simon (2003), Producing independent 2D character animation: making and selling a short film
- Sandro Corsaro & Clifford J. Parrott (2004), Hollywood 2D digital animation: the new Flash production
revolution
- Sandro Corsaro (2002), The Flash animator
- Maureen Furniss (2008), The animation bible: a practical guide to the art of animating, from flipbooks to
Flash
LOO Kam-tong - 陳文君, (2001).《到人體去旅行》
- 周孝民, (2003).《超級人腦》
NG Wing-ting - 布賴恩 (Bryan, Jenny.), (2002) .《透視腦的奧秘》
- Albert Barille,(1993).《人體大奇航》
- Mondo Media, (2007).《Happy Tree Friends - Sweet Ride》,
http://www.youtube.com/watch?v=MoBscGq6ajY
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 4
Aim and objective of the project Group aim
The general aim of the project is to interest the children to learn the biology. For our team, we would like
to produce an interesting, colorful, harmonious feature animation to stimulate the children’s motive of
learning biology.
First, what is interesting? We decide to put the supernatural story and pros to the animation, such as
using personification and miraculous experience. The key role will use his/her amazing experience to grab
the audience’s eyes. Also, the character has his/her unique skills or personality to overcome the
difficulties or finish the task.
Then, what is harmonious? That means the color schemes will not use much complementary color but
analogous.
Finally, what is feature animation? As we said, we will develop an interesting story, not only the
information of brain. We will give the information through the story, not teaching the audience directly.
Individual aim
Director:
Through writing up of the script and storyboard, director will develop a story which is suitable for our
target audience. Director should also concern about how to tell a story effectively, for instance, use of
metaphors, visual pun etc. Moreover, doing storyboard and animatic , director should lead group mates
understand the story flow clean, especially animation director, and ensure the timing is appropriate.
Art Director:
As we know, this animation is for young children, so I will pay more attention on the style and color of
characters, props and background. A good color tone in an animation could enhance the attraction of
audience a lot, so I will tell the story through using more different colors in analogous style, but,
complementary color is also considered if somewhere is in need. On the other hand, I will open my mind
to listen the opinions from my group mates anytime that I could integrate the overall visual style in this
animation.
Character designer:
Through sketching, concept art work, and color scheming, character designer will create the unique
character that is full of personality and characteristic. The character will match with the story, for instance,
if director want an old man who is greed, wicked. I would draw a malicious smile to him. Also, I would
listen to my group mates when they are giving comments.
Animator:
My aim is creating and helping to do an animated, lively and perfect movement of the animation by using
the principle of animation, such as squash and stretches, overlapping. I hope that I can use my experience
of 2D animation and flash skills to do my best on it. Surely, I must listen the comment of my group mates
and do the best together.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 5
Target audience and profile characteristics
Age: Hong Kong primary students (8 - 12 years old)
Who: students who like watching cartoon and animation in their leisure time
What do they like / what appeals to them: visual cartoon and animation (2D Flash)
What are the effective ways to communicate to them: telling the story with colorful pictures,
exaggerated motion, attractive sound and music.
Summary of research and review studies
CHOW Hoi-Suen Story and script
The video I have watched is ‘Anti Smoking Flash Animation’.
Study of existing works
In this video, there are many different kinds of scenes, locations and roles to present the main idea. For
example, there are lots of scenes telling a message of the outcome of smoking, which advocates smoking
ban. The target audience is for teenagers, especially for the school children since the clothes style in the
animation is school uniform and the character is a young girl.
Story elements
The animation is told through the first experience of the young girl, and also telling the story is told
through the song (background music).
Different genres (or kinds) of story appeal to the target audience
In order to tell the story well, the designer used a lot of exaggerated visual spots and motion, for example,
the arms and legs are full with body hair, the hurt by the hazardous substances.
Some narrative device
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 6
Overall art direction
In this animation, there are many different visual styles appealing to the target audience. At the beginning,
the pictures are in a quiet environment, everything is in a logical style. But in the middle of the story, the
Different visual styles appeal to the target audience
style changes, many colorful scenes and lovely characters appeal in the screen.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 7
There is a big contrast between the girl and the other characters. The girl is in a joyful mood; on the other
hand, the characters are in a worried mood.
In recent years, the graphic style is getting popular in animation; more and more animation has included
the graphic elements into the action films. For this animation, there are also some graphic movements
within the spots; it gives the whole animation a lighthearted atmosphere that it can increase attraction
for audience.
What are the existing visual styles that are popular
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 8
In the ordinary animations, they tell the story with simile and straight forward method. But, in this
animation, there is quite a breakthrough in storytelling, the designer tried to tell the story with the result
and consequence of smoking instead of only telling the bad effects of smoking. So that, it can have a
better infectious for audience.
Breakthrough
There are lots of different color schemes in this animation:
Color schemes
The main characters in this animation are using border lines to emphasize; many of them are thin line but
not regular width, all of the border lines are in black color. But not border lines are used in the
subordinate roles.
Borders
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 9
Details in backgrounds
washroom rainbow, hills grass, trees trees, sky trunk, grass teeth, tongue, throat
purple BG room, mirror roof, sky floor drape, chair bench, grass, trees
table-lamp, wall picture sick bed hospital bed dining table TV, sofa
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 10
Graveyard round-table forest, mountains, sky toilet cubicle
Key props
cigarettes mirror hair removal tape crown pearl string handkerchief lung
Characters
girl(main) boy(main) baby baby teacher dinosaur octopus rabbits hazardous
Character design
Character Who Proportions Profile Gestures Expressions
girl(main)
70%
Description: student, long hair
Personality: naughty
Taking cigarettes
No special
expressions
boy(main)
15%
Description: rich man, short hair
Personality: friendly
Standing in 34ft
Laughing
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 11
baby
2%
Description: baby, no hair
Personality: naive
Lie still
Relaxed
expressions
baby
7%
Description: little boy, short hair
Personality: foolish
Sit still
Foolish
expressions
teacher
0.5%
Description: teacher, long hair
Personality: serious
Stand Seriously
Serious
expressions
dinosaur
0.5%
Description: huge , sharp teeth
Personality: violent
Stand
violent roar
octopus
0.5%
Description: soft, wear a hat
Personality: joyful
Playing piano
Joyful expressions
rabbits
4%
Description: soft, no hair
Personality: joyful
Dancing
Joyful expressions
hazardous
0.5%
Description: hazardous, no hair
Personality: violent
Attacking
violent laughing
Animation style
This animation is like an educational video clip, there are lots of metaphor and exhortation in the video.
And the actions in this animation are like a leather-silhouette show.
What are the actions like
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 12
Transitions & Camera Movements
Pictures Transitions
Camera Movements
Black Image
/
/ Bird-view cam
/ Girl’s POV
Image White
/
Image Black
Zoom in
Cross dissolve in
/
Hills rise Left(A), Rainbow rise
Right(B)
/
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 13
/ Zoom in
Image rise from bottom
/
Background rise
/
Expand dissolve in
/
Rotation
/
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 14
Image white Image Zoom out & Zoom in
characters: go left;
Background: go right.
Pan cam
• No shadow
Technical effectiveness and efficiency
• Simple shape
• Straight line
• Plain color
• Real motion test
Need to do some tests
• Timing calculation
• Frame rate calculation
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 15
CHAN Ka-yin Story and script
“Coyote And Sheep” include a surprising and suspending story which can appeal to the target audience. In
traditional story, namely, “The Boy Who Cried Wolf”, the wolf eats sheep, no exception. However, in this
story, coyote finds it so difficult to eat sheep because of mother sheep. This story has no narrator and
dialogue, only the animation. Coyote tries so hard to catch the sheep but it failed. The story through the
experience of the main character to tell us what it is happening.
For the story elements, mother sheep is the key element. Because of mother sheep, coyote is afraid to
approach the flock of sheep. To result in, coyote uses the rope to catch sheep in far away instead of
hunting.
However, this story is lack of the narrative device. The story comes little void and not completive because
it is just repeating the simple idea – coyote is a loser. So, it will become boring when we watch the story
for a period because we can simply guess the story.
However, the doctor helps the story to be another climax. (The first climax is coyote frightened by mother
sheep.) The doctor is simply bring out the first aid kit, but gives surprise to audience. The can written
“surgery” and drawn a scalpel, audience may think it is a simply scalpel. However, the outcome is a crab.
Three repeated concepts are okay but it cannot show the coyote is pitiful.
Overall art direction
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 16
“Coyote And Sheep” has great visual style in its animation. It is good at using gradient color, drawing the
pros, scene environment by vector line. For instance, the desert and stones are colorful and detailed.
Moreover, “Coyote And Sheep” uses the popular visual style to draw its character and scene. It uses the
colorful and appropriated color schemes,
such as: sky blue as sky, green as grass, brown as coyote’s feather, white as cloud. Overall, the color
schemes used the warm and digital color to draw.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 17
This scene we can see it use thick borders for the stone, but no border for the cloud. And, the borders of
stone is not black, but the dark brown. The shadow of cloud is solid color but the stone is gradation color.
Also, the border of stone is not just regular width; it used the Flash pen tool to draw the border, so that it
is irregular shape and width.
In this scene, we can see the front ground’s stone has many detail. The shape, texture, color, shadows of
stone is pretty good. Also, the desert is included sand texture and gradient color. The shape of cloud is
special and cute, full of style.
This scene is the good one because it is included much detail and perspective angle. Also, we can see the
color of shadow not just one but also ten because it uses gradient color.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 18
For the character, they are not much detail and shadow. “Coyote And Sheep” concentrate to draw the
background and pros.
Character design “Coyote And Sheep” uses exaggerated facial expression, great contrast to develop its character. First,
coyote always feels afraid, angry, disappointed. Such facial expressions are exaggerated and coyote has
vivid characteristics. On the other hand, mother sheep and the flock of sheep is lack of facial expression. It
is a great contrast between coyote and sheep as well as distinguishing the winner and loser. Besides,
setting up the contrast of the figure of body also helps audience to distinguish the winner and loser.
Coyote
The main character, he has the nature of coyote but very timid. He is tricky but not clever. He has many
facial expression and gesture, also a vivid personality.
Expressions:
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 19
Gestures:
Sheep
The supporting role, they look like naïve but nimble, naughty and innocent. They like eat grass. They are
not the normal sheep because they do not afraid the coyote.
Expression:
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 20
Gestures:
Mother Sheep
The supporting role, the mother (Because mother takes care the kids) of the flock of sheep. She is very
strong and lack of facial expression. She always protests her kids.
Expression:
Gestures:
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 21
Doctor
The supporting role, he is a wild boar. He uses the insect as the tool of operation. He is lack of facial
expression and has great operation skills.
Expression:
Gestures:
Animation style Camera movement “Coyote And Sheep” used four types of camera movement.
7
00:13(9) Cam: Zoom
Out
Sheep mother
is protecting
her children.
32
01:14(1s) Cam: Zoom in
Rope’s POV
Sheep is
eating the
grass.
10
00:27(8s) Cam: Pans
right
Showing the
environment.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 22
35
01:18(1s) Cam: Tile down
The sheep
mother grabs
the rope.
Transitions “Coyote and Sheep” used little video transition. 66
02:44(2s) Trans: Dip to black
Action
“Coyote and Sheep” has many actions, such as jump, run, fly.
3
00:04(4s) Coyote hides himself
behind the stone and
keep watching the sheep.
5
00:09(1s) Coyote run out of stone
to sheep.
27
01:07(3s) Sheep jump and evade
the catching.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 23
39
01:24(2s) Coyote is pulled by sheep
mother.
Technical effectiveness “Coyote and Sheep” use swish FX (radiation line of comic)on some of the action scenes.
24
01:02(1s) Coyote try to rope again.
28
01:10(1s) A short animation as a
transition from right to
left.
32
01:14(1s) Cam: Zoom in
Rope’s POV
Sheep is eating the grass.
40
01:25(2s) Coyote is pulled by
sheep mother.
42
01:28(1s) Coyote fall.
43
01:29(4s) A short animation as a
transition from high to
low.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 24
44
01:33(3s) Coyote fall to the ground
and crash.
LOO Kam-tong
I have study one of Mr. Bean animation (Mr. Bean – Scary Movie) as my research and review studies. I
study this animation in four parts, including Story and script, overall art direction, Character design and
Animation style.
Story and script
The target audience of Mr. Bean animation is every generation and nationality. It is because Mr. Bean
animation will not have dialogue in most of time (pantomime). Moreover, the story is most likely to obtain
from normal life with exaggeration.
The story told through the experience of the main character. Moreover, the beginning of the story is coherent to the end (首尾呼應) to create a humor purpose. For instance, Mr. Bean teases the
saleswoman at the beginning. However, after Mr. Bean escape from the horror film cinema, the
saleswoman revenge Mr. Bean with the same action.
Beginning
Ending
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 25
The story elements are shown as following.
Location Street and cinema
Time Night
Character Mr. Bean, saleswoman, couple, elder,
monster, victim, Scientist, Assistant
Story flow Mr. Bean goes to cinema watch a
horror film and teases the
saleswoman.
Mr. Bean is scared by the film and
escaped from the cinema.
The saleswoman revenge Mr. Bean.
properties Popcorn, car, nail file, chewing gum,
money, ticket,
Background music, sound effect Car, nail file, monster and victim howl,
talk, laugh, popcorn, cat, machine, horror
film music, relaxed music
Video principles -Dynamic Tension
The conflict between Mr. Bean and the
saleswoman.
- Progression
The emotion of Mr. Bean(relaxed
scared angry)
Narrative device Mr Bean’s hand shake and collapse the
popcorn to show his scare.
Overall art direction Due to the story of Mr. Bean animation is humor and relaxed, the color tone is high brightness. Besides,
there is plane color, without shadow, character with thick black border.
In this animation, the art director used green as the color tone because this story is talking about Mr Bean
goes to watch a horror film. According to the traditional concept, green is suitable for a horror mood.
Moreover, the camera is shooting the moon at the beginning; this shot is also traditional horror style shot.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 26
In this animation, most of the backgrounds are inside the cinema and with a few details only.
Cinema Counter (1) Street
Inside cinema (1) screen Laboratory
Machine city Ground
Inside cinema (2) Counter (2)
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 27
Key props
Characters
car
Chewing
Nail file Money Ticket
Popcorn
Saleswoman
Mr. Bean Couple Elder
Monster Assistant
Scientist
Victim
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 28
Character design Characters Name Proportions Profile Gestures Expressions
Mr. Bean -Head : body 1:3 -slim leg -big nose and ear -short hair
-Main character -silly -timid -around 40 years old
-brows bends up -head bends up -eyelid drooping
-relaxed -tease -scared -angry
Saleswoman -Head : body 1:3 -fat -short hair
-A madam -have nothing to do -bored -black eyeglasses --around 40 years old
-eat chewing gum -using nail file
-bored -scared -tease
Elder -Head : body 1:3 -slim hand
-around 70years old -brave -greed -sanguine
-keeping handshake -shoulder shake
-relaxed
Couple Man: - Head : body 1:3 -slim Woman - Head : body 1:3 -fat
Man: -around 30years old -dead-pan Woman: -like dress up -timid -rely on her boyfriend -long and winding hair
Man: N/A Woman: -hug her boyfriend -using hand cover her eye
Man: -dead-pan Woman: -scared
Monster - Head : body 1:3 -huge -strong
-fierce -sharp tooth
N/A -fierce
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 29
Assistant - Head : body 1:3 -slim
-a lady -sexy -slender figure -long hair -around 20years old
-put the hand on waist -twist the waist
-scared
Scientist
- Head : body 1:3
-around 70years old -no hair -face with scar -crazy on science
N/A -shout
Victim - Head : body 1:3 -fat
-around 40years old -scared
N/A -scared -struggle
Animation Style Due to Mr. Bean is pantomime, therefore this animation applied exaggeration (one of the animation
principles) very much. In order to replace dialogue, the animation director exaggerates the actions of the
characters. For instance, when Mr. Bean is scared to the horror film, he hands shake and make the
popcorn throw away.
Moreover, the characters are expressiveness; therefore, the actor can tell the story effectively and show
their personality without dialogue.
According this animation is pantomime; there are a few transitions, camera movements and using linear
timeline to tell the story. I think it can avoid the confusion and misunderstanding for the audience.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 30
NG Wing-ting
The research part is very important because I can know the best way to communicate with children and
provide some complicated information. Also I can know that which animation style is suitable for them. In
this part, I find some relevant existing works to study, such as the website which is telling the working flow
of the brain to young children, the books about brain for young children and some animation for
reference.
I study these works by doing animation breakdown list and asset list, making analysis and summary of this
works.
Animation reference: Happy Tree Friends- Sweet Ride
Story and script
The story is talking about Cuddles was eating the ice-cream and played the skateboard at the same time.
Then the other character, Nutty also wants to eat that ice-cream so he pursued Cuddles by using
skateboard too. But Cuddles felt scary with his appearance so she not stopped it. Next, some obstructer
appeared on their journey. Nutty can’t avoid it so he got hurt and died. Cuddles also can’t avoid the other
obstructer, stair. So she also died at the end.
For our target audience, young children, the story of Happy Tree Friends is not suitable for them. It is
because the content of the story is very violence and bloody. It would affect the thought and concept of
them. They maybe imitate the dangerous act of the characters too. On the other hand, the kinds of
humorous or educated are more suitable for them in the childhood. The humorous animation can let
young children more concentrate and focus on the content of the animation. If the character is humorous,
young children will love it can concentrate on what the character said or did. Beside this, some educated
animation is useful for them to learn more effectively. It is because it provides much information within
the animation. But audience may feel that is boring. So the best way is combining humorous and educated
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 31
in the animation.
In the reference animation, it hasn’t narrator to tell the story. It told by the action or the facial expression
of the characters. For example, in scene 1, Cuddles touches the stomach and smile to the ice-cream. It
express that she is hungry now and want to eat the ice-cream. In scene 6, the eyes of Nutty show the
image of Cuddle’s ice-cream. It express that Nutty wants to eat that ice-cream. So the story can told
without narrator also the audience understand what is talking about. In addition, the experience of the
main character also can tell the story. In the other story of Happy Tree Friends, the appearance of Nutty is
also strange. So audiences know that Cuddles must feels scary of him in the story.
The elements of the story:
time Start at Cuddles bought the ice-cream location next to the forest character Cuddles and Nutty event Nutty chase Cuddles due to he wants to eat her
ice-cream
Overall art direction
In color of this animation is comfortable and soft. It has different visual styles appeal to the target
audience. Due to the story is a fancy story and not reality, the color also show this feeling. For example,
the tree is not only green and brown, it maybe purple and blue.
In this animation, it uses two different color schemes. For the background, it always uses green, pink and
purple tone to paint it. The background elements such as trees and flowers also use it. Also the colors
aren’t too bright or shine. It uses cool color scheme in the background.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 32
The hue of the color of the characters and the props are higher than the background, such as Nutty and
the trees also are green in color. But the hue is not the same. It can avoid losing focus of the audience. It
always uses warm color too. For example, Cuddles and the ice-cream paint by warm color.
In this picture, the cool color of the background can let the Cuddles more outstanding. Also the color of
the character is yellow which is a warm color.
Although the background is pink, the yellow character hold many space of this scene so the audience can
find the focus easily.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 33
In scene 8, the background is pink and the character and props is purple in color. It is very analogous color.
It is because the animation just want to show the shadow of the character. In addition, it hold half area of
the scene too.
In order to let the scene more clearly, the background elements such as trees haven’t borders. On the
other hand, the characters and the props have borders. The borders are thin. The color of the borders is
analogous of the characters and props.
This picture show that the hue of the borders color of the character and two skateboard are higher than
the image.
The background of the animation is simple and not too details. It just has trees and flowers to decorate. It
just uses the color to outline the shape of the trees. For the characters and the props, it just uses different
colors and borders to outline each part of it. So the visual of the animation is not too complicate.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 34
Character design
It has two characters in this animation which is Cuddles and Nutty. Cuddles is a rabbit which has long ears
and some feather between the ears. Her nose is heart shape and red in color. She is yellow in color. She
likes ice-cream and good at playing skateboard. She always smile when she feel happy. She will feel scary
when meet Nutty, so she will run away to avoid him.
Nutty is a squirrel which has a long and big tail and a heart shape nose. But his left eye has some problem,
so his appearance always let other animals feel scary. He is green in color. He likes something sweets so his
body always appears some sweets. Also he chases Cuddles for the ice-cream in the animation. But he is
not good at playing skateboard. He is a silly squirrel.
Animation style In this animation, the movement of the characters was made by flash. The movement used some principle
of animation, such as squash and stretch, overlap, etc. For example, when Cuddles jumps to avoid the
obstructer, it uses stretch. When she falls down, it uses squash. It can let the animation livelier.
This animation always locked the camera. It also uses track to show Cuddles playing the skateboard and
Nutty chase her. If the animation always uses locked camera, the audience will feel boring. An active
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 35
camera can let the animation livelier. For example, if the camera using tracks when the story is talking
about chase, the audience will feel that they also chase the characters to see what happen. Also the
animation uses point of view to show what Cuddles saw in scene 14.
About the technical effectiveness and efficiency of the animation, it can use “frame by frame”, “key frame”
and script. Using “frame by frame” to do animation can create a smooth movement. But it will increase
the file size of the flash because flash will save each frame. If using “key frame” to do animation, the file
size will not too large. Also it is easier to do in flash. If using script to do animation, the animator needs to
know how to use the script. If you want to make a perfect visual style animation, it should use frame by
frame. If want to ensure a efficient workflow, it should uses key frame to make the animation because it
can save time and has more time to improve or develop the animation movement.
In order to make a good movement of the animation, animator needs to make many line tests of the
movement until it is smooth and reality. It doesn’t need a pretty visual style in the test.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 36
Analysis of context and scope
To evaluate our resources, we have regular meeting and working time on each week. Also we already have
a project schedule to follow. For the manpower, two of our teammates also learn biology in the secondary
school. They have knowledge of the brain working. For the animation, two of our teammates also learn
and did 2d animation and they know that how to apply the principle of animation in the better ways.
Beside this, our team also learns and did 2D animation by flash in Multimedia fundamental. We know that
how to make a frame by frame and key frame animation in flash. Our teammate also did leader of the
previous project so we have a good leadership. On the other hand, our team is professional on Photoshop,
illustrator, and flash. When we make the animation, we can use our ability, such as Photoshop to make the
background more reality. The teammates who are make the 2D animation before; can focus on the
movement of the character more.
In addition, we can make the research by internet, library to find the reference of the children animation
and the books for young children. We can know more about the best way to communicate with young
children. For the reference of animation, we can make the scene breakdown and the asset list. We can
know that how to make a complete animation within one minute and it has education information and
not boring.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 37
Approach and sketches of creative design solution
CHOW Hoi-suen
Story
One day, Joe was watching TV at home alone at night, the programmer playing on TV was about brain. Joe
did not like this programmer, he changed to another channel. There was an extraterrestrial playing on
the TV, Joe was frightened and wanted to turn off the TV. At the same time, there was an odd light outside
the window and Joe was caught by the light.
Joe was in a coma, and woke up gradually. He found himself was tied, an extraterrestrial walked in front of
him and wanted to do an experiments about how the human brain operate. The extraterrestrial tested the
reaction of the Joe’s brain by touching his feet with a feather. And the extraterrestrial could understand
the operation of brain by watching the computer above him. As the same method, the extraterrestrial
tested the sense of touch, the vision and the hearing. Joe couldn’t bear the tests anymore; luckily, he
freed oneself from the tie and escaped quickly. At this moment, he saw a TV playing a programmer about
the housing; Joe jumped into the TV and escaped from the extraterrestrials successfully. But, there was
another nightmare, there was a cruel man in the house, he could watch out our mind by his magic
magnifying glass. Joe felt frightened very much, and all of his mind was seen by the cruel man’s magic
magnifying glass. The magic magnifying glass wanted to kill Joe with an electric saw. At this moment, Joe
discovered that there was a TV in the corner, he used his creativity and turned on the TV quickly, and then
jumped into the TV. Luckily, there was Joe’s home beyond the TV. Joe escaped successfully.
At this moment, the clock was 12 o’clock, the programmer of extraterrestrial is finish, everything was right.
Joe thought himself that “What an alarmingly dangerous adventure!”
Descriptions of character profiles
Joe:
He is a 10-year-old boy. He has a big eye and small nose and swarthy hair. But, his mother and father need
to work frequently, so Joe is often watching TV alone at home at night. Luckily, Joe is a vivacious and
adventurous boy. He believes that he could become an adventurer in the future.
Extraterrestrial:
He is interested in human’ brain a lot, so that he will do a lot of experiments about how the human brain
operates in his laboratory.
Saw man:
He is a cruel man, and he can invent some magic tools, for example, the magic magnifying glass, which
could watch out the mind of brain. But, he also likes killing livings with his electric saw, he is bloody very
much.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 38
Sketches
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 39
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 40
Mood board
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 41
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 42
CHAN Ka-yin
Story
Ellis looks at his favorite biologic book and shakes his head and sigh. He lies down on the bed and closes
his eye.
Suddenly, he wake up and is appeared in the strange and fantastic place. There are many blue glows light
circulating; some of the nodes appear the red glow light. Ellis feels so odd and do not know why he stay
here. Ellis get up and walks around, suddenly, a blue glow light behind him is approaching. Ellis feels so
afraid and runs. However, the blue light is very fast. Light is approaching Ellis and Ellis wants to escape so
he jumps.
Ellis lands on the blue light, he cannot control the speed and the strength, but he can ride the light! He do
not know what is it happening? So, he takes out his biologic book from his school bag, start reading the
book.
He learnt the blue light is the nerve pulse, which can carry him to the muscle, brain and the entire parts of
human. He feels so interesting. He thinks he like the biology through the venture is starting.
Descriptions of character profiles
Ellis, a ten year-old primary school student, hates reciting and learning the biologic knowledge. He does
not want to study the difficult knowledge such as the human body or how the brain is working. He is brave
but does not want to face the biology. He is full of curiosity but he thinks biology is too boring.
Sketches
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 43
Concept art work
Mood board
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 44
LOO Kam-tong
Story
At the beginning, the main character is doing exercise in the playground such as playing football, and can
see that he is very tired. After that, the background change to his house, he opens the door and walk in
the house. At the same time, an odor is filling the house. Then, we will see the cross-section of the
character, and it will show how the brain work (eg. the pulse and the cell). Using the highlight or different
color to show that which part of brain is responsible to the sense of smell.
After that, the view will change to the character’s POV, the camera will pan left and right, it is present the
character finding the food. When the food appear, we will see the cross-section of the character again, as
the same concept of the sense of smell, it will show how the brain work and which part of the brain is
responsible to the sense of sight. Moreover, the animation will also show the sense of taste and touch.
Sketches
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 45
Mood board
NG Wing-ting
Story
The animation will explain the working flow of the brain. It combined with humorous and educated. So it
will provide some information to young children. Also the animation is humorous at the same time to
balance the boring information. The story happens in the funfair. One day, two children, Ruby and Manson
went to funfair together. Their brain will shine when it is working. The animation will show the flow from
the fragrance of the food enter Manson’s nose to call the brain. Then the shining attracts a rat and the rat
start to chase them. Then Ruby also felt the sweet of the food. The flow of calling brain will be show too.
Next, Ruby and Mason also hear the music of the merry-go-round. And then, Ruby feels Manson grasp her
hands but it just the rat tail touch her hand. Finally, Ruby saw the rat stands on Manson’s body and she
felt very shocked.
Descriptions of character profiles
Ruby is an 8 years old girl. She has a big eyes, small nose and round face. Her mother always braids her
hair to two braids. She likes to wear pink dress. She always plays with Manson who is her neighborhood.
But she is very afraid of rat.
Manson is an 8 years old boy. He has a big eyes, small nose and round face too. He likes color blue and
makes people happy. He is also afraid of rat too.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 46
Sketches
Concept art work
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 47
Mood board
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 48
Work breakdown and implementation process
Detailed work breakdown Name Key Role Supporting Role
CHOW Hoi-suen Art director Director
CHAN Ka-yin Character designer Art director
LOO Kam-tong Director Animation director
NG Wing-ting Animation director Character designer
File sharing We try to share the information and data by the network of W-driver in campus, we put the information
into the files which called “Katgp3”, and so here is the Student ID for going into the shared files.
-
Blog and YouTube account
We will upload the assignment, important information and message into a blog frequently; here is the link
of blog: http://katgp3.blogspot.com. Moreover, we will put the animation or video into YouTube for
others watching. Here is the account of YouTube: [email protected].
CHOW Hoi-suen (09343546D)
CHAN Ka-yin (09178939D)
LOO Kam-tong (09098048D)
NG Wing-ting (09051258D)
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 49
Work schedule Project schedule WEEK DATE EVENT DETAIL
Week 0 4 June Tutorial 1 (1pm, P505) \
5 June 1st Meeting (2pm, P505) Proposal & Breakdown
Week 1 7 June 2nd Meeting (10am, P505) Proposal & work division
8 June Hand in “Breakdown” \
10 June 3rd Meeting (11am, P505) Brief conclusion of Proposal
11 June Hand in “Proposal” \
Week 2 14 June 4th Meeting (2pm, P505) 3 styles per person
16 June Hand in “Flash Exercise” \
17 June 5th Meeting (11am, P505) Preparation for Presentation
18 June Attend the meeting in Disney
Land(10:30-12:00am)
\
Week 3 21 June 6th Meeting (2pm, P505) Rehearsal for Presentation
22 June Tutorial 2 (2:30pm, P505)
Presentation(15 mins)
\
24 June 7th Meeting (11am, P505) Animation production
Week 4 28 June 8th Meeting (2pm, P505) Animation production
1 July 9th Meeting (11am, P505) Animation production
Week 5 5 July 10th Meeting (2pm, P505) Animation production
8 July 11th Meeting (11am, P505) Animation production
10 July 12th Meeting (11am, P505) Animation production
Week 6 12 July 13th Meeting (11am, P505) Animation production
14 July 14th Meeting (11am, P505) Preparation & Rehearsal for
Presentation
15-16 July Preparation \
Week 7 19-20 July 15th , 16th Meeting (11am, P505) Production for Final Report
21 July Final Report Submission \
Group work time Our group will work together in campus at least 3 times a week that it will take 10-12 hours per week.
Group meeting time Our group will have 2 meetings every week that it will take 4 hours per week.
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 50
Details of technical approach Software applications Software Applications
Pre-
Prod
uctio
n
Microsoft Word 2007 Documentation
Microsoft PowerPoint 2007 Presentation
Adobe Acrobat 9 Pro Extended Create PDF, platform compatibility
Adobe Illustrator CS4 &
Adobe Photoshop CS4 Extended
Overall concept art, color scheme, key
background/locations, key props, character visual outlook
Adobe Flash CS4 Professional Animatic, motion tests, timing
Prod
uctio
n
Microsoft Word 2007 Documentation
Adobe Acrobat 9 Pro Extended Create PDF, platform compatibility
Adobe Flash CS4 Professional Animation
GarageBand &
Adobe Premiere Pro CS4
Sound design
Adobe Illustrator CS4 &
Adobe Photoshop CS4 Extended
Backgrounds, props, character
Adm
in
Microsoft Word 2007 Documentation, Production scheduling, Secretary
Adobe Acrobat 9 Pro Extended Create PDF, platform compatibility
Resolutions/frame rate HD – 1280 X 720; 25fps
SD – 720 X 576; 25fps
File/image formats File/image Formats
Final animation .mov
Document .doc ; .docx ; .pdf
Presentation .ppt
Animatic .mov
Character design .ai ; .png ; .psd
Background music, sound effect Any audio formats (eg: .mid ; .mp3 ; .wav)
File naming conventions wk1(stands for week 1)_gp3(group3)_FullName_StudentID_content of entry
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 51
Man-power allocation Responsibility chart
LooK
amTo
ng
(Dire
ctor
) Ch
owH
oiSu
en
(Art
Dire
ctor
) Ch
anKa
Yin
(Cha
ract
er D
esig
ner)
N
gWin
gTin
g (A
nim
atio
n D
irect
or)
Pre-
pro
Story and script Storyboard ● ○ ○ ○
Animatic ● ○ ○ ◎
Art direction
Overall concept art ○ ● ○ ○
Color scheme ○ ● ○ ○
Key backgrounds/locations ○ ● ○ ○
Key props ○ ● ○ ○
Character design
Character profile (write up) ○ ○ ● ○
Character visual outlook ○ ◎ ● ○
Character gestures and expressions ○ ○ ● ◎
Animation style Different motion tests ○ ○ ○ ●
timing ○ ○ ○ ●
Sound design Music style ● ○ ○ ◎
Sound effect ● ○ ○ ◎
Prod
uctio
n
design
Backgrounds ◎ ● ◎ ◎
Props ◎ ● ◎ ◎
Characters ◎ ◎ ● ◎
animation character ◎ ◎ ◎ ●
props ◎ ◎ ◎ ●
Adm
in Production scheduling ● ◎ ◎ ◎
Secretary ◎ ◎ ◎ ◎
Consistency of documentations ◎ ● ◎ ◎
● Decision making
◎ Active participation
○ Advice
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 52
Team member’s profiles
-
CHOW Hoi-suen
Strengths:
Color, Graphic (background), Storytelling, Painting.
Roles I have taken up in previous projects:
Graphic design for background (SD2008)
Story (SD2007).
Electives I have taken:
3D animation (SD2031)
Calligraphy & Typography (SD2021)
Skills and knowledge:
I took Visual Art in HKCEE & HKALE.
I can use the software of Adobe Flash, Photoshop, Illustrator, and Maya; Information collecting
(SD2005), Motion design (SD2031).
CHAN Ka-yin
Strengths:
Photoshop, AE, character design, digital drawing
Roles I have taken up in previous projects:
Group Leader
Decision maker
Electives I have taken:
Digital video production
Photographic imagery
Skills and knowledge:
Experienced in Photoshop, Flash, Premiere, Indesign, After effect, Illustrator, Maya,
Microsoft Office, Corel Painter, Final Cut Pro, Character drawing
SD3026-Summer Project (2D Flash Animation) Group 3 CHOW Hoi-suen, CHAN Ka-yin, LOO Kam-tong, NG Wing-ting
Issued Date: 11 June, 2010| 53
NG Wing-ting
Strengths:
2D animation, storytelling
Roles I have taken up in previous projects:
Art director, director, animator and character designer (SD2014)
Animator, director (SD2008)
Electives I have taken:
SD2014 Computer Animation Fundamental
SD2019 User-Centered Design for WWW
Skills and knowledge:
Use the software of Adobe Flash, Photoshop, Illustrator, and Maya.
LOO Kam-tong
Strengths:
Animation, using Flash
Electives I have taken:
SD2014 - Computer Animation Fundamental
SD2028 - Sound, Music and Image
Roles I have taken up in previous projects:
In SD2008 – Multimedia Fundamental project, I mainly responsible to animation
In SD2014 - Computer Animation Fundamental, I mainly responsible to sound mixing
Skills and knowledge:
I have taken Biology in HKCEE and HKAL.