# the difference between the first frame and second frame

Thirds in animation

Hey guys, I’d like to talk to you about thirds in animation and why I think it’s important. You don’t need to have alot of experience in animation to get this, but it is useful to have some.

We’re going to look at the frames between two poses, to illustrate I’ll be using circles, like so.

Circle a is the first position and circle b the second. These are on different frames, so a is on frame one and b is on frame two.

Right now the circle just goes from a to b. We don’t know if the circle is slowing down, speeding up or in what way it moves. It just sort of teleports.

Now we’re going to add some frames in between the poses, this is where the magic happens. Say we want the circle to start at a and slow down to b and we don’t want to use too many frames. So the question is; where do we put the next frame? If it needs to slow down we need the next circle to be closer to b, that way the distance the circle travels shrinks. Now that’s easy when it’s just a circle but what about when it’s an entire figure going from point a to b? What most people do is they put a frame smack dab in the middle of a and b, then from there they put a frame in the middle of the new frame and frame b and keep going until they’re satisfied with the amount the circle has slowed down. Like so.

So in this example position a is on frame one, the first red circle is on frame two, the next on three, four and frame b is on frame five. Oh boy! The circle slows down! The distance the circle travels keeps getting shorter so to our beautiful human eyes the speed of the circle lowers. Now this is fine, the circle slows down, we did our job and we can go home, right? Well, there’s a problem here, namely:

As you can see on this unnumbered diagram there is indeed a slowdown when the circle goes from frame a to to 2. But what’s that? There’s no slowdown between the frames 1, 2 and b. The distance is the same. No matter how many times you put a frame in the middle between frame 2 and b the last three frames will never experience a slowdown. The circle never actually slows down in the end! So what do we do? we could put a circle really close to frame b, that way there’s a slowdown. But this method can get sloppy  and remember, this example is just with circles.

So here’s the solution, we put the circle in two thirds of the way between frame a and b. Like so:

Look! the circle slows down, it slows down with just one frame in between a and b. Now I have to admit, putting a frame right in the middle between two other frames is easier than dividing them in thirds, but with practice this can be done, and it looks way better. You can even give the circle a constant speed by putting it on a third and two thirds of the way, like so:

I’m not saying you should only use thirds. You should add it in your arsenal and combine it with putting frames in the middle. So when should you use thirds and when should you use halves(middles?).

It all depends on how fast you want a certain action to be. Let’s say we want the circle to slowly start moving from a, pick up speed and ease in on b. And we want this action to last 5 frames. (that would be one fifth of a second if you work on 25 frames per second).

As you can see we combined the principle of putting frames in the middle and putting them on thirds. How I go about this is I first make positions a and b (the beginning and end position). After that I put circle 1 smack dab in the middle of a and b. There is no slowdown at this point, the circle has a constant speed. Lastly I create circles 2. The first circle 2 is one third of the way between a and 1, the second circle is two thirds of the way between 1 and b. so just for clarification: circle a is on frame one, the first circle 2 is on frame two, circle 1 is on frame three, the second 2 is on frame four and b is on frame five.

If you have any questions you can always ask me on tumblr or twitter, thanks for reading!

Hey! Love your edits. I was wondering if you could take us through how you make your edits? And any tips on how to start with editing?

I COULD try and livestream the whole process because one single edit I post is quite literally, a combination of different edits, some parts are even completely redrawn based of canon material and references.

I think the best thing to do is to just show you in rough lines how I created my last edit:

Also seems like the perfect time to post all my wips and bonuses! which isn’t much but… yeah

I'm a 3d animator, but I've only worked with films and TV. What should I animate if I want to get into the game industry? Specifically, what are certain conditions walk cycles, jumps, attacks, idles, etc. need to meet for them to work properly in a game?

For reel specifics, here are a few suggestions:

1. Standing idle into light melee attack
2. Standing idle into heavy melee attack
3. Some movement/standing cycle that transitions into a movement cycle of your choice
4. The same movement/standing cycle that transitions into a different movement cycle (e.g. running vs walking)

