Director Tutorials


Tutorial 4: The Imploding Lecturer - Animating with PhotoShop

This exercise uses Director to animate changing images. We are going to use PhotoShop to create our animated content.

PhotoShop Section

1. Go to the staff web page -
Select your favourite (or least favourite may be more appropriate) lecturer. Go to his/her staff page and save the image of that person by right clicking on the image and choosing Save Picture As... You can even select my pic if you find it.

2. Open up the image in PhotoShop, choose File > Save as… and choose the BMP file format. Name the file face1.bmp.

3. Choose Select > All (Shortcut Control+A).

4. Choose Filter > Distort > Pinch and change the amount to 25.

5. Save this image as face2.bmp.

6. Pinch the face again. This time you can go to Filter > Pinch (Control+F) as PhotoShop remembers the last filter you used with all its settings. Repeat this process a few times so you end up with 6 saved faces.

7. Open up all the faces in PhotoShop and choose Window > Arrange > Tile Horizontally.
This option is available on Windows only computers and allows you to organise all the images in a tiled format across the screen.

We are now going to change the colour depth of the images. When we saved the image initially, we chose 24 bit colour. That equals thousands of colours that the image can use. Often an image does not need to be that high in colour depth. We are going to change the colour depth to 8 bit = 256 colours. This will result in a smaller image in file size, equaling half the size of the 16 bit version.

We are also going to use another tool in PhotoShop called Actions. Actions allow us to record a number of PhotoShop steps into a single object, which then can be applied to other images. Actions are useful when you have repetitive changes to make to a number of images. Instead of having to go through all the changes for every image, you record the process once and then run the action on other images.

8. Open up the Actions Window - Window > Show Actions.

9. Choose New Action after clicking on the top right arrow (shown below). In the window that appears, give the action name colour depth change and then click the Record button.

10. Choose Image > Mode > Grayscale
In the popup that appears choose to Discard the colour information.

11. Choose Image > Mode > Duotone.

12. Choose Duotone from the Type menu, keep the first chip as Black, select a second a colour of your choice by clicking the colour chip. Once done, click OK.

13 .
Choose Image > Mode > Indexed Color.

14. Choose File > Save (Control+S). You will notice that while we were choosing various options, these were recorded in the Actions window.

15. Click the Stop button in the Actions window. Click on one of your other faces, click on the Action title you just created, then click the Play button.

Repeat the above step on all the face images so they all become 8-bit, with your new duotone colour scheme.

Director Section

We are now ready to bring our content into Director, so start her up.

1. Choose File > Import, select all the face images you just made and click the Import button. The window below will appear. Next to Colour Depth, choose Image (8 bits) and next to Palette, choose Import. Click the OK button.

The same window will pop up for the next image. This time, next to Colour Depth, choose Image (8 bits) and next to Palette, choose Remap to and find the palette that was just imported with the last image (it should be called face1 Palette Internal). Click the Same Settings for Remaining Images checkbox. Click OK.

Open the cast window. You will notice you have 7 cast members, 6 images and one palette. Double click the palette cast member. A colour table opens. These are the colours used in the images you imported.

4. In the cast window, select all the images by clicking on the first, then pressing Shift and clicking on the last image. Click on frame 1 in channel 1 and choose Modify > Cast to Time. You will notice that a single sprite is paced in the Score. This sprite contains the 6 images.

Rewind and play the movie. If you have the Loop Playback option on in the Control Panel or Control Toolbar (below the Stage), you will notice that as soon the animation ends, it restarts. As the animation begins again, there is a jerk in the animation because there is a significant difference between the first and last image. Let's see what we can do about that.

5. Select the sprite in the Score and press Control+C (Copy), then click on the frame just after the sprite and press Control+V (Paste).

6. Click on this second sprite and choose Modify > Reverse Sequence.

7. Select the 2 sprites by pressing Shift and clicking on both. Choose Modify > Join Sprites. This joins the 2 sprites into 1. This is not vital for our movie, but just something worth learning about.

8. The default frame rate for a new movie is 30 fps (frames per second). We can slow this down for our animation. Double click frame 1 in the Tempo channel as below (frame circled in red), then change the frame rate to 15 fps.

Rewind and play the movie.

Additional Director things to know
We are now going to create a film loop, which is a single cast member that can refer to a number of cast members or even a number of sprites.

9. Click on frame 12 (the end frame) of the sprite and drag it to frame 40. Play the movie. Instead of getting a longer animation, we now have a slower one. Drag the sprite segment back to its original length of 12 frames.

10. Select the entire sprite, and while holding down the mouse button, drag it to a vacant slot in the cast window. A dialog box will appear prompting you to name the film loop. Give your film loop a name and click OK. You just created a single cast member that refers to the 6 images that make up the animation.

- The film loop refers to the other cast members so you still need the original images to remain in the cast. A film loop also remembers all the properties of the sprites from which it was made. It is therefore important to set such properties (like ink effect) appropriately before making the film loop.

11. Delete the sprite from the Score. Drag the film loop into the Score and extend it to frame 40.

Rewind and play the movie. Notice the difference to the animation we saw in step 9.

Now would be a great time to save the movie too as we complete yet another tutorial. The completed tut can be seen here - tut4.dir. This will also allow you to see my face implode.

If you feel confident with this tut go on to the next, otherwise try repeating it using a different PhotoShop filter.