HyperStudio Reference J. Kevin Maney, Ph.D. Use these materials as a reference for basic skills involved with HyperStudio 3.1 for . This reference is by no means comprehensive nor is it intended to replace your HyperStudio manual. Please note that these materials only address HOW TO skills, not why or when to use these skills, i.e., context. When to use these skills and why should be driven by your preproduction plans and specific purposes for creating new stacks. BASIC VOCABULARY Hyper Environments: Any environment that is non-linear. Hyper environments are composed of NODES and LINKS. In HyperStudio, nodes are represented by cards and links connect cards or other resources with each other. Links can be buttons, graphics, or text. CARDS: Individual screens (nodes) in HyperStudio. Collectively, cards make up STACKS. CREATING NEW STACKS Launch HyperStudio and click the New Stack button when the splash screen appears (see right).

A dialog box appears. Click Yes.

A new blank card appears.

PREFERENCES Pull down the Edit menu and select “Preferences.” Select “I’m an experienced HyperStudio user” which will give you more objects editing options later on.

BACKGROUND AND OBJECTS In HyperStudio, you can work with either the background or objects. When working with the background, you do not have the editing flexibility that you have with objects so it is recommended that you work primarily with objects. Use the background to create patterns or clip art that will appear on every card. Otherwise use objects to create graphics, text, buttons, etc. object tools On the tools palette (see right), the bottom 15 tools control the look and feel of the background. The top 5 buttons control objects.

background tools

HyperStudio Reference/Maney page 1 BROWSE AND EDIT MODES HyperStudio has two different modes, Browse and Edit. When in Browse, you can add text to text objects and operate buttons and other links. It is essentially the environment in which you present your stacks. When in Edit, you can create, resize, delete, and/or move objects. You are in the Browse mode when the finger is highlighted in the tools palette. You are in the Edit mode when the pointer is highlighted in the tools palette. Browse Mode Edit Mode MENUS Below are the menus that can be found in HyperStudio along with a brief description of important functions contained in each.

File menu: Open previously saved stacks or create new ones. Import clip art, print to video, and save stacks. Edit menu: create new cards, delete cards/objects, cut, copy, and paste to create a uniform look. Move menu: allows you to navigate through a stack. Tools menu: contains the tools palette which you can detach and display as a floating object on your screen. Objects menu: Create text, graphics, and button objects from this menu. Also contains info on the stack and card on which you are working. Color menu: Allows you to change colors when creating backgrounds or graphics for the background. You don’t use this for objects. Options menu: Hide/control your menu bar and use this to change editing options for background art. Extras menu: Use this to export your stacks to the Web or use HyperStudio with a videodisc player, among other things. ADDING BACKGROUNDS You can use pictures, clip art, and/or text for background or create your own. To add a background to a card, create a new stack from HyperStudio’s Home Page and then: ¥ Pull down the File menu and select “Import Background…” ¥ A window opens asking you to identify your picture source. Choose the Disk file radio button and press RETURN.

¥ A navigational dialog window opens to the HyperStudio Art folder (see right). Find the art that you want to use, click it to select it, and then click Open.

HyperStudio Reference/Maney page 2 In the example below, just the border from this clip art will be used. To delete the rest of the clip art, pull down and detach the tools palette by clicking on the menu and holding down the mouse as you drag the palette to the desired location. Select the marquee tool (below left) and then drag the pointer so that the inside artwork is selected (surrounded by “marching ants” below left). Once selected, press the DELETE key to delete the artwork (see below right).

To add text to the background, click the T (text tool) in the tools palette and then click where you want to start typing. NOTE: once you click out of your text, you lose the ability to edit it so be careful!! To move the text to a different location, click the marquee tool, select the text by dragging over it until the “marching ants” appear, and then click in the CENTER of the text and drag it to its new location (see below left and right). Remember that while you can move text, you cannot edit it without erasing the text.

