7/29/2019 137C2F2Dd01.pdf

1/4

76 Technique

Computer ArtsNovember 2008 www.computerarts.co.uk

Flash CS3 or later

Randomrealism inFlash

The Peskimoteamexplain how to create aliving, breathing world outof your creations byintroducing randomnessto even the simplestanimations

Animating in Flash isnt easy and, once youve set up

your scene and begun animating your main characters or otherfocus, you need to bring life to the background elements. This mayseem a daunting task: how do you animate the rustling of trees oravoid having cloned flowers that sway in unison? By using a simplepiece of ActionScript you can add randomness to your animationsthat can be tweaked to give either wildly different or subtly varyingresults. Its a great timesaving technique that has many usesbeyond those detailed in this tutorial. Here we deal with creating an

animated web banner. Whether youre a well-versed animator whowants to cut time and add realism to the backgrounds of your work,or you have less experience and want to learn how to make quickprogress in creating a simple web animation, this tutorial is ideal.

Youll find another Peskimo tutorial, focusing on character animation

in issue 117 ofComputer Arts Projects, on sale 6 November

Peskimo

The characterscreated by designduo David and Jodiehave so far beenmade into toys andanimations, andhave appeared onbillboards andclothing ranges. Findout more at www.peskimo.com.

On the disc

The files you need tocomplete thistutorial can be foundin Disc Contents\Resources\Flash

Time needed1 hour

Skills

Basic FlashanimationSimpleintroduction toActionScriptUsingActionScript inFlash torandomiseanimations andappearances

ART155.tut_flash 76ART155.tut_flash 76 2/10/08 18:08:322/10/08 18:08:32

7/29/2019 137C2F2Dd01.pdf

2/4

www.computerarts.co.uk Computer Arts November 2008

77

02 In Properties>DocumentProperties, set the movie dimensions to700x250 pixels with a frame rate of25fps. Although this tutorial deals withActionScript 2.0, the same principlescan be applied to ActionScript 3.0.

01 We begin with a sketch of thescene we will turn into an animated webbanner. The sketch i ncludes annotationsdictating where and what will beanimated (see Peskimo-banner-sketch.jpg on the CD).

05 Start with a tree. On anew layer, draw the trees trunk andbranches, before converting this toa MovieClip called Tree. Within this,draw a leaf and then convert thisinto another new MovieClip, namingit Leaf.

04 Begin by setting the scene. Ona new layer, use the drawing tools tocreate elements such as ground and s kythat wont be animated. As you createthem, right-click the shape and selectConvert to Symbol to convert them tonew, renamed MovieClips.

03 Scan in your sketch and placeit on the bottom layer of a new Flashdocument. Right-click the image andselect Convert to Symbol. Convert it to aMovieClip named Sketch. Now you canuse the properties panel to alter itsopacity/Alpha Channel to around 30%.

06 Within the Leaf MovieClip,convert the leaf to another MovieClip,named Leaf-var. Select the Leaf-varclip and, using the Free Transform tool,raise its centre point up to where itsstem would sprout from. This alters thepivot point of the MovieClip.

07 On Frame 1of Leaf, rotateLeaf-var to the leftroughly 20 degrees. AtFrame 20, insert a newkeyframe (press F6)and rotate Leaf-varthe same amount tothe right. Select theseFrames, right-click,and select CreateShape Tween.

ART155.tut_flash 77ART155.tut_flash 77 2/10/08 18:08:342/10/08 18:08:34

7/29/2019 137C2F2Dd01.pdf

3/4

78

Computer ArtsNovember 2008 www.computerarts.co.uk

12 In the Frame box we will addthe Random(deprecated) function. Thiscan be typed in or found in the librariesindex. For now, type (random(12)+2). TheRandom Code box on this page explainsthe Random code and the relevance ofthese numbers in more detail.

13 On Frame 42 add the ActiongotoAndPlay (2). This will ensure theplayhead loops the animation smoothly,and does not go back to Frame 1 andselect another random position. ClickCtrl+Enter to test the movie.

