[ home ] [ site / arch ] [ pony / oat / anon ] [ rp / art ]

/art/ - Art & Fanwork

The board for long-term project threads, artists galleries, commission threads and other fan creations.
Password (For file deletion.)

Site maintenance in progress! Posts made now may be lost.

Ponychan-MLPchan Merger >>>/site/15219

File: 1377633180621.png (271.01 KB, 900x506, tumblr_static_god_and_her_tool…)

Sersys!CyQeb5KTDM 3992[View All]

#Tutorial[ #may contain mature content]
This is a tutorial of how to use Adobe Flash to animate.
I make the pics as I work so update can be slow.
Feel free to ask questions and criticise. There is more then one way to animate things and if you feel like your method is more efficient, you are welcome to share it.
If you want to post mature content please spoiler your images.

I'm using Adobe Flash CS6
There can be differences in menus, options and settings in older versions or later versions.
107 posts and 101 image replies omitted. Click View to see all.

Sersys!CyQeb5KTDM 4202

File: 1380311316402.png (101.39 KB, 1366x768, Screenshot (284).png)

To properly demonstrate the how the eases effect the motion tween I'll pick bounce.

Sersys!CyQeb5KTDM 4203

File: 1380311604221.png (93.94 KB, 1366x768, Screenshot (285).png)