ADDING AND WORKING WITH OBJECTS Objects “float” over the background and have powerful editing features. Objects can include text, graphics, or buttons. Below are some different examples of objects you can create. TEXT OBJECTS To add a text object, pull down the Objects menu and select “Add a Text Object…” The outline of a text object appears. Drag it to the desired location.

When you are satisfied with the text object’s location, click OUTSIDE the object. A Text Style window opens. From this window you can control the text’s appearance as well as the window in which it will appear. From here you can make the text object editable or read only from the Browse mode (see next page for a series of screen shots)

HyperStudio Reference/Maney page 3 To move an already created text object, simply click the Edit tool (pointer) in the tools palette and drag the object to the new location; you will see the text object’s outline as you do. Remember, when moving objects, always them in the center and NOT by their borders (see below).

GRAPHIC OBJECTS Graphic objects can serve as more than pictures. You can make them play sounds, have them link to other cards or stacks, play movies, etc., simply by clicking on them. These attributes are called Actions and ANY object is capable of carrying out Actions. In the example below, we will make a graphic object play a sound. Remember however, that just because you can make objects do things, doesn’t mean you should!! To create a graphic object and make it play a sound: ¥ Pull down the Objects menu and select “Add a Graphic Object…” ¥ A window opens asking you to identify your picture source. Choose the Disk file radio button and press RETURN.

¥ A navigational dialog window opens to the HyperStudio Art folder. Find the art that you want to use, click it to select it, and then click Open.

¥ The Graphics Objects window opens (see right). If you want to select a regular (square or rectangle) object to use, click the marquee tool and use it to select the desired graphic. If you want to use an irregular object (any other shape), use the Lasso tool and make sure you close your lasso.

HyperStudio Reference/Maney page 4 ¥ Click OK. You are returned to the Card and will see the outline shape of your graphic (right). Move it to the desired location and click outside of the graphic object to edit it. ¥ The Graphic Appearance window opens (see below).

¥ To add sound to your graphic, click the Actions button (see above). The Actions window opens (below). Click “Play a sound…”

¥ The Tape Deck window opens (see top right). From here, you can either choose a prerecorded sound or create your own, provided you have a microphone attached to your computer and the Monitors and Sound Control Panel is configured to receive sound from it. Once you have recorded your sound, click OK; you are returned to the Actions window. Click the Done button; you are returned to your card and can now see your new button (bottom right). If you are in the Browse mode, click the button to play your new sound. BUTTONS Use buttons to navigate between cards and stacks and to create different actions, e.g., play a QuickTime movie. As with any other objects, creating and editing buttons is essentially the same so there is not much new learning involved. In the example below, we will create a new button that will navigate to the next card and a second button to play a QuickTime movie. To create a new button: ¥ Pull down the Objects menu and select “Add a Button…” ¥ The outline of your new button appears. Drag it to the desired location (below left) and click outside of it to get to the editing windows. The Button Appearance window opens (below right).

HyperStudio Reference/Maney page 5 To add an icon and label to your button, type the desired title in the Name field and then click the Show Icon check box (below left). The Icons window opens (below right). Choose the desired icon and click OK. You are returned to the Button Appearance window.

To make the button go to the next card, click the Actions… button. The Actions window opens (below left). Under “Places to Go:,” click the Next card radio button. A Transitions Window opens (below right). Choose the desired transition (to the transition, click the Try It button). When satisfied, click the OK button. You are returned to the Actions window.

To give a uniform look for navigational buttons in all cards, copy and paste buttons. After you have configured your button with the appropriate actions and have placed it where you want it, make sure you are in the Edit mode by clicking the pointer tool and then click the button to select it. Pull down the Edit menu and select “Copy Button” (see right). Pull down the File Menu and select “New Card” (see left). Pull down the Edit menu and select “Paste Button” (see right). The pasted button appears on the new card in the exact place it was on the first card. This can be seen in the sequence of screen shots below.

