Introduction to Authoring

1. Introduction to Authoring Animation Techniques

2. Flash – Vector Animation • Briefly Looked at Motion Tweening in last practicals • Also have • Shape Tweening • Masking • Path Tweening • Key Frame Animation

3. Flash – Vector Animation • Motion Tweening • Two keyframes are created • Objects in keyframes have different properties • Software calculates how to animate between these 2 keyframes • May tween: • Alpha (transparency) • Brightness • Tint • Size • Shear • Position • Rotation • Motion tweened objects need to be symbols

4. Key Frames at 1 and 15 Motion Tweening Selected Flash – Vector Animation • Motion Tweening • Alpha Symbol on Stage

5. Flash – Vector Animation • Motion Tweening • Alpha Example 1. Select the keyframe 2. Select the symbol 3. Select Alpha in the Color Section of the properties panel 4. Choose the opacity you want

6. Flash – Vector Animation • Motion Tweening • Brightness and Tint • Same process as Alpha • Brightness – How dark or light a symbol appears • Tint - Overlays a colour on top of the symbol Example

7. Select keyframe and alter size of object Flash – Vector Animation • Motion Tweening • Size • Same process as before except change scale of object in key frame Example

8. Flash – Vector Animation • Motion Tweening • Position • As seen in practical • Can do shear and rotation in much the same way • Can also combine these • So tween size and position at same time etc • Use to simulate 3d effects – perspective etc • Position Details • Can adjust the motion tween • Ease in • Ease out • Rotate • Sync • Orient to path • Snap

9. Flash – Vector Animation • Motion Tweening - Easing • Ease in and Ease out • Very important for realistic motion • Creates acceleration or deceleration

10. Easing slider Flash – Vector Animation • Motion Tweening - Easing • Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames: • To accelerate drag the slider up or enter a value between -1 and -100. • To decelerate drag the slider down or enter a positive value between 1 and 100. example

11. Flash – Vector Animation • Motion Tweening - Rotation • Allows tweened objects to be rotated a given number of times • Can also choose direction • CW – Clockwise • CCW – Counter Clockwise

12. Flash – Vector Animation • Motion Tweening - Sync • If you are tweening a movie clip that has animation • Syncing attempts to synchronize the frames between the movieclip and the main timeline • May be important if syncing to audio • Or running on pc with poor processing power Orient to path and snap – for path tweening

13. Flash – Vector Animation • Shape Tweening • Also known as morphing • Only works with shapes – NOT SYMBOLS or GROUPED OBJECTS • Gives more organic possibilities for tweened animation • Can also shape tween – colour, size and position • Needs to be kept simple • Complex objects use a lot of processing power • And look naff • Have options to apply Angular or Distributive tweening • Angular attempts to preserve corners • Distributive smoothes tweens example1 example2

14. Flash – Vector Animation • Masking • Masks are objects which act as windows through which other objects can be viewed • Can be static or may tween to reveal objects in an animation Need to create a mask layer And a masked layer

15. Mask Masked object Flash – Vector Animation • Masking • Mask layer sits above layer that will be masked example

16. Flash – Vector Animation • Masking • Tweened masks are simply movieclips that have had tweening applied to them – you can use either tweened shapes or motion tweened symbols example

17. Flash – Vector Animation • Path Tweening • Very important for realistic animations • Allows objects to be tweened along non-linear paths • Non linearity vital for animations as most actions occur in arcs • Use motion guide layer which contains the path • Lock symbol to path at both ends of the tween • This is what snap was for

18. Motion Guide Layer - invisible in movie Tweened object Snapped/locked to path Flash – Vector Animation • Path Tweening example

19. Tweened object Oriented to path Flash – Vector Animation • Path Tweening – orient to path This will ensure objects is at correct angle to path as it moves example

20. Flash – Vector Animation • Key Frame animation • Traditional style of animation • No tweening done by software • Create object(s) in one key frame • Make another key frame • Move objects in that frame • Etc, etc • Often done with reference images in a guide layer • May use vectors or bitmaps • Much digital animation is a mixture of tweened and keyframe animation example

21. Flash – Vector Animation • Limited Animation • Most computer animation is limited animation • Objects reused throughout • Flash – symbols • Sensible to convert graphic objects to symbols at start • Never know when will need again • Reduces processing power and so speeds animation and interactions • Keep backgrounds, characters and objects as separate symbols example