Topic 7 Temporal Control

2Chapter 25 - Temporal ControlOutline Goals and Objectives Goals and Objectives Introduction Introduction Timeline Animation Timeline Animation Timeline Control Timeline Control Animation Techniques Animation Techniques Animation Tips Animation Tips Summary Summary

3Chapter 25 - Temporal Control Goals and Objectives Goals Goals Understand JavaScript time control, how to time out user input, how to create timeline animation, how to use layers to create animation, and how to put animation to good use Objectives Objectives Need for timeline control Need for timeline control JavaScript timeline functions JavaScript timeline functions Timeline events Timeline events Timeline event handling objects Timeline event handling objects Timeline animation techniques: source files and hidden layers Timeline animation techniques: source files and hidden layers Animation tips Animation tips HTML editors and animation HTML editors and animation Practice using animation techniques and functions Practice using animation techniques and functions

4Chapter 25 - Temporal ControlIntroduction A web page displays a sequence of elements over time creating a timeline A web page displays a sequence of elements over time creating a timeline Elements of a timeline are: Elements of a timeline are: Objects  e.g. images that make up an animation Objects  e.g. images that make up an animation Events  e.g. user inputs, program outputs Events  e.g. user inputs, program outputs Two groups of applications include: Two groups of applications include: User interaction with a JavaScript program User interaction with a JavaScript program Animation Animation

5Chapter 25 - Temporal Control Timeline Animation Animation displayed as an ordered sequence of images is known as real time playback animation Animation displayed as an ordered sequence of images is known as real time playback animation Each image of animation is an animation frame Each image of animation is an animation frame A JavaScript program can display the images, saved as files, in the correct order to create the effect of timeline A JavaScript program can display the images, saved as files, in the correct order to create the effect of timeline Generating frames is a time consuming process so we may use the concepts of: Generating frames is a time consuming process so we may use the concepts of: Keyframe  important frames in the animation sequence Keyframe  important frames in the animation sequence Inbetweening  interpolation to generate inbetween frames Inbetweening  interpolation to generate inbetween frames We can control it by specifying the number of frames and the frame rate We can control it by specifying the number of frames and the frame rate

6Chapter 25 - Temporal Control Timeline Control The two key issues in timeline control are: The two key issues in timeline control are: Frame generation  creating and saving images Frame generation  creating and saving images Frame rate  number of frames per second Frame rate  number of frames per second JavaScript provides four functions (methods) to control the frame rate setInterval() clearInterval() setTimeout() clearTimeout() JavaScript provides four functions (methods) to control the frame rate setInterval() clearInterval() setTimeout() clearTimeout()

7Chapter 25 - Temporal Control Timeline Control timeUser_1 timeUser_2 Use setInterval() and clearInterval() methods

8Chapter 25 - Temporal Control Animation Techniques Two animation techniques exist: Two animation techniques exist: Using layers Using layers Using image files Using image files One can change layer properties in a series of frames over time One can change layer properties in a series of frames over time When using image files, we can load image files one at a time during the animation timeline When using image files, we can load image files one at a time during the animation timeline Image files is slower than layers Image files is slower than layers

9Chapter 25 - Temporal Control Animation Techniques animation1 Use layers for animation

10Chapter 25 - Temporal Control Animation Techniques animation2 Use image files for animation

11Chapter 25 - Temporal Control Animation Tips The general advice is to keep number and sizes of files small The general advice is to keep number and sizes of files small Specific tips: Specific tips: Use layers instead of changing the source files of the images Use layers instead of changing the source files of the images Use more frames if animation looks choppy Use more frames if animation looks choppy Avoid animation large image files Avoid animation large image files Create simple animations Create simple animations

12Chapter 25 - Temporal Control PopUps popUps popUps popUps

13Chapter 25 - Temporal ControlSummary Time can be an important element in web applications Time can be an important element in web applications Animation as we know it is real time playback animation Animation as we know it is real time playback animation Frame generation and frame rate are two important issues in timeline control Frame generation and frame rate are two important issues in timeline control Animation can be created using layers or image files Animation can be created using layers or image files Follow the animation tips for creating better and faster animations Follow the animation tips for creating better and faster animations