76

Technique

Flash CS3 or later

Random realism in Flash

The Peskimo team explain how to create a living, breathing world out of your creations by introducing randomness to even the simplest animations
Animating in Flash isnt easy and, once youve set up your scene and begun animating your main characters or other focus, you need to bring life to the background elements. This may seem a daunting task: how do you animate the rustling of trees or avoid having cloned owers that sway in unison? By using a simple piece of ActionScript you can add randomness to your animations that can be tweaked to give either wildly different or subtly varying results. Its a great timesaving technique that has many uses beyond those detailed in this tutorial. Here we deal with creating an animated web banner. Whether youre a well-versed animator who wants to cut time and add realism to the backgrounds of your work, or you have less experience and want to learn how to make quick progress in creating a simple web animation, this tutorial is ideal. Youll nd another Peskimo tutorial, focusing on character animation in issue 117 of Computer Arts Projects, on sale 6 November

Peskimo The characters created by design duo David and Jodie have so far been made into toys and animations, and have appeared on billboards and clothing ranges. Find out more at www. peskimo.com.

On the disc The les you need to complete this tutorial can be found in Disc Contents\ Resources\Flash Time needed 1 hour

Skills Basic Flash animation Simple introduction to ActionScript Using ActionScript in Flash to randomise animations and appearances

Computer Arts November 2008

www.computerarts.co.uk

ART155.tut_flash 76

2/10/08 18:08:32

77

We begin with a sketch of the scene we will turn into an animated web banner. The sketch includes annotations dictating where and what will be animated (see Peskimo-banner-sketch. jpg on the CD).

01

In Properties>Document Properties, set the movie dimensions to 700x250 pixels with a frame rate of 25fps. Although this tutorial deals with ActionScript 2.0, the same principles can be applied to ActionScript 3.0.

02

03

Scan in your sketch and place it on the bottom layer of a new Flash document. Right-click the image and select Convert to Symbol. Convert it to a MovieClip named Sketch. Now you can use the properties panel to alter its opacity/Alpha Channel to around 30%.

04

Begin by setting the scene. On a new layer, use the drawing tools to create elements such as ground and sky that wont be animated. As you create them, right-click the shape and select Convert to Symbol to convert them to new, renamed MovieClips.

05

Start with a tree. On a new layer, draw the trees trunk and branches, before converting this to a MovieClip called Tree. Within this, draw a leaf and then convert this into another new MovieClip, naming it Leaf.

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

06

07

On Frame 1 of Leaf, rotate Leaf-var to the left roughly 20 degrees. At Frame 20, insert a new keyframe (press F6) and rotate Leaf-var the same amount to the right. Select these Frames, right-click, and select Create Shape Tween.

www.computerarts.co.uk

Computer Arts November 2008

ART155.tut_flash 77

2/10/08 18:08:34

78

09
On the Properties panel, click the Edit button next to the Ease option. This brings up an editable graph to alter the Ease of the animation. Set it up like the above image so that it will ease both in and out of the animation.

08

Select Frames 1-20 and copy and paste them at Frame 21. Select the frames again and right-click and choose Reverse Frames to create a full animation of the leaf swaying from left to right. Now, back in the Tree MovieClip, copy the leaf several times around the top of the tree and test the animation.

10

The leaves move nicely but of course no tree has synchronised leaves. Go back to the Leaf MovieClip and select all the animated Frames, 1-40. Drag them along one frame to the right, copy and Paste In Place the contents of the new Frame 2 to the now empty Frame 1.

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 And Play is selected and type is set to Frame Number.

11

In the Frame box we will add the Random(deprecated) function. This can be typed in or found in the libraries index. For now, type (random(12)+2). The Random Code box on this page explains the Random code and the relevance of these numbers in more detail.

12

The Random Code

The Random(deprecated) code used here will return a number based on the gure you place in the brackets. For example, if you place random(3) the number will be 0, 1 or 2. Thats why we often add an additional set of brackets and type (random(3)+1) to return 1, 2 or 3. If you want to avoid the rst frame where the code may be, (random(3)+2) will return 2, 3 or 4.

13

On Frame 42 add the Action gotoAndPlay (2). This will ensure the playhead loops the animation smoothly, and does not go back to Frame 1 and select another random position. Click Ctrl+Enter to test the movie.

14

The leaves are now all a little different from one another but still move in unison. Play around with the numbers in the Random code to get an effect that is right for you. You could also rotate the leaves placed around the tree a little to increase the variety.

Computer Arts November 2008

www.computerarts.co.uk

ART155.tut_flash 78

2/10/08 18:08:36

Technique

79

CV Visualguide to

In pictures: a rk of the career and wo rs r Technique write ou

Peskimo
15
Return to the MovieClip named Leaf-var. Select frames 2-5 and hit F6 to create a series of identical keyframes. Alter each one very slightly in colour and size. As we are adding the Random code to Frame 1, this will not be seen. On a new actions layer, add a keyframe at Frame 2, and on Frame 1 add the ActionScript gotoAndStop((random(4)+2)). This will send the playhead to one of the leaf variants you just created and keep it there for the duration of the animation.

16

A showcase of the character design duos nest moments

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.

17

In exactly the same way, you can create a swaying ower. The animation is the same for each ower but the Random function starts each at a different position. The ower designs could all be totally different, so there is a lot of scope for variety in the scene.

18

For the bunny character, we animated some short scenarios (50 frames), each occurring on the same timeline one after the other. We also included a couple of long periods (80 frames) where not much happens. We also created a separate MovieClip for its eyes so that they blink randomly.

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. BambooZoo 2007/8 When faced with the task of designing this host of creatures, the possibilities were endless. The gures accessories proved to be the most fun part of the project. Numerical Monster Forest 2008 Created for Poketos limited edition exhibition, this piece was produced as a limited letterpress print. Monster Burp 2007 Peskimos rst step on the ladder to Gocco screen print addiction.

20 19
There are ve different animated segments. Insert six blank frames at the start to add the code. Frame 1 will include the Random code gotoAndStop((random(5)+2)). Frames 2-6 will each direct the playhead to a different animated section by referencing the appropriate frame number or a frame label in a Goto action.

On a single keyframe at the end of each of these short animations, place the line of code gotoAndPlay(1). This will mean that once the short animation plays, the playhead will return to the start and randomly re-select a new segment to play. The bunny is now an unpredictable character within the living scene.

www.computerarts.co.uk

Computer Arts November 2008

ART155.tut_flash 79

2/10/08 18:08:37