M5 - Graphical Animation - Lesson 2


Published on

M5 - Graphical Animation - Introduction to Tweening

Published in: Education, Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

M5 - Graphical Animation - Lesson 2

  1. 1. Lesson 2 Using Tweens
  2. 2. What is a Tween? <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. Creating a Motion Tween <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. Creating a Motion Tween <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. Creating a Motion Tween <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. Creating a Shape Tween <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. Creating a Shape Tween <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. Inserting a Background <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. Inserting a Background <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. Task Today <ul><li>Create a Flash Movie, that contains a nice photographic 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. Task Today <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>