Director 8 - The basics

Transcription

1 Director 8 - The basics This tutorial covers the building blocks of Director, ignoring animation and interactive programming. These elements will be covered in the following tutorials. The idea is that you work through this tutorial experimenting with the basic tools of Director to gain a clear understanding of its structure before attempting anything more ambitious. Then when you take on the more fun elements of Director the background knowledge you have gained will enable you to have more control and freedom to be creative. As a general rule save all the exercises because the tutorials build on the work you have already done. The Toolbar The Toolbar offers shortcuts to many of Director's windows and functions. These will be explained and come into use as you work through the tutorials. The Toolbar sits at the top of the screen under the main menu headings. If you can't already see it go to the Window pull down menu and select Toolbar. The toolbar gives you shortcuts to: New Movie, New Cast, Open, Import Save, Save All, Publish Undo, Cut, Copy, Paste Find Cast Member, Exchange Cast Members 1

2 Rewind, Stop, Play Stage, Cast, Score, Property Inspector, Library Palette windows Paint, Vector Shape, Text windows Behavior Inspector, Script, Message windows. The Stage The Stage is the blank canvas on the screen where the movie will play. To view the Stage, or to remove it from the screen click the Stage icon on the toolbar. The Stage is the white box in the window below. 2

3 You can alter the size of the Stage to suit the movie you are making. You can also set the colour of the Stage and its position on the screen. To do this I need to introduce you to the Property Inspector, this is a very important feature of Director 8 because it is in theproperty Inspector that you can change/set the properties of the building blocks of your movie. To see the Property Inspector choose Inspectors from the Window menu and select Property. 3

4 If the Property Inspector looks more like the image below, it is in List View Mode. This Mode is less user friendly so, for now, we will be using the standard mode. To change mode click the List View Mode button at the top right of the window. An alternative way of selecting the Property Inspector is to click on the Property Inspector Toolbar icon 4

5 Properties... or choose Movie from the Modify menu and select Select a size that is appropriate for your desktop setting, say one size down from the monitor's resolution. For example, if your monitor is set to a resolution of 1024x768 pixels choose 832x624 as the Stage size. Find the Stage Size values, see below, this one is currently set to 640x480. Find the pop up menu to the right, see below, and select the size you want. 5

6 The Cast The Cast is everything you use to create your movie; graphics, text, video, audio etc. Each individual item is called a Cast Member. Click the Cast Window icon on the Toolbar and the Cast window will appear, titled Internal Cast, it is internal because it is created and stored within the movie. It is also possible to import Casts from other movies to use in the movie you are working on. 6

7 Paint Director has a Paint window where you can use basic paint tools to create cast members. Exercise 1: Using Paint to create a background The aim of this exercise is to create a background cast member which will cover the whole of the Stage and provide a backdrop for the movie. To use Paint: Click the Paint Window icon on the Toolbar window. to open the Paint There are 5 Paintbrush types and 5 Airbrush types. You can change a brush's settings by clicking on Settings... and altering the brush shape for a paintbrush, or flow rate and dot size for an airbrush. To see the menu click and hold on the brush icon. 7

8 The Paint Bucket will fill an area with colour when you click in that area. This tool is the best way to create large areas of colour like backgrounds. There are also line and shape tools. To change the colour: The Foreground Colour is the colour you use to draw with. To select a new foreground colour click and hold on the Foreground Color Box as shown below, run the cursor onto the colour you want and let go. The Background Colour is used as the secondary colour in a pattern (see below) and as the background to text made with Paint's text tool, change the background colour using the Background Color Box, to the rear, in the same way. You can select a colour from an exisiting image by using the Eyedropper. Select the tool and click on the image over the colour of your choice. To use a patterned brush: Click and hold on the Pattern rectangle, as shown below, and select a pattern or tile. The plain box is just the foreground colour, this is the default, the patterns use the background colour as the secondary colour as mentioned previously. To customise a pattern select Pattern Settings and Custom. 8

9 The tiles are the bottom row of patterns in a set design and colour. To make your own tiles select Tile Settings... and select a tile from one of your existing cast members. To apply a Gradient to a Paintbrush, Shape or Paint bucket: Choose the colours in the gradient colour palettes by clicking and holding on the Gradient Color Boxes. Click and hold on the small black and white pointer to the left of the right colour box to reveal the Gradient Settings menu and select a setting. Select the icon for the tool you are using, i.e. the paint bucket, then go to the pull down menu at the bottom left of the paint window, use this menu to select Gradient. 9

