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.
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
Creating a projector
Summary
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
Rewind, Stop,
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.
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.
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 iconor choose Movie from the Modify menu and select Properties...
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 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.
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 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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.