Art107 Character
-
Upload
yonggeun-kim -
Category
Documents
-
view
217 -
download
0
Transcript of Art107 Character
8/3/2019 Art107 Character
http://slidepdf.com/reader/full/art107-character 1/5
FEATURE
8/3/2019 Art107 Character
http://slidepdf.com/reader/full/art107-character 2/5
FEATURE
BETTER CHARACTERS
FLASH MX
March 2005 | 41
The Pocket Laboratories team, the brains behind the brilliant morejamsandwiches.com, explains how best to adaptyourFlashknowledge to master character animation, and draw attention to your work on the web
Ë There’s a huge emphasis on
interactivity across the internet these
days. Eye-catching, distinctive, interactive
characters can be a valuable addition to any
website. So if you are looking for anentertaining interruption to your day-job,
some odd little web characters might just be
the perfect distraction. Whether they exist
in an interactive animation or an addictive
little game, first-rate character-based
websites gain cult and mainstream
followings on the net and are a great way to
draw attention to your web design work.
The secret to creating a successful
interactive web character lies in the balance between fun and reality. No matter how
insane or unreal your character becomes,
you will reach a greater level of popularity
if you add perfect mannerisms to bring that
character to life, to build on the relationship
between your character and the user.
Interactive character-based sites can
entertain and educate, there’s an open
opportunity to charm children and adults
alike. Characters can be produced in an
endless array of styles and, if created skilfully, add a magic element to a website,
be it corporate, conventional or contemporary.
This tutorial will teach you how to adapt
your Flash knowledge to master character
animation. Step-by-step you will learn how
to take a character idea through the process
of design, artwork, animation and
interactivity, essentially bringing your
character to life. The final product will be a
fresh and interesting animated character withwhich the user can interact fully and directly.
Illustration and tutorial by Pocket Laboratories
www.pocketlaboratories.com
DOWNLOAD
TIME LENGTH
2 hours
INFO
PocketLaboratoriesis a London-based
company that producesdesign, animation andillustration to bring afresh, fun andprogressive outlook tothe new media, print andtelevision industries. Visitwww.pocketlaboratories.com to find out more.
1 Start by developing your character using some good old pen and paper. This may seem oldfashioned, but it is important that your character is likeable and this preparation will help to
give your character the originality it needs to stand out from the rest.
2 There are some important basics to bearin mind when designing your character.
It’ll need an appealing body-shape, clear andsimple arms and legs, and a characteristic
yet simple face (whether it’s cute, dark oroutrageous). As soon as you start to animatethe face and limbs you will be thankful theywere kept simple.
3 When developing your character in Flash,ensure you keep each element on a
separate layer right from the start. This willmake the animation process much easier.Generally, you should use a new layer for thebody, each leg, each arm, the head and thendifferent layers for the eyes and mouth, too.
8/3/2019 Art107 Character
http://slidepdf.com/reader/full/art107-character 3/5
FEATURE
FLASH MX
7 Turn all the character elements (legs,arms, eyes, head and tongue) into
graphic symbols. This will allow you toanimate each element separately. Drag-select the entire character, turn it into amovie clip, and name it “Dancing Man”.
8 Duplicate the Dancing Man movie clip fivetimes and name the clips Don’t Touch
Man, Crying Man, Chewing Man, Run to ShopMan and Listening Man. These movie clipswill each be made into separate animatedsequences. Place an actions layer and alabels layer at the top of each movie clip.
9Within each movie clip the animation willtake place within the head while the
arms and legs stay still. Go into each of thesix movie clips and duplicate the head,renaming it accordingly (Dancing Head, Don’tTouch Head, Chewing Head etc).
6 There are several movieclips of the sandwich,
each with a different set ofactions depending on whatthe character is doing. Forexample, the sandwich thecharacter holds while dancingis a different movie clip to thesandwich the user drags
around the screen while theyinteract with the website.
42 | March 2005
5 A simple background can add so much to your scene and create a sense of space anddepth within your web creation. When colouring the background, props and character
bright colours are generally best, but it pays to steer slightly away from the primary colourpalette for a fresher appearance.
If you need someinspiration whendesigning your newcharacter, take a lookat other webcharacters, comic bookcharacters andanimated characterson TV. Concentrate onwhat makes themlikeable and appealing.Is it the body shape,colour or facial details?www.pictoplasma.comis a priceless resource.The company publishes
books based on freshcharacter design andalso holds internationalconferences on thecharacter animation.
INSPIRATION
4 Uncomplicated and understandable interactive props are always effective. For this tutorialthe prop will be a jam sandwich. The user will be able to interact with the character and
jam sandwich individually and then make them interact with each other.
8/3/2019 Art107 Character
http://slidepdf.com/reader/full/art107-character 4/5
12
Crying Man.To achieve a
more natural reaction,animate a transitionsequence to go fromunhappy to crying, tolooking unhappy again.The crying sequenceshould be a three to fiveframe loop that willrepeat continuouslyuntil another actiontakes place.
13 Chewing Man. Use frame-by-frameanimation to create a more realistic
movement than you could achieve withtweening alone. Use the Onion-skinning toolto double check you have created the correctmovement from one frame to the next.
14 Run to Shop Man. Now that he haseaten his sandwich your character will
need another one. In the “run to shop”sequence use clouds of dust, movement lines,and alpha transparencies of the character tocreate the illusion of fast movement.
15 Listening Man. In this movie clip theuser interacts with the character
directly rather than involving the sandwich.Create a short transition sequence where helifts his headphones followed by an animatedloop of him dancing. Finish off by making himput his headphones back on.
FEATURE
March 2005 | 43
16 Add small characteristic touches suchas blinking and lip licking to bring your
sandwich man to life. Placing animatedelements within the scenery will also addinterest. Try animating the clouds, switchingstreet lights on and off or maybe even addingbackground characters.
10 Dancing Man.This character will
need to loop, so it isimportant that the firstand last frames areexactly the same. Thinkthrough how it shouldmove, taking into accountits size and shape. Now
Motion Tween theseparate body parts inorder to obtain the rightdancing movement.
11 Don’t Touch Man.Now animate a
sequence where thecharacter changes froma happy expression to an
unhappy expression andback again. Try playingaround with differentfacial expressions,mouth and eye shapes aswell as the character’sgeneral posture.
17 Create a new movie clip named“sandwichMan”. Drag all six movie
clips from the library onto the timeline inorder and make sure that each movie clip is
ten frames long. You will need to align all ofthe characters so that they are placed inexactly the same position on the stage.
Plan how yourcharacter is going tomove before startingyour animation and besure how it will interactbefore you startscripting. Keep yourlibrary tidy while you
work by placing all ofthe symbols you createinto folders withrelevant names. Thiswill save time whenyou try to find themagain later.
BEFORE YOU START
8/3/2019 Art107 Character
http://slidepdf.com/reader/full/art107-character 5/544 | April 2004
FLASH MX
22 For varied interactivity you will need aseries of actions attached to each of
the sandwich’s instances. For example, thesandwich has to know what happens whenthe user rolls over, rolls out, presses, startsdragging and stops dragging or collides with
another movie clip.
19Drag the sandwich symbol from thelibrary and make it into a movie clip
called “draggingSandwich”. Place an invisiblebutton on a separate layer. This will containthe action script that will allow the user todrag the sandwich around the screen andinteract with the character.
24 Add speech bubbles to help the userinteract with the characters. When
you take the sandwich, a speech bubbleshould say, “I want my sandwich”, promptingthe user to give it back. The speech bubbleshould be a movie clip that plays as soon asthe character starts to cry.
25 Once the sandwich man has started
to interact with his sandwich, try tointroduce some props of your own. Add othercharacters to the scene and make use of hisother body parts. You could also put intopractice the skills you have learned whilecreating character-based games.
23 The actions for the sandwich have acollision test, which allows you to test
if the sandwich has been released in themouth or hand. Both the mouth and hand willneed a hit area to detect the collision. Thesehit areas are created from invisible buttonsconverted into movie clips.
18 Select the labels layer and place a label at the first frame of each clip. Place a “stop()”action in the same frame on the actions layer. Give each movie clip sequence a relevant
instance name – if the movie clip name is Dancing Man call the instance name “dancingMan”.
FEATURE
20 Most of the sandwich man’s actions
will be contained within an invisiblebutton. To create this, draw a white squareand convert it into a graphic symbol called“White Square”. Transform this into a Buttonsymbol called “Invisible Button” and place thesquare in the hit state only.
44 | March 2005
21 To make the character lift hisheadphones when rolled over, drag an
instance of the invisible button onto a newlayer in the sandwich man timeline. Addactions telling it to go to the “listeningMan”label when the users rolls over it and back tothe “dancingMan” label when they roll out.
It’s worth taking sometime to add //comments
throughout youraction script. Yourscripting may makeperfect sense to youwhen you are writing it,but come back to thesame script a fewweeks later and youmay end up spendingtime trying tounderstand why onearth you wrote it that
way. Making commentswill save you time andmake your file mucheasier for someoneelse to understand.
YOU SAID WHAT?