10 Note that double clicking on the Eraser icon will erase everything. Experiment with some of the different tools and menu choices. When you have created your background close the Paint window. You will see that the background has appeared in the 1st Cast box, this is Cast Member 1. The paintbrush icon shows it is a graphic cast member (a bitmap). To name the cast member click on the Cast Member Name box, this is the white text box top centre, and type in background, click the mouse again and the name will register in place of the 1. To place the background on the Stage: Hold the mouse button down over the Cast Member, you will see the hand cursor close, and drag onto the Stage, the dotted outline shows where it is, when it is in the right position let go. Once it is on Stage you may need to move it about a bit more, simply click down and drag until it is in the right position. Resize the background using the handles on the corners and at the centre of the edges. 10

11 You will see a translucent box attached to the background giving you information about what is now called a Sprite. The blue information icon gives you information about the Cast Member the sprite was derived from, in this case it is Cast Member background, an internal Cast Member and a bitmap image. Exercise 2: Looking at sprites To demonstrate the difference between a Cast Member and a Sprite drag the Cast Member onto the Stage a second time, resize it to a small size. While it is still highlighted read its information, it is still derived from Cast Member background so we get the same cast member information, the second line, by the red icon tells us that this is Sprite 2. 11

12 A sprite is a difficult animal to describe but for now lets call it a 'player' on the Stage, it is numbered, initially, 'in order of appearance' on the Stage. It is necessarily different from a cast member in that you could create many 'players' of differing shapes, sizes and positions on the Stage from a single cast member as you have just demonstrated. Following the sprite number is a series of numbers in brackets, these represent the position on Stage of the sprite, its coordinates ( left, top, right, bottom edges of the bounding rectangle). Click between the two sprites to check their different positions on Stage. On Sprite 2 click and drag the edge handles to see the coordinates change. The Score window The score is where you edit your movie. It is where you set the order in which sprites appear on the stage when the movie is playing and the length of time they stay there. 12

13 Click on Sprite 1, the large background image, to highlight it. Go to the Toolbar and open the score window The numbers going down in rows represent each sprite. Sprite 1 is highlighted. Click on the red sprite information icon to see the sprite details in the Property Inspector. In row 2 of the Score is Sprite 2, to demonstrate this click on Sprite 2 on the Stage, the small background, and you will see that the second line is now highlighted. The information in the Property Inspector will now tell you about Sprite 2. To further demonstrate the relationship between the Score and the Stage highlight Sprite 1 on the Score by clicking on the blue frames in line 1 or by clicking where it says 1 then drag the blue frames of background into row 3 directly below Sprite 2. 13

14 If you look on the Stage you will notice 2 things, first the sprite information tells you that this is now Sprite 3 and no longer sprite 1, the second thing you will notice is Sprite 2 is no longer visible. This can be explained if we change the Sprite analogy from a theatre performance to a cell animation. A frame in a cell animation is built up from layer upon layer of acetates, a Director movie is built up in the same way so that Sprite 1 is the background and each subsequent sprite is layered on top. Going back to our movie the greater size of Sprite 3 has obscured Sprite 2, we would therefore always place our background in Sprite 1 and subsequent sprites on top. Return the large background to Sprite 1. The Timeline There are numbers running along the top of the grid in stages of 5, this is the timeline. Each increment represents one frame of your movie. Think of a strip of celluloid film being held up horizontally with each frame of the film represented by each little square in the Score. In the picture below the movie is 28 frames long, there are 28 frames of the big background and the small background. The translucent red box and vertical line represents the playback head, it shows you where you are in your movie. Lets change the analogy to a video player. In a video player there is a playback head which reads and transmits the picture from the tape to the television. Our playback head runs along the Score and reads and transmits the frame it is on to the Stage. From the picture above the Stage will be showing frame one. 14

15 Click the Play button on the Toolbar and you will see the playback head run from frame 1 to 28 and either stop or return to frame 1 and repeat depending on whether Loop Playback is selected under the Control menu. There is still no change on the Stage as there is no change in the movie. Click down on Sprite 2's first frame (on the circle ) and drag it to frame 10 then click down on Sprite 2's last frame (on the rectangle ) and drag it to frame 20, now the second sprite appears 10 frames into movie and disappears 8 frames before the end. Another way to edit the Sprite's frames is to write in the frame number using the Property Inspector. The Property Inspector shown below shows that Sprite 2 starts at frame 10 and ends at frame 20. Make sure your Score looks the same as the one shown below. If your first sprite does not end at frame 28 highlight Sprite 1 and type 28 in the End Frame box of the Property Inspector. 15

