"How to" Guideline series is coordinated by Helen Mongan-Rallis of the Education Department at the University of Minnesota Duluth. If you have any questions, comments, or suggestions to improve these guidelines please e-mail hrallis@d.umn.edu.

HyperStudio Basics

(Adapted by Helen Rallis from original guidelines by Dan Darvell)

Purpose

The purpose of these guidelines is to guide beginning users through the basic functions of HyperStudio. These guidelines apply to both Mac and Windows computers.

Overview list of topics in these guidelines

1. Opening a new stack
2. Setting user preferences
3. Adding new cards
4. Adding painted text
5. Adding text object (editable text)
6. Adding images
7. Adding buttons
8. Linking cards or adding actions
9. Adding sound
10. Adding a HyperLink to the Web

Step 1: Open new stack

Once you have launched the HyperStudio program a main menu card will open. Click on the New Stack icon.

[Back to list of topics]

Step 2: Setting user preferences

1. From the Edit menu select --> Preferences.
2. From the Preferences menu select I am an experienced HyperStudio user and then click OK. (It is important to do this as this setting gives you far more choices as you design your stack).

[Back to list of topics]

Step 3: Adding new cards

1. To add a new card to your stack go to the Edit menu --> select New Card. This will create a new blank card.
2. To navigate between the cards in your stack by going to the Move menu and select the card (next, previous, etc).
   
   [To learn how to link cards, see Step 8: Linking cards or adding actions]

[Back to list of topics]

Step 4: Adding painted text

1. Go to the Tools menu and tear off the tools palette so it becomes a floating palette that stays on your screen (do this by clicking on the tools and dragging down until the palette detaches from the menu bar).
   
2. Select the text icon from this palette (click on the "T").
3. From Options menu --> select Text Style.
4. Select a font and a color you would like then click OK.
5. Place your cursor on the card where you would like to begin typing your text. NOTE: Once you click out of this tool that you will no longer be able to edit this text.

[Back to list of topics]

Step 5: Adding a text field (editable text)

1. To add an editable text field to your card go to the Objects menu and select Add a Text Object...
2. A red-dashed rectangle will pop up on your card. This is the tool you use to create your text box. You can re-size and drag this to where you would like your box to be. Then click outside of the box to set the object.
3. Once you click outside the text box the Text Appearance window will appear.
   • Give the box a name (enter name in space provided).
   • Choose from the options provided.
     (a) scroll bar inserts a bar that allows users to scroll down to see more text (if the there will be more text than can fit in the window)
     (b) scrollable allows users to scroll through the text
     (c) read only lets users read but not make any changes to the text (it's a good idea to choose this!)
     (d) draw frame creates a frame around the text box to distinguish it from the rest of the page.
   • Text features: click on the features button.
     (a) locked prevents users from moving or editing the text box
     (b) group object
     (c) hidden hides the text box from view (you would use this if you wanted to create a box that you could use at a later date but did not want to appear for initial use)
     d) transparent makes the text box background transparent so it blends into the background of the card. If you choose this option then you cannot have a scrollable bar.
   • Action: To have text box initiate an action, click on the action button and then choose from the actions listed. Common ways to use an action in conjunction with a text box are:
     (a) to play recording of voice reading what is in the text box or summarizing for the user what is in the box
     (b) to initiate some animation or video that illustrates a concept described in the text box.
4. Style: When you click on the style button it brings up the text style window. This is where you to specify the text color, window background color, text style and size, and a few other advanced options.
• To select font, choose from the list on the left. The small window on the right gives you a preview of the font you have chosen.
• To select size, scroll down the list or type in the font size in the box next to where it says Size.
• To select color, click on one of the colored boxes.
• To select style, choose from plain, bold, italic, and underline.

After making all your selections, click on the OK button.

5. To enter text in the text field, begin typing in the box that is framed by the red-dashed rectangle.

[Back to list of topics]

Step 6: Adding images

1. To add an image go to the Objects menu --> select Add a Graphic Object...
2. A window will pop up and ask you where you would like to get your graphic object from. Select the appropriate option and click OK.
3. Locate the graphic object you would like to add and click OK.