The core focus of any game animator is crafting motions that can (and will) be performed an infinite number of times (or for an infinite length of time). This usually means standing, crouching, climbing, walking, running, jumping, and attacking, but also means transitioning from a given cycle to another all the time. You need to show your potential boss that you can do these things, and that you can do them within a reasonable frame budget. Think short cycles of around 1.5 seconds at most, with each full motion being around 2.5-5 seconds at most.

Most games with any kind of melee combat will have light and heavy attacks, and any lead animator will expect to see attacks that both read well and could be useful in a game setting. I wouldn’t worry too much about setting up some sort of combo attack, unless you can demonstrate your ability to vary when one motion can transition into another. Game developers try to take as little control away from the player as possible, and that usually means that every attack must correspond to a button press. That second button press can occur at practically any time during the first attack, you’ll need to be able to set up a window during the animation to allow it to transition into the new attack while still occurring within a handful of frames (~8 frames at most, assuming a frame rate of 60).

Overall, the biggest difference between game and film is that you really have a lot fewer anticipation frames to work with. The player isn’t going to sit around and wait for a beautifully animated windup; the player is going to get really annoyed that it takes forever for the move to come out after pressing the attack button. This means that you need to shave as many frames off of the anticipation frames of most motions as you comfortably can, and you need to do it in such a way that it still conveys the anticipation phase of the motion because the player still needs to see it. I heavily suggest picking some really strong key frames and favoring those more than smooth in-betweens.

Finally, your animations are never going to remain pristine. There will be engineers and designers bending and breaking them in order to make them fit the gameplay. You can make the prettiest arcs you can make, but somebody is going to speed it up or slow it down or chop frames off or whatever in order to make it work with the new system. A designer is going to tell you that you have to keep all of the motion within a 4 square meter box on the ground, and you’re going to have to rework the motion until it fits. Remember, games are a collaborative process. Nobody works in a vacuum. If all this sounds like something you find appealing, I wish you good luck.

Got a burning question you want answered?

Mini Tutorial - The Sims 4 - How to make an “all in one” pose option for your pose packs.

• This mini-tutorial will show you how to make an “all in one” pose option for your pose packs.
• This mini-tutorial will not show you how to use Sims 4 Studio to export/import blend files.
• This mini-tutorial will not show you how to make a pose pack with Sims 4 Studio.
• I will make a video tutorial on how to do all that soon.
• This mini-tutorial was requested from an Anon who wanted to know how to make an “All in one” option for pose packs.

Lets say you want to have 3 poses in an all in one, you would go to your 1st pose in blender hit “a” twice so all the rigs turn blue, then you would go down to that copy button on the bottom right (circled in red) and click it.

You will then open in the same window the “all in one”  blender file that you have exported from Sims 4 Studio. Go down to the same button but beside it is the paste button (circled in blue) and click it. You will be on keyframe 0, all your rigs should be blue, if not hit “a” so they turn blue.

Once you have it pasted, move your cursor up in your model view (near your model) and press “i” then click “Locrot” and go to key-frame 60 do it again. Then click key-frame 62 and save your all in one blender file.

Now in the same window open your pose 2 blender file and do the same steps as previously stated. Only, paste it on key-frame 62 then lock it in place as well lock it on key-frame 122. Click key-frame 124 and save.

Again do the same process for Pose 3, pasting and locking on key-frame 124 and locking on key-frame 184. Now click key-frame 185 and go to a finger rig move it slightly then have all rigs selected and lock your pose in place and save.

Now you can import your “all in one” blend into Sims 4 Studio.

*Keep in mind everyone does their key-frames differently, I lock them every 60 key-frames because the first tutorial I read told me to do that, apparently every second in game is 60 key-frames, or something like that. I also leave a 2 key-frame space between poses so the blender can generate a seamless motion between the two poses.*

Hope this clears things up for you Nonny, I don’t mind helping. :)

without revealing any of your tricks how do you make gifs????

hey! im not sure if you want me to work through the whole process of gifmaking or just what i personally do, but i’ll go over it all in brief and if i glossed over something just shoot me another ask and i can go into further detail!

this is going to be for PS CS5 because i don’t have the fancy new photoshops so some of this might be outdated but hey it works for me

also, word to the wise before you continue reading, i don’t have any tricks lol i’m just fucking around and trying to do my best

more under the cut

The Requested Anime Gif Tutorial. (For Timeline Only)