16 To see the result close all windows except the Stage and the Score, place the Score so it doesn't obscure Sprite 2, press the rewind and play buttons on the Toolbar. Watch the relationship between the information on the Score and the action on the Stage. You can also click on the playback head and drag it along the timeline at your own pace to watch what happens in relation to its position. The next demonstration will show why, although it was useful initially to describe the sprite as a 'player' on the stage, this analogy has its limitations, and ultimately the cell animation analogy is more accurate. Highlight Sprite 2 and drag the frames into Sprite 1's row at frame 29 to 39. Rewind and play to see what happens. As you would expect the background changes from the large image to the small image. Click on the first set of background frames to highlight them and check the sprite information, then click on the second set of frames which used to be Sprite 2, you will see that this is now also Sprite 1 because Sprite 1 has changed with time from the large image to the small image. It is now the same sprite even though it is a different representation of the background cast member. 16

17 Delete the second set of frames, the small version of the background, by highlighting them and pressing the delete button. Inks Graphic sprites have an ink type, this defaults to Copy. If you look at the sprite information for your background, Sprite 1, you will see the word Copy after the co-ordinates. 17

18 Looking at the Sprite information in the Property Inspector you will see that there is a box that says Copy proceeded by the icon of an ink well. This box is the Ink pull down menu. Click and hold on the Ink pull down menu to see all the different ink types, select a few of the ink types and notice that the sprite information changes as you change the ink types. The most useful Ink types are Background Transparent and Matte, the next exercise will demonstrate why. Exercise 3 :Using Inks Open up the Paint window, press the + icon to create a new cast member and draw a figure of some kind that will live on your background. 18

19 Close the Paint window. Press the rewind button. Open the Cast window, name your new cast member and drag it onto the Stage. Close the Cast window, open the Property Inspector and position it so it doesn't obscure the figure. 19

20 You will see the new sprite has a white background that you don't want, change the Ink to Background Transparent, this will get rid of the unused background from your figure. 20

21 You could argue that it would just be easier to do everything in Background Transparent, however, it uses up a lot more memory so you always default to Copy which is the simplest ink. If you have a solid shaped sprite then use the Matte ink because it removes the white area from around the object. Matte uses more memory than Copy but less than Background Transparent. If the shape has holes in it, i.e. areas of white surrounded by the shape then use Background Transparent. The other inks apply effects to the sprite. 21

22 Save the background and figure you will need them for future exercises. Making Vector Shapes To create a vector shape use the icon on the Toolbar vector shape window. to open the 22

23 To draw a regular shape there is a choice of rectangle, rounded rectangle and ellipse or for irregular shapes there is the pen tool. The shape can either be filled or just the outline. The width of the outline can be adjusted using the Stroke Width menu, this one is set to 1 point (1pt). The shape can either be open or closed, an open image cannot be filled. The fill can be added or removed after the initial drawing of the image using the No Fill, Solid and Gradient tools. Under these tools are the colour selectors for the gradient. The Stroke Colour sets the colour of the outline of the shape. The Fill colour sets the colour of the inside of the shape, given that it's a closed shape. The background colour sets the colour of the background. The background colour can be removed using background transparent regardless of whether it is set to white or another colour. Matte does not work on vector shapes. Use the filled ellipse tool to create a circle, holding down shift will make a perfect circle. 23

24 You can see that the shape above has a dark red 1pt outline and a blue fill. It has some handles represented by coloured dots. The green dot is the start of the drawing and the red dot the end. This is a closed shape if you click the Closed box to open the image you will see that the red and green dots are no longer joined. The blue dots are intermediate adjustable points. The white dot is a blue dot that has been clicked on, the dots highlight white with their original colour as an outline. The dots on the edge of the shape can be dragged to alter the shape of the image, click on one of these dots and drag it away from the image. These dots are called curve points. Dragging on the dots connected to a curve point alters the shape around the curve point. These dots are known as control handles. A control handle can be rotated to twist the curve, pulled to elongate the curve or pushed towards the curve point to tighten a curve. 24

25 If gradient is selected then the menus at the top of the window allow you to change the look of the gradient. Try different settings to get a feel for what they do. Close the Vector Shape window and open the Cast window, you will see the vector shape with its identifying icon. and open the Property Inspector. Drag your shape onto the stage Under the Vector tab you will see that you can change the properties of the shape after it has been drawn. 25

