STORY   LOOP   FURRY   PORN   GAMES
• C •   SERVICES [?] [R] RND   POPULAR		Archived flashes:
228125
/disc/ · /res/   —   /show/ · /fap/ · /gg/ · /swf/P0001 · P2561 · P5121
<div style="position:absolute;top:-99px;left:-99px;"><img src="http://swfchan.com:57475/38767088?noj=FRM38767088-13DC" width="1" height="1"></div>

Snap Animation Tutorial.swf

This is the info page for
Flash #27793

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


Text
Snap Animation:
or how I learned to stop working and take the easy way out

...yet another tutorial by

Yes, we all have our lazy days. Or maybe you've got to animate something
quickly without much time.
Such was the plight of TV animators during the early days of Television;
shows had to be prepared on a weekly basis, so little emphasis was placed
on the animations itself, and more on the storyline.
But that's another rant.
From what I gather, one of the ways these animators worked around such
schedules was "skimp out"  on the inbetween frames of keyframes by
replacing it with one big blur.

...Whether or not it's really skimping out on the imbetween frames,
"snap animation," as I call it, adds a different element to the animation.
A snap is really one big motion blur, which, if flashed inbetween two
positions, will make it look like there was a really fast movement
between position A and position B. Essentially, you're still animating by
keyframes, but with far less inbetween frames.

Pos. A

Pos. B

Let's start off with something simple. The white circle will snap from
A to B. Firstly, label where A and B will be...

Here's the general shape in red. You're just connecting the A and B
positions together. Really simple stuff here.

After that, it's just a matter of coloring it so that it looks like a motion
blur. Use a radial gradiant but center it near position B's center, or in
whatever direction it's heading.

This inbetween position cannot appear for more than a flash (i.e. 1-2
frames at 24 fps) on the screen since it looks nothing like what the
original shape looks like.

And this is what the final product looks like. Simple and effective, and
it looks like it's snapping between positions.

Look! It moves!

With that down, the sky's the limit as to what you can snap. It's all
the same thing as the circle, but it's a little harder to do with more
detailed objects. Let's take an umbrella for example:

to

This time, we're going to literally put one on top of the other.
And then, once again, trace the outline of where the movement
will take place (in red again); you'll notice that this isn't an outline
of the whole shape, but an outline of the areas that move

Once again, it's time for the coloring stage. Just keep track of what
moves where, and fill in approprately.

And here's the whole thing. The key is really in the shape and the
coloring of the inbetween.

When turning something, it's more than just connecting A to B. You
have to trace the path of the object. Let's look at a sword swing...

to

Let's just connect points A to B like we did with the circle example.
Same thing as before (you know what to do). The red outline
indicates the shape of the snap.

I suppose it works, but it just doesn't look right...

Here's the problem: In the snap, the sword's shape changes. If you were to
really swing a sword, the blade and hilt don't magically shorten. Obviously,
you need to change the outline to match the path that the sword takes...

Just remember when drawing a snap, keep the size of the shapes constant.
It looks more realistic, and if it's more realistic, it's easier to lead the
viewer on with your story ("Suspension of Disbelief" or something like
that... go pick up a book on psychology)

Alright, how about something harder, like a face turning from a front
view to a profile view? To start, set up the keyframes for the two
positions, one facing the screen, and one facing the side:

First thing's first: make sure the features line up. (actually, I cheated.
Draw lines like the ones shown in red and then draw the profile view.)

Once again, go into the onion skinning and draw the outline.
Remember, we're going for the object's path, not merely
connecting A to B

Confused? Well, Don't worry. There's a lot going on in the snap...

Let's start from the top down. First, part of the forehead
dissapears from out sight. Next, the eye on our right side
dissapears from our view, and the eye on the left side snaps into
place. The right nostril dissapears from out view, and the nose
snaps into place. The lips and chin also snap into place...

Complex, no? Just take it one oriface at a time.