[Back to list of topics]

Step 7: Adding buttons

1. To add a button to a card go to the Objects menu and select Add a Button...
2. A window will pop up that will allow you to select the color of the button, color of the text, button shape, and a few other advanced options. When you are finished click OK.
   
   
3. The button will be outlined by a red-dashed line, this means you can place the button in the place you want it and resize it. Once you have done this, click anywhere outside of the button to deselect it.
4. A window will pop up wanting to know what action you want this button to take. For now just click OK or you can see Step 8 Linking cards.

[Back to list of topics]

Step 8: Linking cards or Adding Actions

1. Select the object you would like to use as the link to another card. For this example, use the button you created in the previous step. Once the button is selected it will have a red-dashed line around it.
2. Go to the Edit menu --> select Edit this Button... (Depending on the object you have selected this may say something different. For example if you had selected a graphic object it will say Edit this Graphic...) This will cause a window to pop up. [Another way to do this is to choose the selection tool (the arrow) and double click on the button]/
3. In the dialog box that appears, click on the button for Features...
   
   
4. A window will pop up listing different options for the action you would like this button to perform. To make a selection, click on the box next to your choice. NOTE: If you are unsure of where the card you would like to link to is located in your stack, choose Another card. This will let you browse through the cards to find the one that you want.
5. When done click OK.
6. If you selected Another card... a window will pop up that allows you to shuffle through your stack so that you can find the appropriate card. Once you find this card click OK.
7. When you have done this another window will pop up asking you to select the transition and the speed. When done click OK. **Suggestion - always select FAST as the speed of the transition (as users will quickly become irritated with slow transitions between your cards.**
   
   
8. The Actions menu will pop up once again and all you need to do is click OK.

[Back to list of topics]

Step 9: Adding sound

1. As you did in Step 8, first select the object that you wish the user to click in order to play the sound. Do this by choosing the selection tool (the arrow) and double clicking on the object (e.g. double click on a button that moves you to the next page).
2. This will bring up the Button Appearance box. Click on the Actions button at the bottom of the box.
3. From the actions menu --> select Play a sound from the list of "Things to Do."
4. This will bring up a new box that allows you to select from (a) a list of sample sounds that are listed in the small window to the right of the sound box (b) a different source such as the Disk library (HyperStudio comes with a collection of various sounds for you to use in your stacks) or one you have on your own disk (c) record your own sound.
5. To hear different sounds, choose a sample sound and click the Play button.
6. To record your own sound, click on the green Record button --> speak or make sound --> click on the red Stop button to end recording. Type the name of this sound in the Description box (this will add your sound to the list of sounds). Make sure that the sound is stored in your stack (select this from the pull down menu) so that it stays with the stack if you move it to another disk or location.
7. To verify that this is the sound you want to add to your button, click on the blue Play button.
8. Once you have decided that this is the sound you want, click OK.

Step 10: Adding a Hyperlink to the Web

To create a link to a web page, you need to make a button with a button action that connects to the specified web page URL (address). You can either create a named button or you can create an invisible button that you position on top of an image, text box or word (so when user clicks on the image/text box/word this will activate the hidden button).

1. Add a button to your the card that you want to link to the Internet (go to the Objects menu and select Add a Button)
2. Select the color of the button, color of the text, button shape, etc. When you are finished click OK.
3. Place the button in the place you want it and resize it. Once you have done this, click anywhere outside of the button to deselect it.
4. A window will pop up wanting to know what action you want this button to take. Click on the New Button Action box.
5. A new window will pop up giving you a choice of New Button Actions (see picture to right). Scroll down the list of actions in the box on the left side of the screen. Near the end of the list is one called NetPage. Click on this and click on the OK button.
6. Another window opens asking you to enter the URL of the web page. Type in the URL (or better still, copy it off the web browser and paste it into this window. Be sure to include the fill URL Including the http://www part). Click OK.
7. Click Done on the next window that appears (to return youyour HyperStudio card).
8. To check to see that the button works, choose the "finger" tool from the tool palette and click on the button. It should launch your browser and open the URL that you specified.

[Back to list of topics]

Return to the Index of How To Guidelines