26 To draw an irregular vector shape use the pen tool. Click and let go to create straight edges, click and drag to create curves. Double click to release the pen from one shape in order to draw another. The curve points and control handles can then be used to refine the shape as before. What is a vector shape and how does it compare to a bitmap? A vector shape is a shape that is represented mathematically. The computer stores the mathematical information on size, shape, outline width and colour. A bitmap image is represented by individual pixels, the computer stores the information on the colour of every pixel that makes up the image. Vector shapes are more flexible than bitmap images. As the shape is a set of mathematical formula the properties of the vector shape; its size, colour, shape, etc can easily be altered at any stage of development of the movie without affecting the quality of the image using the property inspector. Its properties can also be programmed to change during the playing of the movie using Lingo. You could, for example, display a map at different scales without losing detail. 26

27 A simple bitmap image used as a cast member may slow up your movie compared to a simple vector image which has less information to download. However a more complex vector image is more likely to slow up the movie than its bitmap equivalent because interpreting the data will require more processing power. The pay off will depend on the function of the cast member. Transitions You can add transitions to the Score to fade or wipe between one point in your movie and another. There is a transition channel in the Score's effects channels. If this area of the Score is not visible click on the arrows as shown below. Exercise 4: Adding a Transition The object of this exercise is to start your movie with the background alone and fade in the figure. 1. Shorten the movie to 13 frames and start the figure at frame Double click on frame 5 in the transition channel. The transition must take place on the first frame of the change. 27

28 This will open the transition window giving you a whole ream of options. 3. To fade in your figure you need to choose a dissolve, I have chosen Dissolve Pixels. 4. Set the duration of the dissolve to 1 second and OK the window. 28

29 The transition will now be in place and you will see that it has become Cast Member 3. If you want to use this transition on subsequent occasions you can drag it from the Cast window into the relevant frame of the transition channel. Rewind and play your movie to see what you have done. Can you work out what to do to have a continuous loop with the figure fading in and out? Importing Cast members You have seen how you can draw your own cast members with Paint, now let's look at importing cast members from external files. To import a graphics file: 1. Click on the Import icon on the toolbar. You will get a window from where you can select your files. 29

30 2. Open the folder containing the file(s) you wish to import, select the file and click Add. 30

31 You can keep adding files from the same or different folders until all the files you want are listed. Add All will add all the files from a selected folder. The Show: menu shows the file types Director accepts. 3. Click the Import button to complete the process. The imported files will now appear in the Cast window. 31

32 4. Drag them onto the Stage in the same way that you would any other cast member. You will see that this cast member has a paintbrush icon. This means that it is a Bitmap cast member just the same as a Paint drawing and can be opened and altered in Paint. Creating Text: Director has its own internal Text window where you can produce the text you need for your movie. 32

33 You can type in the text and it appears as a cast member in the usual way which can then be dragged onto the Stage. You can modify text by selecting Font... under the Modify pull down menu and make alterations in the Font window. 33

34 To import a text file: If you have a lot of text to write it may be preferable to use a word processing package like Microsoft Word. To separate the text into cast members insert page breaks, each new page will be a new cast member. Save the file as Rich Text Format. When you import the file it will separate the pages into individual cast members. 1. Import the file in the usual way. The image below shows a Word RTF file. 2. Open the cast window. You will see, in this case, one file has become three cast members. Text can be placed on Stage and modified in the usual way. 34

35 To import Audio and Video files: Director accepts QuickTime Movies, AIFF, WAV and Midi files. 1. To import an audio or video file follow the usual import procedure. 2. Open the Cast window. A QuickTime movie has a QuickTime icon sound file has a speaker icon. denoting a digital video file. A 3. To place a movie on the Stage drag it on and position it in the usual way. 35

36 4. To add a sound file drag it onto the Score into one of the sound channels. To loop video or sound: You will need to open the Property Inspector. For video click on the cast member information icon is checked.. Make sure the Loop box 36

37 Have a look at some of the other properties associated with a video clip. To open the Property Inspector from a sound double click on the cast member in the Cast window. Make sure the Loop box is checked. You can also listen to the sound via the Property Inspector by clicking on the play button. Audio only Quicktime movies can also be imported. You place this cast member on stage in the same way as a video clip and it lives in the main body of the Score. 37

38 It can be mixed with sound channel audio and other sprite channels of Quicktime sound to create multichannel soundtracks. There is further information on optimising and controlling sound and video in the Final Frontier tutorial. Publishing Publishing a movie means making a Shockwave movie. This is a file that plays in a web browser as long as the shockwave plug-in is downloaded. Exercise 12: Making a Shockwave movie Make sure you have your figure movie open with the changing area only transition active. Click on the Publish icon on the Toolbar. A shockwave movie and a web page will be generated. The shockwave movie has a.dcr extension to its file name and the web page has an.html extension. page. for a Netscape page or for an Internet Explorer The movie defaults to the top left of the browser window and a white page and background. During the course of these tutorials I will introduce some of the settings to improve the look of the web page. Creating a Projector A projector is a file that becomes an application in its own right like a multimedia CD. It doesn't need another application to play. These files are often used to display full screen movies on computer terminals in public places i.e. as part of an exhibition in a museum. Because the movie is no longer a Director file the user will not be able to access any of the editing tools and will only be able to play the movie. To create a projector file select Create Projector... from the File menu. 38

