HOME | DD

Kraden — PixelBattle - Animation Test

Published: 2007-09-22 14:56:20 +0000 UTC; Views: 4295; Favourites: 66; Downloads: 133
Redirect to original
Description Hi Crew.

Thought I'd practice my hand at Frame by Frame animation for the PixelBattle animation coming up. I wanted to try to include some conplex movements and collision effects, though with the slightly sketchy linework it's a tad hard to see unless you full screen the animtion.

It's meant to be a snippet from the battle between Myself and *Inspectornills . The was the BG and foreground movement is called ' Parlax shifting (sp?) ' and was a way to fake depth a movement in the old 2D sidescrolling games

The animation itself is split into 2 parts. The first is my sketch moevements. The second if a quick color and effects render over the top. Took about 4 hours to do the whole thing.

--

I'm thinking for the actuall animation I might paint the frames in Photoshop, pull anime style animations through flash but generaly have a more...close up less dynamic animation, with prettier pictures and effects.
Unless I make it in 3D. WELL! Then we'd have something fancy.
Related content
Comments: 159

Kraden In reply to ??? [2007-09-27 23:47:08 +0000 UTC]

I'll do a tutorial next week and whack it on thar nets.

👍: 0 ⏩: 1

Lord-Ivan In reply to Kraden [2007-09-30 04:49:26 +0000 UTC]

Awsome!!

👍: 0 ⏩: 0

BeerGoggles [2007-09-26 11:48:47 +0000 UTC]

Cool animation man, can't wait to see the final product. Are they bladed poi?

👍: 0 ⏩: 1

Kraden In reply to BeerGoggles [2007-09-27 03:23:28 +0000 UTC]

Prettymuch yes

👍: 0 ⏩: 0

lol20 [2007-09-25 01:03:02 +0000 UTC]

That looks awsome man
are you going to do more of that?
that would awsome man

👍: 0 ⏩: 1

Kraden In reply to lol20 [2007-09-25 04:18:38 +0000 UTC]

Yes..and BETTER!

👍: 0 ⏩: 1

lol20 In reply to Kraden [2007-09-25 04:19:56 +0000 UTC]

At least it'll wake the brain
or its dead allready
sorry

👍: 0 ⏩: 1

Kraden In reply to lol20 [2007-09-25 05:14:09 +0000 UTC]

Nyeh?
I didn't understand that

👍: 0 ⏩: 1

lol20 In reply to Kraden [2007-09-25 06:00:18 +0000 UTC]

oh sorry
nvm
But that looks awosme dude
keep it up!

👍: 0 ⏩: 0

dire-musaera [2007-09-24 04:05:52 +0000 UTC]

thats really cool, the bg makes me think of wile.e coyote cartoons ^^

teach me how to use flash? i have no idea how to use it and tutorials always lose me at "key frames"

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-24 06:38:49 +0000 UTC]

Actually sure.

-Keyframs vs frames
A 'frame' is like a frame in a movie. It is a point in time, lines up in sequence. If you play these frames one after the other it gives the illusion of movement.
A 'keyframe' is a frame that contains something. A normal frame can show something but a Keyframe contains some change. Wether a new circle, or a movement, or a color\transparency change. To save you having to put in info for every single frame you use keyframes to indicate key events.
Take a picture for example. You make a 'keyframe' at 1second. Put in a picture.
move your timeline to 10seconds, put in a keyframe. Now the keyframe takes the data from the previous frame as a template (you can empty this keyframe to remove an item etc, but that's not important right now).
So we're at frame 10seocnds. Turn your opacity down to 0% and tell Flash to 'animate' between these two points.
Click play, and the picture will fade out over 10 seconds.

You get 10seonds worth of animation but only have to make 2 stages of animation. Opacity at 100% and opacity at 0%.


-Basicly...
Basicly the 'Timeline' is the bit up top that, much like a movie, contains frames.
It layers itself like Photoshop does, and even has lock and hide functions.
By drawing in shapes and making the layer a 'mask' it works like a mask in photoshop too.

If you put a circle into the main window at frame #1 it would make a keyframe.
Go to frame #10, Insert>Keyframe, and move the circle across the page.
Tell flash to 'tween' or animte the movement across these frames and when you play the animation it will move the ball across the page.

-Two types of animation
There are two ways to animate in flash. One is to draw in every single frame of animation, shifting lines and parts or even re-drawing to suit what you're trying to accomplish. This is good for complex movements.

The other way is to 'tween' which in layments terms means 'move between these two points'. So like with our ball you have stages in animation, tell flash to 'tween' between them and it will do the rest. This is why flash files are generally very small, they use tweening instead of frame by frame (along with being a vector program compared to a raster)

-What you need to know
You can use flash if you understand the basics of 2D animation. (keyframes indicate events, the rest is filler to give the illusion of movement)
Otherwise you just need to learn the terminology.

If I was down in melbourne I could show you how to use the program well in under an hour. Over the net it's a bit harder huh

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-24 07:47:32 +0000 UTC]

