Animations using Shape Tween Techniques

12 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€64.39
List Price:  €91.99
You save:  €27.60
£55.09
List Price:  £78.70
You save:  £23.61
CA$95.28
List Price:  CA$136.12
You save:  CA$40.84
A$104.54
List Price:  A$149.36
You save:  A$44.81
S$94.19
List Price:  S$134.57
You save:  S$40.37
HK$545.77
List Price:  HK$779.70
You save:  HK$233.93
CHF 63.61
List Price:  CHF 90.88
You save:  CHF 27.26
NOK kr746.97
List Price:  NOK kr1,067.14
You save:  NOK kr320.17
DKK kr480.44
List Price:  DKK kr686.38
You save:  DKK kr205.93
NZ$114.32
List Price:  NZ$163.32
You save:  NZ$49
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,168.69
List Price:  ৳11,670.06
You save:  ৳3,501.36
₹5,828.58
List Price:  ₹8,326.90
You save:  ₹2,498.32
RM327.90
List Price:  RM468.45
You save:  RM140.55
₦105,229.96
List Price:  ₦150,334.96
You save:  ₦45,105
₨19,431.47
List Price:  ₨27,760.43
You save:  ₨8,328.96
฿2,521.66
List Price:  ฿3,602.53
You save:  ฿1,080.87
₺2,253.99
List Price:  ₺3,220.12
You save:  ₺966.13
B$357.19
List Price:  B$510.29
You save:  B$153.10
R1,273.09
List Price:  R1,818.79
You save:  R545.69
Лв125.75
List Price:  Лв179.65
You save:  Лв53.90
₩95,095.26
List Price:  ₩135,856.19
You save:  ₩40,760.93
₪258.97
List Price:  ₪369.98
You save:  ₪111
₱4,052.01
List Price:  ₱5,788.84
You save:  ₱1,736.82
¥10,898.49
List Price:  ¥15,569.94
You save:  ¥4,671.45
MX$1,161.50
List Price:  MX$1,659.36
You save:  MX$497.86
QR254.39
List Price:  QR363.44
You save:  QR109.04
P945.24
List Price:  P1,350.41
You save:  P405.16
KSh9,168.69
List Price:  KSh13,098.69
You save:  KSh3,930
E£3,276.23
List Price:  E£4,680.53
You save:  E£1,404.29
ብር4,006.99
List Price:  ብር5,724.51
You save:  ብር1,717.52
Kz59,384.57
List Price:  Kz84,838.74
You save:  Kz25,454.16
CLP$62,491.07
List Price:  CLP$89,276.78
You save:  CLP$26,785.71
CN¥496.64
List Price:  CN¥709.51
You save:  CN¥212.87
RD$4,086.46
List Price:  RD$5,838.06
You save:  RD$1,751.59
DA9,413.48
List Price:  DA13,448.41
You save:  DA4,034.92
FJ$155.95
List Price:  FJ$222.79
You save:  FJ$66.84
Q541.96
List Price:  Q774.26
You save:  Q232.30
GY$14,594.23
List Price:  GY$20,849.79
You save:  GY$6,255.56
ISK kr9,678.91
List Price:  ISK kr13,827.61
You save:  ISK kr4,148.70
DH694.53
List Price:  DH992.23
You save:  DH297.69
L1,236.03
List Price:  L1,765.83
You save:  L529.80
ден3,963.41
List Price:  ден5,662.25
You save:  ден1,698.84
MOP$560.62
List Price:  MOP$800.92
You save:  MOP$240.30
N$1,276.29
List Price:  N$1,823.35
You save:  N$547.06
C$2,568.19
List Price:  C$3,669
You save:  C$1,100.81
रु9,300.39
List Price:  रु13,286.84
You save:  रु3,986.45
S/260.50
List Price:  S/372.17
You save:  S/111.66
K270.91
List Price:  K387.03
You save:  K116.12
SAR262.49
List Price:  SAR375
You save:  SAR112.51
ZK1,780.59
List Price:  ZK2,543.81
You save:  ZK763.22
L320.34
List Price:  L457.65
You save:  L137.31
Kč1,591.01
List Price:  Kč2,272.97
You save:  Kč681.96
Ft24,857.67
List Price:  Ft35,512.48
You save:  Ft10,654.81
SEK kr747.87
List Price:  SEK kr1,068.43
You save:  SEK kr320.56
ARS$62,063.45
List Price:  ARS$88,665.87
You save:  ARS$26,602.42
Bs481.99
List Price:  Bs688.59
You save:  Bs206.59
COP$267,109.86
List Price:  COP$381,601.87
You save:  COP$114,492.01
₡35,703.30
List Price:  ₡51,006.90
You save:  ₡15,303.60
L1,727.27
List Price:  L2,467.63
You save:  L740.36
₲522,695.49
List Price:  ₲746,739.85
You save:  ₲224,044.36
$U2,715.34
List Price:  $U3,879.22
You save:  $U1,163.88
zł274.22
List Price:  zł391.77
You save:  zł117.54
Already have an account? Log In

Transcript

Hello, we'll learn how to use shape two in in this tutorial. Shape two in other frames that come between two shapes. That is when one shape animates and changes to another shape. So get ready, click for the new document, select the square first. For that, use the shortcut key R. When drawn with the default color, named the layer as square, insert a keyframe on the fifth frame by pressing f6. We will modify the square at this key.