39 You will then need to select the movie file(s) you want in your projector. You can set several movies to run one after the other, select and add the movies in the order you want them to play. 39

40 There are a range of options for your movie. In this example the two movies will play one after the other in the centre of a full screen display. Click the Create... button, name the file and select a location to save it to. The movie will then be turned into a projector file with the icon shown below. 40

41 Summary A Director file is called a Movie. The Stage is where the movie takes place. The Cast is everything that is used to build the movie i.e. graphics, text, video clips, audio. Director has its own Paint, Text and Vector Shape Windows for creating cast members. The Score is where you build your movie, it has a playback head which passes through frames across a timeline. The objects on the Stage are called Sprites, these layer on top of each other so Sprite 1 on the Score is at the back and each subsequent sprite sits on top of the last. The properties of the movie, cast members and sprites can be viewed and altered in the Property Inspector. Different Inks can be used to remove a sprite's white background. Copy, the default, should be used where transparency is not required. Matte should be used for solid sprites to make the surrounding area transparent. Background Transparent should be used where the white background appears within a sprite. Transitions can be used to add sprites to the Stage or remove them from the Stage. Cast members can be Imported from graphics, text, video and audio files you have created in other programs. Completed movies can be turned into Shockwave Movies for playing on a web browser or Projectors for playing on computer terminals. 41

42 Director 8 - Animation Animating in Director is a big subject, this tutorial covers some of the basic principles. These principles should give you enough knowledge to do fairly complex animations and will allow you to build your projects and try new techniques as you get more confident. Also, as your use of Director progresses, new tools will be introduced which are not specific to animation. Index Making a sprite move Moving a sprite part 2 Animating the shape of a sprite Keyframes & tweening Bouncing a ball Animating sprite properties The control panel Film loops Registration points Cast to time Space to time Making a running figure Summary 42

43 Basic on-stage animation Exercise 1: Making your figure move across the stage For this exercise either open your figure movie from the basics tutorial and delete the Score, remembering to delete any transitions, or make a new background and figure in Paint. Place your background on the Stage and then your figure, so Sprite 1 is 28 frames of background and Sprite 2 is 28 frames of figure. Sprite 2 should already be highlighted, if not click on Sprite 2 (your figure) on the Stage. In the middle of the sprite you will see a dot, click on this dot and drag it. The dot in the centre of the sprite is the starting point for the movement. The dot you are dragging represents the end of the movement, the destination of the sprite. The yellow line is the travel path. To see this in action click rewind and play. This will not work if you only have one frame of the sprite in the Score because it assigns all the frames to the movement: The first frame is the original position. The last frame is the final position. The intermediate frames are the intermediate points of the animation. To look at this closely drag the playback head slowly across the Score and watch the result on thestage. The more frames there are between the start frame and the end frame the slower the animation, fewer frames make a faster animation. Extend the frames for both sprites to 38, rewind and play, retract the frames for both sprites to 10, rewind and play to see the difference. Looking at the colour coding of the dots; the starting point = green the current point = blue the final point = red intermediate points = yellow (highlighted frames) or white (unhighlighted frames) To demonstrate this move the playback head to frame 1 and highlight all of Sprite 43

44 2's frames on the Score. You will see the blue dot in the centre of the sprite showing you the sprite is at this point and a red dot at the end of the path showing the final point, see below left. Drag the playback head halfway across the frames, now the start dot is green because it is no longer the current point of the sprite, see below centre. Drag the playback head to the last frame, the final point is blue because this is now the current frame of the sprite, see below right. Exercise 2: Animating sprite movement using the score In this exercise the figure moves onto the Stage from off screen. This method uses the principle, that has just been demonstrated, of a start frame, end frame and intermediate frames. The start position is defined by positioning the sprite just off-stage. Delete the frames of Sprite 2 from the previous exercise and extend the background to frame 28. Drag the figure from the Cast window onto the Stage and position it on the far left so only the handles on the right of the sprite's highlight box are visible on the Stage, see below. 44

45 If you scroll the Stage window left you will see the figure off Stage. 45

