Freelacer again! In Auckland, New Zealand!

I’ve taken the big jump and moved across several ponds to New Zealand! Not only does this mean lots of freelancing on small projects and hiding from the daily rainstorms in Internet cafés in beautiful but wet Auckland, it also means I once again have time to write my blog!

Hello Kiwis!

Liquid Interfaces in AS3

I’ve had to answer this at least three times in the last month so I’m assuming it’s a useful piece of code.

When creating liquid interfaces in ActionScript 2 you simply let your object listen to the stage for changes, like so:

1
2
3
4
5
6
7
Stage.addListener(this);
 
...
 
private function onResize() {
   this.mc_background._y = Stage.height
}

In ActionScript 3 the stage is accessible as a property in all classes inheriting from DisplayObject. Useful, but here is where the trouble begins for most people. If you try this inside your class:

1
2
3
4
5
6
7
stage.addEventListener(Event.RESIZE, drawObject);
 
…
 
private function drawObject(e:Event){
   _background.width = stage.stageWidth;
}

…it will throw an error, because the stage object is only available after your object has been added to the display list. So what do we do?

The simplest thing is to add a listener for when the object is added, and when that is done remove is and replace it with a listener for resize:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Add initial resizer
addEventListener(Event.ADDED_TO_STAGE, drawObject);
 
…
 
private function drawObject(e:Event){
 _background.width = stage.stageWidth;
 
 if(e.type == Event.ADDED_TO_STAGE){
    // remove initial listener
    removeEventListener(Event.ADDED_TO_STAGE, drawObject);
 
   // Add permanent listener
   stage.addEventListener(Event.RESIZE, drawObject);
 }
 
}

By doing this we get the same behavior as in AS2 but with the added benefit of a resize upon initialization.

I really should attempt to finish the animation tutorials. I’ll write some of them up during vacation, promise :)

Here’s also a video I found on the subject:

Copying Objects in AS3, part2

So, last time we looked at how to run an objects constructor to create a duplicate – which is what Adobe recommends as a replacement for duplicateMovieClip.

The problem is that even tho this solves a majority of the situations it does not let us copy an Objects state (such as a Display Objects position, graphics property or the content of an Array).

Flash copies primitive data types such as String and Int when they are assigned to a variable:

1
2
3
4
5
var one:String = "hello";
var two:String = one;
 
one = "bye";
trace(two); // "hello" (and not "bye")

However, when you assign a complex data type, such as a Vector, what you really get is a reference:

1
2
3
4
5
6
7
8
9
10
var one:Vector. <string> = new Vector.<string>()
 
one.push("something");
 
one.push("something else");
 
var two:Vector.<string> = one;
 
one.push("and another thing");
trace(two); // something, something else, and another thing

How do we get around this? We can’t get a copy of the Vector by running it’s constructor; all we would get is another blank Vector.

Copying Objects with .clone()

A common way of enabling copying on objects is to implement a clone() method on the object in question, making sure that said method writes the current objects states on a new one.

Several classes have this built in, for example: Most Events, Bitmap Data, Filters and some Components.

Copy with ObjectUtil.copy()

If you are using Flex, you have the option of using ObjectUtil’s method copy() ( mx.utils.ObjectUtils.copy() ), which returns a reference to a copy of the supplied object.

It does this by essentially copying the Object at byte-level. This is not the most efficient way to copy something, and thus it takes up some resources,

as the Object first have to be deserialized to be written to a Byte Array. Adobe has this to say:

This method is designed for copying data objects, such as elements of a collection. It is not intended for copying a UIComponent

object, such as a TextInput control. If you want to create copies of specific UIComponent objects, you can create a subclass of the component and

implement a clone() method, or other method to perform the copy.

So in other words, it’s not a silver bullet.

Copy with ByteArray.readObject / writeObject

This is a pretty sure fire way to copy something, even a deep matrix (many layered array) can be copied this way. However this method is slow, and it does not work on Display Objects. Let’s try it on our Vector:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var one:Vector.<string> = new Vector.<string>()
 
one.push("something");
 
one.push("something else");
var btArray:ByteArray = new ByteArray();
 
btArray.writeObject( one );
 
btArray.position = 0;
 
var two:String
 
two = btArray.readObject() as String;
 
one.push("and another thing");
 
