Transitions

 

Open Director 11

Window>Panel Sets>Default

Set the stage size to 640X480

Set the span duration to 8 frames: Director>Preferences>Sprite...

Leave everything else at defaults

Save the file in a folder called "transitions" as lnTransitions.dir (ln = Last Name in lower case)

Download all 5 graphics from here and either save them into, or drag them into the "transitions folder"

Import all 5 graphics into Director: File>Import

Select the graphics and "Add" them to the bin

When asked if you want to import them as a 32 bit graphic, check the "Same Settings for remaining objects" box and click OK

All 5 horses should be in your cast at this point

Save

Double click h1 (Horse 1), this will bring it up in the editor

These graphics came in at 32 bit, but they are not truly carrying an alpha layer, so there is a lot of memory being use to save that layer

Modify>Transform Bitmap...

It will warn you that you should probably edit it in a better bitmap editor (photoshop), but we don't care about that right now, so ignore the warning and click "Continue"

Look for "Color Depth" and change it to 16 bit and click "Transform", ignore warning and click OK

The file looks exactly the same, but the file size has been cut in half, and thus will play/load faster

Do this to all of the horse graphics

Save

Drag Horse1 to channel starting at frame 1

Drag Horse 2 to channel 1 starting at frame 10

Do the same for horses 3, 4 & 5, starting at 20, 30 , & 40

Put Markers in the MarkerChannel on frame 1, 10, 20, 30, 40

Label them h1, h2, h3, h4, h5

Your score should now look like this:

Open photoshop and create a new document that is 120px X 40px, 72 ppi, Transparent background

Save this as buttons.tif (use LZW compression)

Edit>Fill: Fill the background with a neutral color that will complement all of the pictures, I chose a neutral green

Change its "Brightness" to a lighter shade of the background color and put a 8px stroke on the "Inside" of your button

Change your foreground color now to a dark neutral color with your "Brightness" control. This color should be darker than your base color.

Select your pencil tool, 1px hard brush size. Single click one pixel at a time from the inside corner of your stroke to the outside corner with your dark nuetral color.

Fill the lower half of your stroke with the "Paint Bucket" tool, use the dark neutral, you just made

Lable this layer "bevelUp"

Duplicate this button in your layers window

Lable this layer "bevelOver"

Duplicate it again and change the lable to "bevelDwn"

Select the "bevelOver" layer and "eyeball" out the other two layers (hide them)

Chose a "Brightness" neutral, lighter than the lightest neutral of your present graphic

Fill the center of your button with the highlight color

"Unhide" the bevelDwn layer and "Hide" the bevelOver layer

Make sure you have the bevelDwn layer selected

Edit>Transform>Flip Horizontal

Edit>Transform>Flip Vertical

Default out your Foreground and Background colors

Select your Text tool

Arial 18pt Regular, Type and center "Horse 1"

Duplicate the Horse 1 layer and change it to read "Horse 2"

Duplicate that layer and make it read "Horse 3", do the same for horse 4 & 5

Your Layers window should look like this

Save, make sure you are saving as a TIFF WITH LAYERS

Hide everything except "bevelUp" and "Horse 1"

File>Save for Web - chose GIF

Call it bevelUpH1.gif

Hide everything except "bevelUp" and "Horse 2"

File>Save for Web - chose GIF

Call it bevelUpH2.gif

Continue with horse 3, 4, 5

Then hide everything except "bevelOver" and "Horse 1"

File>Save for Web - chose GIF

Call it bevelOverH1.gif

Hide everything except "bevelOver" and "Horse 2"

File>Save for Web - chose GIF

Call it bevelOverH2.gif

Continue with horse 3, 4, 5

Then hide everything except "bevelDwn" and "Horse 1"

File>Save for Web - chose GIF

Call it bevelDwnH1.gif

Hide everything except "bevelDwn" and "Horse 2"

File>Save for Web - chose GIF

Call it bevelDwnH2.gif

Continue with horse 3, 4, 5

You should now have

15 GIF button states

Close photoshop for now

Open your Director project

Create a new internal cast and lable it "Buttons"

Import all 15 of your newly created button states into the "Buttons" cast

When the Format window comes up, chose "Bitmap Image" and check the "Same Settings" checkbox

When the Color Depth window comes up chose 8Bit and check the :Same Settings" checkbox

Drag the button state "bevelUpH1" to channel 2 frame 1

Drag the button state "bevelUpH2" to channel 3 frame 1

Drag the button state "bevelUpH3" to channel 4 frame 1

Drag the button state "bevelUpH4" to channel 5 frame 1

Drag the button state "bevelUpH5" to channel 6 frame 1

Extend them all to frame 48

Select all of the Buttons

Window>Align...

Align bottom

Distribute horizontal across stage

 

Double click frame 8 in the "Frame Script" layer and type "go to the frame", without the quotes, and write "loop" in the name field

With Frame 8 of the Frame Script layer still selected, copy the frame (Cmd+C) and paste (Cmd+V) it into frames 17, 27, 37, and 47

Save

Download External Cast file from here (Right-Clink>Save Link As...)

Find the cast file that you just downloaded, it is called "menuButton.cst"

Double click the CST file and you see nothing much except a menu button behavior

Select the behavior and copy it (Cmd+C), close that window and go back to your lnTransitions.dir cast window, select an empty cel and paste the behavior in it (Cmd+V)

Grab the menuButton behavior and "drop" it on the Horse 1 button

A dialog box will come up and ask you questions, look at them and the possible answers from the drop down list

It should be relatively simple to guess what the answers are

Drop the menuButton Behavior on each of the buttons and select the appropriate buttons and marker that goes with it

Save

Double click Frame 1 of the transitions layer

Chose any transition

Do the same on Frame 10, 20, 30 , & 40 of the transition layer

Save

Rewind and play your 5 page director movie, complete with transitions