STORY LOOP FURRY PORN GAMES C SERVICES [?] [R] RND POPULAR | Archived flashes: 228095 |
/disc/ · /res/ — /show/ · /fap/ · /gg/ · /swf/ | P0001 · P2561 · P5121 |
This is the info page for Flash #9138 |
535 KB |
LOADING |
Next |
This tutorial will only show you how I animate and it's VERY possible there's way better methods out there. Although I hope it will be useful for some people out there :) (Sorry for all typos, English is my secondary language) |
TOUCH |
TOUCH |
TOUCH |
There will be Red buttons like this every now and than, hover over them to get additional information or an extra animation sample. |
The animation I will use as a sample will be this one. It's not a very hard loop to make animation-wise, but it includes almost everything I want to go through. |
BACK |
The first thing I will explain is basic perspective that will help us with adding keyframes. |
ok we've got a circle of balls. they represent the keypositions the dancer will be in. |
If we now move the balls so that if they where seen from the side, it would look like this: |
(A little exaggerated) |
Although the point is that the legs will move "slower" on the sides as due to the perspective. |
Now that we got that clear we have to do alittle research. To know the different keypositions we will need to look at a real-life breakdancer. I chose to examine Joe Eigo, you can just youtube him. Now, as we ain't making a super realistic animation the important thing ain't to make the positions 100% accurate but to rather take the real positions in and transform them into positions that look good in animation. |
These are the keypositions I choose: |
Note: I put double keyframes in the middle (to get the right timing) |
So basicly my keys are: |
(we have the keys so close as the motion is so fast) |
The first thing I do is draw raw keyframes. |
I use a pink brush as it's easy to see the black outlines once you start drawing your character over the help lines. The lines can be very sketchy as long as you see where the limbs are. This skeleton is similar to the ones frequently used in "how to draw" books. |
I check the timing on the raws. |
Looks pretty ok, and it will look a lot smoother once we get the inbetweens in there! |
The raws: |
Here's all the raw frames, keyframes are pink and inbetween are green. The keys outnumber the inbetweens in this animation because, as I said earlier, a fast motion needs alot of keyframes. |
Final timing: |
Still shaky but the motion is smoother now. and we only added 4 pictures :). also note that I made all the frames pink now, otherwise it would be hard to watch. also the only tip I can give on timing is that you have to try different timings until you find a nice one, although you can keep easing in the back of your head (but more on that later!) |
Outlines: |
Rather easy step. just draw over the raws |
Colors: |
Alittle trickier. now you have to color, the hard part though is to shade it correctly think of the shadow as an animation of it's own. make sure it looks ok by watching the animation sometimes as you work with it. |
A few tips and tricks will now follow :) |
Easing is when you make things go slower or faster. You can use it when an object is moving and then turning to show that it's heavy. (or to just give movements more dynamics in general) |
Easing: |
Anticipation: |
A good explanation of Anticipation is that it is a motion before a motion that indicates that the motion is coming. Might sound complex but it really isn't. I'll give you an example. |
When he shoots it's just 1 frame. but we still know what happens, because of the anticipation! When he draws the bow back we just know it will go the other way also |
I guess the choice of thick outlines is a matter of taste. But never the less I love to use it :P I usually find my animations seem more clean and professional if I use it. But you really don't have to use it. I'll show you how to make it though. |
Thick outlines: |
That's all you have to do. mark the symbol, add filter>drop shadow make the distance 0 and max the strength, the blur can be adjusted to increase/decrease the thickness of the outline. (and if you didn't understand your animation have to be in a symbol for this to work.) |
4 |
1000% |
0 |
Drop shadow |
Mirror image: |
The Mirror image is good for stand alone animations. Makes it look a bit more dynamic than the character just hanging in the air. |
Duplicate the symbol and place one of them under the other and flip it vertical, and if you are using the thick outline, make sure to remove the drop shadow filter on the lower one of them. |
Add a blur filter on the lower one of them with just a little blur on it. |
Now we make a new layer over the lower symbol but preferably under the top one. On this layer we will make a gradient. It will be white in both ends but one end should be 100% alpha and the other one 0%, now make a bow and try to make the gardiant fit well, about half the figure should be clouded away. |
And there you go, a nice mirror image |
0% |
That's all for now, press next to restart. |
ActionScript [AS1/AS2]
Symbol 11 Buttonon (release) { _root.play(); }Symbol 12 MovieClip Frame 1_root.stop(); PercentLoaded = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100; if (PercentLoaded != 100) { setProperty(bar, _xscale , PercentLoaded); } else { gotoAndStop ("loaded"); }Symbol 12 MovieClip Frame 2gotoAndPlay (1);Symbol 80 Buttonon (release) { this.gotoAndPlay("3"); }Symbol 84 Buttonon (release) { this.gotoAndPlay("5"); }Symbol 89 Buttonon (release) { this.gotoAndPlay("7"); }Symbol 91 Buttonon (release) { this.gotoAndPlay("9"); }Symbol 97 Buttonon (release) { this.gotoAndPlay("11"); }Symbol 101 Buttonon (release) { this.gotoAndPlay("13"); }Symbol 113 Buttonon (release) { this.gotoAndPlay("15"); }Symbol 118 Buttonon (release) { this.gotoAndPlay("17"); }Symbol 135 Buttonon (release) { this.gotoAndPlay("19"); }Symbol 139 Buttonon (release) { this.gotoAndPlay("21"); }Symbol 155 Buttonon (release) { this.gotoAndPlay("23"); }Symbol 162 Buttonon (release) { this.gotoAndPlay("25"); }Symbol 164 Buttonon (release) { this.gotoAndPlay("27"); }Symbol 185 Buttonon (release) { this.gotoAndPlay("29"); }Symbol 188 Buttonon (release) { this.gotoAndPlay("31"); }Symbol 212 Buttonon (release) { this.gotoAndPlay("33"); }Symbol 217 Buttonon (release) { this.gotoAndPlay("35"); }Symbol 228 Buttonon (release) { this.gotoAndPlay("37"); }Symbol 231 Buttonon (release) { this.gotoAndPlay("39"); }Symbol 233 Buttonon (release) { this.gotoAndPlay("41"); }Symbol 241 Buttonon (release) { this.gotoAndPlay("43"); }Symbol 250 Buttonon (release) { this.gotoAndPlay("45"); }Symbol 252 Buttonon (release) { this.gotoAndPlay("47"); }
Library Items
Symbol 1 Graphic | Used by:2 | |
Symbol 2 MovieClip | Uses:1 | Used by:12 |
Symbol 3 Font | Used by:4 5 8 47 49 51 52 55 61 77 82 83 86 87 88 90 93 94 95 96 98 99 102 110 115 116 120 121 137 138 157 158 163 165 184 186 187 202 213 214 218 223 224 225 226 229 230 232 234 242 243 246 251 | |
Symbol 4 Text | Uses:3 | Used by:12 |
Symbol 5 Text | Uses:3 | Used by:12 |
Symbol 6 Graphic | Used by:11 | |
Symbol 7 Graphic | Used by:11 | |
Symbol 8 Text | Uses:3 | Used by:9 11 |
Symbol 9 MovieClip | Uses:8 | Used by:11 |
Symbol 10 Graphic | Used by:11 | |
Symbol 11 Button | Uses:6 7 9 8 10 | Used by:12 |
Symbol 12 MovieClip | Uses:2 4 5 11 | Used by:Timeline |
Symbol 13 Graphic | Used by:46 | |
Symbol 14 Graphic | Used by:46 | |
Symbol 15 Graphic | Used by:46 | |
Symbol 16 Graphic | Used by:46 | |
Symbol 17 Graphic | Used by:46 | |
Symbol 18 Graphic | Used by:46 | |
Symbol 19 Graphic | Used by:46 | |
Symbol 20 Graphic | Used by:46 | |
Symbol 21 Graphic | Used by:46 | |
Symbol 22 Graphic | Used by:46 | |
Symbol 23 Graphic | Used by:46 | |
Symbol 24 Graphic | Used by:46 | |
Symbol 25 Graphic | Used by:46 | |
Symbol 26 Graphic | Used by:46 | |
Symbol 27 Graphic | Used by:46 | |
Symbol 28 Graphic | Used by:46 | |
Symbol 29 Graphic | Used by:31 | |
Symbol 30 Graphic | Used by:31 | |
Symbol 31 MovieClip | Uses:29 30 | Used by:35 |
Symbol 32 Graphic | Used by:34 | |
Symbol 33 Graphic | Used by:34 | |
Symbol 34 MovieClip | Uses:32 33 | Used by:35 |
Symbol 35 MovieClip | Uses:31 34 | Used by:46 |
Symbol 36 Graphic | Used by:46 | |
Symbol 37 Graphic | Used by:46 | |
Symbol 38 Graphic | Used by:46 | |
Symbol 39 Graphic | Used by:46 | |
Symbol 40 Graphic | Used by:46 | |
Symbol 41 Graphic | Used by:46 | |
Symbol 42 Graphic | Used by:46 | |
Symbol 43 Graphic | Used by:46 | |
Symbol 44 Graphic | Used by:46 | |
Symbol 45 Graphic | Used by:46 | |
Symbol 46 MovieClip | Uses:13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 35 36 37 38 39 40 41 42 43 44 45 | Used by:Timeline |
Symbol 47 Text | Uses:3 | Used by:Timeline |
Symbol 48 Graphic | Used by:58 | |
Symbol 49 Text | Uses:3 | Used by:58 183 211 240 249 |
Symbol 50 Graphic | Used by:53 | |
Symbol 51 Text | Uses:3 | Used by:53 |
Symbol 52 Text | Uses:3 | Used by:53 |
Symbol 53 MovieClip | Uses:50 51 52 | Used by:58 154 161 183 211 240 249 |
Symbol 54 Graphic | Used by:56 58 | |
Symbol 55 Text | Uses:3 | Used by:56 58 |
Symbol 56 MovieClip | Uses:54 55 | Used by:57 |
Symbol 57 MovieClip | Uses:56 | Used by:58 |
Symbol 58 Button | Uses:48 49 53 57 54 55 | Used by:Timeline |
Symbol 59 Graphic | Used by:Timeline | |
Symbol 60 Sound | Used by:Timeline | |
Symbol 61 Text | Uses:3 | Used by:Timeline |
Symbol 62 Graphic | Used by:72 161 | |
Symbol 63 Graphic | Used by:72 | |
Symbol 64 Graphic | Used by:72 | |
Symbol 65 Graphic | Used by:72 | |
Symbol 66 Graphic | Used by:72 | |
Symbol 67 Graphic | Used by:72 | |
Symbol 68 Graphic | Used by:72 | |
Symbol 69 Graphic | Used by:72 | |
Symbol 70 Graphic | Used by:72 | |
Symbol 71 Graphic | Used by:72 | |
Symbol 72 MovieClip | Uses:62 63 64 65 66 67 68 69 70 71 | Used by:74 159 215 216 Timeline |
Symbol 73 Graphic | Used by:74 Timeline | |
Symbol 74 MovieClip | Uses:72 73 | Used by:Timeline |
Symbol 75 Graphic | Used by:80 84 89 91 97 101 113 118 135 139 155 162 164 185 188 212 217 228 231 233 241 250 252 | |
Symbol 76 Graphic | Used by:80 84 89 91 97 101 113 118 135 139 155 162 164 185 188 212 217 228 231 233 241 250 252 | |
Symbol 77 Text | Uses:3 | Used by:78 |
Symbol 78 Button | Uses:77 | Used by:80 84 89 91 97 101 113 118 135 139 155 162 164 185 188 212 217 228 231 233 241 250 252 |
Symbol 79 Graphic | Used by:80 84 89 91 97 101 113 118 135 139 155 162 164 185 188 212 217 228 231 233 241 250 252 | |
Symbol 80 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 81 Graphic | Used by:Timeline | |
Symbol 82 Text | Uses:3 | Used by:Timeline |
Symbol 83 Text | Uses:3 | Used by:Timeline |
Symbol 84 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 85 Graphic | Used by:Timeline | |
Symbol 86 Text | Uses:3 | Used by:Timeline |
Symbol 87 Text | Uses:3 | Used by:Timeline |
Symbol 88 Text | Uses:3 | Used by:Timeline |
Symbol 89 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 90 Text | Uses:3 | Used by:Timeline |
Symbol 91 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 92 Graphic | Used by:Timeline | |
Symbol 93 Text | Uses:3 | Used by:Timeline |
Symbol 94 Text | Uses:3 | Used by:Timeline |
Symbol 95 Text | Uses:3 | Used by:Timeline |
Symbol 96 Text | Uses:3 | Used by:Timeline |
Symbol 97 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 98 Text | Uses:3 | Used by:Timeline |
Symbol 99 Text | Uses:3 | Used by:Timeline |
Symbol 100 Graphic | Used by:Timeline | |
Symbol 101 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 102 Text | Uses:3 | Used by:Timeline |
Symbol 103 Graphic | Used by:109 | |
Symbol 104 Graphic | Used by:109 | |
Symbol 105 Graphic | Used by:109 | |
Symbol 106 Graphic | Used by:109 | |
Symbol 107 Graphic | Used by:109 | |
Symbol 108 Graphic | Used by:109 | |
Symbol 109 MovieClip | Uses:103 104 105 106 107 108 | Used by:Timeline |
Symbol 110 Text | Uses:3 | Used by:Timeline |
Symbol 111 Bitmap | Used by:112 | |
Symbol 112 Graphic | Uses:111 | Used by:Timeline |
Symbol 113 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 114 Graphic | Used by:Timeline | |
Symbol 115 Text | Uses:3 | Used by:Timeline |
Symbol 116 Text | Uses:3 | Used by:Timeline |
Symbol 117 Graphic | Used by:Timeline | |
Symbol 118 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 119 Graphic | Used by:Timeline | |
Symbol 120 Text | Uses:3 | Used by:Timeline |
Symbol 121 Text | Uses:3 | Used by:Timeline |
Symbol 122 Bitmap | Used by:123 | |
Symbol 123 Graphic | Uses:122 | Used by:Timeline |
Symbol 124 Graphic | Used by:134 | |
Symbol 125 Graphic | Used by:134 | |
Symbol 126 Graphic | Used by:134 | |
Symbol 127 Graphic | Used by:134 | |
Symbol 128 Graphic | Used by:134 | |
Symbol 129 Graphic | Used by:134 | |
Symbol 130 Graphic | Used by:134 | |
Symbol 131 Graphic | Used by:134 | |
Symbol 132 Graphic | Used by:134 | |
Symbol 133 Graphic | Used by:134 | |
Symbol 134 MovieClip | Uses:124 125 126 127 128 129 130 131 132 133 | Used by:Timeline |
Symbol 135 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 136 Graphic | Used by:Timeline | |
Symbol 137 Text | Uses:3 | Used by:Timeline |
Symbol 138 Text | Uses:3 | Used by:Timeline |
Symbol 139 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 140 Graphic | Used by:Timeline | |
Symbol 141 Graphic | Used by:152 154 159 161 | |
Symbol 142 Graphic | Used by:152 154 | |
Symbol 143 Graphic | Used by:152 | |
Symbol 144 Graphic | Used by:152 | |
Symbol 145 Graphic | Used by:152 | |
Symbol 146 Graphic | Used by:152 | |
Symbol 147 Graphic | Used by:152 | |
Symbol 148 Graphic | Used by:152 | |
Symbol 149 Graphic | Used by:152 | |
Symbol 150 Graphic | Used by:152 | |
Symbol 151 Graphic | Used by:152 | |
Symbol 152 MovieClip | Uses:141 142 143 144 145 146 147 148 149 150 151 | Used by:153 |
Symbol 153 MovieClip | Uses:152 | Used by:154 |
Symbol 154 Button | Uses:53 153 141 142 | Used by:Timeline |
Symbol 155 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 156 Graphic | Used by:Timeline | |
Symbol 157 Text | Uses:3 | Used by:Timeline |
Symbol 158 Text | Uses:3 | Used by:Timeline |
Symbol 159 MovieClip | Uses:141 72 | Used by:160 |
Symbol 160 MovieClip | Uses:159 | Used by:161 |
Symbol 161 Button | Uses:53 160 141 62 | Used by:Timeline |
Symbol 162 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 163 Text | Uses:3 | Used by:Timeline |
Symbol 164 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 165 Text | Uses:3 | Used by:Timeline |
Symbol 166 Graphic | Used by:Timeline | |
Symbol 167 Graphic | Used by:168 | |
Symbol 168 MovieClip | Uses:167 | Used by:172 |
Symbol 169 Graphic | Used by:172 | |
Symbol 170 Graphic | Used by:171 | |
Symbol 171 MovieClip | Uses:170 | Used by:172 |
Symbol 172 MovieClip | Uses:168 169 171 | Used by:173 |
Symbol 173 MovieClip | Uses:172 | Used by:Timeline |
Symbol 174 Graphic | Used by:183 | |
Symbol 175 Graphic | Used by:181 183 | |
Symbol 176 Graphic | Used by:177 | |
Symbol 177 Button | Uses:176 | Used by:178 |
Symbol 178 Button | Uses:177 | Used by:179 |
Symbol 179 Button | Uses:178 | Used by:180 183 |
Symbol 180 MovieClip | Uses:179 | Used by:181 |
Symbol 181 MovieClip | Uses:175 180 | Used by:182 |
Symbol 182 MovieClip | Uses:181 | Used by:183 |
Symbol 183 Button | Uses:174 49 53 182 175 179 | Used by:Timeline |
Symbol 184 Text | Uses:3 | Used by:Timeline |
Symbol 185 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 186 Text | Uses:3 | Used by:Timeline |
Symbol 187 Text | Uses:3 | Used by:Timeline |
Symbol 188 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 189 Graphic | Used by:201 | |
Symbol 190 Graphic | Used by:191 | |
Symbol 191 MovieClip | Uses:190 | Used by:201 |
Symbol 192 Graphic | Used by:193 | |
Symbol 193 MovieClip | Uses:192 | Used by:201 |
Symbol 194 Graphic | Used by:195 | |
Symbol 195 MovieClip | Uses:194 | Used by:201 |
Symbol 196 Graphic | Used by:197 | |
Symbol 197 MovieClip | Uses:196 | Used by:201 |
Symbol 198 Graphic | Used by:199 | |
Symbol 199 MovieClip | Uses:198 | Used by:201 |
Symbol 200 Graphic | Used by:201 | |
Symbol 201 MovieClip | Uses:189 191 193 195 197 199 200 | Used by:Timeline |
Symbol 202 Text | Uses:3 | Used by:Timeline |
Symbol 203 Graphic | Used by:211 | |
Symbol 204 Graphic | Used by:209 211 | |
Symbol 205 Graphic | Used by:206 211 | |
Symbol 206 MovieClip | Uses:205 | Used by:209 |
Symbol 207 Graphic | Used by:208 211 | |
Symbol 208 MovieClip | Uses:207 | Used by:209 |
Symbol 209 MovieClip | Uses:204 206 208 | Used by:210 |
Symbol 210 MovieClip | Uses:209 | Used by:211 |
Symbol 211 Button | Uses:203 49 53 210 204 205 207 | Used by:Timeline |
Symbol 212 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 213 Text | Uses:3 | Used by:Timeline |
Symbol 214 Text | Uses:3 | Used by:Timeline |
Symbol 215 MovieClip | Uses:72 | Used by:Timeline |
Symbol 216 MovieClip | Uses:72 | Used by:Timeline |
Symbol 217 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 218 Text | Uses:3 | Used by:Timeline |
Symbol 219 Bitmap | Used by:220 | |
Symbol 220 Graphic | Uses:219 | Used by:227 |
Symbol 221 Text | Used by:227 | |
Symbol 222 Graphic | Used by:227 | |
Symbol 223 Text | Uses:3 | Used by:227 |
Symbol 224 Text | Uses:3 | Used by:227 |
Symbol 225 Text | Uses:3 | Used by:227 |
Symbol 226 Text | Uses:3 | Used by:227 |
Symbol 227 MovieClip | Uses:220 221 222 223 224 225 226 | Used by:Timeline |
Symbol 228 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 229 Text | Uses:3 | Used by:Timeline |
Symbol 230 Text | Uses:3 | Used by:Timeline |
Symbol 231 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 232 Text | Uses:3 | Used by:Timeline |
Symbol 233 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 234 Text | Uses:3 | Used by:Timeline |
Symbol 235 Graphic | Used by:240 249 | |
Symbol 236 Bitmap | Used by:237 | |
Symbol 237 Graphic | Uses:236 | Used by:238 240 |
Symbol 238 MovieClip | Uses:237 | Used by:239 |
Symbol 239 MovieClip | Uses:238 | Used by:240 |
Symbol 240 Button | Uses:235 49 53 239 237 | Used by:Timeline |
Symbol 241 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 242 Text | Uses:3 | Used by:Timeline |
Symbol 243 Text | Uses:3 | Used by:Timeline |
Symbol 244 Bitmap | Used by:245 | |
Symbol 245 Graphic | Uses:244 | Used by:247 249 |
Symbol 246 Text | Uses:3 | Used by:247 249 |
Symbol 247 MovieClip | Uses:245 246 | Used by:248 |
Symbol 248 MovieClip | Uses:247 | Used by:249 |
Symbol 249 Button | Uses:235 49 53 248 245 246 | Used by:Timeline |
Symbol 250 Button | Uses:75 76 78 79 | Used by:Timeline |
Symbol 251 Text | Uses:3 | Used by:Timeline |
Symbol 252 Button | Uses:75 76 78 79 | Used by:Timeline |
Instance Names
"bar" | Symbol 12 MovieClip Frame 1 | Symbol 2 MovieClip |
Special Tags
FileAttributes (69) | Timeline Frame 1 | Access local files only, Metadata not present, AS1/AS2. |
Labels
"loaded" | Symbol 12 MovieClip Frame 3 |
|