This tutorial will cover the you need to make your own gifs. I’m using Photoshop Cs5 Extended, though this tutorial should work with those that have the timeline as well. I will not be covering how to make gifs that are not anime so if you are looking to gif real life humans, backgrounds, etc.. this probably wont help as much as it should. I will also not be covering how to get photoshop so just look around and you will definitely find one with a timeline

Use KMPlayer. If your not already using KMPlayer you are missing out on a lot. KMPlayer is a necessity for anime giffers and most top giffers will be using its built in sharpening feature. Load your vid you want to gif and open screen capture. (Press CTRL+G or right click and go to capture and then frame extract) Here we will be changing some settings. In your frame extraction screen copy these settings.

These are my settings I use when capturing my frames. The prefix can be anything just keep it small and the digits should be 1. I like to extract every 2 frames as anime has a lot of double frames that become a pain to remove otherwise. The main thing you should be focusing on though is the size to extract. I forgot to click specified size but that should be clicked and the size should be 540 or 500 if your still using old tumblr dimensions. MAKE SURE ITS ON SPECIFIED SIZE AND YOUR DIMENSIONS ARE 540x303 OR 500x281. The KMPlayer sharpening will not happen otherwise. Click start at the beginning of what you want to gif and click stop once you have gotten what you want to gif.

After you have extracted the frames you want to gif go ahead to where they got extracted and delete all the frames that are the same. This keeps your flow of the gif smooth and lowers the file size also.

Here are the frames before deleting all the double frames.

Here are the frames after deleting the double frames.

You can also rename them at this point, but I don’t always do that as the prefix usually does that for me. Ok now load your frames in Photoshop. Here’s how if you don’t know already

Go ahead and click your first frame, then scroll all the way down to your last frame and hold shift and click on the last frame. This should highlight all your frames.

Click OK and begin loading. This should really only take a minute or two unless you have a lot of frames (which I would not recommend beginners to attempt. Try keep most of your gifs 30 frames and under, I will explain why later.) After your frames are loaded your screen might look something like this

If this is the case just click on this little button right here.

That should turn it into this.

Go to this button

and click on make frames from layers. This should give you a screen something like this.

Ok from here go back to that button and click on reverse frames. When you first load your frames the frames are reversed so this makes it back to normal.

Go back to that button and the click on select all frames, go to this little arrow under the frames, click it and then click on other.

Change the timing to 0.09 this is the optimum speed gifs should go at imo. Making it any lower will be too fast and making it any higher will be too slow. I know the whole giffing community says the best speed is 0.13 but at that speed I find it hard to ignore the gifs stuttering. (This speed is different for graphic makers and 0.09 should mainly be used for normal gifs) Go ahead and play your gif to see if it is working fine or not and change the looping  from once to forever if you have not done so already.

OK at this stage your gif should be finished (technically) however if you want your gif to look nice then go ahead and click on the timeline button again.

Click on the top pic in your frames and scroll down to the bottom frame and hold shift and click on the bottom frame to select all of them.

Right click on one of the frames and click convert to smart object. It should turn your frames into something like this.

From here we can sharpen our gifs and also colour them pretty easily. I recommend not using an action for sharpening as every anime is different and have different levels of sharpening involved. Click on filters, sharpen and then smart sharpen.

Change the sharpening to these settings

There is a reason I am not using 500 by 0.3 and that is because in my gifs I like to sharpen twice. First being between 200-350 on 0.3 and then the second sharpening layer 40-60 by 0.5 This makes the sharpening thicker and looks better imo but if you want to just use 500 by 0.3 knock your selves out. Ok here is the step a lot of people struggle with. DO NOT OVER SHARPEN YOUR GIF. I’ve seen gifs and made plenty of gifs myself where the sharpening is so much the a white line appears and makes the entire gif look ugly. If your gif is over sharpened and you can see a white line over the real line then lower the amount of sharpening you use until it is gone.

Here is how it should NOT look like

Here is how it SHOULD look like

Here is the original to compare.

Your smart object should look something like this now

If you only used 500 by 0.3 then there wont be another smart sharpen on top and there will only be one. This step is optional but I like to use surface blur on my gifs as it makes everything smoother and better looking. go to filters, blur and then at the bottom surface blur. Here are my surface blur settings