The coloring plays a major role in the snaps. Here, it helps the
lines used for the mouth dissappear/reappear as the face turns

And that's it! Simple, no? Doing this is a great time saver, and it
always makes it look as if the thing that's moving is moving really
fast. However, don't do this too much, otherwise the whole
cartoon will look bad.
So have fun with this. And spend that time you save on something
productive, like watching TV or sleeping.

-Thor, Clod of Blunder/Jerry Chan

jgchan@student.umass.edu

Published on albinoblacksheep.com

ActionScript [AS1/AS2]

Frame 1

	function __com_mochibot__(swfid, mc, lv) {
		var x;
		var g;
		var s;
		var fv;
		var sb;
		var u;
		var res;
		var mb;
		var mbc;
		mb = "__mochibot__";
		mbc = "mochibot.com";
		g = (_global ? (_global) : (_level0._root));
		if (g[mb + swfid]) {
			return(g[mb + swfid]);
		}
		s = System.security;
		x = mc._root.getSWFVersion;
		fv = (x ? (mc.getSWFVersion()) : ((_global ? 6 : 5)));
		if (!s) {
			s = {};
		}
		sb = s.sandboxType;
		if (sb == "localWithFile") {
			return(null);
		}
		x = s.allowDomain;
		if (x) {
			s.allowDomain(mbc);
		}
		x = s.allowInsecureDomain;
		if (x) {
			s.allowInsecureDomain(mbc);
		}
		u = ((((((((((("http://" + mbc) + "/my/core.swf?mv=5&fv=") + fv) + "&v=") + escape(getVersion())) + "&swfid=") + escape(swfid)) + "&l=") + lv) + "&f=") + mc) + (sb ? ("&sb=" + sb) : "");
		lv = ((6 < fv) ? (mc.getNextHighestDepth()) : ((g[mb + "level"] ? (g[mb + "level"] + 1) : (lv))));
		g[mb + "level"] = lv;
		if (fv == 5) {
			res = "_level" + lv;
			if (!eval (res)) {
				loadMovieNum (u, lv);
			}
		} else {
			res = mc.createEmptyMovieClip(mb + swfid, lv);
			res.loadMovie(u);
		}
		return(res);
	}
	stop();
	__com_mochibot__("9b3ec470", this, 10301);
	donotload = "ebaumsworld.com";
	hyperText = _url.substr(0, _url.indexOf(":"));
	if (hyperText == "http") {
		slash = _url.indexOf("//");
		webSite = _url.substr(slash + 2, (_url.indexOf("/", slash + 2) - slash) - 2);
		webSite = webSite.toLowerCase();
		if (webSite.indexOf(donotload) != -1) {
			getURL ("http://www.albinoblacksheep.com", "_self");
			getURL ("http://www.ebaumsworldsucks.com", "_blank");
			getURL ("http://www.weebls-stuff.com", "_blank");
		}
	}
Frame 2

	stop();
	donotload = "ebaumsworld.com";
	hyperText = _url.substr(0, _url.indexOf(":"));
	if (hyperText == "http") {
		slash = _url.indexOf("//");
		webSite = _url.substr(slash + 2, (_url.indexOf("/", slash + 2) - slash) - 2);
		webSite = webSite.toLowerCase();
		if (webSite.indexOf(donotload) != -1) {
			getURL ("http://www.albinoblacksheep.com", "_self");
			getURL ("http://www.ebaumsworldsucks.com", "_blank");
			getURL ("http://www.weebls-stuff.com", "_blank");
		}
	}

	donotload = "ebaumsworld.com";
	hyperText = _url.substr(0, _url.indexOf(":"));
	if (hyperText == "http") {
		slash = _url.indexOf("//");
		webSite = _url.substr(slash + 2, (_url.indexOf("/", slash + 2) - slash) - 2);
		webSite = webSite.toLowerCase();
		if (webSite.indexOf(donotload) != -1) {
			getURL ("http://www.albinoblacksheep.com", "_self");
			getURL ("http://www.ebaumsworldsucks.com", "_blank");
			getURL ("http://www.weebls-stuff.com", "_blank");
		}
	}