46 To define the end position click on the final frame of Sprite 2 in the Score to highlight it, make sure the rest of the frames aren't highlighted, see Score below. Click down on Sprite 2 anywhere except on the handles of the highlight box and drag the sprite across the Stage (if you drag from a handle you will also change the shape of the sprite), you will see that a path is created. Close any open windows and rewind and play to see what you have done. The path is created because the Score sees two separate sprite positions and only one set of sprite frames so it knows that a movement must take place from the position set at frame 1 (Off Stage) and the position set at frame 28 (On Stage) within the defined amount of frames. The off stage figure can be seen in the Stage window if the window is larger than the Stage, however when this movie is published or turned into a projector the off stage figure will not be visible. 46

47 Exercise 3: Animating the shape of a sprite Using the same principle you can animate the shape of a sprite. The object of this exercise is to make the sprite grow bigger. Delete Sprite 2 from the previous exercise. Drag your figure onto the Stage again to a central position. Click on the last frame of Sprite 2 in the Score, make sure no other frames are highlighted. Click and hold on the bottom right handle of the sprite and drag it away from the sprite, you will see it enlarge. A useful tip is that holding the shift key while dragging maintains the sprite's proportions. What would happen if you had highlighted all the frames and not just the end frame? Rewind and play what you have done so far. There is a problem with this zoom. What is it and how do you solve it? The zoom is not central it moves in the direction you dragged the handle because an animation path was created when you dragged. To rectify the movement, with the playback head on the last frame and Sprite 2 highlighted on the Stage drag the blue dot over the green dot so no movement is set between the two. 47

48 Rewind and play to see the difference. Keyframes To take on-stage animation further you can create keyframes, the animation path can be broken up to move in a series of directions. Keyframes are the main points of change which would be drawn by the animator whilst the assistants draw all the intervening frames. In this case Director is your assistant. Exercise 4: Using keyframes Delete Sprite 2 from the previous exercise and place the figure at the top left corner of the Stage, drag the dot to the bottom right corner of the stage to define your end point. Move the playback head to frame 5, make sure Sprite 2 is highlighted, select Keyframe from the Insert pull down menu, 48

49 you will see a new blue dot appear, this is the position of the sprite at this point in time. See below. Drag this dot to a different position, see how the connecting line moves showing the altered path. Put the playback head over frame 11, make sure Sprite 2 is highlighted in the 49

50 Score. You will see a yellow dot defining the keyframe you have just created. This time create a keyframe using the on-stage short cut, in the centre of the sprite you will see the outline of a blue square, click and drag this square and you will see it automatically turn into a keyframe dot. 50

51 When you set the position of your keyframe Director does a trick called tweening, this is the term for setting all the frames in between the keyframes. Select Sprite from the Modify menu and choose Tweening... from the submenu. This opens a box that allows you to set what you want Director to tween and modify the way it tweens. Below you can see the tweening path for my figure. I could change the nature of the path by making alterations to the curvature, the speed of change, and by easing in or out the changes. Try experimenting with these settings. You will also see that Director tweens changes in size, rotation, skew, colour and blend as well. We have done size already. To do any of the others you need to create or select a keyframe in the Score, open the Property Inspector and make an alteration to the Sprite's properties. For example click on the keyframe in frame 11, open the Propery Inspector and change the Rotation Angle by typing in a value. 51

52 Rewind and play the movie to see the effect. 52

53 Exercise 5: Bouncing a ball Use the knowledge you have gained to date to create an animation of a ball bouncing. It starts in the top left of the screen and bounces in diminishing heights across the screen as if dropped. Open a New Movie. Using Paint draw a simple background with a surface of ground for the ball to land on. Using Vector Shapes draw a circle using the filled ellipse tool. For a perfect circle hold down the shift key whilst using the tool. Name your cast members, background, and ball. Remember that the vector shape ball will need to have a background transparent ink. Try and carry out this exercise without referring to the tutorial. However if you get stuck refer to the instructions on the following page. Place the ball in the top left corner and move the dot to the bottom right to create a path. 53

54 Make the first keyframe where the ball hits the ground at frame 7, 54

55 hit the ground again on frame 15 and a final time on the last frame. 55

56 Rewind and play the movie you have just created. Save the movie for the next exercises. 56

57 Film Loops A film loop is a single cast member containing the whole, or sections, of an already constructed movie. Exercise 9: Making a film loop This technique is best explained by demonstration. The object of this exercise is to make a film loop of your bouncing ball movie. 1. Open the movie and the Score window. 2. Click and hold on the frame immediately below and to the right of all the sprites. 3. Drag the highlight box over all the used frames to highlight them. 4. Choose Film Loop... from the Insert menu. 57

