Instructional Materials

**Note--You should already have the practice stack open for the button practice. If not you download and open this stack-- Navigating Options.

You will have to get to the button practice session of that practice stack. Practice for ALL of the navigation options are in the same stack, the directions have been broken up into 2 pages.

Button Practice Stack Directions

Print Friendly Version

Instructional Video

Navigating with Buttons

Back to Top

Practice Session Instructions

Begin Button Practice Add Navigation to Button Provided Add Navigation to Button Added Yourself Using an Icon for a Button Complete Practice & Save Stack

You will see this card for Practice session 2: Navigating with Buttons.

Click BEGIN to start this part of the practice session.
This card gives examples of types of buttons you can use to indicate navigating options.
You can navigate a stack using buttons. When you click on the button, it will go to the specific card you have selected. You can also have the button go to a URL or open a program. These are buttons which are used to navigate through the cards in a stack or to another stack.
You can use an icon like the arrow or a home icon which indicates going back to the Table of Contents or title page. You can also use a button name like back or next. It is usually better to use an icon OR a button name, not both at the same time. You will learn more about buttons in Unit 2.
Back to Top
Practice Using Buttons for Navigation
On card 2 of the practice stack you will practice editing the buttons that are at the bottom of the card.     Click on the TIP button to see more information.
The TIP card should say this:
TIP! Detach the Tools Palette from the Tools Menu for easy access to the Arrow and Browse tools. Make sure you have selected the Arrow tool from the detachable tools palette. Click on TOOLS on the Main Menu bar above, hold the button on the mouse down and drag the Tools Palette where you can access it easily. You will need to go back and forth from the Arrow tool to edit the button and the Browse tool to check the action applied to the button.
Card 2 Directions:
Practice Adding Navigation to button provided.
1. Double-click on button 1 below.
2. Then choose from button type 1, 2, 3, or 4. Type in “NEXT” for the button name. Choose a text color and button color. Make sure they contrast enough to see the text. Check the SHOW TEXT box.
3. Click Actions... and then choose Another Card. Use the backwards or forwards arrows to find you would like to go to when this button is clicked. When you find card 12, click OK..
4. Choose a transition and transition speed (fast, medium, or slow). Ask yourself...is this the right card you want to go to when this button is clicked? Is the transition type and speed ok? If not, you can always go back and change it.
5. Use Button 2 for more practice. Make a button on the card you select to come back to card 2 if you use button 2. (Try to find a card with no button on it or an empty card). Add a button to this card with the action of going back to card 2. This should provide additional practice, but if you need to you can always use the Move Menu and click on Back or Jump to Card –2.) You can also use the Keyboard shortcut keys (Ctrl and < or >) to go back to card 2.
Back to Top
Card 5
Practice adding a button yourself.   Directions are on the card in the practice stack as well as listed below.
1. To add a button, go to Objects> Add a Button...
Click on title bar at the top of the Button Appearance box , holding your mouse button down, drag the box to the side so you can see your card. (click the red hyperlink word to see image this box).
2. This button will have text. Type in "Next" for the button name since it is the "next" card we want to go to. Make sure the Show Text box is checked.
3. Choose either 1, 2, 3, or 4 for the button type .Choose the text color and button background color from the Button Appearance box. Make sure the button color matches or goes with the card background color. Then click OK.
4. You can resize your button . Move the cross arrow on the dotted line until it turns into a straight arrow, then move the button wall in or out to make it larger or smaller. You can do this on the top/bottom and sides.
5. Double-click on the button. Click on ACTIONS. Click on ANOTHER CARD and use the forward or backwards arrows to find card 9. Click OK.
6. Now choose your transition and the speed. Click "TRY IT" to see if you like your choice. When satisfied, click ok. Click on the new button.
Back to Top
Practice adding a button with an Icon
Now let's practice adding a button using an icon.     Directions are on the card in the practice stack as well as listed below.
1. Go to Objects>Add a Button.
2. The Button Appearance box will appear. Choose either 1, 2, 3, or 4 for the button type and choose the text color and button background color. Make sure the Show Icon box is clicked.
4. Click Icons on the Button Appearance box. A box will appear with a selection of icons to choose from. For navigation, choose an arrow button for the direction you want to go (right or left). Make sure the arrow selected matches or goes with your background color of the card. Drag the button to the bottom of the card. Then click OK.
5. Double-click on the button. Click on ANOTHER CARD. Use the arrow buttons to find card 11 for this exercise. (You would find the next card you want the user to go to when this button is clicked if this was a lesson or project).
6. Choose a transition style. Pick the speed you want the transition to go to the next card with.
5. Next, click "TRY IT" to see if you like your choice. When satisfied, click OK.Test your buttons. Click on your new button to see if it goes to card 11.
Back to Top
Completed Practice Session
Now you have completed the Button Practice Stack.     Be sure to save your stack to the Practice Stack folder before clicking on “EXIT”, which will close the stack.
Back to Top

NEXT: Lesson 3