14 The leaves are now all a little different from oneanother but still move in unison. Play around with the numbersin the Random code to get an effect that is right for you. Youcould also rotate the leaves placed around th e tree a little toincrease the variety.

10 The leaves move nicely but of course no tree hassynchronised leaves. Go back to the Leaf MovieClip and selectall the animated Frames, 1-40. Drag them along one frame tothe right, copy and Paste In Place the contents of the newFrame 2 to the now empty Frame 1.

11 Create a layer named Actions.Insert keyframes at Frames 2 and 42.Select Frame 1, navigate to Actions>Global Functions>Timeline Control.Double-click Goto. Ensure Go To AndPlay is selected and type is set toFrame Number.

09 Select Frames 1-20 and copy and paste th em atFrame 21. Select the frames again and right-click and chooseReverse Frames to create a full animation of the leaf swayingfrom left to right . Now, back in the Tree MovieClip, copy the leafseveral times around the top of the tree and test the animation.

08 On the Properties panel, click the Edit button next to the Ease option. Thisbrings up an editable graph to alter the Ease of the animation. Set it up like the aboveimage so that it will ease both in and out of the animation.

The Random CodeThe Random(deprecated) code

used here will return a number based onthe figure you place in the brackets. Forexample, if you place random(3) the

number will be 0, 1 or 2. Thats why weoften add an additional set of bracketsand type (random(3)+1) to return 1, 2 or 3.If you want to avoid the first frame wherethe code may be, (random(3)+2) will return2, 3 or 4.

ART155.tut_flash 78ART155.tut_flash 78 2/10/08 18:08:362/10/08 18:08:36

7/29/2019 137C2F2Dd01.pdf

4/4

www.computerarts.co.uk Computer Arts November 2008

Technique 79

17 In exactly the s ame way, you can create aswaying flower. The animation is the same for eachflower but the Random function starts each at adifferent position. The flower designs could all be

totally different, so there is a lot of scope for varietyin the scene.

20 On a single keyframe at the end of each ofthese short animations, place the line of codegotoAndPlay(1). This will mean that once the shortanimation plays, the playhead will return to the startand randomly re-select a new segment to play. Thebunny is now an unpredictable character within theliving scene.

15 Return to the MovieClip named Leaf-var.Select frames 2-5 and hit F6 to create a series ofidentical keyframes. Alter each one very slightly incolour and size. As we are adding the Random codeto Frame 1, this will not be seen.

18 For the bunny character, we animatedsome short scenarios (50 frames), each occurring onthe same timeline one after the other. We alsoincluded a couple of long periods (80 frames) where

not much happens. We also created a separateMovieClip for its eyes so that they blink randomly.

16 On a new actions layer, add a keyframe atFrame 2, and on Frame 1 add the ActionScriptgotoAndStop((random(4)+2)). This will send theplayhead to one of the leaf variants you just createdand keep it there for the duration of the animation.

19 There are five different animatedsegments. Insert six blank frames at the start to addthe code. Frame 1 will include the Random codegotoAndStop((random(5)+2)). Frames 2-6 will eachdirect the playhead to a different animated sectionby referencing the appropriate frame number or aframe label in a Goto action.

PeskimoA showcase of thecharacter design duosfinest moments

VisualCVInpictures:agu

ideto

thecareerandworkof

our Techniquewriters

The Bends 2008

This self-initiated illustration was inspired

by a diver that the Peskimo team saw on

TV. It was an opportunity to try working a

textured look into character illustration.

World Playground 2007

Described by Peskimo as the ultimate

playground, this illustration was created

for a large 48-sheet billboard Vodafone ad,

so lots of detail was essential.

Numerical Monster

Forest 2008

Created for Poketos

limited edition

exhibition, this

piece was produced

as a limited

letterpress print.

Monster Burp

2007

Peskimos

first step on

the ladder to

Gocco screen

print addiction.

BambooZoo

2007/8

When faced with

the task of

designing this

host of

creatures, the

possibilities were endless. The

figures accessories proved to be the most

fun part of the project.

ART155 tut flash 79 2/10/08 18:08:37