HyperStudio+Info

=**HyperStudio**=

The computer lab in 304 has a program called HyperStudio. HyperStudio is a kid-friendly presentation program (sort of like PowerPoint). Below is a tutorial that teaches the basics of the program. The teacher can go through this tutorial to get an idea of how the program works; then, if the teacher wants to teach students how to use the program, the students can go through the tutorial.

HyperStudio Tutorial Created by Tim Graves, Albion Middle School

Introduction: HyperStudio is a presentation program that allows you create a series of pages or “cards” on the computer screen that can have writing, pictures, and sound. You create “buttons” and special effects to go from one card to the next when you click the mouse. This tutorial will show you some basics. After the tutorial, you are invited to explore what else you can do. However, for this tutorial, only do what it asks you to do. You can explore later.

You must read the following directions very carefully. Failure to do so may result in your having to re-do parts of this assignment.

1. Begin by logging your computer in. Then start up the HyperStudio5 program.

2. When the program is running, drag down “File” and select “New Stack.”

3. Drag down “File” to “Save As.” Make sure your stack is being saved to the Documents Folder. Name your file: HS Tutorial [your name].

Note: Do not open files from other classes! You have been assigned the same computer every time. If you mess with a file from another class, we will know it was you! You will lose computer privileges, which means you will get an automatic zero on this assignment!

__**Making the First Card:**__

1. You should now see the first card of your stack. It is blank.

2. Locate the “toolbox” palette. If it isn’t already on the screen (or if you accidentally make it go away), click “Tools” on the top of the card on the grey bar. If the “Tools” palette is in the way of your card, you can drag it to another location on the computer desktop.

Note: The toolbox has an upper part and a lower part. Sometimes the lower part is hidden. There are two ways to show the lower part: double-click on the tool you want to use or click on the little triangle at the bottom of the toolbox.

3. Click the “T” on the toolbox. “T” stands for text. Open the lower part of the toolbox, if it isn’t already open. (See note above.)

4. From the dialogue box, make the following choices:

<span style="font-family: Arial,Helvetica,sans-serif;">*Choose font style “Times” (you will have to <span style="font-family: Arial,Helvetica,sans-serif;"> scroll to find this font). <span style="font-family: Arial,Helvetica,sans-serif;">*Choose font size 48 (scroll, if <span style="font-family: Arial,Helvetica,sans-serif;"> necessary). <span style="font-family: Arial,Helvetica,sans-serif;">*Click “Bold” button. <span style="font-family: Arial,Helvetica,sans-serif;">*Click “Italics” button. <span style="font-family: Arial,Helvetica,sans-serif;">*Select a dark text color (other than black).

