STORY   LOOP   FURRY   PORN   GAMES
• C •   SERVICES [?] [R] RND   POPULAR
Archived flashes:
228114
/disc/ · /res/     /show/ · /fap/ · /gg/ · /swf/P0001 · P2561 · P5121

<div style="position:absolute;top:-99px;left:-99px;"><img src="http://swfchan.com:57475/74936913?noj=FRM74936913-9DC" width="1" height="1"></div>

Keyframe Animation.swf

This is the info page for
Flash #30434

(Click the ID number above for more basic data on this flash file.)


Text
Albinoblacksheep.com

At one point or another in our careers as flash game makers/animators/doodlists, we're all
going to have to do some frame by frame animation at one point or another. When I was
new to Flash, I tried to avoid frame by frame animation like it were the devil just because I
was lousy at it in general.
So hopefully this guide will help, even a little, for those of you who aren't so graceful with
animation; but by no means should this be considered the absolute word on how you
animate. I just thought this method was a really good idea on how to do things.

2

The first thing I have to do is to establish the different ways of animation: "Sequential
Animation" and "Keyframe Animation", as I call them. Let's say you're playing one of those
crazy puzzle games where you need to get from the left side to the right (without cheating,
mind you).  There are boxes on the ground which float in water (you can flood the room to
a certain height.How do you place the boxes?

3

In sequential animation, you'd place the boxes from the left to right, in the order that
you'd jump on. However, there is a slight problem with this...

1

2

3

4

5

4

You're not guaranteed a very smooth transition from A to B. While you still could get
across, if its not done correctly, it could look very bad. That's what happened to all my
earlier frame by frame attempts; I wouldn't know how much each frame should transition
from the last, resulting in very jumpy cartoons.

5

However, if you went out of order and established the first and last boxes and then worked
from the middle outwards...

6

Then you're guaranteed a smoother transition (with equal spacing) from the left to right.
This method is Keyframe Animation

The basic idea behind keyframe animation is to draw the important stuff first.

start

contact with ground

end

8

And then filling in all the stuff inbetween.
Essentially, it's the same thing as making a motion tween, only
you do all the stuff inbetween...

9

The "Key" to keyframe animation is to start with the first and last frames, and then do the
middle of the first and last, and then the frames inbetween those...etc.

Start here...

blank keyframe
in the middle

fill the middle

This is what should happen on the timeline

Add blank keyframes
between those

fill the middle
keyframes

Repeat until you have a smooth
motion in the animation

10

Let's take a guy without arms walking. Indicate the extremes first (when he makes contact
with the ground)

11

Add a blank frame between the two extremes and add the the middle.

12

And then the middles of the middle

13

You just keep adding frames between the existing frames. It's easy
to tell where the middle of every frame is, so you're guaranteed a
smooth motion (providing that you can draw well)

14

When placed together, it looks like this. Cool, huh? Now, if you want to have him
walking across the screen, you'll have to repeat the entire process over, and over, and
over and over and over again. Hey, no one said this was easy :P

15

The plus side of keyframe animation is that you'll be able to keep focused in your frame by
frame animations, and you are also able to work in teams doing this.
To work in teams, one person will draw the keyframes, and the rest will draw the inbetweens.
However, to do this, the lead MUST have an incredible sense of timing, and must be able to
figure out just how many frames it should take to perform an action. If you're working in Flash
with a team, this shouldn't be too much of a problem, as you can add keyframes in. However,
if you're working on paper, it can be a real snag if you have to go redo a hundred frames
because the timing was off on a character's movement.

16

By now you're thining: "Oh wait. All that stuff he did before can be done- with motion tweens!"
To tell the truth, yes, it can be. You can tween a bouncing ball (complete with the squishing
distrortions), and you can animate a stick guy walking by simply using motion tweens to animate
each individual limb.
...but how about something a little more complex, like lip syncing a guy saying "Potatoes"?

17

Yes. You CAN in fact, use a tween to do a primitive form of lip sync . I've  seen this way
done often online. It looks horrible. Do people really have mouths shaped like this?

click to start

"Poh"

"tah"

"to"

18

It'll pass in some situations, but let's say you're going for a "Quality" animation. Let's see you
motion tween these stages:

19

Line it up like this:

20

Establish the middle frames

21

And then the parts between those (all this is easier when everything is lined up and you're
using onion skins to see the next and previous frame... trust me)

22

Now look at all your frames. Is there any part that has too drastic of a transition? If so, add
some more frames in (using the same technique as working from the middle). I've marked
the parts that could use some more work between in red

23

This is what the finished product looks like. Compare this to tweening the mouth
with an oval; I would say that the frame by frame looks better.

24

DISCLAIMER: TWEENED MOUTHS CAN LOOK GOOD

(if done correctly)

