1. Open file "myfirst.swi" saved from the previous tutorial.
2. Check that Scene_2 appears in the Scene row on the Timeline Panel. If Scene_2 does not appear in the 'Timeline' Panel, select Scene_2 from the Outline Panel
3. Press the
'Fit in Window' Zoom button to see the complete stage
Note: You can also Zoom In or Zoom out on the stage at any time by pressing the
Zoom In button or the 
Zoom Out button
4. Select the
Rectangle/Square Tool from the Toolbox. Click near the top left corner of the stage and drag the mouse down and right to create a rectangle
5. Select the
resize tool option, if not already selected. This allows the Object dimensions to be altered in the Transform Panel without rescaling
6. Select the Transform Panel and change the width of this shape to W: 702 and the height of this shape to H: 40 (The 'X=Y' boxes should not be checked). At the top of this Panel there are 'X' and 'Y' co-ordinates indicating the Object's alignment. As the Movie's width is 702, the center of the object's X location should be 350. Change the value in the 'X:' box to 350, if necessary. As the object's height is 40, the center of its Y location should be 19. Change the value in the 'Y:' box to 19, if it is another value. This will ensure that there is no gap around the top or sides of the shape when played.The 'Transform' Panel should be as shown below:
|
| 7. | Select the Shape Object Panel and select a solid Line and set its width to 2 pixels. Change the Line color to a dark green and the Fill color to a light gray and uncheck the 'Track as Menu' option if it has been checked. The 'Shape Object' Panel should appear as shown below:
|
|
| 7. | While the rectangle shape is selected, press  to copy, and  to paste your Object. It may paste directly over the original shape (depending on original location of the shape). Click on the new shape and drag it towards the bottom of the stage. Check the rectangle's X and Y position in the Transform Panel, and change to X: 350, Y: 431, if necessary
|
| 8. | Select the Rectangle/Square Tool from the Toolbox. Click over the left corner of the rectangle at the top of the stage, and drag the mouse down and right to create a rectangle that will completely cover both rectangles
|
| 9. | Select the Transform Panel and change the width of this shape to W: 700 and the height to H: 450 (the 'X=Y' boxes should not be checked). Center the Object on the stage by changing the value in the 'X:' box to 350, and the value in the 'Y:' box to 225
|
| 10. | Select the Shape Panel and select a solid line border, and change the Line color to a dark green and the Fill to None
|
| 11. | From the File Menu, select Test | Test in Player to check that your rectangles are placed correctly. Your introduction will play first and this Scene will follow. Close the 'Player' window
|
| 12. | Select Scene_2 from the Outline Panel
|
| 13. | Select the 'LINK 1' button and press the  'Bring to Front' button on the Standard Toolbar, then drag it over towards the top-left corner of the stage, placing it over the gray rectangle where desired
|
| The 'Layout' Panel should look like this:
|
|
|
|
| Before making a Menu, you may want to consider whether you want your buttons to look more or less the same and whether you want them to have similar behaviors. If you want your buttons to look uniform, it can save a lot of time if you create one button and then copy and paste as many of those buttons as needed, and then go into the different states to change the text. This way, the buttons will be consistent in size and color. If you want the buttons to have similar behaviors as well, you should add any sounds and perhaps some or all of their Actions before copying and pasting. You can always go into the different states and change the specific Goto Scene or URL references.
|
|
|
| For this tutorial, all buttons will have the same sounds attached to the On(rollover), and on(Press) Events, but the other Actions will be different. As these sounds have already been attached, you can begin copying and pasting the 7 additional buttons we will be using
|
14. From the Outline Panel make sure that your button's states are not visible, clicking the minus (-) symbol to the left of the main button's icon, if necessary
15. With the button selected, press the Control+C keys to copy your button, then select Scene_2 from the Timeline Panel
Note: It is important that the Scene (and not the button) is selected before you paste, as a button cannot be pasted inside of another button
16. Press
to paste the copy of your button. Repeat this process until there are four buttons shown in the Outline column
| 17. | Select and move the last copied button, so that it is in the top-right-hand corner of the top rectangle. The other two buttons will be aligned to be evenly placed between this and the first button
|
| 18. | To align the buttons horizontally, select all four buttons in the 'Outline' Panel by holding the CTRL key down and pressing the left mouse button. Once the four buttons are selected, use the Menu option Modify | Align | Relative to All Selected. Then use the Menu option Modify | Align | Distribute | Center (Horizontally). This will distribute the four buttons betwen the first and the last pasted buttons
|
| 19. | To Align the buttons vertically, use the Menu option Modify | Align | Top, to align them to the top-most button
|
| 20. | Use the copy button to re-copy the four aligned buttons then press the paste button to re-paste the 4 aligned buttons. Move these buttons as a group to the bottom rectangle
|
| The 'Layout' Panel should look something like this:
|
|
|
|
21. From the File Menu, select Test | Test in Player to check that your buttons are placed correctly
22. When you are happy with the placement of your buttons, select the button to the right of the original 'LINK 1' button, and from the Button Panel change the name from "LINK 1" to "LINK 2"
23. From the Outline Panel, click on the plus (+) symbol to access "LINK 2" button's states. Change the text for the Up, Over, and Down, states from "LINK 1" to "LINK 2"
24. Repeat steps 22 and 23, for the all but the button on the bottom right; increasing the number of each button by one, ie. LINK 3, LINK 4, LINK 5, LINK 6, LINK 7
25. For the bottom-right button, change the name from "LINK 1" to "E-MAIL".
Note: When you copy and paste a button then change the original text, the Hit Rectangle's size is not automatically updated. In many cases the Hit Rectangle will not be the same size as the text it is supposed to cover. To assure the hit rectangle is the same size as the text, select the text "E-MAIL" from the Up, Over, or Down state; Use the Transform Panel to copy the Width and Height of the text (W: and H:), then apply those settings to the 'Hit Rectangle' from the Hit State.
| The 'Layout' Panel should now look something like this:
|
|
|
|
| 26. | From the File Menu, select Test | Test in Player to check that your buttons are placed correctly. Position the mouse over the button and click on the button to ensure that the text was altered for each of the button states
|
| 27. | When you are satisfied with your Menu, save your Movie
|
You are ready to continue with the Creating a Sprite tutorial.