trace(two); // something, something else

The problem is that when we serialize an object and write it down in byte code we loose all meta data, such as type information. So we need to know what kind of class the copyed object belongs to and coarse it. This is not a problem here, but if the Object had been deeply clustered we would have lost a lot of the time saved by this on re-setting all the associated classes within the Object. How to solve this problem is discussed by Daron Schall here

Copy DisplayObjects with Senoculars duplicateDisplayObject class

Since there is no built-in way in Flash to copy a DisplayObject with states preserved we turn to a custom class written by famous-among-flash-developers

Senocular of kirupa.com who has written the duplicateDisplayObject class:

http://www.kirupa.com/forum/showpost.php?p=1939827&postcount=172

Essentially it does things the hard way; it uses the constructor property that I discussed in my last article to make a blank copy of an item of the same class and then assigns properties of the original object to the new one (filters, eventListeners and so on).

This means that the class will not work for custom extensions of Display Objects without a small rewrite. Nor can it handle deep copying, for that you will need to run it on every reference to a Display Object inside the one you are duplicating.

Copying a MovieClip in AS3

Copying a Movie Clip in ActionScript 3. Can’t be done. Right? Wrong.

Well, duplicateMovieClip is certainly gone, but there are still ways of making copies – running an objects constructor for example.

The basic way of doing this (which you no doubt know) is running the constructor of an object directly:

1
2
3
4
5
private var _circle = new customCircleClass
 
// "copy"
 
private var _circle2 = new customCircleClass

This, however, requires you to know the name of the constructor you are running. In many cases you might not. Lets look at this likely scenario:

You are using the TileList component as a menu for a drag-and-drop application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package examples{
 
 import flash.display.MovieClip;
 import fl.controls.TileList;
 import fl.data.DataProvider;
 import fl.events.ListEvent;
 
public class dragDropper extends MovieClip{
 
	private var _tileList: 		TileList;
 
	private var _dataProvider: 	DataProvider;
 
	public function dragDropper(){
 
 		// to be added
 
 	}
 }
 
}

Next, lets make some objects to put in our lists. This is customCircle.as :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package examples{
 
import flash.display.Sprite;
 
public class customCircle extends Sprite{
 
public function customCircle(){
 		graphics.beginFill(0x440000,1);
 		graphics.drawCircle(10,10,10);
 		graphics.endFill();
 	}
}
 
}

I’m sure you can guess the rest. Let’s continue with the constructor:

13
public function dragDropper(){
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// Create some different shapes to add to TileList
 
 var circle = new customCircle();
 
 var square = new customSquare();
 
 var triangle = new customTriangle();
 
// Set up Data Provider
 
 _dataProvider = new DataProvider();
 
 _dataProvider.addItem( {source:circle} );
 
 _dataProvider.addItem( {source:square} );
 
 _dataProvider.addItem( {source:triangle} );
 
// Create TileList and set Data Provider
 
 _tileList = new TileList();
 
 _tileList.width = 160;
 
 _tileList.height = 60;
 
 _tileList.setStyle("contentPadding", 5);
 
 _tileList.setRendererStyle("imagePadding", 5);
 
_tileList.dataProvider = _dataProvider;
 
addChild( _tileList );
 
}

Which gives us this:



Which is great. But we need it to do more than just look cool, so we add a listener:

13
_tileList.addEventListener(fl.events.ListEvent.ITEM_CLICK, listItemClick);

Now we can get to the point of all this, that is how to copy Display Objects in AS3. Tile Lists dispatches List Events when they are clicked; they are different from ordinary Events in that they carry a reference to the object that has been clicked. Many people write custom Event classes for this exact purpose, but that is another chapter.

We can now access and manipulate the clicked object:

40
41
42
43
public function listItemClick(e:ListEvent){
	addChild( e.item.source);
	e.item.source.startDrag();
}

This will make the object draggable but also removes the object from the Tile List, as it can not be a child to both the stage and the Tile List.

So were do we go from here? We can’t know which tile the user will click ahead of time. Luckily all Objects have the constructor property, which holds a reference to their Constructor:

40
41
42
43
44
public function listItemClick(e:ListEvent){
	var newCursor = new e.item.source.constructor
	addChild( newCursor );
	newCursor.startDrag();
}

