[ 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[Last 50 Posts]

#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.

Sersys!CyQeb5KTDM 3993

File: 1377633306945.png (144.29 KB, 1366x768, Screenshot (146).png)

This is how my interface looks like
It's a bit customised but you should have something similar

Sersys!CyQeb5KTDM 3994

File: 1377633513601.png (64.97 KB, 1366x768, Screenshot (147).png)

To see how things work I'll create a new action script 3 project

Sersys!CyQeb5KTDM 3995

File: 1377633921838.png (68.32 KB, 1366x768, Screenshot (148).png)

on the left you can see tool to draw with and the options of the selected item

on the bottom you see the time line. We'll use that for animation

I'm going to assume that you are familiar with a drawing program which is at more advanced then ms paint at least, and I won't go in discussing the tools unless it is something special or if you have a question about it.

I've selected the oval tool and drew an ellipse


File: 1377633960749.png (112.82 KB, 554x800, 97561__UNOPT__.png)

Don't mind me if i don't reply.

I'm doing some emulator stuff with EMF scootaloo.

I'm paying attention.

Sersys!CyQeb5KTDM 3997

File: 1377634378093.png (81.62 KB, 1366x768, Screenshot (149).png)

By default it comes with an out line and a fill
You can adjust its parameters on the preferences tab to the right.

For easier handling I'll turn this ellipse into a symbol. [I'll explain later.] Use the selection tool (V) [not the sub-selection tool] and select both outline and fill. Right click and select convert to symbol(f8).

Sersys!CyQeb5KTDM 3998

File: 1377634480830.png (92.79 KB, 1366x768, Screenshot (151).png)

Name the symbol and set type to graphic

Sersys!CyQeb5KTDM 3999

File: 1377634659979.png (87.61 KB, 1366x768, Screenshot (152).png)

Go to the time line. On layer 1, select frame 30, right click on it, select insert keyframe

Sersys!CyQeb5KTDM 4000

File: 1377634835095.png (63.91 KB, 1366x768, Screenshot (153).png)

the hot key for inserting keyframe is f6

Now all the frames between 1 and 30 are filled and have the ellipse.

Sersys!CyQeb5KTDM 4001

File: 1377635002737.png (64.74 KB, 1366x768, Screenshot (154).png)

Select frame 1 and move the ellipse [with the selection tool] to the lower left corner.
Notice that all the frames from 1 to 29 have the ellipse moved to the lower left corner, but on frame 30 the ellipse is in its original place

Sersys!CyQeb5KTDM 4002

File: 1377635198853.png (83.47 KB, 1366x768, Screenshot (155).png)

Select any frame between 1 and 29, left click and select classic animation.

Sersys!CyQeb5KTDM 4003

*classic tween

Sersys!CyQeb5KTDM 4004

File: 1377635422697.png (69.96 KB, 1366x768, Screenshot (156).png)

Now there is an arrow through 1 to 29 and all the frames have the ellipse at a different position between it's original position and the lower left corner where I moved it on frame 1. If you press play on the time line you can see the ellipse moving.

Sersys!CyQeb5KTDM 4006

File: 1377635714065.png (68.75 KB, 1366x768, Screenshot (157).png)

Now select frame 60, insert key frame, move the ellipse to the lower right corner on frame 60, select a frame between 30 and 59 and create classic tween.
This will make your ellipse move from the lower left corner, to the middle of the screen and then to the lower right corner of the screen.

Sersys!CyQeb5KTDM 4007

File: 1377635865753.png (71 KB, 1366x768, Screenshot (158).png)

Select the first tween [any frame between 1 to 29] and click on the edit easing on the preferences tab

Sersys!CyQeb5KTDM 4008

File: 1377636445161.png (84.55 KB, 1366x768, Screenshot (160).png)

Select the lower right point, find the brazier lever and move it upwards.


File: 1377636467210.png (118.75 KB, 312x365, 133742584835.png)

Really starting from the basics i see.

Good man! not enough people go over the basics.

This will come in handy for future reference.

Sersys!CyQeb5KTDM 4010

File: 1377636572939.png (85.05 KB, 1366x768, Screenshot (161).png)