58 A Create Film Loop window will appear. 5. Write in bouncing ball and click OK. 6. Open the Cast window and you will see a new cast member called bouncing ball with a film loop icon. 7. Save your movie (Save As...) as bouncing ball looped and delete the current Score. 8. Drag bouncing ball onto the Stage so you have 28 frames of bouncing ball. Play the movie to view the result. As you can see the whole movie is now a cast member and occupies a single sprite channel. The film loop still refers to the original cast members in order to play. Do not 58

59 delete your original cast members. There are several benefits to this; it is neater and, therefore, easier to handle in the construction of a large project you can now animate the film loop in the same way as any other sprite you can group the animation of several sprites in order to play them at different points in your movie,for example have the same animation playing over different backgrounds. You cannot make alterations within a film loop so make sure you have the animation just as you want it before deleting the original sprites, this is why it is a good idea in the experimental stages to do a Save As... Film Loops A film loop is a single cast member containing the whole, or sections, of an already constructed movie. Exercise 9: Making a film loop This technique is best explained by demonstration. The object of this exercise is to make a film loop of your bouncing ball movie. 1. Open the movie and the Score window. 2. Click and hold on the frame immediately below and to the right of all the sprites. 59

60 3. Drag the highlight box over all the used frames to highlight them. 4. Choose Film Loop... from the Insert menu. A Create Film Loop window will appear. 5. Write in bouncing ball and click OK. 60

61 6. Open the Cast window and you will see a new cast member called bouncing ball with a film loop icon. 7. Save your movie (Save As...) as bouncing ball looped and delete the current Score. 8. Drag bouncing ball onto the Stage so you have 28 frames of bouncing ball. Play the movie to view the result. As you can see the whole movie is now a cast member and occupies a single sprite channel. The film loop still refers to the original cast members in order to play. Do not delete your original cast members. There are several benefits to this; it is neater and, therefore, easier to handle in the construction of a large project you can now animate the film loop in the same way as any other sprite you can group the animation of several sprites in order to play them at different points in your movie,for example have the same animation playing over different backgrounds. You cannot make alterations within a film loop so make sure you have the 61

62 animation just as you want it before deleting the original sprites, this is why it is a good idea in the experimental stages to do a Save As... Registration Points A registration point is the point from which the movement of a sprite takes place. You have seen that movement can be generated by dragging a dot from the centre of a sprite. This dot is the registration point of a Cast Member. The default registration point is in the centre of the image. The centre is not always the right place to generate the movement from. The following exercise demonstrates this. Exercise 10: Changing registration points The object of this exercise is to create an animation of a tennis racket striking a ball. In the construction of this animation you will see the need to adjust registration points for a more 'realistic' look. 1. Draw a horizontal tennis racket in Paint (see below). 2. Place the racket on the Stage slightly to the left of centre and set the Sprite to play for 28 frames. The next part of the exercise is to rotate the racket so before you continue make sure that Sprite Tweening (Modify menu) has Rotation checked. 62

63 3. Highlight the last frame, 28, in the Score and set a rotation of 180 in the Property Inspector. 3. Play the result. You will see that movement generated from the centre is not appropriate to represent the movement of a tennis racket. Where should the centre of motion be? Shouldn't it be from the handle? 4. Double click on the racket on the Stage to open it in Paint. The Registration Point tool is the icon that looks like a gun sight. Click on this tool and you will see crosshairs, the centre point is the registration point. 63

64 5. Click on the tennis racket handle to move the registration point, or you can drag the crosshairs. 6. Close Paint and look at the racket on the Stage, the dot is now in the handle. Play the movie again to see the difference. Doesn't this look more appropriate. 64

65 Before continuing you may need to highlight all the frames of the racket sprite and drag it a bit lower down the Stage. Now to finish the animation Draw a tennis ball and place it to the right of the Stage. Animate the ball so that it comes on stage, strikes the rising racket and leaves the Stage. Follow this link to see what this animation should look like as a shockwave movie. 65