If you're not too keen on making a whole frame by frame animation on someone saying
"Potato", there is a way to tween it and still come up with a fairly good looking mouth.
You still need to draw out the major stages, but you'll need to tween them to take the
basic shape of the next stage. This example is really bad, mind you. Someone pointed out
to me that my other example looks really biased and is misleading.
So you'd just tween the scaling of the mouths to sort of turn into the next one, and then
throw it all together. HOWEVER, you CANNOT tween ONE SHAPE and expect good results!
(that is, unless you're shooting for pixelated stuff, in which rectangles work fine)

"Wa--"

"kaa"

=

wakka

25

And there you have it; a primer on keyframe animation. Go and have fun
animating, and hopefully, this tutorial will help all you aspiring animators
(like myself) make internet cartoons not suck so much.
If you're still interested in learning more about keyframe animation, go
pick up some art and animation books (I highly reccomend The Animator's
Survival Guide by Richard Williams ).

Richard Williams

Just remember: Whichever method of
animation you perfer doesn't matter as
long as the end product is awesome.

Go forth my minions! Bwahahahaha
hahaha *cough* *sputter* *gag* *die*

ActionScript [AS1/AS2]

Frame 1
stop(); if (_global.System) { System.security.allowDomain("mochibot.com"); } _level0.__com_mochibot__swfid = "bda3ec4d"; loadMovieNum ("http://mochibot.com/my/core.swf", 10301);
Frame 2
stop();
Frame 3
stop();
Frame 4
stop();
Frame 5
stop();
Frame 6
stop();
Frame 7
stop();
Frame 8
stop();
Frame 9
stop(); if (_global.System) { System.security.allowDomain("mochibot.com"); } _level0.__com_mochibot__swfid = "bda3ec4d"; loadMovieNum ("http://mochibot.com/my/core.swf", 10301);
Frame 10
stop();
Frame 11
stop();
Frame 12
stop();
Frame 13
stop();
Frame 14
stop();
Frame 15
stop();
Frame 16
stop();
Frame 17
stop(); if (_global.System) { System.security.allowDomain("mochibot.com"); } _level0.__com_mochibot__swfid = "bda3ec4d"; loadMovieNum ("http://mochibot.com/my/core.swf", 10301);
Frame 18
stop();
Frame 19
stop();
Frame 20
stop();
Frame 21
stop();
Frame 22
stop();
Frame 23
stop();
Frame 24
stop();
Frame 25
stop();
Frame 26
stop();
Symbol 5 Button
on (release) { getURL ("http://www.mochibot.com/"); }
Symbol 11 Button
on (release) { _root.nextFrame(); }
Symbol 19 Button
on (release) { getURL ("http://www.albinoblacksheep.com"); }
Symbol 25 Button
on (release) { _root.prevFrame(); }
Symbol 119 Button
on (release) { gotoAndPlay (2); }
Symbol 125 MovieClip Frame 1
stop();
Symbol 187 Button
on (release) { getURL ("http://www.imdb.com/name/nm0931530/"); }

Library Items

Symbol 1 GraphicUsed by:5
Symbol 2 GraphicUsed by:5
Symbol 3 GraphicUsed by:5
Symbol 4 GraphicUsed by:5
Symbol 5 ButtonUses:1 2 3 4Used by:Timeline
Symbol 6 GraphicUsed by:11
Symbol 7 GraphicUsed by:11
Symbol 8 GraphicUsed by:11
Symbol 9 GraphicUsed by:11
Symbol 10 GraphicUsed by:11
Symbol 11 ButtonUses:6 7 8 9 10Used by:Timeline
Symbol 12 GraphicUsed by:Timeline
Symbol 13 GraphicUsed by:19
Symbol 14 FontUsed by:15 27 32 36 38 39 40 41 42 45 49 55 57 58 59 60 64 67 69 71 72 74 75 77 79 81 85 89 93 96 112 114 116 118 122 123 124 128 130 133 136 140 144 170 171 172 173 174 175 176 183 186 203 204
Symbol 15 TextUses:14Used by:19
Symbol 16 GraphicUsed by:19
Symbol 17 GraphicUsed by:19
Symbol 18 GraphicUsed by:19
Symbol 19 ButtonUses:13 15 16 17 18Used by:Timeline
Symbol 20 GraphicUsed by:25
Symbol 21 GraphicUsed by:25
Symbol 22 GraphicUsed by:25
Symbol 23 GraphicUsed by:25
Symbol 24 GraphicUsed by:25
Symbol 25 ButtonUses:20 21 22 23 24Used by:Timeline
Symbol 26 GraphicUsed by:Timeline
Symbol 27 TextUses:14Used by:Timeline
Symbol 28 FontUsed by:29 34 43 47 53 62 66 80 83 87 91 95 111 113 115 126 129 132 135 138 142 168 180
Symbol 29 TextUses:28Used by:Timeline
Symbol 30 GraphicUsed by:Timeline
Symbol 31 FontUsed by:32 55 114
Symbol 32 TextUses:14 31Used by:Timeline
Symbol 33 GraphicUsed by:Timeline
Symbol 34 TextUses:28Used by:Timeline
Symbol 35 GraphicUsed by:Timeline
Symbol 36 TextUses:14Used by:Timeline
Symbol 37 GraphicUsed by:Timeline
Symbol 38 TextUses:14Used by:Timeline
Symbol 39 TextUses:14Used by:Timeline
Symbol 40 TextUses:14Used by:Timeline
Symbol 41 TextUses:14Used by:Timeline
Symbol 42 TextUses:14Used by:Timeline
Symbol 43 TextUses:28Used by:Timeline
Symbol 44 GraphicUsed by:Timeline
Symbol 45 TextUses:14Used by:Timeline
Symbol 46 GraphicUsed by:Timeline
Symbol 47 TextUses:28Used by:Timeline
Symbol 48 GraphicUsed by:Timeline
Symbol 49 TextUses:14Used by:Timeline
Symbol 50 GraphicUsed by:Timeline
Symbol 51 GraphicUsed by:Timeline
Symbol 52 GraphicUsed by:Timeline
Symbol 53 TextUses:28Used by:Timeline
Symbol 54 GraphicUsed by:Timeline
Symbol 55 TextUses:14 31Used by:Timeline
Symbol 56 GraphicUsed by:Timeline
Symbol 57 TextUses:14Used by:Timeline
Symbol 58 TextUses:14Used by:Timeline
Symbol 59 TextUses:14Used by:Timeline
Symbol 60 TextUses:14Used by:Timeline
Symbol 61 TextUsed by:Timeline
Symbol 62 TextUses:28Used by:Timeline
Symbol 63 GraphicUsed by:Timeline
Symbol 64 TextUses:14Used by:Timeline
Symbol 65 GraphicUsed by:Timeline
Symbol 66 TextUses:28Used by:Timeline
Symbol 67 TextUses:14Used by:Timeline
Symbol 68 GraphicUsed by:Timeline
Symbol 69 TextUses:14Used by:Timeline
Symbol 70 GraphicUsed by:Timeline
Symbol 71 TextUses:14Used by:Timeline
Symbol 72 TextUses:14Used by:Timeline
Symbol 73 GraphicUsed by:Timeline
Symbol 74 TextUses:14Used by:Timeline
Symbol 75 TextUses:14Used by:Timeline
Symbol 76 GraphicUsed by:Timeline
Symbol 77 TextUses:14Used by:Timeline
Symbol 78 GraphicUsed by:Timeline
Symbol 79 TextUses:14Used by:Timeline
Symbol 80 TextUses:28Used by:Timeline
Symbol 81 TextUses:14Used by:Timeline
Symbol 82 GraphicUsed by:Timeline
Symbol 83 TextUses:28Used by:Timeline
Symbol 84 GraphicUsed by:Timeline
Symbol 85 TextUses:14Used by:Timeline
Symbol 86 GraphicUsed by:Timeline
Symbol 87 TextUses:28Used by:Timeline
Symbol 88 GraphicUsed by:Timeline
Symbol 89 TextUses:14Used by:Timeline
Symbol 90 GraphicUsed by:Timeline
Symbol 91 TextUses:28Used by:Timeline
Symbol 92 GraphicUsed by:Timeline
Symbol 93 TextUses:14Used by:Timeline
Symbol 94 GraphicUsed by:Timeline
Symbol 95 TextUses:28Used by:Timeline
Symbol 96 TextUses:14Used by:Timeline
Symbol 97 GraphicUsed by:110
Symbol 98 GraphicUsed by:110
Symbol 99 GraphicUsed by:110
Symbol 100 GraphicUsed by:110
Symbol 101 GraphicUsed by:110
Symbol 102 GraphicUsed by:110
Symbol 103 GraphicUsed by:110
Symbol 104 GraphicUsed by:110
Symbol 105 GraphicUsed by:110
Symbol 106 GraphicUsed by:110
Symbol 107 GraphicUsed by:110
Symbol 108 GraphicUsed by:110
Symbol 109 GraphicUsed by:110
Symbol 110 MovieClipUses:97 98 99 100 101 102 103 104 105 106 107 108 109Used by:Timeline
Symbol 111 TextUses:28Used by:Timeline
Symbol 112 TextUses:14Used by:Timeline
Symbol 113 TextUses:28Used by:Timeline
Symbol 114 TextUses:14 31Used by:Timeline
Symbol 115 TextUses:28Used by:Timeline
Symbol 116 TextUses:14Used by:Timeline
Symbol 117 GraphicUsed by:119 125 166
Symbol 118 TextUses:14Used by:119
Symbol 119 ButtonUses:117 118Used by:125
Symbol 120 GraphicUsed by:125
Symbol 121 GraphicUsed by:125
Symbol 122 TextUses:14Used by:125
Symbol 123 TextUses:14Used by:125
Symbol 124 TextUses:14Used by:125
Symbol 125 MovieClipUses:119 120 117 121 122 123 124Used by:Timeline
Symbol 126 TextUses:28Used by:Timeline
Symbol 127 GraphicUsed by:Timeline
Symbol 128 TextUses:14Used by:Timeline
Symbol 129 TextUses:28Used by:Timeline
Symbol 130 TextUses:14Used by:Timeline
Symbol 131 GraphicUsed by:Timeline
Symbol 132 TextUses:28Used by:Timeline
Symbol 133 TextUses:14Used by:Timeline
Symbol 134 GraphicUsed by:Timeline
Symbol 135 TextUses:28Used by:Timeline
Symbol 136 TextUses:14Used by:Timeline
Symbol 137 GraphicUsed by:Timeline
Symbol 138 TextUses:28Used by:Timeline
Symbol 139 GraphicUsed by:Timeline
Symbol 140 TextUses:14Used by:Timeline
Symbol 141 GraphicUsed by:Timeline
Symbol 142 TextUses:28Used by:Timeline
Symbol 143 GraphicUsed by:Timeline
Symbol 144 TextUses:14Used by:Timeline
Symbol 145 GraphicUsed by:165
Symbol 146 GraphicUsed by:165
Symbol 147 GraphicUsed by:165
Symbol 148 GraphicUsed by:165
Symbol 149 GraphicUsed by:165
Symbol 150 GraphicUsed by:165
Symbol 151 GraphicUsed by:165
Symbol 152 GraphicUsed by:165
Symbol 153 GraphicUsed by:165
Symbol 154 GraphicUsed by:165
Symbol 155 GraphicUsed by:165
Symbol 156 GraphicUsed by:165
Symbol 157 GraphicUsed by:165
Symbol 158 GraphicUsed by:165
Symbol 159 GraphicUsed by:165
Symbol 160 GraphicUsed by:165
Symbol 161 GraphicUsed by:165
Symbol 162 GraphicUsed by:165
Symbol 163 GraphicUsed by:165
Symbol 164 GraphicUsed by:165
Symbol 165 MovieClipUses:145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164Used by:202  Timeline
Symbol 166 MovieClipUses:117Used by:Timeline
Symbol 167 GraphicUsed by:Timeline
Symbol 168 TextUses:28Used by:Timeline
Symbol 169 GraphicUsed by:Timeline
Symbol 170 TextUses:14Used by:Timeline
Symbol 171 TextUses:14Used by:Timeline
Symbol 172 TextUses:14Used by:Timeline
Symbol 173 TextUses:14Used by:Timeline
Symbol 174 TextUses:14Used by:Timeline
Symbol 175 TextUses:14Used by:Timeline
Symbol 176 TextUses:14Used by:Timeline
Symbol 177 GraphicUsed by:179
Symbol 178 GraphicUsed by:179
Symbol 179 MovieClipUses:177 178Used by:Timeline
Symbol 180 TextUses:28Used by:Timeline
Symbol 181 GraphicUsed by:Timeline
Symbol 182 FontUsed by:183
Symbol 183 TextUses:14 182Used by:Timeline
Symbol 184 GraphicUsed by:187
Symbol 185 GraphicUsed by:187
Symbol 186 TextUses:14Used by:187
Symbol 187 ButtonUses:184 185 186Used by:Timeline
Symbol 188 GraphicUsed by:202
Symbol 189 GraphicUsed by:202
Symbol 190 GraphicUsed by:202
Symbol 191 GraphicUsed by:202
Symbol 192 GraphicUsed by:202
Symbol 193 GraphicUsed by:202
Symbol 194 GraphicUsed by:202
Symbol 195 GraphicUsed by:202
Symbol 196 GraphicUsed by:202
Symbol 197 GraphicUsed by:202
Symbol 198 GraphicUsed by:202
Symbol 199 GraphicUsed by:202
Symbol 200 GraphicUsed by:202
Symbol 201 GraphicUsed by:202
Symbol 202 MovieClipUses:188 165 189 190 191 192 193 194 195 196 197 198 199 200 201Used by:Timeline
Symbol 203 TextUses:14Used by:Timeline
Symbol 204 TextUses:14Used by:Timeline




http://swfchan.com/7/30434/info.shtml
Created: 19/5 -2019 08:44:47 Last modified: 19/5 -2019 08:44:47 Server time: 09/05 -2024 14:52:20