Good times. But this only creates a blank instance Object you are copying. For copying objects with states preserved check back next week!
You can read the follow up here!

Laying plans

I guess I should apologize for the agonizingly slow pace at with I update. It’s not to do with malice, I’m just swamped with freelance work and it eats away at the little free time I have to write in. It’s a pleasant problem, though; the demand for Flash developers is higher than ever.

Next week I’ll be writing two more articles on the principles of animation, and after that I’ll try to go a little deeper and touch upon more details, such as how to draw hands. Sounds good?

Me and my blog are wearing red today. I know it’s not much help to the people of Burma, who probably would be better served by money to the democracy movement or resolutions in the UN, but maybe this helps little too. I’ll give a little and partake in a demonstration later today and I urge all of you who have the time to do the same.

I’ll see you all next week!

The basics of cartoon animation in Flash

Flash cartoon having crached from the top of this page

There are more than a few tricks to animating in Flash, and a lot of them has to do with character design and how to make Flash do the animating for you. But some have to do with the way you handle frames.

The traditional approach when animating is to draw the most important keyframes first. These would be the start of the animation, important turning points and of course how it all ends. When this is done one of your low paid apprentices (you’ve got one, right?) do the “in-betweening”, drawing the frames that go in between the actions.

Important frames are drawn first, then the others ar filled in

Even if you don’t have a bunch of people working for you can still benefit from this practice by drawing out the important bit and then filling out what goes in between them. Because Flash is so flexible you can draw around your keyframes and decide how many frames should go between each one. This is the most common way of determining how fast something goes, by letting something move a lot in the distance between two frames makes it looks like its moving very fast.

Squashing and Stretching
It’s about time we started talking about actually animating things.

Sketch beeing pushed off a cliff.

I feel i need to tell you this; I refuse to do the thing with the bouncing ball. Every Flash tutorial about animation uses the dead boring example of a ball changing shape as it bounces across the screen. There has got to be another way to describe how cartoon physics work. I’ll try another variation.

Man falling. Remember to imagen you character as a 3-dimentional object so you can change his mass.

Most cartoon characters and objects are made of rubber. Well, ok, they are made of ink, paint or pixels, but they act like they are made from rubber. They will change shape when force is applied but they will not change mass. This means that if we push a character of a cliff (let’s!) and the impact flattens his body out, then he will have to become much wider as not to loose volume.

Look at this animation:

The ball falls on the cylinder, compressing it and itself and making them both wider and shorter. The cylinder then springs back and the ball is thrown of. Notice that the cylinder does not stop moving when it is back to its original shape; it keeps on going upwards, getting thinner as it goes. This is called “follow thru” (we will talk more about that in the article following this one), moving the character or the object all the way thru a motion as far as it goes. This bouncing would stop eventually, of course, but here the cylinder puts in a little more power than what goes in to compressing it so it keeps on going.

A cylinder and a sphere chrshing in to each other. Notice the shange of chape and the preservation off mass.

Now, I’m not saying that you should be sitting around counting the volume of the cylinders, spheres and boxes that make up you characters and calculate the change, I’m just saying that your character will look a lot more real if it can be animated without loosing it’s size. This will also make your job of drawing much easier as you character springs back in to its original shape without looking like its “morphing”.

Flash cartoon having crached from the top of this page

Not everything is made of rubber. Some things – like very heavy things – will not bounce and will not change their shape very much. Just use your brains. A huge weight will crash and possibly make a hole in the ground, and will not compress when hitting something because it is much more solid than for example a character. Fragile things will brake when force is applied, not bounce or bend. Well, you get it.

Heavy, had things dont squach and stretch much.

As soon as the appliance of force stops your character or object will start to get back to its original form. There are a number of ways this can happen (picking itself up, shaking itself etcetera) but in general it happens very quickly and by itself.

Ok, so maybe I couldn’t avoid the ball example. Sorry about that. Next time we will look at some of the other principles of animation. See you soon.

The secret of tweening: When and when not to

One of the biggest problems with animation in Flash is that it’s so easy to cheat. You’ve got motion tweens and shape tweens and timeline effects and the Spaghetti Monster knows what else that all books on Flash demonstrates as “how you animate in Flash”. But these things are just tools; little helpers to speed up work, the bulk of animation (and especially character animation) has to happen with your hands, drawing till you bleed (well, almost). Today we are nevertheless going to cheat, we are going to look at how you use tweening in a smart way.

