swfchan: animationtutorial.swf (info)

Text

This tutorial shows how I animate
pictures in Graphics Gale.

It all starts with a sketch for
the first frame.

The whole animation is based on that frame.
It will (well almost) never change
in the course of animating.

Reference

If there are errors in the sketch, now is the
easiest time to fix them.

Fixed the
perspective,
expressions
and missing
foot

Then we shrink it...

(All Frames/ Resample)

Retrace the lines with a darker color...

And clean the lines up so it
doesn't look messy.

There is no automatic function or a filter
that can do that. I do it by zooming in
and erasing all the unneeded pixels.

Which is why I shrinked the picture.
Doing that even at such a small size
is work enough.

Believe me, it is...

Paintbucket color and shading...

This is no drawing
tutorial so I won't
go into the details
of that too much.

Then I'll copy the picture into 5 frames.
This can be done by selecting 'Duplicate'
In the frame selection window of
Graphics Gale.

I also added a sexy implied-grass shadow
because we all love sexy implied-grass shadows.

You can emulate frames with layers in
Photoshop if you work with that.

Then I'll go to frame 3 and use the lasso tool
to rip poor Luxio apart and move and rotate
the bodyparts into the desired position.

Frame 3 is the'I'm fully out and about to hammer
into you'-frame here.

Frame 2 is a less exaggerated version
of frame 3 so we have a smooth transition...

Frame 3 again...

Frame 4, snapping back forward...

Frame 5, BAM!

The preview of Graphics Gale
should show something like this.

(by the way, that realtime preview
that you have while drawing is the
reason why I use Graphics Gale)

There we go, the basic humping animation.
But it looks pretty broken.

The pain...
Please...
kill... me!

So let's fix it.
Just go through each frame...

...and repair the damages.

That should lead to this.

Gabite looks a bit passive so let's
work on her animation next.

Wait what?

Ripping stuff apart, moving it around...

AAAARGH!

...to make her body move according
to the thrusting...

Ouch
ouch
ouch!!

That's how I do it.
One animation after another.
Because taking on everything at once
is MADNESS!

Some parts, like Luxios tail movement
aren't really suited to be copied around
because they move too fast.

The star
tailtip
has been
copied
though.

Minor details, like the eye movement
can't really be copied either
because it's only a few pixels.

You have to completely redraw them
from scratch each frame.
Sorry, you won't always get away that easily.

This is the end of the tutorial.
I hope it was somewhat helpful.

I'm tired...

My hip hurts...

END

ActionScript [AS1/AS2]

Frame 1
	stop();
Symbol 3 Button
on (release) {
	nextFrame();
}
Symbol 6 Button
on (release) {
	prevFrame();
}

Library Items