66 Animating Cast Members There are times when you will need to animate a sprite by changing its cast member, for example if the sprite needs to change shape in a way that is more complex than the previous techniques can handle.the Cast to Time command allows you to animate between several cast members. Open your first tennis movie, the one that wasn't looped. If you were really watching a tennis racket strike a ball from the side you would expect the angle of view to change to create a more 3D effect. To do this we need to create a series of Cast Members with different angles of view. Exercise 7: Using Cast to Time First to make the new Cast Members, in this case three new cast members should do. In the Cast window move the ball into the fifth box to get it out of the way. Then open the racket bitmap in Paint. Select Duplicate from the Edit pull down menu. At the top of the Paint window it should now say Paint 2:racket. When making a new cast member based on an old one there is a technique called onion skinning that allows you to use the original image as a reference. This is a term derived from animators who draw on very thin paper to allow them to see the previous image through the paper while they work. To onion skin select Onion Skin from the View menu so that it is checked. An Onion Skin window will open. Make sure the Paint window is active and click on the Toggle Onion Skinning button (see below) to activate it. 66

67 To set how many previous cast members you wish to see there is a Preceding Cast Members box. As you are creating 3 new ones set this value to 3 (see above). Select the Marquee highlighting tool and make sure it is set to Shrink, this setting allows you to highlight the image only and use Paint's effects. Select the Perspective effect icon and use the highlight box handles to alter the cast member. The onion skinning will allow you to see the original racket underneath (see below). Duplicate the new racket and repeat the process, duplicate and repeat again so that you end up with four rackets with an increasingly flattened perspective. Delete the racket Sprite from the Score, click on frame 1 of Sprite 1 in the Score, highlight all the rackets in the Cast window and select Cast to Time from the Modify menu (see below). 67

68 Look at what has happened in the Score. There are 4 frames of the racket, one for each Cast Member. The Sprite needs to be extended to cover the whole movie so drag the last frame to frame 28. Then with the last frame still highlighted change its angle of rotation to 180 in the Property Inspector. Now all you need to do is reposition the racket so that it hits the ball. The easiest way to do this is to click on the racket sprite on the same frame as the ball's keyframe, where it changes direction, so that the Playback head is on that frame and the whole of the racket sprite is selected. On the Stage drag the racket so that the ball is in the centre (see below). 68

69 Rewind and play to see this work. It should look something like this. If your version is running too slowly use the Control Panel to speed up the frames per second. I have set mine to 20fps. 69

70 Space to Time This technique allows you to change your Cast Member and animate movement. Using Cast to Time you can animate movement using a path created by dragging the dot in the normal way, what you can't do is use the same Cast Member more than once, Space to Time allows you to do this. Exercise 8: Using Space to Time Delete the score from the previous exercise. Make sure the playback head is on frame 1 in the Score. Up to now you have been working with blocks of frames, in order for Space to Time to work each sprite must start its life in one frame only. To work in single frames select Preferences and Sprite... from the File menu and change the Span Duration to 1 Frame. Drag the cast members on the Stage one at a time and position them. Use only the last 3 tennis rackets to simplify things. Below I have placed racket 2 bottom left, racket 3 above and to the right, racket 4 above to the right, racket 3 below to the right and racket 2 below to the right creating an arc. There should be one frame of each Sprite for 5 Sprites. 70

71 71

72 Highlight all the Sprites and select Space to Time from the Modify Menu A box will appear asking you how many frames of tweening you want between each racket. For this exercise choose 5 frames. Look at the Stage and Score to see what has happened. 72

73 The five Sprites have become one Sprite with keyframes 5 frames apart where the change in cast member occurs. A path has been created to tween the different positions the cast member was placed on the Stage. This path can be altered in the usual way if you want to change the movement. Play the movie to see what happens. The rotation needs to be reapplied. Put 180 on the last frame and play the movie. Note that the rotation only occurs from inbetween cast members. You will therefore need to set the rotation of the other keyframes, frame 1 should be 0, frame 6 should be 45, frame 11 should be 90 and frame 16 should be 135. Adjust the animation path if the racket leaves the Stage at any point. Now to put the ball back. Set the Sprite Preferences to a Span Duration of 21. Set the ball to come on the Stage, strike the rising racket and leave the Stage as before. You may find that the ball doesn't move away from the racket fast enough any more. I have, therefore, shortened the ball movement so it leaves the Stage on frame 16. The movie should now look something like 73

74 How to navigate and create links? 1. create your link or button on the stage. 2. design the destination window by drawings or text or whatever. 3. go to the score window, double click on the frame of the first channel whose parallel to the last frame of the button (link ). 4. a behavior script window will appear, type the following: on exitframe me go to frame write the number of this frame end 5. right click on the button(link), and select behaviors, a behavior inspector window will appear, click the + sign, click on new behavior, write any behavior name you like, click ok, click on the new behavior name, press script window button, a behavior script window will appear, type the following: on mouseup go to frame write the number of the starting frame of your destination end mouseup 6. for each destination do step 3 and 4. 74