Lesson 2 Using Tweens
<ul><li>Tweening  is the process of creating “in-between” frames in an animation. </li></ul><ul><li>It is used to create t...
<ul><li>Create a new Flash Animation. </li></ul><ul><li>In  Frame 1 , draw a small shape on the background, this is the sh...
<ul><li>You can also speed up and slow down the speed of your Motion Tween. </li></ul><ul><li>To speed up, remove frames, ...
Edit the  Ease  of your  Motion Tween  here. Can’t see it? Click the Small arrow shown in the box below to display your  P...
<ul><li>After creating your  Motion Tween  select the  Final Frame , click the  Free Transform Tool  and change your shape...
<ul><li>A  Shape Tween  is when one object transforms into a different object. </li></ul><ul><li>Create a new Flash Movie....
<ul><li>This does not always create a clear animation.  </li></ul><ul><li>Use of colours, more than one shape and text can...
<ul><li>First, create a new Layer, by clicking the icon shown below.  </li></ul><ul><li>Double click on Layer 1 to change ...
<ul><li>Make sure you are on your background layer. </li></ul><ul><li>Now find your background, save it and use  File Impo...
<ul><li>Create a Flash Movie, that contains a nice background, Motion Tween and Shape Tween. </li></ul><ul><li>I want the ...
<ul><li>You must Save and Store your Animation today. </li></ul><ul><li>Remember:  </li></ul><ul><ul><li>File – Export – E...
Upcoming SlideShare
Loading in …5
×

M5 - Graphical Animation - Lesson 2

724 views

Published on

M5 - Graphic Animation - Introduction to Tweening

Published in: Education, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
724
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

M5 - Graphical Animation - Lesson 2

  1. 1. Lesson 2 Using Tweens
  2. 2. <ul><li>Tweening is the process of creating “in-between” frames in an animation. </li></ul><ul><li>It is used to create the animation effect of movement, or changing shape. </li></ul><ul><li>There are 2 types of tween we will learn today: </li></ul><ul><ul><li>Motion Tween </li></ul></ul><ul><ul><li>Shape Tween </li></ul></ul>
  3. 3. <ul><li>Create a new Flash Animation. </li></ul><ul><li>In Frame 1 , draw a small shape on the background, this is the shape we will move. </li></ul><ul><li>Insert a Key Frame at Frame 30 . </li></ul><ul><li>Right Click between Frame 1 and Frame 30 . </li></ul><ul><li>Click – Create Motion Tween . </li></ul><ul><li>That’s it. Now preview your movie. </li></ul>
  4. 4. <ul><li>You can also speed up and slow down the speed of your Motion Tween. </li></ul><ul><li>To speed up, remove frames, to slow down, add more frames. </li></ul><ul><li>You can also make the shape accelerate or decelerate . </li></ul><ul><li>Make sure you have selected your Motion Tween, then change the Ease , located in the Property Bar at the bottom of the screen. Set it at -100. Your shape now starts slowly and speeds up. Try it at 100. What happens? </li></ul>
  5. 5. Edit the Ease of your Motion Tween here. Can’t see it? Click the Small arrow shown in the box below to display your Property Bar.
  6. 6. <ul><li>After creating your Motion Tween select the Final Frame , click the Free Transform Tool and change your shape. </li></ul><ul><li>We can use this to make objects look like they are coming from a distance. </li></ul><ul><li>Try it! </li></ul><ul><li>You can rotate, flip and edit your shape to create some interesting looking animations. </li></ul>
  7. 7. <ul><li>A Shape Tween is when one object transforms into a different object. </li></ul><ul><li>Create a new Flash Movie. </li></ul><ul><li>Insert a shape or draw a simple picture. </li></ul><ul><li>Then, at Frame 30 , insert a Blank Key Frame . </li></ul><ul><li>Select a Frame in the middle, and at the bottom of your screen, click Tween , and select Shape . </li></ul><ul><li>You have created a Shape Tween. Preview it to view your animation. </li></ul><ul><li>We can use Ease in the same way as before. Try it. </li></ul>
  8. 8. <ul><li>This does not always create a clear animation. </li></ul><ul><li>Use of colours, more than one shape and text can create strange looking animations, have a play and try to create some smooth Shape Tweens. </li></ul><ul><li>If you want to use Shape Tween on Text or an Imported Image, you must select the text/image and Select Modify – Break Apart TWICE before you create your Shape Tween. </li></ul><ul><li>Hint: Use Shape Tween with similar Shapes at different parts of the screen to create effects such as shapes coming from a distance. </li></ul>
  9. 9. <ul><li>First, create a new Layer, by clicking the icon shown below. </li></ul><ul><li>Double click on Layer 1 to change the name to Background. </li></ul>
  10. 10. <ul><li>Make sure you are on your background layer. </li></ul><ul><li>Now find your background, save it and use File Import – Import to Stage, or just Cut and Paste your Image into the Movie. </li></ul><ul><li>Always keep different parts of your animation on separate Layers , it makes editing simpler and tidier. </li></ul><ul><li>Make sure you Insert Frame at the end of the animation on every layer to make sure the background does not disappear half way through your movie! </li></ul>
  11. 11. <ul><li>Create a Flash Movie, that contains a nice background, Motion Tween and Shape Tween. </li></ul><ul><li>I want the animation to be realistic. </li></ul><ul><li>Try one of these: </li></ul><ul><ul><li>A car driving along the road </li></ul></ul><ul><ul><li>A bouncing ball </li></ul></ul><ul><ul><li>A plane taking off </li></ul></ul><ul><ul><li>A train passing by a city </li></ul></ul><ul><ul><li>A sunrise </li></ul></ul>
  12. 12. <ul><li>You must Save and Store your Animation today. </li></ul><ul><li>Remember: </li></ul><ul><ul><li>File – Export – Export Movie to save your COMPLETED Image. </li></ul></ul><ul><ul><li>File – Save As to save your Image that you have NOT FINISHED. </li></ul></ul><ul><li>Next lesson we will be uploading your finished Animation to a simple website. </li></ul>

×