yeh! thats exactly why tutorials confuse me, i undertsand most 2d animation basics, but when it comes to working out what does what in flash, and what they mean when they say "this" or "that" i start getting really lost. its hard to understand if i dont see it in action.

this makes me want to play with flash though, ive seen usch amazing things done, and i know im capable of doing pretty rough traditional frame by frame stuff. the tweening i would find a bit more difficult, but i now understand a bit of it. eg in this particular animation, you drew a long bg and had it move slowly over the course of the animation by giving it its own layer and telling flash to move it to "this point" over the course of this many frames, then drew your action sequences over the top in another layer or something

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-24 09:27:20 +0000 UTC]

Exactly.
And you can save time by animating something over 10 frames. Placing it inside what Flash calls a 'movie' and it will repeat those 10 frames continuously over the whole animation. Like looping sound in music.
Oh and a 'movie' is like a new animation document inside the main one. So it has its own seperate timeline but can be inside or outside others.
That might have been a bit more confusing...

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-24 09:40:03 +0000 UTC]

yeh that went completely over my head.

also i have no idea where the opacity setting is *was looking*

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-24 10:17:20 +0000 UTC]

In the properties window down the bottom there is a drop down box for effects (as long as it's converted in flash to a movie, graphic etc)
Opacity in Flash is called 'alpha'

but I was using terms you'd be used to using like opacity from photoshop

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-24 10:41:27 +0000 UTC]

hmmm, movie or graphic?

well after about an hour of playing about i made a blinking bunny creature... its so sad looking. actually ill put it in scraps so you can see

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-24 11:53:53 +0000 UTC]

Awwright!

Graphics hold things so you can apply effects to the whole thing. And can tween the whole thing instead of getting morphing (if you draw 2 circles and tell them to tween they'll probably flip and twist and do crazy junk).if you draw a circle, convert it to a graphic, duplicate it then tween the 2 it'll work just fine.
Movie contains a timeline. But can have effects like a graphic.

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-27 07:18:16 +0000 UTC]

is graphics like when you group obkects in illustrator?

i tried turning things into graphics so i could tween them but it wasnt working.

yeh and movie vs timeline plus graphic, the terms confuse me.

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-27 23:40:02 +0000 UTC]

If you import a drawing. To be able to do stuff like change alpha or lighten\darken you need to convert it into something flash understands. I.E. a graphic.
If you draw a whole bunch of stuff like...say a microwave You can do that but you should select everything when your done and convert to a graphic. So yes it's like grouping.

The cool thing with graphics is...the best way to make a microwave is to draw a rectangle. Convert it to a graphic. Go into the graphic (double click on it), then use the layers and do things like linework, coloring, shading on them. Then when you pop out of the graphic it's all pretty and finished.

To be able to animate anything well like backgrounds etc, if they're still objects they should be grpahics. If they animate in their own way they should be movies. So you want your microwave in the BG? Best way is to contain everything inside a movie and pan it on a lower layer. You could put it all into a graphic but what if you want to animate something inside of it? Graphics can't handle animation so.

Say you wanna animate the clock on your microwave?
Make your Rectangle of the microwave > convert to graphic > draw microwave.
Now double click to the side to get out (or use the names up above the main window).
R-click the microwave and convert to Movie. Now if you dbl click on the microwave movie, it'll have a layer with the microwave graphic. Make a new layer, name it Clock, draw in a few frames by hand over the display (make sure you insert some empty frames for the microwave graphic or else it'll only appear on frame 1).
So you've got 2 layers, one with the clock, one with the actual appliance.
So if you pop out of the Microwave movie and to your main timeline\movie. If you play the animation the clock will now animate over the top of the graphic, but they both move together because they're contained in a 'arent movie'.

Make sense?

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-28 04:37:21 +0000 UTC]

sorta, so...

graphic is like a grouping.

a movie is a grouping of graphics that are animated, you if you layer your movies you get a bunch of separate animated things happening on a timeline?

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-28 05:04:46 +0000 UTC]

Exactly. And -sub- mobives will loop inside their parents unless you get them to stop with actionscript.

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-28 05:10:26 +0000 UTC]

... that lost me again

but i think you mean movies inside movies? and you code something in to stop the movie parts that you dont want to keep looping.

👍: 0 ⏩: 1

Kraden In reply to dire-musaera [2007-09-28 06:06:31 +0000 UTC]

Yeah. There's a little popout called actionscript. Actionscript goes into keyframes as well.

So if you write
stop();
into the keyframe...will either stop that animation or stop the whole thing. I think it stops the whole thing.
But you can write.

goToFrame(3);
And it will do so.

Anyway I'll put a video up next week to explain it better

👍: 0 ⏩: 1

dire-musaera In reply to Kraden [2007-09-28 07:07:55 +0000 UTC]

okidoki, ill wait for that.

👍: 0 ⏩: 0

Kreoche In reply to ??? [2007-09-24 03:58:32 +0000 UTC]

Yeah, this is pretty wicked. I aim to be able to produce something this good in /4 hours/.

👍: 0 ⏩: 1