Motion tweening



Motion tweens are for moving objects such as movie clips and groups across the screen, or rotating them or similar. They are not appropriate for moving linked parts of a character (like you often see when people use ‘cut outs’ to animate characters) because real arms and legs change shape when they move and so does almost every other part of a living thing.

A birds wing can't be tweened because it changes shape

However, motion tweens can be quiet useful for moving dead things around, especially if used with a motion guide or with easing. If you decide to move parts of a character with the help of motion tweens, remember that living things seldom move in straight lines. This arch shows a characters head moving:

Heads and other parts of living thing moves in a non-linear way.

Use a motion guide to replicate this if you are using a motion tween to move the head.

Motion tweens can also be used to move characters around the screen if they are simultaneously being animated. A walking cycle:

Walking cycle in a movie clip

…(for example) does not in fact move the character anywhere, it just animates the legs, so using a motion tween on the movie clip containing the walking character or (more commonly) tweening the background might work.

Animated clip beeing moved using a tween

But it’s generally easier to move the movie clip key frame by key frame to get the motion in sync with the steps.

Shape tweening
Shape tweens are used on shapes (oh really?). They work best on simple shapes with few anchor points, try to use them to animate complicated shapes and you will be wasting time. The time it takes you to place and adjust all those shape hints will be triple the time it would take you to just draw the thing.

In this animation the simple appendages (tentacle thingies) where made from two motion tweens with shape hints. The trick is to use as few shape hints as you can, the more you have, the more there is for Flash to misinterpret.

Shape hints placed on a simple shape

The arms could be made with shape tweens because both the shapes and the animation applied to it were simple. Had any of those two been complex the thing would have been a lot easier to draw by hand. For example, watch the little spaghetti straw on his head. It bends in to it self, so even if the thing itself I simple the animation is a bit to complex to use a tween.

The animated pice on the FSM's head

Shape tweening is pretty heavy on performance and file size, especially if used on gradients and transparent objects. Use it as a timesaver, but think before you do!

Easing
It’s almost always a good idea to use a bit on easing in tweens, it makes them look less even and more life like (that is of course unless it’s an absolutely even motion you are trying to achieve). Another approach is to split the motion up in to several tweens that are a little differently paced, but then you are getting closer to just doing it key frame by key frame.

Blend mode should be set to distributive if the shape is organic-like (smooth and rounded) and angular if it’s a shape with many sharp corners. Don’t sweat about this, Flash will automatically select the more appropriate choice should you happen to select one that is incompatible with the shape you are tweening.

Ok that’s all for today. Next time we will start animating by hand and go thru some of the principles of animation. Thanks to Serietecknarskolan for letting me use their old logo “Fågelmannen” in this tutorial.

The lonely Flash developer

First of all, thanks to everyone who has taken the time to visit this page and write to me. There aren’t many large development teams where there is more than one Flash expert – the one I’m on is no exception – so I take any chance I can get to get to know colleagues around the world.

I know it says on the front page that this site is about development as well as animation, but I’m still working mostly in AS2 and I don’t feel there is much point in teaching this as we all have to go over to AS3 soon. But as soon as I’m settled in with it (and provided I have anything useful to say) there will be some tutorials involving development in AS3 as well.

In the mean time I’ll try to teach what little I know about animation. It’s not a whole lot. But I feel it is a part of Flash that is often forgotten now that we all work with RIAS (and let’s face it, all try to avoid being hired to do the next bloody poker site) and there is such a great need for developers. It’s a shame, for Flash is still the best option when it comes to online animation. We mustn’t forget that there is more to the graphical side of flash than site design.

Oh, and thank you all for your comments. Malay is a language I don’t speak, unfortunately, but maybe someone could help me translate what the comments and letters say?

Drawing for animation: five useful tips

 Merged sketch of a cartoon

There are obviously a lot more to drawing cartoons than what I wrote in my last tutorial, 9 tips for drawing in flash, but it was a good place to start. Today I thought we might go deeper in and even approach animation a little.