Let's scale up the square. for that. Use the shortcut key Ctrl plus alt plus S. we scaled up by giving it a value of 200 at the same key, also change the position of the square object. You can move wherever you want also change the color of the square on the 15th frame. We are done with the changes and it's time to create a shape to in. For that, select the frames between one and 50 and click on Create shape to in and see the animation.

Notice how the square at the first key smoothly morphs into other square at the fifth frame. Here, add a new layer. Before we go ahead, lock and hide the square layer. Name the new layer as circle. Select the oval tool and draw a circle on the new layer. We'll do the same as done for square object.

Insert a new keyframe on frame number 50 and change the size and position of the circle. Select the in between frames, and again create a shape twin. Here, you will notice the same type of changes in the circle. also change the color on frame 50 from color palette. Here we have chosen red. And now when you play, you can see the smooth morphing of the green circle to the red big circle.

Interesting isn't it? Let us hide and lock the circle layer to create a new layer. Name it square and circle it's time to see how a circle converts into a square. For that, we draw a circle on the first key insert Blank keyframe, press f7 on frame number 50. Draw a square at a different position there. Once more create shaped when selecting the in between frames.

Now watch the morphing of the circle into the square. Keep playing and checking the movement. We are now also changing the color of the square to blue circle is in red, and the square is in blue. Along with the shape and position, the color is also changing smoothly. These are the basics of shape twin. Now, we'll start with a new Flash file.

Pick your color and draw a rectangle on this stage. Select and convert the object into a symbol. For that, you can go to modify, convert to symbol, or simply press f8 we name it, square underscore zero to double click and go inside the square underscore zero to simple. Select the object and confirm that the graphic is broken. Remember, shape to it never works on groups or directly on symbols. Coming back, add a keyframe at frame 35.

Here at 35 will modify the look of the object completely. You can modify it as you like. We can make out a lot of difference between the shapes of the two key Still, we'll modify some more. Select the in between frames, right click and select Create shaped when you'll notice that the shape is morphing from first to last game, but the morphing is not pleasing at all. To get control over how we want the shape to morph into the next shape, we are going to add shape hints. Go to menu modify shape, add shape pins, or find shortcut key in front of it.

That is control plus shift plus edge. Add forshay pins ABCD on the first keyframe and place them on the four corners of the object After that, you can see for shape hints already there on the 35th frame. Here, you need to place these hints exactly to the relative nodes as per first keyframe. See how we are matching the hints as per their naming and follow it. You will also notice that once the hint meets the proper corner, it turns to green. No, the morphing of the shape looks much better Now, exit the symbolic and extended frames till 35 and the shape is animating very nicely.

When you keep studying the animation, you will come to know how shape hints can change the look of the animation. Let us see one more effective animation using shape to enhance take new Flash file again. Draw a circle on the blank stage and convert it to a symbolic name it circle underscore 01 extend the frames to 35 you can extend them more if you like. Now, double click to enter the symbol and the first thing you need to do is to break the graphic as already learned shape Doesn't work on a group of objects. Insert a keyframe on the 35th frame or whatever frame you want to extend the length of the animation to and create a shape to in between the two keys. Here, we have not changed the shape of the object on any of the keys.

Now, on the first keyframe, add a shape hint, a go to menu modify shape, add shape hint, or simply press shortcut key control plus shift plus edge. Place the hint a as shown in the video. We need one more hint. So press Control press Shift plus edge and get hint B. Place it the same way as shown. Now it's time to place the A and B hints on the other keyframe.

But here we'll place them parallel to each other on opposite directions. Notice that without changing the shape, this animation is the result of just to shape hints. So you can explore the technique more and experiment with different shapes so that you will understand this better. Let's start with the new assignment for using shape to end technique. Here, we'll animate the box with the help of shape to enhance. Let's start with a new Flash file.

Draw an exact square using the rectangle tool shortcut key R. Select that square. Now go to modify, convert to symbol and name it squared underscore one. Now it's a graphic symbol. Double click to enter the symbol and break that square graphic. Inside the symbolic itself, add a new layer. As you see, we are copying the single left sided outline and pasting it At the same position on the new layer two paste at the exact position, use the option menu Edit, Paste in Place.

Now on the timeline, extend the frames to 35 for both the layers. Check that layer one contains the square and layer two contains a single line on both layers will add new keyframes at 35 apply shaped wind to layer one add to shape ins AB on the first key of the square. See that we are placing hint a at the top left corner and hint be at the bottom left corner. Now time to place them on frame number 35. placed them exactly on the opposite corners. Hint be at the bottom right corner hint a at the top right corner and you will notice while playing gives us a feel of the box. hide the layer two and check again.

This is something really amazing. Let's give it a more realistic touch. Put the square layer in the wireframe mode and select the single line on layer two. On the 35th frame, shift the line to the opposite end of the square. Match the line to the squares right most outline create shape to end for layer two. And now you can see the preview put the square on the normal mode.

Yes, we are completely done with this. Here you will notice that the movement of the single line gives the detailing to the box animation. Exit the symbol and extend the frames up to 35. It gives a feel of a rotating box. This assignment was done Only with the help of shape to enhance simple techniques with effective results. Try to experiment with your own shapes and get a good understanding of the techniques.

Thank you

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.