Director 8 - The basicshttp://www.herts.ac.uk/lis/mmedia/directortutorial/

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.

Index

Toolbar

The Stage

The Cast

Using Paint

Sprites

Inks

Making Vector Shapes

Transitions

Stage & Area Transitions

Importing graphics

Creating text

Importing text

Importing video and sound

Publishing

1

Creating a projector

Summary

2

The ToolbarThe 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

Rewind, Stop,

Stage, Cast, Score, Property Inspector, Library Palette windows

Paint, Vector Shape, Text windows

Behavior Inspector, Script, Message windows.

3

The StageThe 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.

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.

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 or choose Movie from the Modify menu and select Properties...

5

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.

The CastThe 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

PaintDirector 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 to open the Paint window.

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.

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.

8

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.

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.

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).

9

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.

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.

10

Exercise 2: Looking at spritesTo 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.

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 co-ordinates ( 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.

11

The Score windowThe 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.

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.

12

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.

13

The TimelineThere 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.

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.

14

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.

Delete the second set of frames, the small version of the background, by highlighting them and pressing the delete button.

15

InksGraphic 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.

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.

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.

16

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.

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.

Save the background and figure you will need them for future exercises.

17

Making Vector Shapes  To create a vector shape use the icon on the Toolbar to open the vector shape window. 

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.

 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. 

18

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.

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. Drag your shape onto the stage and open the Property Inspector. Under the Vector tab you will see that you can change the properties of the shape after it has been drawn. 

19

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. 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.

20

TransitionsYou 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 5.2. Double click on frame 5 in the transition channel. The transition must take place on the first frame of the change.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.

21

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?

22

Exercise 5: Demonstrating the difference between Stage and Area transitions

1. Using Paint make a square of colour and call it box.2. Move your figure to the right of the Stage and place your Score and Cast windows to the left.3.Extend the movie to 18 frames.4. At frame 14 drag on the box and position it so it just covers the figure.Now use the transition to create the effect of a Jack-in-the-box being closed.5. Double click on frame 14, select a Push Down transition and make sure Changing Area Only is selected. OK the window.

Rewind and play the resultThe movie should start with a background only.

The figure should then fade in.

23

Finally the box should push the figure away.

Save this exercise at this point.

24

6. Double click on the transition in frame 14 to reopen the window. Change the affected area to the Entire Stage.

7. OK the window and play the movie.

This time the whole Stage gets pushed down. This does not work for the current movie but try changing the Score as shown below and you will see it makes more sense.

So Changing Area Only means that only the area taken up by the new sprite will be affected by the transition. Entire Stage means that the transition will affect the whole stage.

25

Select Revert from the File menu to return to the saved version of the movie, you will need this for future exercises.

26

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.

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

27

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.

28

The imported files will now appear in the Cast window.

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.

29

30

Creating Text:Director has its own internal Text window where you can produce the text you need for your movie.

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.

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.

31

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.

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 denoting a digital video file. A sound file has a speaker icon.

3. To place a movie on the Stage drag it on and position it in the usual way.

4. To add a sound file drag it onto the Score into one of the sound channels.

32

To loop video or sound: You will need to open the Property Inspector. For video click on the cast member information icon . Make sure the Loop box is checked.

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. 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 movieMake 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.

For a Netscape page or for an Internet Explorer page.

33

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 ProjectorA 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.

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.

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.

34

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

.

35

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.

36

Director 8 - AnimationAnimating 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

37

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 = greenthe current point = bluethe final point = redintermediate points = yellow (highlighted frames) or white (unhighlighted frames)

To demonstrate this move the playback head to frame 1 and highlight all of Sprite 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.

38

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.

39

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.

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

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.

40

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.

41

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.

42

Rewind and play to see the difference

43

KeyframesTo 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,

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 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.

44

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.

45

Rewind and play the movie to see the effect.

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.

46

Animating using the Property Inspector

So far we have animated movement and changes in shape by adjusting the Sprite directly on the Stage, for more accuracy and more options it is possible to make changes in the Property Inspector. To demonstrate this we will make some alterations to our movie so that when the ball hits the ground it squidges.

Make sure that the sprite is not set to tween size before you start, otherwise the ball will start to squidge before it hits the ground. The box should not be checked.

Click on the keyframe where the ball first hits the ground, in this example frame 7, to select that frame only and change the width and height values in the Property Inspector to make the ball wider and shorter. In my example I have changed the width (W) from 64 to 80 and the height (H) from 64 to 50. Repeat for the other keyframes where the ball hits the ground.

The ball will no longer reach the ground. To use the Property Inspector to alter the position of the ball we need to take a reference by changing the first one by hand. Drag the ball at the first keyframe only so it reaches the ground.

47

Note that the value of the Y axis in the Property Inspector has changed, in my example from 336 to 342.

X is how far along the stage the sprite is, Y is how far up the stage the sprite is.

I know that I want the ball to have the same Y axis every time it hits the ground. Therefore instead of manually changing the other keyframes I can cut and paste this value into the Y axis of the third and final keyframe.

Highlight the Y value in your Property Inspector and copy it. Select the next keyframe where the ball hits the ground, in my example frame 15, highlight the Y value and paste in the new value. Repeat this for the final frame.

The advantages to using numerical values are;

You can make changes to pixel accuracy It speeds up the process When you learn Lingo you will be able to programme these changes

Introducing the control panel

The ball may not be easy to see because of the speed it is travelling. The next step is to use the control panel to help make some alterations. To open this window select Control Panel from the Window pull down menu.

The top left buttons allow you to step through the movie one frame at a time, forwards or backwards.

Under these buttons is a volume control for any audio in the movie. To the right of this are playback buttons and above them a box which tells you what the current frame is. To the right again are buttons concerning the running speed of the movie. Finally on the top right is a loop playback button and underneath is a button which if selected causes only highlighted frames to be played back so you can check sections of your movie.

To slow down the speed of the movie:

Find the two buttons on the control panel labelled fps, this stands for frames per second.

The top button allows you to change the speed, the bottom button tells you the actual speed you are running at (more complex animations may not be able to run at the speed you set due to the processing time required). Click and hold on the top button and a menu will appear, make sure Frames Per Second is selected.

48

If your ball is breaking up making it hard to see clearly change the frames per second (fps) to 10 using the down arrow.

Play the animation again to see the change.

Film LoopsA 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.

A Create Film Loop window will appear.

49

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 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....

Registration PointsA 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.

50

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.

3. Highlight the last frame, 28, in the Score and set a rotation of 180° in the Property Inspector.

4. 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?

5. 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.

51

6. Click on the tennis racket handle to move the registration point, or you can drag the crosshairs.

7. 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.

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.

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

52

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.

 

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.

53

54

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).

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).