Before we even consider starting to animate I would like to give you a few tips. Most of the animation made in Flash is incredibly bad, and this is not only due to lazy animators. The knowledge of how to draw characters specifically designed for animation is no longer widespread amongst animators and this often results in characters that look flat or move very strangely. So this is a small guide to get you started on drawing characters that can be animated.

1. Use layers (really, this time)
Animated full-length movies would never have been possible were it not for cell based animation. To fool the brain in to thinking what it’s seeing is live motion we need to show it at least twenty four frames every second. That means actually drawing 1440 pictures, possibly in color, for every minute of animation.

The idea is, there are only a limited number of expressions, motions and angles to a character, so why redraw them every time? So what the animators did was to keep the background on a separate piece of paper (sense it did not change a whole lot) and paint all the characters and objects on transparent plastic sheets and put them in front of it. Rings a bell?

A character distributed to layers in a folder

A normal characters mouth may have a few different ‘cells’ like sad, angry, happy, horny or what ever. Once you have drawn them, there is no need to draw them again, just because the body of the character looks different or the eyes look in another direction. Keep parts of the face and body on different layers.

Note:
It might be a good idea to keep every character and object in its own Movie Clip with the layers inside it. On the other hand, it might not. If you are animating for television / rendered formats and plan on exporting to QuickTime then you can’t use nested clips (movie clips) because anything off the main timeline won’t play. In this case I recommend using folders for your layers instead.

2. Keep it simple
Drawing a complicated character one time is relatively easy. Drawing it a hundred or five hundred times is not. Simplify your characters as much as you can and make sure it has distinguishable building blocks.

Simple rough of a character

This is even more crucial if you are designing a character that more than one person will be working on. If there are simple steps to drawing the character it will not only save time but ensure consistency. But on the other hand, don’t oversimplify. Your character is only appealing if it’s interesting, so allow yourself to keep complicated elements if they are important to the make up of the character.

3. Use eye lines
It’s easy to draw characters from the side of the front, all you have to think about is keeping things aligned and not mess up proportions. But as soon as we start animating we have to consider the tilt of the head and the turn of the body.

Now, remember: the easiest way to make up a character is by drawing it in circles and adding on the outlines. If you want to you can use a stick figure as a “skeleton” to draw on. Here is the head from the character above.

head seen from front and slightly above

Notice the dashed line in the center of the characters head? This is the eye line, and it’s just below where the characters eyes will be drawn on. This is the head seen slightly from above.

4. Use tilt lines
This is really the same thing as above. We need a second line, going from the top of the head to the bottom thru the nose of the character to be able to see which way the head is turned. Using both lines we can describe any possible angle and always know where to draw on the face, ears and other details.

Head seen from the side and above

The thing we have now is not technically a wire frame, because it precedes it with about eighty years, but it’s pretty close to the thing used in 3d-programs to keep track of shape and position.

We can use these lines when we draw sketches (called Roughs’) of key frames (we’ll come to that in a later article) to keep track of the angel of the character thru a motion. It’s often good enough to draw just the head with a tilt- and eye line and a stick figure when you sketch.

5. Set the Line of Action
A characters stance and action should be described by a single line For example, a man waving his arms back and forth might have a line thru his boots up to his fingers. This helps us keep track of the direction of the animation when we draw up the key frames. Following a straight line of action makes cartoons motions look cleaner and make them easier to draw. The line of action is a major principle of animation and I will return to it when we get to the articles about animating.

Line of action thru a character

The important thing about all of these tips is that they enable you to see your character as a 3-d object, witch have size and depth. It’s important to be able to imagine your character this way because it means you can draw your character from any angle doing many different things.

A sketch and a colored example of a character for animation

And as always, I appreciate your comments!

Nine tips for drawing in Flash

 Cat gone bad. This is what we are drawing 

Drawing has always been a well hidden non-talent of mine but every now and then comes a project that requires me to face my demons. Using a mouse to draw is a new experience and if you are not familiar with programs like Illustrator and don’t own a Wacom board Flash is a very easy place to start learning. I will use a popular cat gone bad to demonstrate some of the tricks I use to get around my lack of skill.

1. Make a sketch
Stick figures are not that attractive, but they do help you determine the set up of your drawing. They don’t have to look anything like the characters or objects you are about to draw but try to make your stick figures reflect the general stance of the characters they portray.