<span style="font-family: Arial,Helvetica,sans-serif;">5. Place cursor in the upper left-hand corner of your card, about two inches down from the top. Click the mouse, and then type the following three lines onto your card. (Pay attention to which letters are supposed to be capitalized and note that there are three different lines. Use the return key to go to the next line.

<span style="font-family: Arial,Helvetica,sans-serif;">Very Interesting <span style="font-family: Arial,Helvetica,sans-serif;">Animals <span style="font-family: Arial,Helvetica,sans-serif;">By [type your name here]

<span style="font-family: Arial,Helvetica,sans-serif;">Note: Once you have laid down your letters and click outside the text box, it becomes a graphic image and you can no longer “edit.” If you misspell a word and you don’t catch it before leaving the text box, you will have to erase it and start over. So always carefully proofread before you move out of the text box.

<span style="font-family: Arial,Helvetica,sans-serif;">6. From the toolbox, click on the square dotted-box in the first column of the toolbox. This is called the “square” mover tool. When you move the cursor to the card, note that the cursor now appears as a cross.

<span style="font-family: Arial,Helvetica,sans-serif;">7. Put a box around all the words. To do this, hold down the mouse, and drag diagonally from one corner to the other corner until all the words are in the box. If you don’t quite get it right, let go of the mouse button, re-position the cursor and try again.

<span style="font-family: Arial,Helvetica,sans-serif;">8. Now place the cursor in the middle of the box (the cursor now has arrows on each tip of the cross), hold down the mouse button, and drag the box with the words so they are centered in the middle of the screen. Click once outside of the box.

<span style="font-family: Arial,Helvetica,sans-serif;">9. Now place the dotted box around only the word “Animals” and move this word over a little so that it is centered under the first line (with an equal amount of space on each side of the word.)

<span style="font-family: Arial,Helvetica,sans-serif;">10. Now do the same thing for the line that has your name.

<span style="font-family: Arial,Helvetica,sans-serif;">11. Click on the eraser tool icon on the toolbox (it is underneath the paint brush in the first column).

<span style="font-family: Arial,Helvetica,sans-serif;">12. Erase the word “Animals” by holding down the mouse button as you wipe across the word. Be careful not to erase stuff you don’t want to erase! If you make a mistake, go up to “Edit” and select “Undo.”

<span style="font-family: Arial,Helvetica,sans-serif;">Note: you can control the size of the eraser tool by sliding the size bar (which is located on the lower part of the toolbox).

<span style="font-family: Arial,Helvetica,sans-serif;">13. When you have finished erasing the word “Animals,” click on the “T” once, place the cursor about one inch from the bottom of the screen, and type the word “Creatures.”

<span style="font-family: Arial,Helvetica,sans-serif;">14. Click on the “lasso mover” tool (located in the third column above the icon of the pouring paint can).

<span style="font-family: Arial,Helvetica,sans-serif;">15. Encircle the word “Creatures.” Stay as close to the word as possible. Be sure to touch both ends together to complete the circle.

<span style="font-family: Arial,Helvetica,sans-serif;">16. Place the cursor in the middle of the word until the cursor changes to the cross with arrows on the tips. You might have to wiggle the mouse a little until the cursor changes.

<span style="font-family: Arial,Helvetica,sans-serif;">17. Drag this new word to the place where “Animals” was. Once correctly positioned, click outside the word.

<span style="font-family: Arial,Helvetica,sans-serif;">18. Click the “pouring paint can” icon from the “toolbox” (third column, under lasso tool).

<span style="font-family: Arial,Helvetica,sans-serif;">19. Open the bottom part of the toolbox, if it isn’t already open. Choose one of the light-colored patterns or a light color, one that will contrast well with your dark lettering. Explore what’s there before you choose.

<span style="font-family: Arial,Helvetica,sans-serif;">20. Move the cursor to an area away from your letters and click. Your selected pattern/color will fill the screen—except for the insides of some of the letters.

<span style="font-family: Arial,Helvetica,sans-serif;">21. To fill inside the letters, place the “tip of the drip” of the pouring paint can inside the letter and click. If you miss, drag down “Edit” to “Undo.”

<span style="font-family: Arial,Helvetica,sans-serif;">Note: If you ever make other mistakes, you “undo” them by dragging down “Edit” to “Undo.” You can go all the way back to the point at which you last saved, if you need to.

<span style="font-family: Arial,Helvetica,sans-serif;">22. Once you have filled in all the spaces of your letters, your first card is done.

<span style="font-family: Arial,Helvetica,sans-serif;">23. Drag down “File” to “Save” to save your work so far. Don’t do “Save As”! You’ll create a new file.

<span style="font-family: Arial,Helvetica,sans-serif;">24. Have the teacher check off this card before starting the next card. If you haven’t followed the directions, the teacher may ask you to do the card over.

__**<span style="font-family: Arial,Helvetica,sans-serif;">Making the Second Card: **__

<span style="font-family: Arial,Helvetica,sans-serif;">25. Drag down “Edit” to “New Card.”

<span style="font-family: Arial,Helvetica,sans-serif;">26. Click the paint can from the toolbox and choose a light background color. (Open up the bottom part of the toolbox, if it isn’t already open.)

<span style="font-family: Arial,Helvetica,sans-serif;">27. Drag the cursor over to the card and click. Your new background color will appear.

<span style="font-family: Arial,Helvetica,sans-serif;">28. Click on the “pencil tool” from the toolbox (located underneath paint can in third column).

<span style="font-family: Arial,Helvetica,sans-serif;">29. Select a dark color that will show up well against your background color. (Open up the bottom part of the toolbox, if it isn’t already open.)

<span style="font-family: Arial,Helvetica,sans-serif;">30. On the bottom left-hand corner of the card, draw a picture of “the ugliest cat in the world.” Note: Your drawing should be no larger than a quarter of the screen—a little smaller than a quarter of the screen is better. (Erase it and do it over again, if your drawing turns out to be too large.)

<span style="font-family: Arial,Helvetica,sans-serif;">31. Use “square mover” tool or the “lasso mover” tool to surround your cat. Place the cursor in the middle of picture and move your cat to the center of the card.

<span style="font-family: Arial,Helvetica,sans-serif;">32. This will leave a hole in your background. Click on the paint can and find your background color to repair the damage.

<span style="font-family: Arial,Helvetica,sans-serif;">33. Click the “circle” tool from the toolbox (located in the second column, one from the bottom, right above the one that looks like a magnifying glass).

<span style="font-family: Arial,Helvetica,sans-serif;">34. Make the circle line a little thicker by adjusting the size bar. (Open up the bottom part of the toolbox, if it isn’t already open.)

<span style="font-family: Arial,Helvetica,sans-serif;">35. Encircle your cat by placing the cursor an inch or so above the top left corner of the card. Hold down the mouse button, and drag it diagonally across the picture. Let go when your circle is the correct size. Your circle should go completely around the cat without a lot of extra space. If your circle doesn’t turn out the right size, drag down “Edit” and select “Undo.” Keep trying until you get it right.

<span style="font-family: Arial,Helvetica,sans-serif;">36. Click the square tool from the toolbox (located in the first column above the “T”).

<span style="font-family: Arial,Helvetica,sans-serif;">37. Make the line for your box a little thicker than your circle by adjusting the size bar. (Open up the bottom part of the toolbox, if it isn’t already open.)

<span style="font-family: Arial,Helvetica,sans-serif;">38. Place a box around your circle so the circle fits entirely inside the box. Use the same technique you used when you made the circle. The lines of the circle or the box should not be touching. If you make a mistake, drag down “Edit” and select “Undo.” Keep trying until you get it right.

<span style="font-family: Arial,Helvetica,sans-serif;">39. Click the “pouring paint can” icon.

<span style="font-family: Arial,Helvetica,sans-serif;">40. Select an interesting pattern or color. (Open up the bottom part of the toolbox, if it isn’t already open.)

<span style="font-family: Arial,Helvetica,sans-serif;">41. Place the tip of the drip in the area between your box and circle and click.

<span style="font-family: Arial,Helvetica,sans-serif;">42. Click the “T.” Choose an interesting (yet easy to read) type font and make it size 24 point. Find some empty space above or below (or both) and type:

<span style="font-family: Arial,Helvetica,sans-serif;">Ugliest Cat <span style="font-family: Arial,Helvetica,sans-serif;">In the World!

<span style="font-family: Arial,Helvetica,sans-serif;">43. Use the “square mover” or “lasso mover” tool to move your words and/or picture around so that everything is positioned on the screen so that it looks balanced. Both lines can above the picture, both can be below the picture, or one line can be above and the other line can be below. You decide what looks best.

<span style="font-family: Arial,Helvetica,sans-serif;">44. You may need to re-fill the background space. Click on the paint can and find the color/pattern you’ve used for your background.

<span style="font-family: Arial,Helvetica,sans-serif;">45. You are now done with the second card. Save by dragging down “File” to “Save.” (Again—don’t do “Save As” because you will create a new file.)

<span style="font-family: Arial,Helvetica,sans-serif;">46. Have the teacher check off your card before starting the next card. If you did not follow the directions, be prepared to do this card over!

__**<span style="font-family: Arial,Helvetica,sans-serif;">Making the Third Card: **__

<span style="font-family: Arial,Helvetica,sans-serif;">47. Drag down “Edit” and make a “New Card.”

<span style="font-family: Arial,Helvetica,sans-serif;">48. Click the paint can and make a background (single color or pattern).

<span style="font-family: Arial,Helvetica,sans-serif;">49. Click on “Library” (grey bar above the card).

<span style="font-family: Arial,Helvetica,sans-serif;">50. Click the “Graphics” button.

<span style="font-family: Arial,Helvetica,sans-serif;">51. Find an image of an animal.

<span style="font-family: Arial,Helvetica,sans-serif;">52. Double-click the image.

<span style="font-family: Arial,Helvetica,sans-serif;">53. Position the image in the middle of your card.

<span style="font-family: Arial,Helvetica,sans-serif;">54. Put a frame (a box) around your animal. Choose an appropriate color and line thickness for your box.

<span style="font-family: Arial,Helvetica,sans-serif;">55. Using the text tool, make a title for your animal (similar to what you did for the cat, but come up with your own idea).

<span style="font-family: Arial,Helvetica,sans-serif;">56. You are now done with the third card. Save this card by dragging down “File” to “Save Stack.” Don’t do “Save As” or you will create a new file!

<span style="font-family: Arial,Helvetica,sans-serif;">57. Have the teacher check off your card before starting the next section. If you haven’t followed the directions for this card, be prepared to do this card over!

__**<span style="font-family: Arial,Helvetica,sans-serif;">Making Buttons: **__

<span style="font-family: Arial,Helvetica,sans-serif;">You have now completed three cards. The first card is your title card. The second card is the ugly cat card. The last card is the other animal card. You are now ready to make buttons (complete with special effects) to connect the cards together.

<span style="font-family: Arial,Helvetica,sans-serif;">58. Using the arrow controls at the bottom of the card that is on the screen, return to the very first card you made.

<span style="font-family: Arial,Helvetica,sans-serif;">59. Click on the “Library” icon located at the top of the card; then click the “Objects” icon.

<span style="font-family: Arial,Helvetica,sans-serif;">60. Drag the button with the rounded edges to your card and position it in the lower right-hand corner.

<span style="font-family: Arial,Helvetica,sans-serif;">61. A screen will “pop up” that will allow you to type in a name for your button. Type: “Next” in the line.

<span style="font-family: Arial,Helvetica,sans-serif;">62. When you are done, click somewhere on the card.

<span style="font-family: Arial,Helvetica,sans-serif;">63. Now go to the second card and do the same thing you did with the button for the first card. Make a button that says, “Next.”

<span style="font-family: Arial,Helvetica,sans-serif;">64. Finally, go to the third button and type “Back to Beginning.”

<span style="font-family: Arial,Helvetica,sans-serif;">65. Return to your first card.

<span style="font-family: Arial,Helvetica,sans-serif;">66. Making sure that arrow (not the finger) is selected on the top row of toolbox, double-click on your button.

<span style="font-family: Arial,Helvetica,sans-serif;">67. Click the “Actions” button.

<span style="font-family: Arial,Helvetica,sans-serif;">68. In the “Places to Go” list, choose “Another Card.” Scroll down and choose card number 2.

<span style="font-family: Arial,Helvetica,sans-serif;">69. Next, you will be offered a choice of transitions. Choose “clock face” and then click OK.

<span style="font-family: Arial,Helvetica,sans-serif;">70. Next, from the “Things to Do” list, choose “Play a Sound.” Click “Add Sound from File.” Choose a sound and click “Add to Button” button. Click OK.

<span style="font-family: Arial,Helvetica,sans-serif;">Note: please turn your sound down so that you’re the only one who hears it. It is very distracting if everyone is playing sound effects at full volume.

<span style="font-family: Arial,Helvetica,sans-serif;">71. To test the button to see if it works, select the “finger” on the top row of the toolbox.

<span style="font-family: Arial,Helvetica,sans-serif;">72. Click your button to see if it works. Again: turn your sound down so that you are the only one who hears it!

<span style="font-family: Arial,Helvetica,sans-serif;">Note: if you should want to delete a button, click the “arrow” icon from the toolbox. Then click the cursor on the mouse. Then hit the delete key on the keyboard. This is a simple way to start over if the button gets messed up.

<span style="font-family: Arial,Helvetica,sans-serif;">73. Now program the button for your second card. Make this button connect to your third card, following the same directions that you used for the first button. You can choose a different transition than you used for the first button, if you wish.

<span style="font-family: Arial,Helvetica,sans-serif;">74. You should be on the last card of your stack (go there if you are not). We want the button for this card to go back to the first card. Repeat the process you used for making buttons for your first card. Make sure you are connecting it back to your first card.

<span style="font-family: Arial,Helvetica,sans-serif;">75. Confirm that all the buttons of your stack are working correctly.

<span style="font-family: Arial,Helvetica,sans-serif;">76. Save your file. When you are done, have the teacher check off the buttons part of this assignment.

<span style="font-family: Arial,Helvetica,sans-serif;">Have more time? Make more cards!

<span style="font-family: Arial,Helvetica,sans-serif;">70. If you have any class time left, create one or more additional cards on the theme of “creatures.” As you complete each card, make a button on the previous card that connects to your new card.

<span style="font-family: Arial,Helvetica,sans-serif;">Note: you will need to re-program existing buttons if you insert new cards. To re-program a button, make sure you have selected the arrow on the toolbox. Then double-click your button and you can do the various things needed to re-program it.