we will continue from where we stopped in tutorial 3
1. Animate the Scale property of a bone
In the last part we have seen how we animate positon and rotation but not the scale property of a bone.
İ quickly want to demonstrate that on basis of the shadow. Yes. The shadow.
1.1 Create Bone For Shadow
This is also going to be a good example for a case where you might need modifications applied to the character rig.
Switch back to Armature Mode.
Pick the Bone tool [ Shortcut: E ]
Click one time on the pivot point (center) of the shadow sprite.
 |
| How to make a bone with a single click [Step 2-3] |
 |
| Bone object for the shadow sprite |
This will make a new bone. But this bone will be a single "dot" since it has no length like the other bones we have made. Also notice that this newly made bone is independent. So you can move the shadow separately from the character
 |
| independent shadow |
1.2 Animate The Scale
- Switch back to Animation Mode
- Select bone for shadow
- Go to frame 0
- Hit [ K ] or Keyframe the shadow bone
- Go to the 12th frame
On the properties panel for the scale x value type 1.10
Copy first keyframes of bone
paste to frame 24
  |
| < Left is the keyframed shadow bone , Right > is the unkeyed shadow bone [Steps 2 - 4] |
  |
Scale X property of bone [Step 6]
 |
| Copy paste keyframes [ Step 7- 8 ] |
|
Now this will add a subtle detail to the idle animation. Because the stickman body is going down and swaying his arms out little bit so should the area of the shadow expand. Not much, Just subtle. İt will be more noticeable on a white background.
Fine.
2. Sideways Walk animation
Add a new animation. Rename it walk.
Keyframe all bones at the beginning of the timeline.
2.1 Turn Stickman
One problem we have is that the stickmam is actually facing front. Not sideways.
And this was one of the reasons why I picked a stickman for the beginning.
We can simply reposition one leg behind the other and hide one arm behind the body and et voila ! Stickman is facing sideways now. Awesome.
 |
| stickman facing right |
Wait wait.. How did you do that?
Well let's go a bit more into detail. It's actually pretty straightforward. Reposition all bones until stickman looks right and not front. You can see that I move the head a bit more to the right. I also move the left arm and left leg a bit more to the right while I moved the right leg and right arm a bit more to left. That all gives the illusion as if the stickman is facing right.
One important point was that I changed the "scale" of the left leg. So here again we have an useful function of the bone scale. The scale allows us to invert the direction of a bone. To invert you simply put a - minus to negate the value
So for example in our case the left leg was also facing left. But we wanted it to face right. Thus we changed the scale value from 1.00 to -1.00 which also changed the direction of the image from left to right.
It's easy. By time you will do such things without thinking even about it.
 |
| Turning the stickman to face right |
What we just did is usually not that easy with a non-stickman like character because the character artwork might break when you change bone positions too much.
2.2 First Walk Pose Exercise Together
Ok now writing all the things you have to do for a walk animation would take too long.
Therefore I already made a walk animation and I'll share a reference picture with you.
But before that lets do the first walk pose together.
The picture on the left will be our starting point. That means after a full walk cycle this pose will be the pose the stickman comes back to.
Go to frame 0 in the timeline panel. Then position and rotate each bone similar to the picture. It does not have to be 100% accurate but something similar.
The important here is to get the key poses for a walk animation right. And this is our first important key pose.
2.3 Now You
 |
walk cycle reference image
|
Try to animate your stickman according to the above reference.
Each new pose is done in a 5 frame step.
1st pose at frame 0
2nd pose at frame 5
3rd pose at frame 10
4th pose at frame 15
5th pose...
...
...
And continue like that.
So there are 9 poses with the 1st and last pose being the same.
If you wonder why one arm is suddenly green that is because I colorized it in Photoshop to avoid confusion as to which arm is in the front and which in the back.
Dont worrt about if it takes long. I needed around 6-7 minutes. İf you do it for the first time you probably will need more time.
3. Gif Export !
This was a section I wanted explain later but I think if you successfully followed the tutorial it would be interesting to see how your walk animation turned out at the end together with all the other people here and see their walk animation as well.
- Go to File > export
- Switch to Image Tab on top
- Select Gif as Format
- Select animation you want to export
- Reduce output scale to 25% (100% is too big for a GIF ! )
- Browse files location to save
Hit Finish
 |
| Switch Tab [Step 2] |
 |
| The Formt to export [Step 3] |
 |
| You will see all animation you have in your armature here [Step 4] |
I'll explain in depth about exports in future tutorials.
It may take sometime till the GIF is done.
But now congrats ! You got a gif of your stickman walk animation.
Put it on the comment section, comment and share.
 |
| Walk Gif :( |
Even though inside the editor it was a way faster once exported as a gif it turned out to be much slower than it actually is.
The fix for this however is very easy.
4. Speeding up the animation for a faster GIF
You can make a selection box inside the timepanel to select all keyframes. This is a bit tricky to do as sometimes you wrongly select a keyframe and drag that 1 specific keyframe instead of making a selection box. However try to click and drag outside of any keyframe. That will work.
Once you have selected try to go to the very edge of the selection box. Your cursor will change to a double headed arrow.
 |
| selecting keyframes and stretchting time It's important that you go to the edge and not simply drag from the center of the selection box. |
Because where you put your cursor decide what operation takes place.
If you drag from center that will SHIFT the selected keyframes in the timepanel and this is
NOT what we want.
However if you drag from the edge that will STRETCH the keyframes so the animation will either become shorter or longer.
Try to stretch it so that the last keyframes is placed under frame 20. That would mean the animation is speeded up by 50%.
And this is the new walk animation. Still a bit too slow but you got the idea. You can stretch the key a bit more if you like.
Put in the comments your stickman walk cycle if you like and let's see how your animation turned out ;D
Next tutorial we will add a few more animations and we will learn how to use the skin feature in dragonbones. That will be the last tutorial with the stickman. In the ongoing tutorials I'll use a new character and we will learn about IK constraints and meshes..
Next Part: Character Animation V