This little sketch gives us an idea about what size and placement to give each object. If nothing else sketching will provide you with a better idea of what to draw. Flash is remarkably flexible here, being vector based, so you don’t have to give up if you’ve drawn an object in the wrong size.

2. Use layers
You might change your mind and decide to remove an object from your drawing, or you might want to move it or rescale it without affecting other objects. The best way to prepare for this is to give each character and object its own layer.

When animating you sometimes place parts of a character on their own layers inside a movie clip to be able to animate hierarchically. Right now we are just drawing a still-image so we don’t need that type of flexibility.

3. Draw lots of circles
There is just no way to draw a character out of the blue and hope to get the proportions right on the first try. What you need to focus on is finding the circles that make up the shape of the (cartoon) character. Then you can use lines to connect the dots and make up the general shape of the character.

Shows how charaters are drawn with the help of circles

This is not exactly original advice, cartoonists around the world have been using this technique for almost a hundred years but that is because it works. Animating in Flash is very similar to how cell based animation used to work back before they replaced everything with 3d-animation. Both use layers to create motion and preserve parts of a scene as separate objects, and both combine the concept of static backgrounds and animated parts (be it cells or movie clips) Remember that, old books on animation are pure gold.

4. Mould shapes
Lines can be dragged, reshaped and deleted just by clicking on them. Make use of this by reshaping your circles-and-lines sketches to line drawings. Move the joins around; add a few extra lines and bend them in to shape. Remove anything you no longer need.

Shows how to mould a shape out of the drawn lines ansd circles

The Pen tool can be a great help here. You can use it to add and remove anchor points (joins between lines) and to adjust the Bezier curves (the bend on each line) in a more precise manner. If you are familiar with Illustrator then the Pen tool might make you feel more at home than the line and pen tools.

5. Use the Pencil tool
It’s time to draw on the details, like eyes and whiskers and a huge pink bonnet for some reason. Try using the Pencil tool to freehand small objects. Adjust the drawing mode – straight, smooth or ink – to get the style you are looking for (or to compensate for shaky hands like mine).

Shows details beeing added to the image

6. Draw Outlines
To help characters or objects pop out of the background, make their outer lines a little bit thicker than the others. This is even more important if your drawing is in black and white because the viewer won’t have the help of color to separate objects.

Figure with outlines beeing added

The easiest way to fix the outlines is just to select them and choose a higher line thickness when you feel you’re done drawing.

7. Mess with the lines
Having used lines to draw a character or object on the stage, we might want to make it look a bit more organic. The lines have an even thickness that makes them look very stale, so let’s convert them to fills.

This is something you might want to do as a last touch, after you have decided where all the lines should go, but before you scale the object. Scaling an object with the lines preserved will mess with image proportions (because even thou the size of the colorized fields change, the thickness of the lines separating them wont).

Shows a drawing with and witout modified lines

Having converted your lines to fills you can manipulate the thickness of outlines to accentuate different thing about the object you have drawn. For example, try making the lines a bit thinner where there is a point (watch the cats ears). Just having the lines be a bit uneven gives the character more life.

8. Paint inside
When you colorize a picture you might want to do more than to just fill in fields and shapes, most people get sick of those books around the age of five. Use the brush tool to Paint inside a field (select the field and use Paint selection if it’s really small) and you won’t have to worry about paint bleeding over in to other parts of your drawing.

While you are at it, add the last details. I’ll make the pattern on the cat’s dress skulls. Chicks dig skulls.

Shows a figure with shadows painted in with the brush

9. Use gradients
Shape in two dimensional pictures is pretty much a matter of color. Don’t believe me? Take a head, for example. The outline is close to I circle, but the actual shape? Is it a sphere of a cylinder? Thanks to the way human memory works this is not a mayor problem in this case, most people will simply assume that a head will be much closer in shape to a ball than a barrel. But in case you have an object which the viewer is not so familiar with color can be a great help in accentuating shape.

Shows 3d-effect achived by using gradients

Think of gradients as a way of showing where the light comes from. Darker parts are in shadow while lighter parts are directly in the light. Be consistent with how you place gradients in your picture so that the light source is always in the same place.

Finished drawing of the cat.

Well done! I hope this has made you feel a bit more at home in Flash. Feel free to coment if you have suggestions for improvments or have something else on your mind.