Symbol 1 Graphic	Used by:3 6
Symbol 2 Graphic	Used by:3 6
Symbol 3 Button	Uses:1 2	Used by:Timeline
Symbol 4 Font	Used by:5 7 12 13 14 19 20 21 22 26 30 31 32 33 37 38 41 42 43 46 47 50 51 54 57 59 60 62 63 64 67 75 77 78 81 82 92 104 105 118 119 121 122 124 125 126
Symbol 5 Text	Uses:4	Used by:Timeline
Symbol 6 Button	Uses:1 2	Used by:Timeline
Symbol 7 Text	Uses:4	Used by:Timeline
Symbol 8 Bitmap	Used by:9
Symbol 9 Graphic	Uses:8	Used by:10
Symbol 10 MovieClip	Uses:9	Used by:Timeline
Symbol 11 Graphic	Used by:Timeline
Symbol 12 Text	Uses:4	Used by:Timeline
Symbol 13 Text	Uses:4	Used by:Timeline
Symbol 14 Text	Uses:4	Used by:Timeline
Symbol 15 Bitmap	Used by:16
Symbol 16 Graphic	Uses:15	Used by:17
Symbol 17 MovieClip	Uses:16	Used by:Timeline
Symbol 18 Graphic	Used by:Timeline
Symbol 19 Text	Uses:4	Used by:Timeline
Symbol 20 Text	Uses:4	Used by:Timeline
Symbol 21 Text	Uses:4	Used by:Timeline
Symbol 22 Text	Uses:4	Used by:Timeline
Symbol 23 Bitmap	Used by:24
Symbol 24 Graphic	Uses:23	Used by:25
Symbol 25 MovieClip	Uses:24	Used by:Timeline
Symbol 26 Text	Uses:4	Used by:Timeline
Symbol 27 Bitmap	Used by:28
Symbol 28 Graphic	Uses:27	Used by:29
Symbol 29 MovieClip	Uses:28	Used by:Timeline
Symbol 30 Text	Uses:4	Used by:Timeline
Symbol 31 Text	Uses:4	Used by:Timeline
Symbol 32 Text	Uses:4	Used by:Timeline
Symbol 33 Text	Uses:4	Used by:Timeline
Symbol 34 Bitmap	Used by:35
Symbol 35 Graphic	Uses:34	Used by:36
Symbol 36 MovieClip	Uses:35	Used by:Timeline
Symbol 37 Text	Uses:4	Used by:Timeline
Symbol 38 Text	Uses:4	Used by:Timeline
Symbol 39 Bitmap	Used by:40
Symbol 40 Graphic	Uses:39	Used by:58 74 Timeline
Symbol 41 Text	Uses:4	Used by:Timeline
Symbol 42 Text	Uses:4	Used by:Timeline
Symbol 43 Text	Uses:4	Used by:Timeline
Symbol 44 Bitmap	Used by:45
Symbol 45 Graphic	Uses:44	Used by:58 Timeline
Symbol 46 Text	Uses:4	Used by:Timeline
Symbol 47 Text	Uses:4	Used by:Timeline
Symbol 48 Bitmap	Used by:49
Symbol 49 Graphic	Uses:48	Used by:58 Timeline
Symbol 50 Text	Uses:4	Used by:Timeline
Symbol 51 Text	Uses:4	Used by:Timeline
Symbol 52 Bitmap	Used by:53
Symbol 53 Graphic	Uses:52	Used by:58 Timeline
Symbol 54 Text	Uses:4	Used by:Timeline
Symbol 55 Bitmap	Used by:56
Symbol 56 Graphic	Uses:55	Used by:58 Timeline
Symbol 57 Text	Uses:4	Used by:Timeline
Symbol 58 MovieClip	Uses:40 49 45 53 56	Used by:Timeline
Symbol 59 Text	Uses:4	Used by:Timeline
Symbol 60 Text	Uses:4	Used by:Timeline
Symbol 61 Graphic	Used by:Timeline
Symbol 62 Text	Uses:4	Used by:Timeline
Symbol 63 Text	Uses:4	Used by:Timeline
Symbol 64 Text	Uses:4	Used by:Timeline
Symbol 65 Bitmap	Used by:66
Symbol 66 Graphic	Uses:65	Used by:74 Timeline
Symbol 67 Text	Uses:4	Used by:Timeline
Symbol 68 Bitmap	Used by:69
Symbol 69 Graphic	Uses:68	Used by:74
Symbol 70 Bitmap	Used by:71
Symbol 71 Graphic	Uses:70	Used by:74
Symbol 72 Bitmap	Used by:73
Symbol 73 Graphic	Uses:72	Used by:74
Symbol 74 MovieClip	Uses:40 69 66 71 73	Used by:Timeline
Symbol 75 Text	Uses:4	Used by:Timeline
Symbol 76 Graphic	Used by:Timeline
Symbol 77 Text	Uses:4	Used by:Timeline
Symbol 78 Text	Uses:4	Used by:Timeline
Symbol 79 Bitmap	Used by:80
Symbol 80 Graphic	Uses:79	Used by:91 Timeline
Symbol 81 Text	Uses:4	Used by:Timeline
Symbol 82 Text	Uses:4	Used by:Timeline
Symbol 83 Bitmap	Used by:84
Symbol 84 Graphic	Uses:83	Used by:91
Symbol 85 Bitmap	Used by:86
Symbol 86 Graphic	Uses:85	Used by:91
Symbol 87 Bitmap	Used by:88
Symbol 88 Graphic	Uses:87	Used by:91
Symbol 89 Bitmap	Used by:90
Symbol 90 Graphic	Uses:89	Used by:91
Symbol 91 MovieClip	Uses:84 86 88 90 80	Used by:Timeline
Symbol 92 Text	Uses:4	Used by:Timeline
Symbol 93 Bitmap	Used by:94
Symbol 94 Graphic	Uses:93	Used by:103
Symbol 95 Bitmap	Used by:96
Symbol 96 Graphic	Uses:95	Used by:103
Symbol 97 Bitmap	Used by:98
Symbol 98 Graphic	Uses:97	Used by:103
Symbol 99 Bitmap	Used by:100
Symbol 100 Graphic	Uses:99	Used by:103
Symbol 101 Bitmap	Used by:102
Symbol 102 Graphic	Uses:101	Used by:103
Symbol 103 MovieClip	Uses:94 96 98 100 102	Used by:Timeline
Symbol 104 Text	Uses:4	Used by:Timeline
Symbol 105 Text	Uses:4	Used by:Timeline
Symbol 106 Bitmap	Used by:107
Symbol 107 Graphic	Uses:106	Used by:116
Symbol 108 Bitmap	Used by:109
Symbol 109 Graphic	Uses:108	Used by:116
Symbol 110 Bitmap	Used by:111
Symbol 111 Graphic	Uses:110	Used by:116
Symbol 112 Bitmap	Used by:113
Symbol 113 Graphic	Uses:112	Used by:116
Symbol 114 Bitmap	Used by:115
Symbol 115 Graphic	Uses:114	Used by:116
Symbol 116 MovieClip	Uses:107 109 111 113 115	Used by:Timeline
Symbol 117 Graphic	Used by:Timeline
Symbol 118 Text	Uses:4	Used by:Timeline
Symbol 119 Text	Uses:4	Used by:Timeline
Symbol 120 Graphic	Used by:Timeline
Symbol 121 Text	Uses:4	Used by:Timeline
Symbol 122 Text	Uses:4	Used by:Timeline
Symbol 123 Graphic	Used by:Timeline
Symbol 124 Text	Uses:4	Used by:Timeline
Symbol 125 Text	Uses:4	Used by:Timeline
Symbol 126 Text	Uses:4	Used by:Timeline