|

Director Tutorials
Using Vector Shapes and Rollover Images
1. Open Director or go to File/New/Movie 2. Click Window/Vector Shape (Ctrl + Shift + V)
3. Using the filled ellipse tool from the Vector Shape 1 menu draw a circle. Holding down Shift as you drag out the circle will maintain the proportions.
4. Click on the ‘solid fill’ icon to the left of the Vector Shape menu. This means that the shape will be filled with a solid colour.
5. Now click on the left-most gradient colour. Select RED.
6. Close the Vector Shape window down and right click on the Vector Shape, which has been added to the cast window.
7. Select ‘Copy Cast Members’. Now right click in an empty area of the cast window and select ‘Paste’. This will paste an exact copy of the first vector shape in the cast window.
8. Paste another copy into the caste window. There should now be 3 vector shapes in the cast window.
9. Double click on the second one, this should bring up the editing window.
10. Click on the left-most gradient colour and select BLUE.
11. Close the editing window and do the same for the third vector shape, this time choose a green colour.
12. Now click on each vector shape and change their names by typing in the blank white box at the top of the Cast window. Change the 3 names as follows
Vector 1 = ‘Button’
Vector 2 = ‘Rollover’
Vector 3 = ‘Click’
13. Click and drag ‘Button’ from the Cast list onto the stage, resize it using the corner controllers (Holding down Shift to keep proportions). Now reposition it by clicking on the button and dragging. Do not click on the dot at the center of the button and drag, this is used for something else.
14. We now have the basic button on the stage. We need to use the other 2 vector shapes as alternate states of the original.
15. Click Window in the top menu and choose Library Palette. This brings up a library of pre-coded/scripted interactions and events.
16. Choose ‘Controls’ in the top left drop down of the library palette. Holding your mouse over an icon will give you a description of its uses.
17. We will use ‘Push Button’. Click and drag the ‘Push Button’ icon the button vector shape on the stage. This will present you with options as to how the button will work.
18. Director already assumes that the next 2 vector shapes will be your ‘Rollover’ and ‘Mouse down’ members, respectively. If these selections are incorrect. Use the drop down menus to select the correct vectors.
19. Click OK and then select Play button in the top menu bar. You can now check that your rollovers and mouse clicks work on the stage.
20. Click stop when you are ready to move on.
21. You can use your own pictures as buttons by first importing them into your cast (File/Import) and following the same steps as for the vector shapes.
Well Done!
|
|
Adding Interaction
1. Open Director or go to File/New/Movie. 2. Click Window/Text to open the text entry window.
3. Type the word ‘ People’ and edit the font style as you wish. Use a font size of around 48.
4. Close the window down and you will notice that a text object has been added to the Cast.
5. Right click on the text object and select ‘Copy Cast Members’.
6. Right click anywhere in the empty area of the Cast Members window and select paste.
7. Do this a second time and you should have 3 text items in the Cast.
8. Double click the second text item and you will see the text editing window appear. Change the text to read ‘and’.
9. Do this again for the third text object and change the text to read ‘Places’.
10. Click and drag the first text object onto the Score (not the stage). Position it on channel 1 at frame 1. This places the text onto the Stage at the same time.
11. Move the text to somewhere near the top of the stage by clicking and dragging it in the stage window.
12. If you look in the Score you will see that the text has a blue bar in channel 1 lasting for around 20 frames (the number of frames can vary).
13. Left click the last frame of the bar (the one with the rectangle in). Hold down the mouse button and drag to the left so that the last frame corresponds with frame 10.
14. Now click and drag Text object 2 onto the Score using channel 5, starting at frame 20. Drag the blue bar so that it starts at frame 20 and ends at frame 29.
15. Repeat this for the third text object. The blue bar should be on channel 9 running from frame 40 to frame 49.
16. If you click the Play button you will see that the different texts will appear and disappear as the time slider moves across the Score. You should also see that the text objects are in odd places on the stage.
17. To remedy this left click and draw a selection box around the 3 blues bars in the score. All three should turn a darker blue.
18. Select Modify/Align in the top menu and an options bar should appear. In the drop downs select ‘Align Tops’ and ‘Align Centers’. Now click the Align Button and Close the window down.
19. If you click Play you will notice that all of the text is now aligned. Click Stop.
20. Import any three pictures that you like, these will be buttons. File/Import.
21. Your three buttons should now be in your Cast window. Click on each and name them Page 1, Page 2, Page 3.
22. Click and Drag each of them onto your Stage. Position the three of them, along the bottom of the Stage.
23. Director should have placed a blue bar for each picture button onto the Score in channels 2, 3 and 4. Re-scale the bars so that they correspond with the bar for channel 1. We now have the buttons positioned for the first page (the one with the ‘People’ text). We need to set up a condition to stop the file running when it reaches the last frame of Page 1. This allows you to add an interaction telling the file to move to another frame only when instructed to. The file will wait for some form of user input.
24. Click Window/Library Palette. Select Navigation from the top left drop down.
25. Left click and drag the ‘Hold On Current Frame’ icon to the Score window. It must be positioned onto the line above the frame numbers.
26. Click the added symbol and drag it to line up with frame 10.
27. Repeat this twice more for frames 29 and 49. The file will now know to wait for user input at these frames.
28. We now need to instruct Director of where the important sections on the timeline are (Pages 1,2 and 3). Left click in the empty white bar at the top of the Score. This adds a marker. Re-name the marker ‘Page 1’
29. Left click on the marker and drag it along the white bar to just above frame 1.
30. Repeat this for two more markers. One for ‘Page 2 (Above frame 20) and another for ‘Page 3’ (above frame 40). Director now knows where to each page will start.
31. We will add conditions to the buttons to make them clickable. The condition will define which marker in the white bar the timeline will jump to.
32. Open the Library Palette and choose ‘Controls’ in the drop down list.
33. Click and drag the ‘Jump to Marker Button’ icon onto your first button on the Stage (If you cannot see your buttons on your Stage, make sure that the time slider is back to the first frame).
34. You should now see an options window. Here you select which marker the button will jump to. Select ‘Page 1’ in the first drop down, leave the others as they are and click OK.
35. Add the same library condition the second button. Select ‘Page 2’ from the drop down. Click OK.
36. Do this again for Button 3 and select ‘Page 3’ from the drop down.
37. Click Play and test the first page. You will notice that there are no buttons on pages 2 and 3.
38. In the Score, left click and draw a selection box around the blue bars in channels 2,3 and 4 (your three buttons).
39. Press Ctrl + C to copy them.
40. Click on frame 20 of channel 6 and you will see it turn black. Press Ctrl + V to paste your copied buttons.
41. Click Frame 40 of channel 10 and press Ctrl + V to paste again. Now the buttons will appear on all of the pages.
42. Click Play and test them out. All three buttons should work perfectly on all of your pages.
Well Done!
|
|
|
|
|