MAKE SURE YOU KEEP YOUR RADIUS 3 AND KEEP YOUR THRESHOLD BETWEEN 3-6. I’ve seen plenty of gifs where people use waaaaay too much surface blur which make the gif look too soft and A LOT of detail is lost if you put it too high.

OK here comes the hardest part of making and anime gif…. that is the colouring. Learning how to colour and make a certain scene look nice takes time and experience. You have to learn what enhances the right colours and what keeps the filesize and grain low. If you are starting out I HIGHLY recommend using PSDS made by other tumblr users and colouring your scenes with them. This lets you see what they used to make the gif look good and shows you what you could use later on when you are colouring gifs yourself. Slowly but surely you WILL learn how to colour by yourself and will not need the help of other PSDS. I mainly use PSDS made by myself so I know which PSD works with each different gif.

Here is the gif without colouring

Here is the gif with colouring.

Ok once you are done colouring your gif you are done! Congrats if you have made it this far, there is only a bit left to go.

Go to file and save for web and devices.

Here are my settings when making gifs MAKE SURE IT IS ON PATTERN. Pattern makes the gifs the best quality it can possibly be and looks much much better than diffusion, noise and no dither. I would advise staying away from them ESPECIALLY NO DITHER as it makes colours all over the screen. You should only switch between adaptive and selective also. Check to see which one gives the least amount of grain before saving your gif or if your gif is over the size limit then pick the only which makes the size go lower. Never turn transparency off as it also bloats the file size.

If your file size is 2mb or over 2mb (you can check here if it is)

(The filesize on this gif is 1.2mb) then you have the option to lower the colours of your gif. Just click on this button and click optimize to file size.

Write 1999 and click ok.

This will lower the colours of your gif and making it fit under 2mb. Although I would recommend NOT using this method until last resort as the gif becomes ugly sometimes. This is also why I said at the start to keep your frames under 30 as less frames = less filesize.

MAKE SURE YOUR LOOPING OPTION IS ON FOREVER. Theres nothing worse than making a good gif and making it only play once.

Play your gif and see if it is the way you want it to be and then click save. Voila! you are done and ready to upload your gif to Tumblr.

FINAL RESULT

Hope this guide helped and encouraged people who didn’t know how to make gifs or people struggling and looking for advice make better looking gifs and learn different techniques. I hope to see plenty of great looking anime gifs in the future!

If you have any questions then feel free to ask me Otoyomegatari

okay but we all know there is a height difference between star and marco. but I just remembered she wears platforms

sO LOOK AT HOW TINY SHE FROM THE FIRST FRAME TO HER ACTUAL HEIGHT COMPARED TO MARCO IN THE SECOND FRAME

I MEAN HE IS LITERALLY LOOKING “DOWN” AT HER

7

* The clock is ticking.
* Sans resets his timer.
* This doesn’t seem fair.
* Sans resets his timer again.
* Sans looks melty.
* Just keep wasting his time, it’s bound to run out.

This is the third video we’ve made in partnership with LG for our “How To Make Your Mobile Videos Cinematic” series. In this one I wanna talk about the difference between shooting video horizontally versus shooting vertically.

Now, the first step to making your mobile videos cinematic is to take the half second to flip your wrist over and shoot horizontally. When you shoot this way you’re mimicking the way the eye actually sees, as it has a greater peripheral vision horizontally. Secondly, filmmakers have developed certain storytelling techniques over the years that almost all rely on the horizontal frame. These include the two shot and the establishing shot.

So, when you watch movies you’ll also probably notice a lot of other ways that cinematographers use the horizontal frame to help tell the story.

In conclusion, I’ll just say it one more time - shoot horizontallyI

Thanks again <3

J

I adore Beca's photobooth pictures because they seem like quite an un-Beca-y thing (at least compared to the 'Beca' she attempts to project) because those kinds of photos are pretty overtly sentimental, I reckon. So I would love a story involving Chloe, Beca and Beca's photobooth pictures collection, and maybe the way you can see their relationship progress through them, or wherever inspiration takes you.

She plucked them off the bulletin board slowly, with probably more care than was completely necessary.