Frame 3

	stop();
	donotload = "ebaumsworld.com";
	hyperText = _url.substr(0, _url.indexOf(":"));
	if (hyperText == "http") {
		slash = _url.indexOf("//");
		webSite = _url.substr(slash + 2, (_url.indexOf("/", slash + 2) - slash) - 2);
		webSite = webSite.toLowerCase();
		if (webSite.indexOf(donotload) != -1) {
			getURL ("http://www.albinoblacksheep.com", "_self");
			getURL ("http://www.ebaumsworldsucks.com", "_blank");
			getURL ("http://www.weebls-stuff.com", "_blank");
		}
	}
Frame 4

	stop();
Frame 5

	stop();
Frame 6

	stop();
Frame 7

	stop();
Frame 8

	stop();
Frame 9

	stop();
Frame 10

	stop();
Frame 11

	stop();
Frame 12

	stop();
Frame 13

	stop();
Frame 14

	stop();
Frame 15

	stop();
Frame 16

	stop();
Frame 17

	stop();
Frame 18

	stop();
Frame 19

	stop();
Frame 20

	stop();
Frame 21

	stop();
Frame 22

	stop();
Frame 23

	stop();
	donotload = "ebaumsworld.com";
	hyperText = _url.substr(0, _url.indexOf(":"));
	if (hyperText == "http") {
		slash = _url.indexOf("//");
		webSite = _url.substr(slash + 2, (_url.indexOf("/", slash + 2) - slash) - 2);
		webSite = webSite.toLowerCase();
		if (webSite.indexOf(donotload) != -1) {
			getURL ("http://www.albinoblacksheep.com", "_self");
			getURL ("http://www.ebaumsworldsucks.com", "_blank");
			getURL ("http://www.weebls-stuff.com", "_blank");
		}
	}
Symbol 6 Button

on (release) {
	_root.nextFrame();
}
Symbol 16 Button

on (release) {
	_root.prevFrame();
}

Library Items

