Smooth Technique Tutorial

A place for tutorials on how to get the most out of Flash

Smooth Technique Tutorial

Postby KaTsuO_O » Fri Jan 06, 2012 2:46 am

No need for text, just watch:

Click to Play
(Javascript Required)

Smooth Technique Tutorial.swf [ 8.05 KiB | Viewed 7370 times ]



This was originally made for a person as a tips for a technique but I thought It could be useful for anyone so here it is.
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Smooth Technique Tutorial

Postby Mr D » Fri Jan 06, 2012 3:02 am

I remember when you taught me this and I have been using it ever since. Now more people can use it to make their animation easily smooth than ever before :D .
1 game (oh I mean story slideshow -_-) and 5 flash loop FINISHED...fuck yea
My mini flashes link : http://legendofkrystal.com/forum/viewto ... f=7&t=1972
Also I am working on a project right now.But remember, it's a secret to everybody >:D
User avatar
Mr D
 
Joined: Tue Jun 01, 2010 12:44 am
Location: Alphabet

Re: Smooth Technique Tutorial

Postby BlueLight » Fri Jan 06, 2012 3:07 am

This is basically how i remember.
I don't understand one thing. It seemed that when you made more key frames the speed seems to increase.
What i remember it working the number of frames is basically how fast your animation is. (Depends on how fast your playing the frames)
The more frames the slower the animation.
Key frames shouldn't change the speed of the animation just increase file size and give you more control over the motion tween.
User avatar
BlueLight
Gangs n' Whores Developer
 
Joined: Sat Jun 04, 2011 8:23 am

Re: Smooth Technique Tutorial

Postby KaTsuO_O » Fri Jan 06, 2012 3:31 am

@BlueLight didn't really understand what you meant with that but how this works is that when adding tween between keyframe 1 and keyframe 9 it moves 11% of the full motion each frame. If you add a keyframe to the second frame where it got 11% and then drag it to the second frame then it actually moves 5.5% the two first frames which makes acceleration but it also makes the rest frames move the object a little faster.

@Mr.D Yep, that is the really good thing about the technique, to improve animations quite a bit easily.
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Smooth Technique Tutorial

Postby Eggplants » Fri Jan 06, 2012 4:06 pm

Man I always just use the ease tool in flash but that's a pain in the ass if every frame doesn't align perfectly. Thanks heaps for sharing this! It looks much easier to do!
I animate and draw stuff! Check out my gallery if you wish.
Also my email is [email protected]. I'm always happy to receive emails ;)
User avatar
Eggplants
LoK Team Member
 
Joined: Sun Jun 06, 2010 5:55 pm
Location: livin on the ceiling

Re: Smooth Technique Tutorial

Postby BlueLight » Fri Jan 06, 2012 4:21 pm

Let me restate.

It looks like the speed increases when you add the key frames.
The speed should be the same since the speed is determined by the number of frames not the type of frames.
User avatar
BlueLight
Gangs n' Whores Developer
 
Joined: Sat Jun 04, 2011 8:23 am

Re: Smooth Technique Tutorial

Postby Renara » Fri Jan 27, 2012 1:33 pm

I think what you're noticing is that parts of the animation are being given more frames, but the total animation isn't actually getting any longer.

If you think of the initial 9-frame animation as 9 equal movement "steps", then when you make the second step a key-frame, and move it into frame three, you now have two steps that lasts three frames, while the remaining six steps only last for five frames. The result is that you're essentially "squashing" a large part of the motion into a smaller number of frames, which has the effect of increasing the effective speed.

Another way of looking at it is that tweening is actually another name for interpolation, which is breaking a single movement into a series of smaller steps. So if you move an object 80 pixels over 9 frames, then each frame is 10 pixels of movement (first frame is the starting point). When you make the second frame a key-frame, it becomes fixed, so now, no matter where you move it, the object will only have moved 10 pixels in that frame. So when you shift it to the right, you cause that 10px movement to take up more frames, and therefore become slower. The remainder of your animation represents the movement from 10 pixels to 80 pixels, but if it now has less frames, then the steps required to do this become bigger.

So, in the first part of Katsu0_0's animation above, if you have the object moving 10px per frame, then when the second frame is made a key-frame and moved to the right, you now have a 10px movement over 3-frames, so the movement occurs at 5px per-frame, rather than 10px per frame like before. However, the other 70px of the movement now only lasts 6-frames instead of 7, so the movement occurs at around 12 pixels per frame, which is much faster.


Dunno if that clarifies it any? I can't think of any good real-world examples where it makes real sense. Except maybe a 500m race; if you do it evenly over the course of 100 seconds then you travel at a steady pace of 5 metres per second. However, if you spend more time on the first 100m than you do on the rest, then you will be slower for the first 100m, which means you have to travel faster to complete the other 400m if you still want to finished within 100 seconds.


Anyway, this is a really good tip Katsu0_0! I've been doing all kinds of stupid things when trying to smooth out animations :)
Renara (team twitter | newgrounds)
Team Lead Programmer
Lok Team Member
Site Administrator
User avatar
Renara
Foxy Admin
 
Joined: Fri Jan 08, 2010 4:16 pm

Re: Smooth Technique Tutorial

Postby GoRepeat » Sun Jan 29, 2012 4:18 am

Yep I do this all the time. It is how you give those pelvic thrusts and ass shakes their thrustiness and shakogrophical presence. Great stuff!
Picarto LiveStream: https://picarto.tv/GoRepeat
Other Stuff: Click Here
User avatar
GoRepeat
Moderator
 
Joined: Wed Jul 21, 2010 2:26 am
Location: Behind the Looking Glass

Re: Smooth Technique Tutorial

Postby Diuberus » Tue Mar 20, 2012 9:57 am

Sorry, I don't understand all the conversation (I have a poor english), but there is a way more simple to smooth animations without add keyframe.

You can just change the acceleration of the interpolation :
Attachments
interpolation.png
interpolation.png (22.9 KiB) Viewed 6647 times
Diuberus
 
Joined: Sun Mar 18, 2012 10:24 pm
Location: France


Return to Tutorials



Who is online

Users browsing this forum: No registered users