USING BUTTONS TO SHOW QUICKTIME MOVIES Buttons can also be used to show QuickTime movies (of course, any object could do the same thing). To configure a button to show a QuickTime movie, do the following: First, create a new button to show the movie. While still in the Action window, click “Play a movie or video…” (below left). A Video/Movie Source window opens (below right) asking you to locate the movie or video source. This could be a video clip you or your students shot or a clip from a video disc player. In the following example, a prerecorded QuickTime clip will be used to illustrate the process.

HyperStudio Reference/Maney page 6 From the Video/Movie Source window, select “Disk File.” A navigational dialog window opens to the QuickTime folder for HyperStudio (see right). Click the desired clip and then press RETURN to open it. You are returned to your card with the QuickTime movie frame selected (see below left). Drag it to the desired location in the window and then click outside it to get to the QuickTime Movies window (below right). Choose your desired options and then click OK.

You are returned to your card and will probably only see the button, depending on whether you chose to show the first frame in the QuickTime Movies window. DO NOT PANIC! Make sure you are in the browse mode and then click your button to see the movie (below). Remember, video consumes tremendous amounts of disk space and memory so use it judiciously.

CREATING WEB LINKS You can embed Web links in your stack by using the Hypertext link feature. To do so: Create a text object and type in the desired URL. Resize your text object and then highlight the URL by dragging your mouse over it. Pull down the Objects menu and select “Hypertext links…” (see right). A Hypertext window opens. Click Add link (below left). The link appears in the window. Click Action… (below right).

The Actions window opens. To have HyperStudio launch Netscape, click the “Another program…” radio button (see right).

HyperStudio Reference/Maney page 7 The Launch Options window opens (see below left). Click the Choose… button under Application. A navigational dialog window opens. Navigate to Netscape’s folder, click Netscape to select it, and then press RETURN (see below right).

USING THE STORYBOARD Use the Storyboard to get an overview of your stack and to change the order of cards or delete them. To use the Storyboard, pull down the Extras menu and select “Storyboard.”

The Storyboard window opens.

Choose the appropriate option (if any) and then click OK. PUBLISHING YOUR STACKS TO THE WEB You can easily publish your stacks or your students’ stacks to the Web. To do so, you need three things: ¥ SchoolNet wiring and Internet access ¥ Access to a Web server ¥ Netscape Navigator 3.0 and the HyperStudio plug-in Once you have these things (you can get the HyperStudio plug-in from http://www.hyperstudio.com), Web publishing becomes very easy. First, save your stack to the Desktop. To do this, pull down the File menu and select “Save Stack As…” A navigational dialog window opens (see below); name your stack. Make sure not to use in your stack’s name and attach an .stk suffix to the end of it.

Pull down the Extras menu and select “Export WebPage.” A window appears asking if you’d like to create a Web page that displays your stack (below left). Click the Information button to get instructions on how to do so. A text object appears that contains the instructions for Web publishing (below right). Read them and click OK. You are returned to the first window. Click Yes.

HyperStudio Reference/Maney page 8 HyperStudio opens a navigational dialog window and automatically attaches an .html suffix to your stack’s name (see below). Make sure that you are saving this html document to your Desktop and then click Save or press RETURN.

Eventually you will need to move both this document and your stack to a web server but for now you can test your stack from the Desktop. Follow the directions from the Web information page in HyperStudio to do so. FINAL CONSIDERATIONS ¥ Refer to the HyperStudio manual for additional information. It is an excellent resource. ¥ Just because you can assign actions to objects doesn’t mean you should. The actions you create should be dictated by learning considerations, not bells and whistles. A telltale sign of a new HyperStudio user is busy cards. ¥ Use these guidelines when teaching your students how to construct cards and stacks. Ultimately, HyperStudio becomes a more powerful learning tool for your students if they are the ones who design and construct stacks. Your job becomes fundamentally different (and much more significant) if you allow this to happen. ¥ Roger Wagner Publishing has an excellent Web resource at http://www.hyperstudio.com

HyperStudio Reference/Maney page 9