STORY LOOP FURRY PORN GAMES C SERVICES [?] [R] RND POPULAR | Archived flashes: 228114 |
/disc/ · /res/ — /show/ · /fap/ · /gg/ · /swf/ | P0001 · P2561 · P5121 |
This is the info page for Flash #30434 |
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 1stop(); if (_global.System) { System.security.allowDomain("mochibot.com"); } _level0.__com_mochibot__swfid = "bda3ec4d"; loadMovieNum ("http://mochibot.com/my/core.swf", 10301);Frame 2stop();Frame 3stop();Frame 4stop();Frame 5stop();Frame 6stop();Frame 7stop();Frame 8stop();Frame 9stop(); if (_global.System) { System.security.allowDomain("mochibot.com"); } _level0.__com_mochibot__swfid = "bda3ec4d"; loadMovieNum ("http://mochibot.com/my/core.swf", 10301);Frame 10stop();Frame 11stop();Frame 12stop();Frame 13stop();Frame 14stop();Frame 15stop();Frame 16stop();Frame 17stop(); if (_global.System) { System.security.allowDomain("mochibot.com"); } _level0.__com_mochibot__swfid = "bda3ec4d"; loadMovieNum ("http://mochibot.com/my/core.swf", 10301);Frame 18stop();Frame 19stop();Frame 20stop();Frame 21stop();Frame 22stop();Frame 23stop();Frame 24stop();Frame 25stop();Frame 26stop();Symbol 5 Buttonon (release) { getURL ("http://www.mochibot.com/"); }Symbol 11 Buttonon (release) { _root.nextFrame(); }Symbol 19 Buttonon (release) { getURL ("http://www.albinoblacksheep.com"); }Symbol 25 Buttonon (release) { _root.prevFrame(); }Symbol 119 Buttonon (release) { gotoAndPlay (2); }Symbol 125 MovieClip Frame 1stop();Symbol 187 Buttonon (release) { getURL ("http://www.imdb.com/name/nm0931530/"); }
Library Items
Symbol 1 Graphic | Used by:5 | ||
Symbol 2 Graphic | Used by:5 | ||
Symbol 3 Graphic | Used by:5 | ||
Symbol 4 Graphic | Used by:5 | ||
Symbol 5 Button | Uses:1 2 3 4 | Used by:Timeline | |
Symbol 6 Graphic | Used by:11 | ||
Symbol 7 Graphic | Used by:11 | ||
Symbol 8 Graphic | Used by:11 | ||
Symbol 9 Graphic | Used by:11 | ||
Symbol 10 Graphic | Used by:11 | ||
Symbol 11 Button | Uses:6 7 8 9 10 | Used by:Timeline | |
Symbol 12 Graphic | Used by:Timeline | ||
Symbol 13 Graphic | Used by:19 | ||
Symbol 14 Font | Used 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 Text | Uses:14 | Used by:19 | |
Symbol 16 Graphic | Used by:19 | ||
Symbol 17 Graphic | Used by:19 | ||
Symbol 18 Graphic | Used by:19 | ||
Symbol 19 Button | Uses:13 15 16 17 18 | Used by:Timeline | |
Symbol 20 Graphic | Used by:25 | ||
Symbol 21 Graphic | Used by:25 | ||
Symbol 22 Graphic | Used by:25 | ||
Symbol 23 Graphic | Used by:25 | ||
Symbol 24 Graphic | Used by:25 | ||
Symbol 25 Button | Uses:20 21 22 23 24 | Used by:Timeline | |
Symbol 26 Graphic | Used by:Timeline | ||
Symbol 27 Text | Uses:14 | Used by:Timeline | |
Symbol 28 Font | Used 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 Text | Uses:28 | Used by:Timeline | |
Symbol 30 Graphic | Used by:Timeline | ||
Symbol 31 Font | Used by:32 55 114 | ||
Symbol 32 Text | Uses:14 31 | Used by:Timeline | |
Symbol 33 Graphic | Used by:Timeline | ||
Symbol 34 Text | Uses:28 | Used by:Timeline | |
Symbol 35 Graphic | Used by:Timeline | ||
Symbol 36 Text | Uses:14 | Used by:Timeline | |
Symbol 37 Graphic | Used by:Timeline | ||
Symbol 38 Text | Uses:14 | Used by:Timeline | |
Symbol 39 Text | Uses:14 | Used by:Timeline | |
Symbol 40 Text | Uses:14 | Used by:Timeline | |
Symbol 41 Text | Uses:14 | Used by:Timeline | |
Symbol 42 Text | Uses:14 | Used by:Timeline | |
Symbol 43 Text | Uses:28 | Used by:Timeline | |
Symbol 44 Graphic | Used by:Timeline | ||
Symbol 45 Text | Uses:14 | Used by:Timeline | |
Symbol 46 Graphic | Used by:Timeline | ||
Symbol 47 Text | Uses:28 | Used by:Timeline | |
Symbol 48 Graphic | Used by:Timeline | ||
Symbol 49 Text | Uses:14 | Used by:Timeline | |
Symbol 50 Graphic | Used by:Timeline | ||
Symbol 51 Graphic | Used by:Timeline | ||
Symbol 52 Graphic | Used by:Timeline | ||
Symbol 53 Text | Uses:28 | Used by:Timeline | |
Symbol 54 Graphic | Used by:Timeline | ||
Symbol 55 Text | Uses:14 31 | Used by:Timeline | |
Symbol 56 Graphic | Used by:Timeline | ||
Symbol 57 Text | Uses:14 | Used by:Timeline | |
Symbol 58 Text | Uses:14 | Used by:Timeline | |
Symbol 59 Text | Uses:14 | Used by:Timeline | |
Symbol 60 Text | Uses:14 | Used by:Timeline | |
Symbol 61 Text | Used by:Timeline | ||
Symbol 62 Text | Uses:28 | Used by:Timeline | |
Symbol 63 Graphic | Used by:Timeline | ||
Symbol 64 Text | Uses:14 | Used by:Timeline | |
Symbol 65 Graphic | Used by:Timeline | ||
Symbol 66 Text | Uses:28 | Used by:Timeline | |
Symbol 67 Text | Uses:14 | Used by:Timeline | |
Symbol 68 Graphic | Used by:Timeline | ||
Symbol 69 Text | Uses:14 | Used by:Timeline | |
Symbol 70 Graphic | Used by:Timeline | ||
Symbol 71 Text | Uses:14 | Used by:Timeline | |
Symbol 72 Text | Uses:14 | Used by:Timeline | |
Symbol 73 Graphic | Used by:Timeline | ||
Symbol 74 Text | Uses:14 | Used by:Timeline | |
Symbol 75 Text | Uses:14 | Used by:Timeline | |
Symbol 76 Graphic | Used by:Timeline | ||
Symbol 77 Text | Uses:14 | Used by:Timeline | |
Symbol 78 Graphic | Used by:Timeline | ||
Symbol 79 Text | Uses:14 | Used by:Timeline | |
Symbol 80 Text | Uses:28 | Used by:Timeline | |
Symbol 81 Text | Uses:14 | Used by:Timeline | |
Symbol 82 Graphic | Used by:Timeline | ||
Symbol 83 Text | Uses:28 | Used by:Timeline | |
Symbol 84 Graphic | Used by:Timeline | ||
Symbol 85 Text | Uses:14 | Used by:Timeline | |
Symbol 86 Graphic | Used by:Timeline | ||
Symbol 87 Text | Uses:28 | Used by:Timeline | |
Symbol 88 Graphic | Used by:Timeline | ||
Symbol 89 Text | Uses:14 | Used by:Timeline | |
Symbol 90 Graphic | Used by:Timeline | ||
Symbol 91 Text | Uses:28 | Used by:Timeline | |
Symbol 92 Graphic | Used by:Timeline | ||
Symbol 93 Text | Uses:14 | Used by:Timeline | |
Symbol 94 Graphic | Used by:Timeline | ||
Symbol 95 Text | Uses:28 | Used by:Timeline | |
Symbol 96 Text | Uses:14 | Used by:Timeline | |
Symbol 97 Graphic | Used by:110 | ||
Symbol 98 Graphic | Used by:110 | ||
Symbol 99 Graphic | Used by:110 | ||
Symbol 100 Graphic | Used by:110 | ||
Symbol 101 Graphic | Used by:110 | ||
Symbol 102 Graphic | Used by:110 | ||
Symbol 103 Graphic | Used by:110 | ||
Symbol 104 Graphic | Used by:110 | ||
Symbol 105 Graphic | Used by:110 | ||
Symbol 106 Graphic | Used by:110 | ||
Symbol 107 Graphic | Used by:110 | ||
Symbol 108 Graphic | Used by:110 | ||
Symbol 109 Graphic | Used by:110 | ||
Symbol 110 MovieClip | Uses:97 98 99 100 101 102 103 104 105 106 107 108 109 | Used by:Timeline | |
Symbol 111 Text | Uses:28 | Used by:Timeline | |
Symbol 112 Text | Uses:14 | Used by:Timeline | |
Symbol 113 Text | Uses:28 | Used by:Timeline | |
Symbol 114 Text | Uses:14 31 | Used by:Timeline | |
Symbol 115 Text | Uses:28 | Used by:Timeline | |
Symbol 116 Text | Uses:14 | Used by:Timeline | |
Symbol 117 Graphic | Used by:119 125 166 | ||
Symbol 118 Text | Uses:14 | Used by:119 | |
Symbol 119 Button | Uses:117 118 | Used by:125 | |
Symbol 120 Graphic | Used by:125 | ||
Symbol 121 Graphic | Used by:125 | ||
Symbol 122 Text | Uses:14 | Used by:125 | |
Symbol 123 Text | Uses:14 | Used by:125 | |
Symbol 124 Text | Uses:14 | Used by:125 | |
Symbol 125 MovieClip | Uses:119 120 117 121 122 123 124 | Used by:Timeline | |
Symbol 126 Text | Uses:28 | Used by:Timeline | |
Symbol 127 Graphic | Used by:Timeline | ||
Symbol 128 Text | Uses:14 | Used by:Timeline | |
Symbol 129 Text | Uses:28 | Used by:Timeline | |
Symbol 130 Text | Uses:14 | Used by:Timeline | |
Symbol 131 Graphic | Used by:Timeline | ||
Symbol 132 Text | Uses:28 | Used by:Timeline | |
Symbol 133 Text | Uses:14 | Used by:Timeline | |
Symbol 134 Graphic | Used by:Timeline | ||
Symbol 135 Text | Uses:28 | Used by:Timeline | |
Symbol 136 Text | Uses:14 | Used by:Timeline | |
Symbol 137 Graphic | Used by:Timeline | ||
Symbol 138 Text | Uses:28 | Used by:Timeline | |
Symbol 139 Graphic | Used by:Timeline | ||
Symbol 140 Text | Uses:14 | Used by:Timeline | |
Symbol 141 Graphic | Used by:Timeline | ||
Symbol 142 Text | Uses:28 | Used by:Timeline | |
Symbol 143 Graphic | Used by:Timeline | ||
Symbol 144 Text | Uses:14 | Used by:Timeline | |
Symbol 145 Graphic | Used by:165 | ||
Symbol 146 Graphic | Used by:165 | ||
Symbol 147 Graphic | Used by:165 | ||
Symbol 148 Graphic | Used by:165 | ||
Symbol 149 Graphic | Used by:165 | ||
Symbol 150 Graphic | Used by:165 | ||
Symbol 151 Graphic | Used by:165 | ||
Symbol 152 Graphic | Used by:165 | ||
Symbol 153 Graphic | Used by:165 | ||
Symbol 154 Graphic | Used by:165 | ||
Symbol 155 Graphic | Used by:165 | ||
Symbol 156 Graphic | Used by:165 | ||
Symbol 157 Graphic | Used by:165 | ||
Symbol 158 Graphic | Used by:165 | ||
Symbol 159 Graphic | Used by:165 | ||
Symbol 160 Graphic | Used by:165 | ||
Symbol 161 Graphic | Used by:165 | ||
Symbol 162 Graphic | Used by:165 | ||
Symbol 163 Graphic | Used by:165 | ||
Symbol 164 Graphic | Used by:165 | ||
Symbol 165 MovieClip | Uses:145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | Used by:202 Timeline | |
Symbol 166 MovieClip | Uses:117 | Used by:Timeline | |
Symbol 167 Graphic | Used by:Timeline | ||
Symbol 168 Text | Uses:28 | Used by:Timeline | |
Symbol 169 Graphic | Used by:Timeline | ||
Symbol 170 Text | Uses:14 | Used by:Timeline | |
Symbol 171 Text | Uses:14 | Used by:Timeline | |
Symbol 172 Text | Uses:14 | Used by:Timeline | |
Symbol 173 Text | Uses:14 | Used by:Timeline | |
Symbol 174 Text | Uses:14 | Used by:Timeline | |
Symbol 175 Text | Uses:14 | Used by:Timeline | |
Symbol 176 Text | Uses:14 | Used by:Timeline | |
Symbol 177 Graphic | Used by:179 | ||
Symbol 178 Graphic | Used by:179 | ||
Symbol 179 MovieClip | Uses:177 178 | Used by:Timeline | |
Symbol 180 Text | Uses:28 | Used by:Timeline | |
Symbol 181 Graphic | Used by:Timeline | ||
Symbol 182 Font | Used by:183 | ||
Symbol 183 Text | Uses:14 182 | Used by:Timeline | |
Symbol 184 Graphic | Used by:187 | ||
Symbol 185 Graphic | Used by:187 | ||
Symbol 186 Text | Uses:14 | Used by:187 | |
Symbol 187 Button | Uses:184 185 186 | Used by:Timeline | |
Symbol 188 Graphic | Used by:202 | ||
Symbol 189 Graphic | Used by:202 | ||
Symbol 190 Graphic | Used by:202 | ||
Symbol 191 Graphic | Used by:202 | ||
Symbol 192 Graphic | Used by:202 | ||
Symbol 193 Graphic | Used by:202 | ||
Symbol 194 Graphic | Used by:202 | ||
Symbol 195 Graphic | Used by:202 | ||
Symbol 196 Graphic | Used by:202 | ||
Symbol 197 Graphic | Used by:202 | ||
Symbol 198 Graphic | Used by:202 | ||
Symbol 199 Graphic | Used by:202 | ||
Symbol 200 Graphic | Used by:202 | ||
Symbol 201 Graphic | Used by:202 | ||
Symbol 202 MovieClip | Uses:188 165 189 190 191 192 193 194 195 196 197 198 199 200 201 | Used by:Timeline | |
Symbol 203 Text | Uses:14 | Used by:Timeline | |
Symbol 204 Text | Uses:14 | Used by:Timeline |
|