Rewind and play to see this work. It should look something like this.

55

If your version is running too slowly use the Control Panel to speed up the frames per second. I have set mine to 20fps

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.

56

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.

57

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.

Exercise 11: Consolidation

The object of this exercise is to consolidate your knowledge by using the techniques demonstrated in this tutorial to make a running figure. The figure will be running on the spot and the background will move past giving the impression the figure is running forward.

Draw a running figure like the one illustrated. For the purposes of this exercise make the arms and legs different colours to help with the perception of movement.

Duplicate the figure twice to make figures 2 and 3.

Go back to figure 2 and make adjustments so the figure is in mid stride.

The easiest way to do this is;

one at a time highlight each arm and leg using the Marquee highlighting tool with the menu set to Lasso and drag it away from the drawing,

break them up again into forearm/lower arm, thigh/calf

58

highlight them again using the Marquee with the menu set to Shrink and rotate them into a new position.

Then using the Marquee with the menu set to Lasso, replace the limbs to rebuild the figure.

Duplicate figure 2 to make figure 4.

fig.2 fig.3 fig.4

Move on to figure 3, the easiest way to represent the finished stride is to swap the colours of the arms and legs so it appears that the arms and legs have changed position.Do the same for figure 4 to complete the movement, you will also have to add the right hand.

6.Change the registration points on the figures for a smoother movement.

59

Summary

Animation can be created on the Stage.

Dragging the dot in the centre of a sprite creates a path of travel for the sprite.

Dragging the handles of a sprite causes the sprite to change shape.

Keyframes can be introduced for intermediate changes in direction or shape.

Tweening is the name given to automatic changes made to frames in between the keyframes that you define.

More complex animation can be created in the Property Inspector.

The Control Panel is a useful window to help you step through a movie and see how fast it is running. The tempo of a movie can be altered using the Control Panel.

The exchange cast members tool swaps one cast member for another that is already on the stage, placing it in exactly the same position.

A Film Loop is a cast member which represents an animation and can reduce a complex animation spanning many sprites to a single sprite.

Animated movement can be enhanced by adjusting the position of a cast member's registration point.

Cast to Time places multiple cast members on the Stage together to make one sprite, an efficient way to animate change from one cast member to another.

Cast members can be animated by duplicating them and using Paint tools to affect subtle changes.

Onion Skinning makes visible the previous bitmap(s) in Paint to assist with drawing new cast members.

Space to Time replaces a series of sprites from different cast members placed in different positions on the Stage with one sprite and a travel path.

The Publish Settings can be altered to enhance Shockwave movies.

These techniques are only representative of what you can do with Director. The best thing to do is to come up with your ideas and then see how you can use Director to realise them rather than trying to discover all you can about Director and then thinking of ideas to fit your

60