Basic Animations Using Adobe Director. • Animation is the appearance of an
image changing over time. The most common types of animation in Adobe
Director ...
Basic Animations Using Adobe Director
•
Animation is the appearance of an image changing over time. The most common types of animation in Adobe Director involve moving a sprite on the Stage (tweening animation) and using a series of cast members in the same sprite (frame-by-frame animation).
•
There are different animation methods in Adobe Director: – – – –
Tweening Animation Frame-by-frame animation Step Recording Animation Real Time Recording Animation
IT342
1
Basic Animations Using Adobe Director
•
Tweening Animation: – Tweening in Director lets you define properties for sprite keyframes, and Director changes the properties in the frames in between. – Tweening is very efficient for adding animation to movies for websites, because no additional data needs to download when a single cast member changes. – A keyframe usually indicates a change in sprite properties. Properties that can be tweened are position, size, rotation, skew, blend, and foreground and background color. Each keyframe defines a value for all of these properties.
IT342
2
Basic Animations Using Adobe Director
•
Frame-by-frame animation: – To create animation that is more complex than is possible with simple tweening, you can use a series of cast members in frame-by-frame animation. – Sprites usually refer to only one cast member, but they can refer to different cast members at different times during the life of the sprite.
– For example, an animation of a man walking may display several cast members showing the man in different positions. By placing all the images in a sequence within a single sprite, you can work with the animation as if it were a single object.
IT342
3
Basic Animations Using Adobe Director
•
Step recording Animation: – This method is useful for creating sprites that follow irregular paths.
•
Real Time Recording Animation: – The real-time recording technique is especially useful for simulating the movement of a pointer or for quickly creating a complex motion for later refinement.
IT342
4
Basic Animations Using Adobe Director
•
Film Loop – Combines many sprites and effects over a range of frames into a single cast member – Makes it easy to develop and work with large complex animation – After creating a film loop, a new cast member appears in the Cast window. – Do not delete or modify the cast member from which you created the film loop, because director needs them to play the loop. – Film loop animate only when you play the movie.
IT342
5
Basic Animations Using Adobe Director
Class Activity: Creating Basic Animation Using Tweening:
–
Start by creating a new movie and setting the Stage size to 800*600.: File - > new - > Movie
–
Create a filled ellipse/ball of any color using the vector shape tool in the Vector Shape window.
–
Name the ball as 'bouncing ball‘.
–
Drag 'bouncing ball' from the cast member window to the Stage.
–
Drag the right end of the sprite (the object that appears in the Score) to frame 40. Setting Size
IT342
6
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
Renaming Vector Shape Tool
IT342
7
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
Dragging the ball to the Stage IT342
8
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
Changing Number of frames IT342
9
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
–
Click on the top of the Stage window to make it active. Press Shift and while still holding down, click on a corner handle of the spite and drag it in to make it smaller. Holding down Shift lets us resize the object in proportion to its original dimensions.
–
Click on frame 40 in channel 1 (the end of the sprite), hold down shift and drag the ellipse to the right end of the Stage. You will notice a line being drawn on the stage - this is the animation path.
–
Rewind and play the movie to see what you made.
IT342
10
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
The Animation Path IT342
11
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
–
A keyframes must be inserted within the sprite to make a curved path.
–
Click on frame 10 of the sprite and choose Insert > Keyframe . Create keyframes at frame 20 and 30.
–
At each keyframe, a circle appears within the sprite in the Score as well as within the path shown on the Stage. Click on the keyframe 10 and keep holding down the shift key, and drag the circle up on the Stage. Do the same with keyframe 30, producing a path similar to that shown below.
–
Rewind and play the movie. Save your movie as ball.dir
IT342
12
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
Inserting Keyframes IT342
13
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
A circle appears within the sprite At each keyframe,
IT342
14
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
Clicking on the keyframe 10 and keeping holding down the shift key,
Dragging the circle up on the Stage.
IT342
15
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
•
Youcan adjust the way Director tweens by through the Sprite Tweening Dialog Box. – Select the animated sprite by clicking anywhere between 2 keyframes. – Choose Modify > Sprite > Tweening. This opens a dialogue box shown below. – By default, the sprite settings allow for all properties to be tweened, including sprite size, location and rotation among a few. – Click and drag the curvature slider to the extreme left. You will notice the path diagram in the top left corner become more linear. – Drag the curvature slider to the extreme right and observe how the path changes.
IT342
16
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
Opening Sprite Tweening Window IT342
17
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
The Sprite Tweening Window IT342
18
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
The Path after changing the curvature slider
IT342
19
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
•
Ease-In and Ease-Out properties – – – –
Delete the animating ball and recreate the ball animating along a straight line. Select the sprite and open the Sprite Tweening dialog. Drag the Ease-in slider to 50%, then rewind and play the movie. The ball starts moving slowly and then speeds up. The animated path shown on the Stage indicates keyframes by circles and Directors in between steps over each frame by dots.
IT342
20
Basic Animations Using Adobe Director Class Activity: Creating Basic Animation Using Tweening:
By choosing the Ease-in option, the dots are closer together at the start of the sprite and more spread out towards the end.
IT342
21
Using Animation and Transitions
In this lab we will learn how to perform animation using: • Step-recording method. • Real-time recording method. • Transitions.
IT342
22
Using Animation and Transitions
Step-recording animation Animation using step-recording method allows you to record the animation one frame at a time. Record the position of a sprite in a frame then move to the next frame and change the position of the sprite (or any other sprite properties). Repeat this process until you reach the desired animation.
IT342
23
Using Animation and Transitions
Step-recording animation The following steps describe the process of step-recording: 1. Place sprites on the Stage where you want the animation to begin. 2. Select all the sprites you want to animate. 3. In the Score, click the frame where you want animation to begin.
IT342
24
Using Animation and Transitions Step-recording animation 4. Select Control > Step Recording. The step-recording indicator appears next to the channel numbers for the sprites being recorded
IT342
25
Using Animation and Transitions Step-recording animation 5. Click the Step Forward button in the Control panel; the movie advances to the next frame. Drag the sprite to reposition it or stretch the sprite or change the color or any other property.
IT342
26
Using Animation and Transitions
Step-recording animation 6. Repeat step 5 until you reach the animation you want to record. 7. Select Control > Step Recording again to stop recording or you can rewind the movie to stop recording.
IT342
27
Using Animation and Transitions Step-recording animation • Repeat steps 5 and 6 until you have completed the sequence you want to record. • Select Control > Step Recording again to stop recording.You can also rewind the movie to stop recording.
IT342
28
Using Animation and Transitions Real-time recording animation This method records the movement of a sprite as you drag it across the stage. This method is useful for quickly creating complex motion. To perform Real-time animation follow these steps: 1. Select one or more sprites on the Stage or in the Score. Recording begins at the playhead. To record in a specific range of frames, select the frames, and then click the Selected Frames Only button in the Control panel.
IT342
29
Using Animation and Transitions Real-time recording animation
IT342
30
Using Animation and Transitions
Real-time recording animation 2. Select Control > Real-Time Recording. The real-time recording indicator appears next to the channel numbers for the sprite being recorded, and a red and white selection frame appears around the sprite. Recording begins as soon as you drag the sprite on the Stage
IT342
31
Using Animation and Transitions Real-time recording animation
IT342
32
Using Animation and Transitions
Real-time recording animation 3. Drag the sprite on the Stage to record a path for the sprite. Director records the path.
IT342
33
Using Animation and Transitions
Real-time recording animation 4. Release the mouse button to stop recording. The movie continues to play until you stop it.
IT342
34
Using Animation and Transitions Using transitions To create a dissolve between two scenes, set the transition in the first frame of the second scene, not in the last frame of the first scene. To add transitions between your scenes in Adobe Director; the following steps are performed: 1. Select the frame in which you want the transition to occur. 2. Select Modify > Frame > Transition 3. In the Frame Properties Transition dialog box, select a category if desired, and then select the transition you want. Transitions have default settings for Duration and Smoothness. You can adjust these settings. You can also select whether the transition affects the entire Stage or only the area that’s changing.
IT342
35
Using Animation and Transitions
Using transitions
IT342
36