If you accidentally a bezier point, select it and press delete

If you have a specific problem I can cut to the chase

Sersys!CyQeb5KTDM 4011

File: 1377636723298.png (84.34 KB, 1366x768, Screenshot (162).png)

Move both lower left point and upper right point's bezier lever to get a curve like this

>Select the lower left point, find the brazier lever and move it upwards.

Sersys!CyQeb5KTDM 4012

File: 1377636870217.png (81.43 KB, 1366x768, Screenshot (163).png)

Now the ellipse will slow down as it gets to the center

Select the second tween [any frame between 30 to 59], edit easing, and make a curve like this.


File: 1377637007783.png (130.54 KB, 894x894, 133937926983.png)


I do have a few specific issues.

Though i don't mean to make you do extra work i'd like to see where you intend to go with this, it never hurts to gain a better understanding of the basics.

When you get near the things i have problems with the most i'll ask you about it.

Sersys!CyQeb5KTDM 4014

File: 1377637483317.png (81.27 KB, 1366x768, Screenshot (165).png)

Create another tween [insert key frame on the time line anywhere right to the last frame, move your object to a different position, select a frame between the last keyframe and the one before the last and create a classic tween,], click edit easing and make a curve like this. This will make your ellipse start slow, speed up in the middle of the way and slow down again at the end.

I think classic tween is all for today it's 23:00 here, I want to go to bed at midnight


File: 1377637777017.png (387.13 KB, 810x681, 133745535295.png)


Alright, good night!

I look forward to learning more sersys sama!

Sersys!CyQeb5KTDM 4016

File: 1377637822444.png (82.67 KB, 1366x768, Screenshot (166).png)

Create another tween, edit easing and make a curve like this. This will make your ellipse to start fast, slow down in the middle then speed up again

It's good for simple basic motions. Test it, play around with it, try different curves, add bezier points to the curves and see what happens.

Next time I'll tell you about tween with in a tween.

Sersys!CyQeb5KTDM 4017

File: 1377637874756.png (68.53 KB, 900x831, lyra_teaches_us_how_to_draw_wi…)

This concludes Lesson 1. Good night.

Sersys!CyQeb5KTDM 4018

>on the right you can see tools to draw
>Select any frame between 1 and 29, Right click and select classic animation.
I'll need to learn which is the left and which is the right

Sersys!CyQeb5KTDM 4023

File: 1377713854753.png (54.15 KB, 1366x768, Screenshot (168).png)

Now, I will talk about motion inside a motion

Go to the library tab. If your library tab is not visible then go to view menu and check library.
On the library tab click on the new symbol button
Name the new symbol and select graphic for its type.

Sersys!CyQeb5KTDM 4024

File: 1377714059874.png (71.66 KB, 1366x768, Screenshot (169).png)

Draw a square.
Go to the time and click the new layer icon or right click on the layer and select insert layer.

Sersys!CyQeb5KTDM 4025

File: 1377714283060.png (71.27 KB, 1366x768, Screenshot (167).png)

Select the new layer and draw a circle.

Notice that the two shapes do not merge when you pull one over the other. if they do merge they are on the same layer . To make sure you are drawing on the right layer, you can lock the other layer you don't want to draw on with the lock icon next to the layer's name, or you can make layers you don't want to draw on invisible by clicking on the eye icon next to the layer's name.

Sersys!CyQeb5KTDM 4026

File: 1377714608296.png (69.07 KB, 1366x768, Screenshot (170).png)

Select the square and convert it into a symbol. Make sure you are selecting outline and fill too.
Select the circle and convert it into a symbol.

Do not select both shapes at the same time when you convert them into a symbol. The process will merge them regardless that they are on separate layers. Do one at a time.

Sersys!CyQeb5KTDM 4027

File: 1377714750107.png (85.83 KB, 1366x768, Screenshot (171).png)

Select frame 30 on both layer by holding shift or ctrl down.
Right click on any of the selected frames.
Insert new keyframe.

Sersys!CyQeb5KTDM 4028

File: 1377715103050.png (69.01 KB, 1366x768, Screenshot (172).png)

While frame 30 is still selected, move one of the symbols, so it's path goes over the other symbol.

