HyperStudio^® is an authoring software application, developed for Macintosh, to create creative multimedia presentations. Like any other multimedia software, HyperStudio^® allows users to bring text, graphics, video, and sound together in an interactive and interconnected manner to create astonishing presentations. However, unlike most other multimedia application software, HyperStudio^® is a very "conversational," friendly, easy to use program and has many possibilities for classroom use.

In this simple project you will be guided, step-by-step, to create a simple stack that will incorporate buttons, text, paint elements, graphics, and a QuickTime movie, in order to get an insight into HyperStudio^® software.

For a detailed Tutorial on different features and usage of HyperStudio^® software refer to:

Before starting this step-by-step project, the following illustrations and tips will help you become familiar with the Paint tools and a few of the options and tricks in the HyperStudio^®. If you haven't used a paint program before, you should spend some time experimenting with different tools.

The Paint Tools Illustrated

Square Selector This tool lets you capture a rectangular area. Now you can copy it, cut it, delete it, move it, flip it, rotate it or resize it. Circular Selector This tool lets you capture an oval area. Circular or oval pictures can be used as buttons or cameo-style photos. Lasso Outline a shape with this tool and it will hug the shape so you can copy it, cut it, delete it, move it, or resize it. Paintbrush Draw freehand using one of many different brush shapes. Spraypaint Scatter lots of tiny dots with this tool Paint Can Use this till tool to color a closed shape. Eraser Set the eraser color and erase. Line Tool Draws straight lines. Pencil Draw freehand. Rectangle Use this tool to draw rectangles and squares. Oval Use this tool to draw ovals and circles. Rounded Rectangle Use this tool to draw rounded rectangles and squares. Paint Text Paint text on a card with this tool. Magnifying Glass Zooms you in closer. All the paint tools work there, too. Eye Dropper Use this tool when you want to know what a particular color is, so you can paint with it somewhere else

Tips about the Shift Key

Pressing Shift key while you draw with the Pencil tool or the Paint Brush is a little trick for drawing straight lines!

If you press the shift key while you use the Spray Can, you can spray paint in a straight line!

If you press the shift key while you use the eraser, you can erase in a straight line!

Pressing the shift key while you use the Oval tool will draw circles.

Pressing the shift key while you use the Rectangle tool will draw squares.

To use the Square Selector, position the mouse at the upper left-hand corner of the image you want to select and drag the mouse diagonally down to just past the lower right-hand corner of the image. When selecting something, you'll notice flashing dots outlining the area selected. If you didn't select the area properly, you can click outside the flashing dots to turn them off and try again!

You can choose different line thickness for your lines, rectangles and ovals by choosing Line Size from the Options menu.

You can choose different colors from the Colors menu.

You can choose different brush shapes from the Options menu.

To erase painted images or text, you have several options:

1. Use the Eraser tool.
2. Use the Square Selector. Select the part you'd like to erase and once you see the flashing dots, press the delete key.
3. Immediately after you draw something, you can choose Undo painting (from the Edit menu), or use the keyboard shortcut, pressing Command key and Z. (While you hold down the Command key, press the Z once.)
4. From the Edit menu, choose Erase Background. This will erase your whole background and make your card the color you select.

You can edit the text, use the delete key, choose a different color, size and font before you click away from the painted text typed with the T tool. Once you click the mouse away from the text you have just painted with the T tool, you will have lost the ability to make changes to that text so easily. It's a good idea to check your text carefully before clicking the mouse. You will be learning about Text Objects (in the step-by-step project), for text that can be easily edited.

A neat feature of HyperStudio^® is being able to "tear off" the Tools and Colors menus. This lets you place the menu on the card so that you may choose a tool without pulling down the Tools menu each time, and choose a color without pulling down the Colors menu.

• To tear away the Tools menu drag the mouse down and past the tools, without releasing the mouse button, until you can see that the tool palette has been torn away.

• The Tools menu can be repositioned on the screen by dragging the grey bar across the top.

• To put the Tools menu away click in the small square window at the top left corner of the palette.

• You can tear away the Colors menu, and then put it away later in the same manner.

Getting Started for the Project

1. Open the HyperStudio^® application.
2. Click on New Stack
   
   
   
3. Click Yes to proceed from Home Stack.
4. Click Yes.

HyperStudio^® main working window opens and you will see the first card as "Untitled - Card 1."

5. Go to the Edit menu and select Preferences. Click all the appropriate boxes so that your Preferences window looks like the one on this page. Then click OK.
   
   


6. To save this project, choose Save Stack As from the File menu. Name your stack as "Project 1" and save on your appropriate media (data disk, Hard Drive, or Desktop) and directory.
7. Tear away the Tools and Colors menu and reposition them on the screen.
8. Select a pattern or plain color from the Colors menu by clicking.
9. Select the Paint Can from Tools menu and click anywhere on the card. The card will be filled with your selected color and looks like:

In Card 1 will create a painted text and a button to connect this card to the next card

1. From the Options menu choose Text Style, so you can select a suitable font for your title. Choose a font, size, a suitable dark color, bold, and click OK.
   
   


2. Select the "T" (Text tool). From Tools menu.

   NOTE: When you type with the Text tool (T), you are painting letters on the card. This is fine for titles and unique fonts. You can change the color and style of this text as long as you do not click the mouse elsewhere on the card. At that point it becomes permanent. If you want to write text, which can be edited easily, then you will need to create a text item. You will do that later on another card.

