Director Tutorial: Basics of Animation - Class Notes

Download the archived files, expand them and open "ODP.dir" in Director.
Enjoy the animation produced by a professional.

These notes are to be used in-class. They are not self-contained explanations, but should be useful in reminding you the main points that we discussed in the class.

If you know Flash, you may want to review these notes

Director - uses a movie metaphor

  • The Movie - the .dir file
  • The Stage - where the action happens
  • The Cast - who appear in the movie
  • The Score - who plays when
  • The Control Panel - gets them moving
  • The Script - who plays what
  • The Tool palette - to create easily fields and buttons
  • The Property inspector - everything you may want to know about a cast member or sprite

The latest version of Director has many more capabilities than what we will cover. Stay focused in the animation techniques we will cover in class. If you want to explore more on your own, that's great, but make sure you first cover the basics of animation.

Director's Windows

  • Stage = cmd-1
  • Control Panel = cmd-2
  • Cast Window = cmd-3
  • Score Window = cmd-4
  • Paint Window = cmd-5
  • Text Window =cmd-6
  • Script Window = cmd-0
  • Also: Tool palette, Vector Shape window, Color Palettes window, Digital Video window, Library Palette, Field Window, lots of windows!!!

Target 1: BASIC BITMAP DRAWING: Explore drawing capabilities.

Create a new movie.
Create a new cast member using the paint window: Draw a face and get it to move across the stage.
Try several drawing operations in the Paint window. Spend time and become familiar with the drawing menus.
Anything you draw in the Paint window automatically becomes a cast member (it automatically appears in the cast window).

  1. Select color/ change color
  2. Draw simple bitmap images
  3. Make bitmapped type
  4. Create boxes and shapes
  5. Rotate, skew, distort, warp
  6. Gradient colors
  7. Add a text title
  8. Add a background image (move sprites down to make room for it)

Target 2: BASIC ANIMATION: Recreate movie basicAnim.dir

Place sprites of your cast member on the Stage.

  1. Click on your cast member in the cast window or the paint window and drag to any spot on the stage (it will simultaneously appear in the score).
  2. Alternatively, you can drag a cast member from the cast window to a particular frame in the score; a sprite will then appear on the stage (centered).

Whatever happens on the stage appears in the score.
Sprites vs cast members - differences?
Sprite vs Sprite segments - differents?

How many frames will your sprite segment occupy?
Use Director>Preferences>Sprite (span duration - default is 28 frames. Later on we will change it 1 so that we can use use cast-to-time and space-to-time techniques)

Features of the Score window to become familiar with:

  1. Frames and Channels (columns and rows of the score grid)
  2. Rearranging the contents of cells in the score (copy and paste, or drag and drop, shuffling)
  3. Ink effects (i.e. background transparent)
  4. Center Current Frame
  5. Colorizing cells/sprite segments in the score
  6. Channels for Transitions, tempo, soundtracks, behaviors and scripting (in a few weeks!)

Navigational tips (i.e. moving between the score, the cast, the paint window with keyboard shortcuts)

Re-Create the basicAnim.dir animation:
Select the first frame, place it in one corner of the stage. See the frame dots appearing on stage.
Select the last frame, place it in the other corner.
Play the movie.
Select the middle frame and create a keyframe. Note that you can drag and move the keyframe, curving the animation path.

Transform a cast member in the Paint window (it must be selected - use the selection marquee tool to select it). If you want to keep the original cast member as well, be sure to do your transformation on a duplicate of the original cast member.

Target 3: BASIC VECTOR: Expand beatingHeartVector.dir.

Some of the Paint operations are available in the Vector shape window.
This creates mathematically defined cast members, you can animated them like the bitmapped ones.

Download beatingHeartVector.dir. Practice vector shape drawing by creating a beating heart on top of the existing shape, like in beatingHeartVector-FINAL.dir. Start by creating a circle, then add a point and shape it as a heart. Duplicate it and create another cast member that is slightly enlarged in size. Place these two sprites repeatedly on the score.

Save ALWAYS your movie with the .dir extension.

Target 4: Add interaction between sprites.

Download the firstVector.dir animation which uses a vectors in the shape of letter A. Create another in the shape of letter T. Make the two shapes interact, as in firstVector+T.dir .

Target 5: Cast-to-Time and Space-to-Time.

Animate a character to achieve the walking-man-final.dir effect using two fundamental techniques, Cast-to-Time and Space-to-Time.

Start by saving on your computer walking-man.dir (control-click to get the save as... menu). Select all the cast members and do Modify > Cast-to-Time.
Note the sprite segment on the score that makes the man moves fast. Copy the segment and past it in an empty cell of the cast. Name the film loop "walk-fast".

Next select the cast members and move them onto the score. They appear on consecutive channels. Do Modify > Space-to-Time to create another segment. Set the separation to 3 to make the man move slower. Create a film loop and call it "slow-walk".

Place the two walking loops on stage and extend for 10 frames (hold and click "option" to extend the single frame segment if you have to).
Compare the walking differences. Which one looks better?

Extend them to make the walking realistic on the stage.

Target 6: The Onion-skin technique

Recreate drink.dir using the Onion Skin technique. To do so you create a series of castmembers for an animation sequence in the Paint window. It allows you to see the previous cast members for reference as you paint the new ones. See how you can recreate the functionality of onion-cherry.dir (by starting from a complete cast member and create new ones by erasing portions of it. Make sure the registration point ("hairline") is consistently marking the cherry's stem).

For a really nice animation based on the same technique see Nandita's accept-responsibility ads.

Target 7: Paste relative

Align cast members with registration point to create the running-man-final.dir movie by starting from running-man.dir (control-click to get the save as... menu) and making sure the registration point between cast members matches the foot of the runner. The trick here is to align a new sprite segment at the end of the previous one so as to appear that the movement is continuous.

Target 8: Publish in a variety of forms

Publish the movie - see the .dcr and .html produced. Look at the different options.
Create a stand-alone Projector.

Further exploration:

Download the archived files, expand them and open the .dir file. Try to recreate the functionality of "PinkBird.dir" in Director

Also see the tutorials on animation from Dean's tutorials. (Beware that some of them may not be updated).



Maintained By: Takis Metaxas
Last Modified: September 5, 2014