HyperStudio - A Great Way to Start an Interactive Game (also, “Programming”!)
1-2-3: Draggable Object, Drop-Off Button, Action!

An interactive game can be as simple as a board game where you move pieces, to a multi-path adventure game, where you are an active player in the game, picking up things along the way, and experiencing different outcomes along the way depending on your actions.  

As it happens, this is also an excellent introduction to the logical concepts of “programming”.  That is, a system that conditionally branches based on different inputs, and which in turn yields different results (outputs) based on the inputs and what logical structure (the program) has been set up. 

HyperStudio is indeed a truly visual, object-based, programming language where the net result of having written a program can be achieved, but without the necessity for actually writing a “script” in some sort of written language. 

There are a lot of different game scenarios that can be built using just a few simple settings in HyperStudio, and a key technique for that are draggable objects and drop-off “buttons”.

A Matching Game Using Draggable Objects

For example, for this matching game, the text object “$0.01” is marked as “draggable”, and the target coin (graphic object) is marked as a “drop-off” button, which means that the action for that object (playing a sound) will happen when the text object is “dropped” on to the graphic object of the coin.


You can download the sample HyperStudio project here:

Coin Match Project

In the above example, there is a large “incorrect” area that covers all the target images, but which is behind each of the “correct” invisible buttons which are the target when dragging the text object.  Each text object has a “no-click” (roll-over) action to show its corresponding target button, and hide the other three.  

Programming 101: IF-THEN-ELSE

Notice that the above example demonstrates the fundamental process of any computer program: a varied response based on user inputs.  In this case, the user drags an object to a target, and if the target is correct, an “applause” sound is played.  (IF-THEN).  It can be set up so that if the target is not correct, -THEN, a different sound or response is generated.  

The activity of creating this game in and of itself teaches the logic of programming, while not requiring the abstraction, syntax and grammar of a scripted program that could be quite detailed an extensive.  Even in Scratch, it could be something like this:

Compared to HyperStudio, which would be simply the three Inspector set-ups seen above.  You can learn more about the Area 42 game, Scratch and HyperStudio by clicking here.

An Interactive Board Game

A board game is almost exactly the same game, but where each space on the game path is an invisible drop-off button.  The draggable graphic object can also a movie with a green-screen mask!

Interactive Adventure Game - More Advanced Programming in HyperStudio

Multiple-path adventure games are easy to create in HyperStudio.  In this particular example, I started with an interactive adventure called “Area 42”, which was created in Scratch, a visual programming language developed by the MIT media lab. I was able to recreate the game segment without scripting in HyperStudio.

If you download the Scratch editor, and see what was actually necessary to construct this simple game, you'll see that it took 38 Scratch objects (sprites) and 171 scripts that had to be assembled for it.  If there were an average of 10 “blocks” per script, that would be almost 2000 elements to be brought together “simply” to make it work.

Keep in mind that the above graphic shows the Scratch programming blocks for just one object in one scene. If totally illustrated, the Area 42 game involves many such screens.

On the other hand, here is the same game done in HyperStudio. 

Area 42 The Arrival (HS) #3.zip

In HyperStudio, the branching required for whatever object is clicked on, including the access code keypad, is done by just putting appropriate invisible buttons over the necessary locations in any given scene (card).  The result is a much simpler total design. 

Going Further with Games and Programming

“Jeopardy” Game 

In this Jeopardy game template, clicking on a text object uses the Text Mover MBA to move the contents of text objects on other cards (the answers and questions) into the text object at the chosen position in the game screen.

Spelling Exercise - Text Compare MBA

Using the Compare Text “More Button Actions” (MBA) function, this stack demonstrates how to compare text that is entered by the user to an anticipated correct response.

Object Sequencer Demo - Programming by Re-Ordering Objects

Using the Set Cursor Position “More Button Actions” (MBA) function, this stack demonstrates how to carry out a custom sequence of actions determined by what the user moves into a series of positions.  It is a very simplistic “engine”, but one with many possibilities.

“Virtual Scripting” - A Concentration Game

In HyperStudio, there is no written scripting language, but there is still a programming language: it's the structure created by the objects, their actions, and their interactions.

The Concentration Game works by using HyperStudio objects, and their actions and interactions as the equivalent structure of a programming language.  In fact, it’s even an exemplary case of “visual programming” or “object-oriented programming”.  This is a rather advanced discussion of the use of the Sequencer MBA, but it does show how much is possible using HyperStudio as a non-linguistic programming environment.

The Maze

With the “push” transitions, you can create a smooth “glide” from one card to another. If the images on each card “fit together” then it creates the illusion of moving over a continuous image. I extended that idea to navigate a maze. There are other ways to accomplish the navigation of a maze, but I thought this was an unexpected way to use the push transitions.

Bonus Tip: Using QuickTime Player 7.6.4

The other interesting part is how I deconstructed the Area 42 game in its original Scratch format.  What I did was to do a screen recording as a movie while playing the game on the Scratch web-page.

Then I loaded the movie into QuickTime player (use version 7.6.4, not the newer ones) and dragged particular frames from the movie to the HyperStudio application icon to create a card with just that image.  

Here is a general description of this process:
Open a HyperStudio stack with the card size the same as your movie (for example 480 x 360 for YouTube), and open the movie in QuickTime Player. (I use ClicktoFlash for converting YouTube to movies in QuickTime).

Now, on card 1 of your stack, just drag the single image of what you see in the QT Player to the HyperStudio card. It will come over as a very short time length movie object. You can center it with the Layout palette in HS, and then flatten it to the background if you wish, or convert it to a graphic object.

If you want to just instantly make a new card with that bit of the movie, you can just drop it on the HyperStudio program icon, and HS will make a card with that movie segment centered on the new card.

Now for the exciting part: If you use the little start and end markers just below the controller bar in QuickTime Player, you can select more than just the very little bit of the movie, and then drag that to HS.

For example, take a movie of any size, and in QT Player, use the beginning and end markers to pick a particular portion of a movie, in this case, perhaps 5 seconds. You'll see a part of the movie controller now in black as a selected portion.

Now, drag that to the HS icon with a stack that is 480 x 360 already open with a single card there. A new card will be made with just that movie segment in your stack

Repeat for a few more "selections" from the movie. Imagine that you're a reviewer doing your own "trailer", or a commentator on a particular sub-plot of the movie, or that you're commenting on the historical relevance, facts or errors in specific parts of a movie.

Within minutes, you will have a 3 or 4 card stack (or more) of all your selected movie segments card-by-card.

You can now build further on this by adding "commentary" buttons that the viewer can click on after having watched the movie segment, and another "next scene" button to advance through the commentary.

Within less than an hour, you can create a complete re-edit of any movie.

Making a Movie Trailer

If instead of the actual "commentary" buttons, you simply create "next card" buttons, you can use "Export to QuickTime with Narration" on the Mac version of HyperStudio, and just "talk through" the movie segments to create your "trailer" or your commentary on the movie. In just "one take", you'll have your new movie finished!

It can also be used as a fast way to make re-edits with narration of "home movies" or any other video of home, school, or family gathering events that you'd like to make an edited version of without having to spend a lot of time doing it.

* * * * *