Now under the Ease tab Bounce has appeared (simple slow is there by default. After you've created a new ease you can delete it with the "-" icon). Next to it is the graph that will be added to the graph you want to add it to. It has no effect until you don't apply it to one or more feature of your motion.

Sersys!CyQeb5KTDM 4204

File: 1380312169266.png (110.32 KB, 1366x768, Screenshot (287).png)

To apply it to a motion feature, select the designated feature, roll down the ease option and add your bounce ease. You will see a second, green graph on the original black graph. The green graph describes the motion you got by adding the ease graph to the motion graph. Apply the bounce ease to both "X" and "Y" components of the motion. Now the your square goes to the end of the motion path and bounces back.

Sersys!CyQeb5KTDM 4205

File: 1380312498330.png (90.3 KB, 1366x768, Screenshot (288).png)

I recommend that you try each and every built-in ease on a simple straight line motion. You can only apply one ease to a motion feature at the time so if you can't find the ease you are looking for you can create your own custom ease. To do this add another ease with the "+" icon and select custom. There use the bézier levers to draw your own ease. You can add additional bézier points by right clicking on the ease curve and selecting "add keyframe"

Sersys!CyQeb5KTDM 4206

File: 1380312596466.png (93.51 KB, 1366x768, Screenshot (289).png)

You can access more options for the bézier points or delete it if you right click on it.

Sersys!CyQeb5KTDM 4207

File: 1380312869563.png (91.22 KB, 1366x768, Screenshot (290).png)

If you right click within the graph but not on the curve you can access further options. You can copy curves so if you have multiple motions you can apply the same ease to synchronize them. You can also flip your curve to synchronize a counter movement.

Sersys!CyQeb5KTDM 4208

File: 1380313042438.png (79.44 KB, 1366x768, Screenshot (292).png)

You can change the ease multiplier. In the case of the bounce it will alter the speed of the bounce.

Sersys!CyQeb5KTDM 4209

File: 1380313829627.png (86.28 KB, 1366x768, Screenshot (293).png)

Most of the time you will need only 1 or 2 eases to apply to the motion tween. However there will be times when you will need to apply different eases to different parts of a motion. In that case you will need to go back to the timeline tab, right click on the frame that will divide the parts of the motion that you want to apply different eases, and select split motion.

Sersys!CyQeb5KTDM 4210

File: 1380314159386.png (68.68 KB, 1366x768, Screenshot (294).png)

The motion is the same and continuous but you can now apply different eases to two parts. ( this may only work if you remove the eases before you split the motion)

Sersys!CyQeb5KTDM 4211

File: 1380314704783.png (131.19 KB, 1366x768, Screenshot (295).png)

There is a lot more to motion tween then it meets the eye. But other features of the motion tween or their importance and effect can not be demonstrated by simple examples. As the topic progresses I'll show you more what you can do with this method.

Sersys!CyQeb5KTDM 4212

File: 1380314887312.png (321.32 KB, 1600x883, 127398+-+apple_bloom+artist+al…)

This concludes Lesson 6. Next time I'll talk about inverse kinematics aka bone tool.

Sersys!CyQeb5KTDM 4235

File: 1380790826192.png (74.01 KB, 1366x768, Screenshot (301).png)

Today I will talk about inverse kinematics.
" Forward kinematics uses the joint parameters to compute the configuration of the chain, and inverse kinematics reverses this calculation to determine the joint parameters that achieves a desired configuration.".
But this is just bullshit. What you need to know is that it's about joints and we will use the bone tool for this.
There are two uses for the bone tool. Using it within one symbol as a shape animating tool or using it to connect multiple symbols.

I will first show you how it works within one symbol to animate its shape. I drew an oval and I didn't convert it into a symbol. Now select the bone tool.

Sersys!CyQeb5KTDM 4236

File: 1380791065323.png (74.06 KB, 1366x768, Screenshot (302).png)

Now click within the oval and draw a bone inside the oval.

Sersys!CyQeb5KTDM 4237

File: 1380791605468.png (68.14 KB, 1366x768, Screenshot (304).png)

When you are done the oval will look like it's been converted to a symbol but it hasn't. It is now an IK Shape. It won't appear in your library either. Also notice that a new layer has been created for this IK Shape. It's called the armature layer. Only one inverse kinematics object can be on one armature layer and nothing else. IK operations need their own isolated environment.

Now using the bone tool click on the end of your 1st bone and draw another. Then starting from the end of the 2nd bone, draw a 3rd bone.

Sersys!CyQeb5KTDM 4238

File: 1380791726868.png (69.94 KB, 1366x768, Screenshot (306).png)

Now we are ready to animate it so insert a frame on the armature layer at frame 80 and then select frame 80.

Sersys!CyQeb5KTDM 4239

File: 1380791866761.png (70.05 KB, 1366x768, Screenshot (307).png)

Now switch to the selection tool, click on the top end of the top bone and drag it around then leave it in the desired position.

Sersys!CyQeb5KTDM 4240

File: 1380791980493.png (198.03 KB, 1366x768, Screenshot (309).png)

Flash will animate the transition

Sersys!CyQeb5KTDM 4241

File: 1380792463277.png (84.62 KB, 1366x768, Screenshot (311).png)

If it is too flexible and you are having trouble moving all the joints at once, you can grab joints closer to the base point, move them into position, click on them so the cursor turns into a pin then pin the joint to keep it in one place while you move the others. Notice that only the joints between the base point and the one you are dragging will change angle. Those which are after the joint you are dragging will not change.

Sersys!CyQeb5KTDM 4242

File: 1380792726540.png (79.59 KB, 1366x768, Screenshot (312).png)

You can use bones in branches too. To demonstrate this I drew a more complex shape

Sersys!CyQeb5KTDM 4243

File: 1380792938493.png (70.54 KB, 1366x768, Screenshot (313).png)

When you get to the junction point then draw one bone, return to the junction point and draw another.

Sersys!CyQeb5KTDM 4244

File: 1380793008153.png (75.39 KB, 1366x768, Screenshot (314).png)

You can have as many bones as you want depending on the performance of your machine.

Sersys!CyQeb5KTDM 4245

File: 1380793128863.png (196.67 KB, 1366x768, Screenshot (315).png)

Sersys!CyQeb5KTDM 4246

File: 1380793433009.png (77.73 KB, 1366x768, Screenshot (318).png)

You can have bones going through gaps, empty spaces as long as it's within one shape.

Sersys!CyQeb5KTDM 4247

File: 1380793494276.png (159.15 KB, 1366x768, Screenshot (319).png)

Sersys!CyQeb5KTDM 4248

File: 1380793636410.png (59.63 KB, 1366x768, Screenshot (320).png)

Two shapes can confuse flash and it converts only one of the shapes into an IK shape leaving it with a hanging dead bone.

Sersys!CyQeb5KTDM 4250

File: 1380795942916.png (100.9 KB, 1366x768, Screenshot (322).png)

If you drew too long or too short bones you can correct it but it's difficult. You need to select the one of the end points of the bone next of the bone you want to lengthen or shorten. This means if you want to stretch the bone between 2 and 3 then you will need to select either 3A, 3B, or 3C. Then go to the properties panel and enabling "Joint: X translation" and "Joint Y translation". An arrow cross appears on the joint base and now you can move it around. Be careful, sometimes it tends to have its own will where and how to move. When you are done, disable the X and Y translations, and there you have it. You can also use constrains to limit the movement or angle of joints when you are positioning your bones. Spring and dampening functions will add a bounce to the shape as it folds.

Sersys!CyQeb5KTDM 4251

File: 1380797400877.png (77.9 KB, 1366x768, Screenshot (324).png)

To move the base point of the whole bone structure, you need to select the shape with the transformation tool and move it.

Sersys!CyQeb5KTDM 4252

File: 1380798153394.png (140.76 KB, 1366x768, Screenshot (323).png)

This use of the bone tool gives you a precise and tight control over shape transformations but it comes with a price.
-You can't change the base shape after you've applied bones on it. If you screwed up the shape at start you will have to start the whole animation all over again.
-You can't use the transformation tool to resize the animation as a whole. You need to put the animation into a symbol then resize the animation externally.
-While the shape tween had a limited option for easing this method has none.
-Compared to a shape tween this method takes more time as you apply and position the bones.

Personally I've only used this function once when I first tried it. This method should be used only if something very complicated is to be animated without being able to brake apart the object and animate it as a puppet. I recommend that you try this method then forget about it for a while. It will be a long time before you could animate something that will need you to resort to this method. Also it can be confusing if you don't know the basics of animation and will make your animation's movement uncanny.

Sersys!CyQeb5KTDM 4253

File: 1380798286192.png (479.99 KB, 1024x576, fingerpainting_ponies_by_0rian…)

This concludes Lesson 7. Next time I will talk about the using the bone tool to connect symbols.

Sersys!CyQeb5KTDM 4256

File: 1380827617362.png (244.17 KB, 1366x630, Screenshot (325).png)

For those who already know basics:
The MLP resource kit 2.4 by Druid14 has been released 15 hours ago. The download link is on his Deviant Art site along with a short demo:
Don't forget to comment his devination, add it to your favourites, and to add him to your watchlist.

Sersys!CyQeb5KTDM 4313

File: 1383059994475.png (82.55 KB, 1366x768, Screenshot (420).png)

Today I will talk about using the inverse kinematics tool outside symbols.

But before I start I need to say a few words about the last lesson.
Here >>4250 I said you could correct the length of the bones by releasing the constrains. This is not how you modify the position of the bone ends within the shape. You need to use the subselection tool and drag the bone ends to where you want them.

Sersys!CyQeb5KTDM 4316

File: 1383060413335.png (73.21 KB, 1366x768, Screenshot (422).png)

I have 6 shapes individually converted into symbols.

Sersys!CyQeb5KTDM 4317

File: 1383060465896.png (95.07 KB, 1366x768, Screenshot (424).png)

I've applied bones to them

Sersys!CyQeb5KTDM 4318

File: 1383060498773.png (77.89 KB, 1366x768, Screenshot (425).png)

Sersys!CyQeb5KTDM 4319

I went to frame 80 and moved the shapes

Sersys!CyQeb5KTDM 4320

File: 1383060657755.png (189.08 KB, 1366x768, Screenshot (426).png)

The shapes keep their distance from the shape they are connected to at all times during the animation

Sersys!CyQeb5KTDM 4323

File: 1383061011473.png (90.4 KB, 1366x768, Screenshot (427).png)

Most of the features presented in the previous lesson are available here too. Basically this is all to know.

However I don't recommend to go and try to animate a human or a pony this way. To demonstrate the flaws I created a human shape using a few symbols.

Sersys!CyQeb5KTDM 4324

File: 1383061361192.png (87.14 KB, 1366x768, Screenshot (428).png)

I started attaching the symbols to each other starting from the torso and the first problems start to show already:
Attached symbols that were covered by another symbol before come on top. I need to send them back to their places all over again.
You need to lock symbols to attach bones to symbols that are covered by another symbol.

Sersys!CyQeb5KTDM 4325

File: 1383062191381.png (81.16 KB, 1366x768, Screenshot (430).png)

Another thing about the bone tool I couldn't figure how it works:
If you connect a symbol on top of the symbol you are connecting it to then it supposed to turn the symbol it is connected to as you move it

Sersys!CyQeb5KTDM 4326

File: 1383062373702.png (89.43 KB, 1366x768, Screenshot (432).png)

Unlike in the previous example where the symbol stayed in place no matter where I moved the symbol that was attached to it.

Sersys!CyQeb5KTDM 4327

File: 1383062621573.png (90.24 KB, 1366x768, Screenshot (433).png)

Sometimes flash gets confused and doesn't connect symbols that have been attached upon each other and connects symbols that were not. For example this is how I attached the symbols to each other.

Sersys!CyQeb5KTDM 4328

File: 1383062760418.png (97.58 KB, 1366x768, Screenshot (435).png)

And this is what I got.
I can move one leg around freely but one is attached to the torso.
One shoulder is attached to the torso but one is loose.

Sersys!CyQeb5KTDM 4329

File: 1383063274876.png (147.15 KB, 1366x768, Screenshot (436).png)

And I've finally got to animating it.

Sersys!CyQeb5KTDM 4330

File: 1383064006460.png (90.04 KB, 1366x768, Screenshot (440).png)

But since all the symbols are on one layer I can't place this "sword" into his hand.
It's either above all the symbols

Sersys!CyQeb5KTDM 4331

File: 1383064025636.png (85.85 KB, 1366x768, Screenshot (441).png)

Or under it.

Sersys!CyQeb5KTDM 4332

File: 1383065110999.png (133.18 KB, 1366x768, Screenshot (442).png)

Also there is one more thing. There are outlines visible everywhere. To remove or to add outlines professionals use covers. This would consume a lot of time to get flash animate them properly with bones. Not to mention that real animation is still done frame by frame with very few reused symbols. I recommend to look at this resource kit >>4256
for examples.
Also you may want to watch this guy's vid

Sersys!CyQeb5KTDM 4333

File: 1383065724498.png (147.61 KB, 1366x768, Screenshot (443).png)

Inverse kinematics is a nice tool but I don't recommend using it for animating living stuff. It's good for animating machines or robots where the outlines are not a problem and movement is not too elastic. I always found this tool to be too time consuming to use considering that most animation scenes are unique and bones needs to be added every time. I also don't recommend using it if you are a first time Flash user. It may seam like a trump card to animate stuff but you will still need to know how to animate and what motions to animate. This will just confuse you.

Sersys!CyQeb5KTDM 4335

File: 1383066031542.gif (822.04 KB, 488x525, 322772__safe_solo_animated_lyr…)

This concludes lesson 8 and the basic tutorial. I'm awaiting questions, suggestions and problems to solve. Next time I'll do some examples from my own animations until someone has a problem or question.

Anonymous 4342

File: 1383240111200.png (87.59 KB, 679x614, stupid sexy muffin.png)

Thanks for doing this, you're awesome! Here, have a muffin.


Thanks, this comes handy.

Delete Post [ ]
Edit Post
[ home ] [ site / arch ] [ pony / oat / anon ] [ rp / art ]