Sersys!CyQeb5KTDM 4029

File: 1377715186267.png (85.22 KB, 1366x768, Screenshot (173).png)

create a classic tween for the the symbol you just moved.

Sersys!CyQeb5KTDM 4030

File: 1377715571819.png (66.95 KB, 1366x768, Screenshot (174).png)

If you press play it will show one of the symbols passing over the other.

Now exit the symbol by pressing scene 1 on the top or double clicking on empty space with the selection tool

Sersys!CyQeb5KTDM 4031

File: 1377715725039.png (64.03 KB, 1366x768, Screenshot (175).png)

Now go to the library and drag the symbol that has both the square, circle and the tween.

Sersys!CyQeb5KTDM 4032

File: 1377715770780.png (80.03 KB, 1366x768, Screenshot (176).png)

Select frame 30 and insert a keyframe

Sersys!CyQeb5KTDM 4033

File: 1377716102633.png (61.94 KB, 1366x768, Screenshot (180).png)

Notice that your symbol has changed.
Also your symbol is different on every frame.
Go to frame 1 and align the square with one of the corners.
Then go to frame 30 and align the square with the opposite corner.
Now create a classic tween between frame 1 and frame 30

Sersys!CyQeb5KTDM 4034

File: 1377716518893.png (81.17 KB, 1366x768, Screenshot (182).png)

When you play it both motions are present combined.

That's how you make a motion in a motion.

Notice that both motions have 30 frames. It needs to be synchronized to work properly.

Insert a keyframe at frame 50.
Select frame 30, right click and clear keyframe.
Now the tween goes from frame 1 to frame 50.

Sersys!CyQeb5KTDM 4035

Select clear keyframe and not clear frame.

Sersys!CyQeb5KTDM 4036

File: 1377716711590.png (182.22 KB, 1366x768, Screenshot (183).png)

Now the inter motion ends at frame 30 and repeats but it won't finish the whole motion because the outer motion ends.

Sersys!CyQeb5KTDM 4037

File: 1377717136395.png (67.13 KB, 1366x768, Screenshot (185).png)

Select frame 1, and go to properties tab.
Roll down looping.

Loop will make your inter motion loop continuously until the outer motion ends.

Play once will play the inter motion once then stop on the last frame while the outer motion still goes on.

Single frame will disable the inter motion from playing, it will only one frame from the inter motion.

Sersys!CyQeb5KTDM 4038

File: 1377717213524.png (65.5 KB, 1366x768, Screenshot (186).png)

You can set where to start playing the inter motion from or which frame of the inter motion to show when Single Frame is selected, by entering the number of the frame into the First bar.

Sersys!CyQeb5KTDM 4039

File: 1377717654136.png (75.83 KB, 1366x768, Screenshot (188).png)

I went back into the inter motion and created a tween for the square too. This time however I selected the tween and rolled down rotation from the preferences tab. I set it to CW as Clock Wise. CCW is counter clock wise. The number of rotation indicates how many times will the symbol rotate during the tween. This number changes to 1 by default if a rotation is selected.

Sersys!CyQeb5KTDM 4040

File: 1377718105388.png (290.05 KB, 1366x768, Screenshot (189).png)

You can put as many motions in as many motions as you want. Remember to use different layers for each symbols and to synchronise your motions.

This method is good for combining simple motions.
Test it, play around with it, put more motions inside other motions.

Sersys!CyQeb5KTDM 4041