Kraden In reply to Kreoche [2007-09-24 06:42:27 +0000 UTC]

Well it's alot easier with a tablet I tell you what ^_^

👍: 0 ⏩: 0

Caonie In reply to ??? [2007-09-24 03:14:11 +0000 UTC]

Better than I could ever do, and, as always, Kradenz is awesomeness...

But I do agree with some of the other comments made... I know it's only rough atm, but I'd love to see some close-ups and they seem to be floating...

*In the background the Kraden cheer leading squad goes nuts...*

👍: 0 ⏩: 1

Kraden In reply to Caonie [2007-09-24 03:35:02 +0000 UTC]

Yeah the parlax and animation are not timed well, but no matter.
Thanks for the compliments Rhi.

👍: 0 ⏩: 0

Silkeyn [2007-09-24 03:01:26 +0000 UTC]

Lol, very often I daydream about things like this XD.

👍: 0 ⏩: 1

Kraden In reply to Silkeyn [2007-09-24 03:34:39 +0000 UTC]

...what? Me smaking the beat down on Inspector Nills?
Silkeyn! I didn't know you cared so much lol

👍: 0 ⏩: 1

Silkeyn In reply to Kraden [2007-09-28 17:30:31 +0000 UTC]

Lol, actually I meant videogame-style fighting. But that too, I guess XD.

👍: 0 ⏩: 0

thechuckface [2007-09-24 01:06:10 +0000 UTC]

Wow! Didn't know you did much in the way of animation. Good stuff you got there. Preety amazing work for only four hours, too!

Will there be a final version? Maybe on Newgrounds?

👍: 0 ⏩: 1

Kraden In reply to thechuckface [2007-09-24 03:34:08 +0000 UTC]

Indeed! And it will be all -AnimeInYoFace awesome actioan style!-
Better detail too.

👍: 0 ⏩: 0

RayLiehm [2007-09-24 00:03:23 +0000 UTC]

Nice, very nice. Can't wait to see the finished article, 'tis going to be awesome! Heck, forget finished, it already is awesome!

👍: 0 ⏩: 1

Kraden In reply to RayLiehm [2007-09-24 03:33:42 +0000 UTC]

Haha! Thanks bro. But it will be much cooler in the final movie

👍: 0 ⏩: 0

Telem-Kam In reply to ??? [2007-09-23 23:34:56 +0000 UTC]

Damn. Wow. o-o

👍: 0 ⏩: 1

Kraden In reply to Telem-Kam [2007-09-24 03:33:24 +0000 UTC]

Cheers cheif

👍: 0 ⏩: 0

TidalNight [2007-09-23 17:03:41 +0000 UTC]

Nice sense of depth in there bud, with the character placement n such, it certainly pulls it off well. Theres a light sense of "hovering" that the chars have, but nevertheless, this is coming along fantastic.

Keep it up bud!

👍: 0 ⏩: 1

Kraden In reply to TidalNight [2007-09-24 03:33:18 +0000 UTC]

The hovering comes from not having a visual reference for the Parlax as it dosen't animate during editing, only when the movie is exported.

👍: 0 ⏩: 0

zwabbe15 [2007-09-23 11:47:40 +0000 UTC]

Looks pretty sweet there mister kraden

👍: 0 ⏩: 1

Kraden In reply to zwabbe15 [2007-09-24 03:32:40 +0000 UTC]

Thanks Zwabs.
Oh btw you been well dude?

👍: 0 ⏩: 1

zwabbe15 In reply to Kraden [2007-09-24 10:19:11 +0000 UTC]

yeah im good thanks for asking...how about you?

👍: 0 ⏩: 1

Kraden In reply to zwabbe15 [2007-09-24 11:58:31 +0000 UTC]

Varying.
I was good for manifest.
Then got sick.
Then got better!
now my tonsils are swolen.

Same with work. Busy, productive, busy, productive.
Can't complain too much though as I'm enjoying life.

👍: 0 ⏩: 0

TheBlackLizard In reply to ??? [2007-09-23 10:05:18 +0000 UTC]

Wow...

I can only do amateurish ones...

Ur brilliant @ this!!

👍: 0 ⏩: 1

Kraden In reply to TheBlackLizard [2007-09-24 03:32:30 +0000 UTC]

Thanks man, but no I'm still an amaeture too

👍: 0 ⏩: 1

TheBlackLizard In reply to Kraden [2007-09-24 18:20:21 +0000 UTC]

Even so...

👍: 0 ⏩: 0

x-eevee [2007-09-23 08:34:05 +0000 UTC]

that looks bloody awesome!

👍: 0 ⏩: 1

Kraden In reply to x-eevee [2007-09-24 03:32:12 +0000 UTC]

Thanks Eevee

👍: 0 ⏩: 0

Splinter-Cell37 In reply to ??? [2007-09-23 07:12:59 +0000 UTC]

DUDE.

COOL.

👍: 0 ⏩: 1

Kraden In reply to Splinter-Cell37 [2007-09-24 03:32:07 +0000 UTC]

Thanks mate

👍: 0 ⏩: 0


| Next =>