Symbol 1 GraphicUsed by:6
Symbol 2 GraphicUsed by:6
Symbol 3 GraphicUsed by:6
Symbol 4 GraphicUsed by:6
Symbol 5 GraphicUsed by:6
Symbol 6 ButtonUses:1 2 3 4 5Used by:Timeline
Symbol 7 GraphicUsed by:Timeline
Symbol 8 FontUsed by:9 10 37 53 54 56 63 65 68 77 79 81 83 84 85 91 94 95 96
Symbol 9 TextUses:8Used by:Timeline
Symbol 10 TextUses:8Used by:Timeline
Symbol 11 GraphicUsed by:16
Symbol 12 GraphicUsed by:16
Symbol 13 GraphicUsed by:16
Symbol 14 GraphicUsed by:16
Symbol 15 GraphicUsed by:16
Symbol 16 ButtonUses:11 12 13 14 15Used by:Timeline
Symbol 17 FontUsed by:18 20 21 22 23 25 28 29 30 39 40 43 46 47 93
Symbol 18 TextUses:17Used by:Timeline
Symbol 19 GraphicUsed by:Timeline
Symbol 20 TextUses:17Used by:Timeline
Symbol 21 TextUses:17Used by:Timeline
Symbol 22 TextUses:17Used by:Timeline
Symbol 23 TextUses:17Used by:Timeline
Symbol 24 GraphicUsed by:Timeline
Symbol 25 TextUses:17Used by:Timeline
Symbol 26 GraphicUsed by:Timeline
Symbol 27 GraphicUsed by:Timeline
Symbol 28 TextUses:17Used by:Timeline
Symbol 29 TextUses:17Used by:Timeline
Symbol 30 TextUses:17Used by:Timeline
Symbol 31 GraphicUsed by:35
Symbol 32 GraphicUsed by:35
Symbol 33 GraphicUsed by:35
Symbol 34 GraphicUsed by:35
Symbol 35 MovieClipUses:31 32 33 34Used by:Timeline
Symbol 36 GraphicUsed by:Timeline
Symbol 37 TextUses:8Used by:Timeline
Symbol 38 GraphicUsed by:51  Timeline
Symbol 39 TextUses:17Used by:Timeline
Symbol 40 TextUses:17Used by:Timeline
Symbol 41 GraphicUsed by:Timeline
Symbol 42 GraphicUsed by:Timeline
Symbol 43 TextUses:17Used by:Timeline
Symbol 44 GraphicUsed by:Timeline
Symbol 45 GraphicUsed by:Timeline
Symbol 46 TextUses:17Used by:Timeline
Symbol 47 TextUses:17Used by:Timeline
Symbol 48 GraphicUsed by:51
Symbol 49 GraphicUsed by:51
Symbol 50 GraphicUsed by:51
Symbol 51 MovieClipUses:38 48 49 50Used by:Timeline
Symbol 52 GraphicUsed by:Timeline
Symbol 53 TextUses:8Used by:Timeline
Symbol 54 TextUses:8Used by:Timeline
Symbol 55 GraphicUsed by:Timeline
Symbol 56 TextUses:8Used by:Timeline
Symbol 57 GraphicUsed by:Timeline
Symbol 58 GraphicUsed by:62
Symbol 59 GraphicUsed by:62
Symbol 60 GraphicUsed by:62
Symbol 61 GraphicUsed by:62
Symbol 62 MovieClipUses:58 59 60 61Used by:Timeline
Symbol 63 TextUses:8Used by:Timeline
Symbol 64 GraphicUsed by:Timeline
Symbol 65 TextUses:8Used by:Timeline
Symbol 66 GraphicUsed by:Timeline
Symbol 67 GraphicUsed by:Timeline
Symbol 68 TextUses:8Used by:Timeline
Symbol 69 GraphicUsed by:Timeline
Symbol 70 GraphicUsed by:74
Symbol 71 GraphicUsed by:74
Symbol 72 GraphicUsed by:74
Symbol 73 GraphicUsed by:74
Symbol 74 MovieClipUses:70 71 72 73Used by:Timeline
Symbol 75 GraphicUsed by:Timeline
Symbol 76 GraphicUsed by:Timeline
Symbol 77 TextUses:8Used by:Timeline
Symbol 78 GraphicUsed by:Timeline
Symbol 79 TextUses:8Used by:Timeline
Symbol 80 GraphicUsed by:Timeline
Symbol 81 TextUses:8Used by:Timeline
Symbol 82 GraphicUsed by:Timeline
Symbol 83 TextUses:8Used by:Timeline
Symbol 84 TextUses:8Used by:Timeline
Symbol 85 TextUses:8Used by:Timeline
Symbol 86 GraphicUsed by:90
Symbol 87 GraphicUsed by:90
Symbol 88 GraphicUsed by:90
Symbol 89 GraphicUsed by:90
Symbol 90 MovieClipUses:86 87 88 89Used by:Timeline
Symbol 91 TextUses:8Used by:Timeline
Symbol 92 GraphicUsed by:Timeline
Symbol 93 TextUses:17Used by:Timeline
Symbol 94 TextUses:8Used by:Timeline
Symbol 95 TextUses:8Used by:Timeline
Symbol 96 TextUses:8Used by:Timeline
Symbol 97 GraphicUsed by:101
Symbol 98 GraphicUsed by:101
Symbol 99 GraphicUsed by:101
Symbol 100 GraphicUsed by:101
Symbol 101 MovieClipUses:97 98 99 100Used by:Timeline


http://swfchan.com/6/27793/info.shtml
Created: 21/5 -2019 04:35:15 Last modified: 21/5 -2019 04:35:15 Server time: 13/05 -2024 04:56:09