File: 1377718254131.jpg (32.15 KB, 450x450, {A1B986BF-9818-464D-3480-8EEAF…)

This concludes Lesson 2. Next time I will tell you about shape tweens.


File: 1377721396937.jpg (14.83 KB, 277x243, 2 anons in a Dash thread.jpg)

Cool stuff man!

I'll sit down soon and follow this tutorial closely.

By the way, what version of flash are you using?


r u going to post more shape dividing puzzles my autism requires more exercise

Sersys!CyQeb5KTDM 4050

File: 1377805458126.png (71.15 KB, 1366x768, Screenshot (190).png)

This time I will show you the shape tween.

Go ahead, open and action script 3 project and draw an object. I've chosen a circle. Don't convert the shape into a symbol just yet.

Pay attention to the teacher damn it
>I'm using Adobe Flash CS6

No, sorry this is an art class this time. No puzzles.

Sersys!CyQeb5KTDM 4051

File: 1377805694112.png (74.58 KB, 1366x768, Screenshot (191).png)

Insert a keyframe at frame 30. While on frame 30 distort your shape just sightly with the subselection tool.

Sersys!CyQeb5KTDM 4052

File: 1377805754597.png (79.35 KB, 1366x768, Screenshot (192).png)

Now create a shape tween between frame 1 and frame 30.

Sersys!CyQeb5KTDM 4053

File: 1377806450040.png (73.27 KB, 1366x768, Screenshot (196).png)

This should transit the first shape into the last.

When it comes to complicated shape transitions the shape won't necessarily bend the way you expect it. As an option you can select the shape tween, go to the properties tab and select distributive or angular. Both use different methods of shape transfer.

You can adjust the acceleration or deceleration of the shape tween by modifying the Ease. This is only linear acceleration. So far I am not aware of any module that would allow custom acceleration curves, as seen in the classic tween.

Sersys!CyQeb5KTDM 4054

File: 1377806500999.png (71.22 KB, 1366x768, Screenshot (195).png)

My file name has changed because I had a crash and I opened a recovery file.

Sersys!CyQeb5KTDM 4055

File: 1377806848849.png (67.67 KB, 1366x768, Screenshot (194).png)

Insert a blank keyframe (f7) at frame 60 by selecting frame 60, right click on it, and selecting insert blank keyframe.
Use your polygon tool to draw a shape. Use different colours then before.

Sersys!CyQeb5KTDM 4056

File: 1377807225512.png (74.27 KB, 1366x768, Screenshot (197).png)

Create a shape tween between frame 30 and frame 60.

When you play the animation one shape transits into the other, regardless of number of bezier points, lines, fills, colour, position, starting and ending number of shapes. Flash will do its best to figure out a way to transit one shape into another.

Sersys!CyQeb5KTDM 4057

File: 1377807839683.png (68.4 KB, 1366x768, Screenshot (198).png)

Shape tween is most effective with simple shapes, or minor changes. Flash will always take the simplest rout to transit one shape into another but that's not always what we want to see, especially if it includes complicated shapes.

As an example, I drew two keyframes of a stick figure running and I will use shape tween to transit one keyframe into another.

Sersys!CyQeb5KTDM 4058

File: 1377808218881.png (60.17 KB, 1366x768, Screenshot (199).png)

Along the tween Flash gets tangled in the lines and forces one into the other. This is why we need to use something else for complicated motions.

Shape tween is a nice solution to animate fires, waves, fluid like motion, smoke, other special effects and soft and elastic surfaces. Shape tween can also be used as a guidance for frame-by-frame animating

Sersys!CyQeb5KTDM 4059

File: 1377808932488.jpg (136.29 KB, 890x897, lyra_in_plane_by_harddriver04-…)

This concludes Lesson 3. Next time I'll show you how to animate complex objects.


ohh well very awesome lessons,

i will have to learn how to use flash seems really easy and intuitive… tfw I used to animate thing in power point in the army. lol

Sersys!CyQeb5KTDM 4125

File: 1378970083535.png (76.32 KB, 1366x768, Screenshot (217).png)

Today I'm going to talk about how to animate more complex motions.

Let's say I have a rectangle and I want it to move from the left position to the right as the pic shows.

The vertical position is in frames 1 to 59 and the diagonal position is in frame 60. Now I'm going to create a classic tween and see what happens.

Sersys!CyQeb5KTDM 4126

File: 1378970307050.png (201.01 KB, 1366x768, Screenshot (218).png)

It starts to rotate alright but in the wrong direction and just jumps to the 60th frame's position at the end. So classic tween just won't cut it any more.

Sersys!CyQeb5KTDM 4127

File: 1378970459480.png (69.63 KB, 1366x768, Screenshot (215).png)

Another example:
I have a square on layer 1 and a circle on layer 2. I want the circle to go around the square to the other side.

Sersys!CyQeb5KTDM 4128

File: 1378970547570.png (136.62 KB, 1366x768, Screenshot (219).png)

If I use classic tween, it will just go straight through the square.

Sersys!CyQeb5KTDM 4129

File: 1378970783330.png (155.65 KB, 1366x768, Screenshot (220).png)

There is a work around for this problem. Create a new layer, right click on it and select guide.

Sersys!CyQeb5KTDM 4130

File: 1378970893470.png (108.77 KB, 1366x768, Screenshot (221).png)

Another way to set the layer to guide is to double left click on the paper icon on the left of the layer's name field.

Sersys!CyQeb5KTDM 4131

File: 1378971153847.png (77.51 KB, 1366x768, Screenshot (224).png)

On the guide layer draw an ark over the square. Use the pen tool or the line tool to make sure it's a stroke and not a fill.

Sersys!CyQeb5KTDM 4132

File: 1378971229675.png (79.6 KB, 1366x768, Screenshot (225).png)

Now select the layer with the classic tween and drag it under the guide layer.

Sersys!CyQeb5KTDM 4133

File: 1378971321222.png (79.48 KB, 1366x768, Screenshot (226).png)

If you did it right, the layer with the classic tween will be sightly offset under the guide layer and the icon of the guide layer will change.

Sersys!CyQeb5KTDM 4134

File: 1378971593147.png (142.4 KB, 1366x768, Screenshot (227).png)

For the next step I advice to turn on the Snap to object functions. It can be found in View menu, snapping sub menu. Please ignore the short cut key next to it. I have hungarian keyboard. Your short cut key will be different.

Sersys!CyQeb5KTDM 4135

File: 1378971823382.png (74.06 KB, 1366x768, Screenshot (228).png)

Go to the first frame on the layer with the classic tween. Select your circle and drag it around. It will always return to the ark. This is not the doing of the snapping function, this is a default behaviour for guided symbols.

Sersys!CyQeb5KTDM 4136

File: 1378971911512.png (72.5 KB, 1366x768, Screenshot (229).png)

Now go to the last frame and select your circle. When you drag it around it will not return to the ark. This is why we will need the snapping function.

Sersys!CyQeb5KTDM 4137

File: 1378972151327.png (76.2 KB, 1366x768, Screenshot (231).png)

Click in the middle of the transformation point of the circle and drag it close to the arc, until it snaps on it.

Sersys!CyQeb5KTDM 4138

File: 1378972282377.png (197.81 KB, 1366x768, Screenshot (232).png)

Once the circle's transformation point is on the arc on both keyframes, the circle will follow the arc.

Sersys!CyQeb5KTDM 4139

File: 1378972474575.png (98.13 KB, 1366x768, Screenshot (233).png)

Notice that anything drawn on a guide layer will not appear on the animation or if the tween is inside a symbol the guide layer will not show outside the symbol. It's a good way to hide sketches, unused assets, or anything you don't want to be seen want to use later.

Sersys!CyQeb5KTDM 4140

File: 1378975641261.png (75.97 KB, 1366x768, Screenshot (234).png)

Also with this method you can move and rotate the object at the same time, flash has failed in the first example.

To better see how it works I've replaced the circle with a rectangle and made a fancier curve to follow..

Sersys!CyQeb5KTDM 4141

File: 1378975777758.png (80.19 KB, 1366x768, Screenshot (236).png)

Select your classic tween and go to properties.
Check the Orient to path box.

Sersys!CyQeb5KTDM 4142

File: 1378975849542.png (170.01 KB, 1366x768, Screenshot (237).png)

Now the rectangle will not only follow the curve but it will be aligned to its tangent too.

Sersys!CyQeb5KTDM 4143

File: 1378976881669.png (170.55 KB, 1366x768, Screenshot (238).png)

This method is good for animating motions you already know its trajectory, like thrown items, opening hatchets, car moving along a road…. However when it comes to moving limbs, it's very hard to anticipate the trajectory. To modify the speed, acceleration or angle along the curve you need to edit the easing and start angle for the whole tween, and one mistake can ruin the whole motion. Also you need to place the transformation point exactly on the curve or flash will just ignore it. This method is simple but gives limited customizability and limited room for mistakes.

Sersys!CyQeb5KTDM 4144

File: 1378977294992.jpg (112.47 KB, 733x900, 133076630073.jpg)

This concludes Lesson 4.
Next time I will talk about motion tweens.


File: 1379046144989.png (77.43 KB, 312x311, 133996487459.png)

Excellent stuff.

Very informative and the best part is i won't have to search the entirety of the internet to learn this.

Thank you!

Sersys!CyQeb5KTDM 4150

File: 1379451807532.png (68.4 KB, 1366x768, Screenshot (243).png)

Today I will talk about motion tweens.
I drew a stick and I want to move it from one corner to the other while rotating it 90 degrees. I could do this by creating a guide curve on a new guide layer, create a classic tween, set the stick on the curve both start and end frame, set the tween to orient to path… and so on. There is an automated process for this called the motion tween.

Sersys!CyQeb5KTDM 4151

File: 1379453180780.png (84.09 KB, 1366x768, Screenshot (245).png)

Instead of inserting a keyframe I will only insert a normal frame (f5) at frame 60.

Sersys!CyQeb5KTDM 4152

File: 1379453228091.png (81 KB, 1366x768, Screenshot (247).png)

Before I move anything I'll create a motion tween.

Sersys!CyQeb5KTDM 4153

File: 1379453738905.png (56.22 KB, 1366x768, Screenshot (248).png)

The layer is now blue.
It is in now motions shape mode. It behaves differently then classic tweens or frame-by-frame animations and will have different menu options available for its frames.

Sersys!CyQeb5KTDM 4154

File: 1379453814259.png (60.41 KB, 1366x768, Screenshot (249).png)

Now select frame 60 and drag the stick into position

Sersys!CyQeb5KTDM 4155

Notice that a motion path appeared and the frames are not separated by vertical lines.

Sersys!CyQeb5KTDM 4156

File: 1379454037391.png (239.39 KB, 1366x768, Screenshot (250).png)

It transits the stick from one place to the other with constant moving and rotation speed without a need to set anything.

Sersys!CyQeb5KTDM 4157

File: 1379454297336.png (59.87 KB, 1366x768, Screenshot (251).png)

You can use the selection tool to modify the motion path like it was a stroke. You don't need to pay attention to keep the symbol on the motion path because flash snap it automatically onto the path when you change the path. You can grab the whole path with the same tool and drag the entire animation where you want it.

Sersys!CyQeb5KTDM 4158

File: 1379454529378.png (62.11 KB, 1366x768, Screenshot (252).png)

You can use the free transform tool to modify the position of the motion path related to the symbol. Notice that when you modify the transformation point then it will be changed throughout the full motion.

Sersys!CyQeb5KTDM 4159

File: 1379454691877.png (292.74 KB, 1366x768, Screenshot (253).png)

Now I'm getting the animation I want to see but it got out of the stage.

Sersys!CyQeb5KTDM 4160

File: 1379454791372.png (306.54 KB, 1366x768, Screenshot (254).png)

Notice that you are free to move the symbol and the motion path will adjust to it automatically

Sersys!CyQeb5KTDM 4161

File: 1379454926961.png (66.68 KB, 1366x768, Screenshot (255).png)

You can also use the sub selection tool to adjust the motion path like it was a bezier curve

Sersys!CyQeb5KTDM 4162

File: 1379455026417.png (73.35 KB, 1366x768, Screenshot (256).png)

Now select a frame between 2 and 59.

Sersys!CyQeb5KTDM 4163

File: 1379455124501.png (74.24 KB, 1366x768, Screenshot (257).png)

Move the stick and rotate it too. Notice that flash will automatically adjust the motion path to it.

Sersys!CyQeb5KTDM 4164

File: 1379455328213.png (73.41 KB, 1366x768, Screenshot (258).png)

Now select a different frame within the motion tween then shrink and skew your stick.

Sersys!CyQeb5KTDM 4165

File: 1379455696952.png (236.58 KB, 1366x768, Screenshot (259).png)

You can transform your symbol any time any way and flash will adjust the motion path to it.

Sersys!CyQeb5KTDM 4166

File: 1379455927099.png (68.31 KB, 1366x768, Screenshot (260).png)

Now click on the right edge of the motion tween on the layer and drag it to the right to extend the motion tween. The more frames it takes to transit the symbol from one place to another the more time it has for the transition ergo the transition becomes slower.
Notice that my extra keyframes are on the 22nd and 45th frame.

Sersys!CyQeb5KTDM 4167

File: 1379456542001.png (71.23 KB, 1366x768, Screenshot (261).png)

I've extended my motion tween to the 80th frame. Now my animation is slower. Flash adjusted my extra keyframes to new duration of the animation and they are no longer on frame 22 or frame 45. If flash kept the extra frames in place then only the animation form frame 45 to frame 60 would have slowed down.

Sersys!CyQeb5KTDM 4168

File: 1379456618834.png (72.18 KB, 1366x768, Screenshot (262).png)

To put back a frame in place just click on it and drag it back where you want it to.

Sersys!CyQeb5KTDM 4170

File: 1379458485946.png (88.18 KB, 1366x768, Screenshot (263).png)

If you want to adjust the number of frames between individual keyframes without changing the proportions between other frames just add or remove frames between the desired keyframes with f5 or shift+f5 or from the local menu by right clicking on a frame.

To delete a keyframe, or a specific feature of a keyframe right click on the keyframe, select clear keyframe and select the unwanted operator.

Sersys!CyQeb5KTDM 4171

File: 1379459858786.png (255.88 KB, 1366x768, Screenshot (266).png)

The motion tween is a very versatile tool with a lot of customization options. It's fairly automated too so it's fast and comfortable to use. It has complicated features and limitations but limitations can be avoided and the complicated features will speed up your work once you get to understand them. Personally this is my favourite animating method and I recommend using this for anything more then a straight linear movement.

Sersys!CyQeb5KTDM 4172

File: 1379459922115.jpg (91.4 KB, 336x430, lyra derpy bonbon.jpg)

This concludes Lesson 5. Next time I will talk more about the motion tween.

Sersys!CyQeb5KTDM 4195

File: 1380307757914.png (67.47 KB, 1366x768, Screenshot (275).png)

Today I will talk more about motion tweens.
I've created square, converted it into a symbol and created a motion tween. It moves along an S shaped motion path. You may have noticed earlier that there is no option in the properties for ease settings like the classic or shape tween had.

Sersys!CyQeb5KTDM 4196

File: 1380307892115.png (102.14 KB, 1366x768, Screenshot (276).png)

Select the square and go to the motion editor tab on the timeline. If you can't find it, you can go to window menu and check motion editor.

Sersys!CyQeb5KTDM 4197

File: 1380308172136.png (101.4 KB, 1366x768, Screenshot (277).png)

Now expand the motion editor and try not to give up on learning flash. What you see there is a tremendous amount of bullshit. This is how you set the ease of a motion tween. If you don't know how to read graphs, your head will hurt like hell soon.

Sersys!CyQeb5KTDM 4198

File: 1380308881322.png (105.48 KB, 1366x768, Screenshot (278).png)

Below the graphs you see an icon "viewable frames". Use that to maximise the number of frames so you can get a full picture of your motion.

Sersys!CyQeb5KTDM 4199

File: 1380310675676.png (98.57 KB, 1366x768, Screenshot (280).png)

To enlarge a graph click on the graph's property, then use the "expanded graph size" icon to enlarge the graph.

Here I've enlarged the graph of the vertical movement of my square, labelled "Y". While "X" is a constant line caused by the horizontal motion going from left to right without changing directions, "Y" goes up and down changing directions so it's not a straight line.

Sersys!CyQeb5KTDM 4200

File: 1380310934993.png (93.17 KB, 1366x768, Screenshot (281).png)

If I turn the motion 90° then the graphs swap.

Sersys!CyQeb5KTDM 4201

File: 1380311180582.png (91.56 KB, 1366x768, Screenshot (282).png)

I've turned back my motion to it's original pose. To add an ease you first need to select what type of ease do you have in mind. To do this scroll down to the Eases tab and click on the "+" icon.

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 ]