3. Set the cursor down by clicking on the mouse.
4. Type "Welcome to My First HyperStudio^® Presentation." Depending on selected font you may require to hit the return button a few times to fit the words on the screen. Do not worry about spacing or how they look at this stage, you will fix that in the next step.
5. The Selector Tool can be used to select text and move it. From the Tools menu, choose the Square Selector tool. Begin above and to the left of the W in the word welcome and drag the mouse diagonally down and to the right, just past the last word. You will see the marching ants. While you see the marching ants, move the mouse until the arrow is inside the selected area. Press and drag the mouse to move the title to the top center of the screen. Click outside the marching ants to place the painted text in that spot. With the same procedure you can move single character or word around.

1. To move to next card, you need a button. Choose Add a Button from the Objects menu. The button Appearance dialog box appears.
   
   


2. Select the Icons button to add a graphic to your button. A dialog box appears; click on the icon you want, and then click OK.
   
   


3. Select a background color and a text color and Name your button appropriately (for example, "Next Card") in the Name text box. Click on OK. You will see the button appear in the middle of your screen. Position the button by clicking on it and dragging it. Click outside of the button. The button Actions dialog box appears.
   
   


4. Under the Places to Go menu, choose Next Card.
5. The Transitions dialog box appears. Select a transition and click the Try it button to see if you like it. Experiment with the speed, too. When you are satisfied, click OK.
   
   


6. Now you are back at the button Actions dialog box. Under the Things to Do menu, click on Play a Sound. The Tape deck dialog box appears. Select a sound. Click OK.
   
   


7. Click the Done button when you return to the button Actions dialog box.
8. Now you are back to Card 1.

In this card will create a normal text in a text box, and two buttons; one to connect you to the next card and one to connect you to the previous card.

1. Select New Card from Edit menu to add a new card. Card 2 opens.
2. To add text that can be edited, choose Add a Text Item from the Objects menu. Click outside the marching ants to open the Text Appearance dialog box. Select colors for Text and Background. For this project check the Draw Scroll bar, Scrollable, and Draw frame options.
   
   


3. Click the Style button for style choices. The Text Style box appears. Select your choices. Click OK.
   
   


4. Click OK again when you return to the Text Appearance dialog box.
5. You are now back to your card 2. A blinking cursor will appear. Type a few sentences of text. If you have a problem with the size of the box, select the Arrow tool from the Tool menu, click on the text, and then drag one corner of the selected text frame until it is the desired size. Make sure that your text box is sized so that it does not cut off any text.
6. Create a button that will take you to the previous card. For the Places to Go, select Previous Card. Try and Select appropriate Transition. For Things to Do select Play frame animation. A dialog box opens. If HS Art folder is not the current directory, locate it and make sure your screen looks as follows:
   
   


7. Select a picture file. Click Open. Select the appropriate picture by creating a selection box around it and click OK
   
   


8. You will see the object appears in the middle of your screen. Position the object by clicking on it and dragging it. Click outside of the object. The Animation dialog box appears. Click all the appropriate boxes so that your selection looks like the one below.
   
   


9. Click OK. You return to Action dialog box. Click Done.
10. Now you are back to Card 2. Test this button and the button you created on Card 1. If they function properly, start all over again. Though you can delete a card using Delete Card from the Edit menu, it is recommended for the first project you start from the beginning.
11. Using appropriate steps, create another button that connects you to the next card (Card 3). Under the Things to Do menu, click on Play a Sound, and follow the above steps, but select a different sound.

In this card will add a graphic object in a bordered box, and two buttons; one to connect you to the previous card and one to connect you to the Home Stack, after saving your presentation.

1. Select New Card from Edit menu to add a new card. Card 3 opens.
2. To add a graphic, choose Add a Graphic Object from the Objects menu. Select Disk File button when the following dialog box appears.
   
   


3. Locate the HS Art folder (if it is not already open) and open it. Select a graphic file and open it. The following dialog box appears. Use the rectangular selection tool or lasso to select the picture and click OK




4. The graphic now appears in the middle of your card. Click in the middle of the graphic and drag it to position it on the card.
5. Click outside the marching ants and the following dialog box will appear that allows you to frame your picture. Select the desired color and width (click upward arrow for thicker frame or downward arrow for thinner frame). Click OK.
   
   


6. Using appropriate steps, create a button that connects you to the previous card (Card 2). Under the Things to Do menu, click on Play a Sound, and follow the above steps, but select a different sound.
7. Check this button once you finished creating it.
8. Make sure that you in Card 3. Create another button, that connects this card to Home Stack while doing so, plays a QuickTime movie, as follows:
   
   
   1. Select Add a Button from the Objects menu. Follow the steps for creating a button. When you get to the Actions dialog box, for Places to Go, select Home Stack. For Things to Do, click on the box next to Play a movie or video.
   2. The following dialog box will appear. Select Disk file (QuickTime movies).
      
      
   
   
   3. Locate a QuickTime movie (try the QuickTime Movies folder) and open it, if it is not already open.
      
      
   
   
   4. Click in the middle of the movie and position it where you would like it. Click outside the marching ants and the following dialog box will appear. Check the boxes so choices look like the one below:
      
      
   
   
   5. Click OK.
   6. You are now back at Card 3.
   7. When all the steps are completed, click on this button. You will be prompted if you want to save this work. Click on save button.
      
      
   
   
   8. While at Home Stack, Click on Open Stack, locate and open "project 1" and check your first HyperStudio presentation.

Note: Go to the Extras menu and select StoryBoard to see your stack in miniature.