art107 character

8/3/2019 Art107 Character

http://slidepdf.com/reader/full/art107-character 1/5

FEATURE



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.

ftp://ftp.futurenet.co.uk/pub/arts/zinio/ca107_character.zip



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.



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


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?

art107 character

Documents