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

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

413118_Animation_guide.swf

This is the info page for
Flash #9138

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


Text
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 Button
on (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 2
gotoAndPlay (1);
Symbol 80 Button
on (release) { this.gotoAndPlay("3"); }
Symbol 84 Button
on (release) { this.gotoAndPlay("5"); }
Symbol 89 Button
on (release) { this.gotoAndPlay("7"); }
Symbol 91 Button
on (release) { this.gotoAndPlay("9"); }
Symbol 97 Button
on (release) { this.gotoAndPlay("11"); }
Symbol 101 Button
on (release) { this.gotoAndPlay("13"); }
Symbol 113 Button
on (release) { this.gotoAndPlay("15"); }
Symbol 118 Button
on (release) { this.gotoAndPlay("17"); }
Symbol 135 Button
on (release) { this.gotoAndPlay("19"); }
Symbol 139 Button
on (release) { this.gotoAndPlay("21"); }
Symbol 155 Button
on (release) { this.gotoAndPlay("23"); }
Symbol 162 Button
on (release) { this.gotoAndPlay("25"); }
Symbol 164 Button
on (release) { this.gotoAndPlay("27"); }
Symbol 185 Button
on (release) { this.gotoAndPlay("29"); }
Symbol 188 Button
on (release) { this.gotoAndPlay("31"); }
Symbol 212 Button
on (release) { this.gotoAndPlay("33"); }
Symbol 217 Button
on (release) { this.gotoAndPlay("35"); }
Symbol 228 Button
on (release) { this.gotoAndPlay("37"); }
Symbol 231 Button
on (release) { this.gotoAndPlay("39"); }
Symbol 233 Button
on (release) { this.gotoAndPlay("41"); }
Symbol 241 Button
on (release) { this.gotoAndPlay("43"); }
Symbol 250 Button
on (release) { this.gotoAndPlay("45"); }
Symbol 252 Button
on (release) { this.gotoAndPlay("47"); }

Library Items

Symbol 1 GraphicUsed by:2
Symbol 2 MovieClipUses:1Used by:12
Symbol 3 FontUsed 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 TextUses:3Used by:12
Symbol 5 TextUses:3Used by:12
Symbol 6 GraphicUsed by:11
Symbol 7 GraphicUsed by:11
Symbol 8 TextUses:3Used by:9 11
Symbol 9 MovieClipUses:8Used by:11
Symbol 10 GraphicUsed by:11
Symbol 11 ButtonUses:6 7 9 8 10Used by:12
Symbol 12 MovieClipUses:2 4 5 11Used by:Timeline
Symbol 13 GraphicUsed by:46
Symbol 14 GraphicUsed by:46
Symbol 15 GraphicUsed by:46
Symbol 16 GraphicUsed by:46
Symbol 17 GraphicUsed by:46
Symbol 18 GraphicUsed by:46
Symbol 19 GraphicUsed by:46
Symbol 20 GraphicUsed by:46
Symbol 21 GraphicUsed by:46
Symbol 22 GraphicUsed by:46
Symbol 23 GraphicUsed by:46
Symbol 24 GraphicUsed by:46
Symbol 25 GraphicUsed by:46
Symbol 26 GraphicUsed by:46
Symbol 27 GraphicUsed by:46
Symbol 28 GraphicUsed by:46
Symbol 29 GraphicUsed by:31
Symbol 30 GraphicUsed by:31
Symbol 31 MovieClipUses:29 30Used by:35
Symbol 32 GraphicUsed by:34
Symbol 33 GraphicUsed by:34
Symbol 34 MovieClipUses:32 33Used by:35
Symbol 35 MovieClipUses:31 34Used by:46
Symbol 36 GraphicUsed by:46
Symbol 37 GraphicUsed by:46
Symbol 38 GraphicUsed by:46
Symbol 39 GraphicUsed by:46
Symbol 40 GraphicUsed by:46
Symbol 41 GraphicUsed by:46
Symbol 42 GraphicUsed by:46
Symbol 43 GraphicUsed by:46
Symbol 44 GraphicUsed by:46
Symbol 45 GraphicUsed by:46
Symbol 46 MovieClipUses: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 45Used by:Timeline
Symbol 47 TextUses:3Used by:Timeline
Symbol 48 GraphicUsed by:58
Symbol 49 TextUses:3Used by:58 183 211 240 249
Symbol 50 GraphicUsed by:53
Symbol 51 TextUses:3Used by:53
Symbol 52 TextUses:3Used by:53
Symbol 53 MovieClipUses:50 51 52Used by:58 154 161 183 211 240 249
Symbol 54 GraphicUsed by:56 58
Symbol 55 TextUses:3Used by:56 58
Symbol 56 MovieClipUses:54 55Used by:57
Symbol 57 MovieClipUses:56Used by:58
Symbol 58 ButtonUses:48 49 53 57 54 55Used by:Timeline
Symbol 59 GraphicUsed by:Timeline
Symbol 60 SoundUsed by:Timeline
Symbol 61 TextUses:3Used by:Timeline
Symbol 62 GraphicUsed by:72 161
Symbol 63 GraphicUsed by:72
Symbol 64 GraphicUsed by:72
Symbol 65 GraphicUsed by:72
Symbol 66 GraphicUsed by:72
Symbol 67 GraphicUsed by:72
Symbol 68 GraphicUsed by:72
Symbol 69 GraphicUsed by:72
Symbol 70 GraphicUsed by:72
Symbol 71 GraphicUsed by:72
Symbol 72 MovieClipUses:62 63 64 65 66 67 68 69 70 71Used by:74 159 215 216  Timeline
Symbol 73 GraphicUsed by:74  Timeline
Symbol 74 MovieClipUses:72 73Used by:Timeline
Symbol 75 GraphicUsed 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 GraphicUsed 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 TextUses:3Used by:78
Symbol 78 ButtonUses:77Used 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 GraphicUsed 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 ButtonUses:75 76 78 79Used by:Timeline
Symbol 81 GraphicUsed by:Timeline
Symbol 82 TextUses:3Used by:Timeline
Symbol 83 TextUses:3Used by:Timeline
Symbol 84 ButtonUses:75 76 78 79Used by:Timeline
Symbol 85 GraphicUsed by:Timeline
Symbol 86 TextUses:3Used by:Timeline
Symbol 87 TextUses:3Used by:Timeline
Symbol 88 TextUses:3Used by:Timeline
Symbol 89 ButtonUses:75 76 78 79Used by:Timeline
Symbol 90 TextUses:3Used by:Timeline
Symbol 91 ButtonUses:75 76 78 79Used by:Timeline
Symbol 92 GraphicUsed by:Timeline
Symbol 93 TextUses:3Used by:Timeline
Symbol 94 TextUses:3Used by:Timeline
Symbol 95 TextUses:3Used by:Timeline
Symbol 96 TextUses:3Used by:Timeline
Symbol 97 ButtonUses:75 76 78 79Used by:Timeline
Symbol 98 TextUses:3Used by:Timeline
Symbol 99 TextUses:3Used by:Timeline
Symbol 100 GraphicUsed by:Timeline
Symbol 101 ButtonUses:75 76 78 79Used by:Timeline
Symbol 102 TextUses:3Used by:Timeline
Symbol 103 GraphicUsed by:109
Symbol 104 GraphicUsed by:109
Symbol 105 GraphicUsed by:109
Symbol 106 GraphicUsed by:109
Symbol 107 GraphicUsed by:109
Symbol 108 GraphicUsed by:109
Symbol 109 MovieClipUses:103 104 105 106 107 108Used by:Timeline
Symbol 110 TextUses:3Used by:Timeline
Symbol 111 BitmapUsed by:112
Symbol 112 GraphicUses:111Used by:Timeline
Symbol 113 ButtonUses:75 76 78 79Used by:Timeline
Symbol 114 GraphicUsed by:Timeline
Symbol 115 TextUses:3Used by:Timeline
Symbol 116 TextUses:3Used by:Timeline
Symbol 117 GraphicUsed by:Timeline
Symbol 118 ButtonUses:75 76 78 79Used by:Timeline
Symbol 119 GraphicUsed by:Timeline
Symbol 120 TextUses:3Used by:Timeline
Symbol 121 TextUses:3Used by:Timeline
Symbol 122 BitmapUsed by:123
Symbol 123 GraphicUses:122Used by:Timeline
Symbol 124 GraphicUsed by:134
Symbol 125 GraphicUsed by:134
Symbol 126 GraphicUsed by:134
Symbol 127 GraphicUsed by:134
Symbol 128 GraphicUsed by:134
Symbol 129 GraphicUsed by:134
Symbol 130 GraphicUsed by:134
Symbol 131 GraphicUsed by:134
Symbol 132 GraphicUsed by:134
Symbol 133 GraphicUsed by:134
Symbol 134 MovieClipUses:124 125 126 127 128 129 130 131 132 133Used by:Timeline
Symbol 135 ButtonUses:75 76 78 79Used by:Timeline
Symbol 136 GraphicUsed by:Timeline
Symbol 137 TextUses:3Used by:Timeline
Symbol 138 TextUses:3Used by:Timeline
Symbol 139 ButtonUses:75 76 78 79Used by:Timeline
Symbol 140 GraphicUsed by:Timeline
Symbol 141 GraphicUsed by:152 154 159 161
Symbol 142 GraphicUsed by:152 154
Symbol 143 GraphicUsed by:152
Symbol 144 GraphicUsed by:152
Symbol 145 GraphicUsed by:152
Symbol 146 GraphicUsed by:152
Symbol 147 GraphicUsed by:152
Symbol 148 GraphicUsed by:152
Symbol 149 GraphicUsed by:152
Symbol 150 GraphicUsed by:152
Symbol 151 GraphicUsed by:152
Symbol 152 MovieClipUses:141 142 143 144 145 146 147 148 149 150 151Used by:153
Symbol 153 MovieClipUses:152Used by:154
Symbol 154 ButtonUses:53 153 141 142Used by:Timeline
Symbol 155 ButtonUses:75 76 78 79Used by:Timeline
Symbol 156 GraphicUsed by:Timeline
Symbol 157 TextUses:3Used by:Timeline
Symbol 158 TextUses:3Used by:Timeline
Symbol 159 MovieClipUses:141 72Used by:160
Symbol 160 MovieClipUses:159Used by:161
Symbol 161 ButtonUses:53 160 141 62Used by:Timeline
Symbol 162 ButtonUses:75 76 78 79Used by:Timeline
Symbol 163 TextUses:3Used by:Timeline
Symbol 164 ButtonUses:75 76 78 79Used by:Timeline
Symbol 165 TextUses:3Used by:Timeline
Symbol 166 GraphicUsed by:Timeline
Symbol 167 GraphicUsed by:168
Symbol 168 MovieClipUses:167Used by:172
Symbol 169 GraphicUsed by:172
Symbol 170 GraphicUsed by:171
Symbol 171 MovieClipUses:170Used by:172
Symbol 172 MovieClipUses:168 169 171Used by:173
Symbol 173 MovieClipUses:172Used by:Timeline
Symbol 174 GraphicUsed by:183
Symbol 175 GraphicUsed by:181 183
Symbol 176 GraphicUsed by:177
Symbol 177 ButtonUses:176Used by:178
Symbol 178 ButtonUses:177Used by:179
Symbol 179 ButtonUses:178Used by:180 183
Symbol 180 MovieClipUses:179Used by:181
Symbol 181 MovieClipUses:175 180Used by:182
Symbol 182 MovieClipUses:181Used by:183
Symbol 183 ButtonUses:174 49 53 182 175 179Used by:Timeline
Symbol 184 TextUses:3Used by:Timeline
Symbol 185 ButtonUses:75 76 78 79Used by:Timeline
Symbol 186 TextUses:3Used by:Timeline
Symbol 187 TextUses:3Used by:Timeline
Symbol 188 ButtonUses:75 76 78 79Used by:Timeline
Symbol 189 GraphicUsed by:201
Symbol 190 GraphicUsed by:191
Symbol 191 MovieClipUses:190Used by:201
Symbol 192 GraphicUsed by:193
Symbol 193 MovieClipUses:192Used by:201
Symbol 194 GraphicUsed by:195
Symbol 195 MovieClipUses:194Used by:201
Symbol 196 GraphicUsed by:197
Symbol 197 MovieClipUses:196Used by:201
Symbol 198 GraphicUsed by:199
Symbol 199 MovieClipUses:198Used by:201
Symbol 200 GraphicUsed by:201
Symbol 201 MovieClipUses:189 191 193 195 197 199 200Used by:Timeline
Symbol 202 TextUses:3Used by:Timeline
Symbol 203 GraphicUsed by:211
Symbol 204 GraphicUsed by:209 211
Symbol 205 GraphicUsed by:206 211
Symbol 206 MovieClipUses:205Used by:209
Symbol 207 GraphicUsed by:208 211
Symbol 208 MovieClipUses:207Used by:209
Symbol 209 MovieClipUses:204 206 208Used by:210
Symbol 210 MovieClipUses:209Used by:211
Symbol 211 ButtonUses:203 49 53 210 204 205 207Used by:Timeline
Symbol 212 ButtonUses:75 76 78 79Used by:Timeline
Symbol 213 TextUses:3Used by:Timeline
Symbol 214 TextUses:3Used by:Timeline
Symbol 215 MovieClipUses:72Used by:Timeline
Symbol 216 MovieClipUses:72Used by:Timeline
Symbol 217 ButtonUses:75 76 78 79Used by:Timeline
Symbol 218 TextUses:3Used by:Timeline
Symbol 219 BitmapUsed by:220
Symbol 220 GraphicUses:219Used by:227
Symbol 221 TextUsed by:227
Symbol 222 GraphicUsed by:227
Symbol 223 TextUses:3Used by:227
Symbol 224 TextUses:3Used by:227
Symbol 225 TextUses:3Used by:227
Symbol 226 TextUses:3Used by:227
Symbol 227 MovieClipUses:220 221 222 223 224 225 226Used by:Timeline
Symbol 228 ButtonUses:75 76 78 79Used by:Timeline
Symbol 229 TextUses:3Used by:Timeline
Symbol 230 TextUses:3Used by:Timeline
Symbol 231 ButtonUses:75 76 78 79Used by:Timeline
Symbol 232 TextUses:3Used by:Timeline
Symbol 233 ButtonUses:75 76 78 79Used by:Timeline
Symbol 234 TextUses:3Used by:Timeline
Symbol 235 GraphicUsed by:240 249
Symbol 236 BitmapUsed by:237
Symbol 237 GraphicUses:236Used by:238 240
Symbol 238 MovieClipUses:237Used by:239
Symbol 239 MovieClipUses:238Used by:240
Symbol 240 ButtonUses:235 49 53 239 237Used by:Timeline
Symbol 241 ButtonUses:75 76 78 79Used by:Timeline
Symbol 242 TextUses:3Used by:Timeline
Symbol 243 TextUses:3Used by:Timeline
Symbol 244 BitmapUsed by:245
Symbol 245 GraphicUses:244Used by:247 249
Symbol 246 TextUses:3Used by:247 249
Symbol 247 MovieClipUses:245 246Used by:248
Symbol 248 MovieClipUses:247Used by:249
Symbol 249 ButtonUses:235 49 53 248 245 246Used by:Timeline
Symbol 250 ButtonUses:75 76 78 79Used by:Timeline
Symbol 251 TextUses:3Used by:Timeline
Symbol 252 ButtonUses:75 76 78 79Used by:Timeline

Instance Names

"bar"Symbol 12 MovieClip Frame 1Symbol 2 MovieClip

Special Tags

FileAttributes (69)Timeline Frame 1Access local files only, Metadata not present, AS1/AS2.

Labels

"loaded"Symbol 12 MovieClip Frame 3




http://swfchan.com/2/9138/info.shtml
Created: 10/6 -2019 07:32:38 Last modified: 10/6 -2019 07:32:38 Server time: 05/05 -2024 17:44:54