Yeah, me

Foto: Uwe Pirr

Informatik

Programmieren in HyperTalk, Teil IV

Wenn schon "ein Bild mehr als tausend Worte" sagt, wieviel mehr sagt dann erst eine animierte Bildsequenz aus? Und so wollen wir im vierten Teil dieses kleinen HyperTalk-Workshops uns mit den Möglichkeiten beschäftigen, die HyperCard uns bietet, um eigene kleine Animationen zu gestalten. Zwar besitzt HyperCard nicht die Animationsmöglichkeiten, die entsprechend spezialisierte Programme wie etwa Macromind Director bieten, aber für kleine Sequenzen und zur Programmierung von einfachen Spielen reichen die Fähigkeiten durchaus.

Unser erstes kleines Beispiel führt uns in die Animation mit HyperCard ein (Bild 1). Wir legen uns als erstes einen neuen Stack an. Im Hintergrund-Mode zeichnen wir die Berge, den See und den Himmel (den "Zeichenblock" habe ich aus dem mit HyperCard mitgelieferten Stack Background Art entnommen). Die Knöpfe prev, quit und next können Sie ebenfalls als Background-Buttons anlegen (Listing 1). Da wir allerdings in diesem Stack fast jede Karte mit einem eigenen Hintergrund versehen - auch wenn alle Hintergründe aus ästhetischen Gründen ähnlich aussehen - ist dies an dieser Stelle bedeutungslos. Wichtig ist nur, daß diese Knöpfe auf allen Karten das gleiche Skript beinhalten.

Bild 1: Titelkarte

Die Insel mit den Palmen und dem Türmchen bitte noch nicht zeichnen, die kommt später in den Vordergrund der Karte. Doch erst einmal legen wir noch zwei weitere Hintergrundknöpfe an, die wir "Kogge" und "Juggler" nennen. Der Stil von Kogge ist transparent, der von Juggler opaque. Unter dem Menü "Edit" finden wir auch den Eintrag "Icon...". Dahinter verbirgt sich ein kleiner, dennoch leistungsfähiger Icon-Editor, den wir benutzen, um das Icon der Kogge zu zeichnen. Ich habe das Bild der Kogge aus dem ebenfalls mit HyperCard mitgelieferten Stack "Art-Bits" ausgeborgt und ein bißchen bearbeitet (Bild 2).

Bild 2: HyperCards Icon-Editor

Menschen mit größerer zeichnerischer Begabung als ich können hier auch beliebige eigene Schiffe, Fische oder anderes schwimmendes Getüm einsetzen.

Den Knopf Juggler belegen wir mit dem Icon "Juggler", das die niedrigste ID-Nummer besitzt. Bei mir war das die Nummer 21573. Diese Nummer kann jedoch bei anderen HyperCard-Versionen eine andere sein. Dann dürfen wir endlich in den Vordergrund-Modus gehen und die Insel zeichnen. Ich habe sie ebenfalls aus dem Arts Bit Stack entnommen und bearbeitet. Wichtig ist, in das Türmchen mit dem Radiergummi ein Fenster zu "zeichnen" in das der Jongleur sichtbar hineinpaßt. Nun haben wir alle Vorbereitungen getroffen und können unsere Animationen programmieren.

Visual Effects

Die einfachste Form der Animation, die HyperCard erzeugen kann, sind Überblendeffekte von einer Karte zur nächsten. Die Programmierung ist simpel, für den Knopf next lautet sie z.B.:

	on mouseUp
	  visual effect wipe left slow
	  go next cd
	end mouseUp

Der "Wischer nach links" ist nur einer von vielen möglichen Überblendungen. In der Dialogbox zu den Knöpfen finden sie unter "Effect..." noch viele weitere, die alle mit der Geschwindigkeit fast, normal, slow und very slow programmiert werden können. Bitte experimentieren Sie ruhig mit diesen Effekten, um sie alle einmal kennenzulernen. HyperCard schreibt den entsprechenden Programmteil sogar selber, wenn Sie die Überblendeffekte in der Dialogbox auswählen. Probieren Sie das aus und schauen Sie dann im Skript nach, was passiert.

Icon-Animation

Eine weitere einfache Form der Animation führen wir am Beispiel des Jongleurs vor: In jedem gedachten Zeittick wechseln wir einfach das Icon des Knopfes "Juggler" aus:

	put 21573 into jugg
	repeat with i = 1 to 85
	  set the icon of bg button "Juggler" to jugg + i MOD 4
	end repeat

Bei HyperCard werden vier verschiedenen Juggler-Icons mitgeliefert, die - wie schon oben erwähnt - in meinem Stack die Nummern 21573 bis 21576 tragen. Obiges Codefragment sorgt mit Hilfe des Modulo-Operators dafür, daß sich 85 mal das Icon ändert. Dadurch entsteht, wie bei einem Daumenkino, der Eindruck der Bewegung. Der Jongleur spielt mit den Bällen.

Eine weitere Form der Icon-Animation ist die Veränderung des Ortes des Icon. Wenn wir in obige Schleife noch folgendes einfügen,

	put 50 into xKoord
	put 230 into yKoord
	repeat with i = 1 to 85
	  add 5 to xKoord
	  set the loc of bg button "Kogge" to xKoord, yKoord
	end repeat

dann bewegt sich die Kogge von links nach rechts über unsere Karte. Da die Kogge ein Backgroundbutton ist, unsere Insel aber im Vordergrund gezeichnet wurde, sieht es so aus, als ob die Kogge hinter unserer Insel vorbeisegelt. Dieser kleine Trick gibt der Animation die Illusion von Tiefe.

Je nach Leistung Ihres Rechners erscheint die Bewegung mehr oder weniger ruckartig. Insbesondere, wenn HyperCard viel neuzeichnen muß - z.B. wenn die Kogge hinter der Insel liegt - kann die Bewegung sehr langsam werden. Wenn die Animation zu langsam abläuft, prüfen sie im Kontrollfeld "Gemeinschaftsfunktionen", ob File Sharing ausgeschaltet ist. Ausgeschaltetes File Sharing beschleunigt HyperCard gerade bei der Grafikausgabe um ein Vielfaches.

Alle diese Animation sind im Knopf Animate untergebracht.

Wir werden im Verlauf dieses Kursteiles noch eine Möglichkeit kennenlernen, Animationen fließender ablaufen zu lassen.

Text Animation

Eine ebenfalls simple, aber eindrucksvolle Animation kann mit folgendem Codefragment erzeugt werden:

	set textFont to "New York"
	set textSize to 24
	set textStyle to outline
	click at 75, 45
	type "MacOpen proudly presents:"
	wait 2 seconds
	doMenu "Revert"
	click at 75, 45
	type "Animations with HyperCard"
	wait 2 seconds
	doMenu "Revert"

Hier wird einfach ein Titel oben in die Karte geschrieben und wieder gelöscht. Ebenso einfach lassen sich Texte programmgesteuert in Textfelder schreiben und wieder löschen. Textfelder lassen sich wie Buttons mit set the loc of [cd, bg] field <name> to <x, y> bewegen. (Oder auch mit drag, siehe unten.) Geschickt eingesetzt lassen sich so fast alle Formen von Rolltiteln, wie wir sie aus dem Kino kennen, in HyperCard verwirklichen.

Zwischen Vorder- und Hintergrundbild wechseln

Für die nächste Animation benötigen wir eine neue Karte. Diese legen wir jedoch nicht mir "New Card", sondern mit "New Background" an, da wir den Background der Titelkarte nicht mitkopieren wollen. Wenn Sie möchten, können sie sich wieder den Zeichenblock als Hintergrundbild anlegen, nötig ist dies jedoch nicht. Sie sollten allerdings die drei Hintergrundknöpfe von der Titelkarte auf unsere neue Karte kopieren.

Bild 3: Hintergrundzeichnung

Wir wollen eine kleine Animation programmieren, die sich gut für Lexika oder Unterrichtszwecke eignet. Mangels künstlerischer Fähigkeiten habe ich auch das Skelett aus dem Arts Bit Stack entnommen, ebenso wie das Muskelpaket (Bild 4), das im Vordergrund genau über das Skelett gelegt wird:

Bild 4: Vordergrund der Mini-Anatomie

Der Vordergrundknopf "Ausziehen" benötigt nur ein winziges HyperTalk-Skript, um zwischen Muskeln und Skelett hin und her zu schalten:

	on mouseUp
	  if the hilite of me is TRUE then
	    -- hide bg picture
	    show cd picture
	    set the name of me to "Ausziehen"
	    set the hilite of me to FALSE
	  else
	    hide cd picture
	    -- show bg picture
	    set the hilite of me to TRUE
	    set the name of me to "Anziehen"
	  end if
	end mouseUp

Wer diese Karte zu einer kompletten Anatomie ausarbeiten möchte, sollte folgendes beachten: Es ist sehr mühselig, die einzelnen Linien und Beschriftungen genau übereinander zu legen. Ein Ausweg bietet die im obigen Skript auskommentierte Möglichkeit, Vorder- und Hintergrundbild jeweils wechselseitig auszuschalten. Bei dem Befehl hide bg picture verschwindet dann aber auch der Zeichenblock. Entweder Sie verzichten ganz auf ihn oder sie kopieren ihn auch auf das Vordergrundbild. Dann müssen Sie aber darauf auchten, daß beide Bilder genau zur Deckung kommen.

Alle Texte, die im Vorder- wie im Hintergrund sichtbar sein sollen, sollten als Textfelder realisiert werden (in unserem Beispiel die Überschrift "Mini-Anatomie"), die anderen Texte müssen aus praktischen Gründen ausnahmsweise mit dem Text-Tool des Paint Mode geschrieben werden. (Zwar können, wie wir in einer der vorherigen Folgen gesehen haben, auch Textfelder mit show oder hide gezeigt resp. verborgen werden, jedoch ist es in diesem Fall problematisch, bei jedem Umschalten eine größere Anzahl von Textfeldern ein- bzw. auszuschalten.)

Ansonsten liebe Leserin, lieber Leser, nehmen Sie ein Lehrbuch der Anatomie zur Hand (vgl. Literaturhinweise). Ihrem Tatendrang steht nichts im Wege.

Das Bill-O-Meter

Die Möglichkeiten der Button-Animation können natürlich auch kombiniert werden. Auf unserer nächsten Karte, die wir wieder mit "New Background" anlegen, werden wir einen Button gleichzeitig bewegen und animieren: Dazu gehen wir erst einmal in den Icon Editor und modifizieren das Icon "Bill" wie in folgendem Bild (Bild 5):

Bild 5: Bill lacht, ist ernst und ist sauer

Bill geht regelmäßig ins Kasino um "Kopf oder Zahl" zu spielen. Dieser einfache Münzwurf ist seinen intellektuellen Fähigkeiten gerade angemessen. Bill nimmt sich vor, bei jedem Spiel nur maximal vier Dollar einzusetzen (aufgrund eines frühkindlichen Traumas befürchtet er sonst die völlige Verarmung). Wenn die vier Dollar verloren sind, startet Bill ein neues Spiel. Hat er seinen Einsatz verdoppelt, also acht Dollar gewonnen, hört er ebenfalls auf, um ein neues Spiel zu starten. Bills Gemütszustand und die Höhe seiner jeweiligen Gewinne kann man am Bill-O-Meter ablesen (Bild 6):

Bild 6: Das Bill-O-Meter

Das gesamte Skript liegt hinter dem Card Button "Start Game" und kombiniert nur Techniken, die wir im Verlauf dieses Kurses schon kennengelernt haben. "Gewonnen" und "Verloren" sind ebenfalls Knöpfe, Bill selber ist ein Knopf mit dem Namen "Bill", die Icons sind von "Bill1" bis "Bill3" durchnumeriert. Die Dollaranzeige ist ein Textfeld mit dem Namen "Kasse". Die einzelnen Locations habe ich über die Message-Box mit the loc of cd button <name> bekommen, da ich die Karte aus "freier Hand" gezeichnet habe. Dadurch sind einige recht krumme Werte zustande gekommen.

Dies ist alles, was Sie wissen müssen, um das Listing zu verstehen.

Das Bill-O-Meter ist die einfachste Form eines zweidimensionalen Random-Walks, der in der Simulation eine bedeutende Rolle spielt. Hier simuliert Bill das Gamblers Ruin Problem. Die Idee dazu fand ich in Varian (Ed.): Economic and Financial Modeling with Mathematica, New York 1993. Hier findet die Leserin oder der Leser weitere Anregungen, wie das Problem behandelt und programmiert werden kann.

Rekursion und "Die Türme von Hanoi"

Einem Bonmot aus Dal Cin/Lutz/Risse (Programmieren in Modula-2, Stuttgart 1989) zufolge, ist ein Programmierkurs ohne "Die Türme von Hanoi" genauso unvollständig wie ein Mathematikbuch ohne das "Zornsche Lemma". Für die Wenigen, die die Türme von Hanoi noch nicht kennen, hier erst einmal die Geschichte:

In Hanoi steht ein Tempel des Brahma, in dem fleißige Mönche 64 schwere Metallscheiben von einem Stapel auf einen anderen schichten. Die Scheiben sind so schwer, daß immer nur eine einzige bewegt werden kann. Die Mönche benutzen drei Stapel, einen Start-, einen Hilfs- und einen Zielstapel und die strenge Regel des Brahma besagt, daß niemals eine größere Scheibe auf einer kleineren liegen darf. Die Legende berichtet, daß an dem Tag, an dem es den Mönchen gelungen ist, alle Scheiben in der richtigen Reihenfolge auf den Zielstapel zu legen, das Ende der Welt gekommen sei. Da ich nicht an dem Ende der Welt schuld sein will, ist mein Turm von Hanoi kleiner, er hat nur fünf Scheiben:

Bild 7: Die Türme von Hanoi

Das darunterliegende HyperTalk-Programm ist jedoch so allgemein gehalten, daß eine Erweiterung auf 64 Scheiben ohne weiteres möglich ist. Und wenn die Leserin oder der Leser dann genügend Geduld haben, können sie ihren HyperCard-Stack bis zum Ende der Welt beobachten...

Der Grund für die Beliebtheit der Türme von Hanoi in Programmierlehrbüchern ist der, daß sie sich leicht rekursiv programmieren lassen. Als Beispiel für eine Rekursion mag die bekannte Camenbertschachtel mit dem Rotkäppchen auf dem Etikett dienen: Rotkäppchen trägt einen Korb, auf dem eine Camenbertschachtel mit Rotkäppchen und einem Korb mit einer Camenbertschachtel abgebildet ist. Auf dieser Camenbertschachtel ist wiederum Rotkäppchen mit einem Korb und einer Camenbertschachtel abgebildet, auf der Rotkäppchen einen Korb mit einer Camenbertschachtel trägt... Lassen wir das, an dieser Stelle bricht die Rekursion aus drucktechnischen Gründen (so kleine Rotkäppchen können nicht mehr gedruckt werden) ab.

Die Rekursion bei den Türmen von Hanoi geht davon aus, das es offensichtlich recht einfach ist, einen Stapel mit nur zwei Scheiben korrekt zu bewegen: Die obere kleinere Scheibe wird vom Startstapel auf den Hilfsstapel gelegt. Dann wird die untere größere Scheibe vom Startstapel auf den Zielstapel geschoben und dann die kleinere Scheibe vom Hilfsstapel auf den Startstapel. Alles klar? Rekursiv gedacht bedeutet das, daß die Prozedur Hanoi solange mit einer kleineren Anzahl von Scheiben erledigt wird, bis dieser einfache Fall eintritt. In der Notation von HyperTalk sieht das so aus:

	on hanoi hoehe, start, ziel, hilf
	  if hoehe = 0 then
	    exit hanoi
	  end if
	  hanoi hoehe-1, start, hilf, ziel
	  verlegeScheibe hoehe, start, ziel
	  hanoi hoehe-1, hilf, ziel, start
	end hanoi

Das Handle hanoi ruft sich von innen immer wieder selber auf, solange bis die Anzahl der Scheiben (hoehe) gleich Null ist. Das ist das ganze Geheimnis der Rekursion. Bei Hofstadter (Metamagicum, Stuttgart 1991) finden Sie eine witzige, in LISP programmierte Lösung, die als Vorbild für obiges HyperTalk-Fragment gedient hat. Hofstadters "LISP-Genie" druckte jedoch nur "rm", "ml" etc. für "rechts nach mitte", "mitte nach links" aus; HyperCard jedoch kann Animationen und Grafik, daher ist das Handle verlegeScheibe in unserem Beispiel recht aufwendig gestaltet.

Erst einmal müssen wir die notwendigen Koordinaten bestimmen: Der Fußpunkt des Startstapels liegt bei (100, 250), der des Hilfsstapels bei (250, 250) und der des Zielstapels bei (400, 250). Die Karte selber können wir diesmal mit "New Card" anlegen, der Hintergrund ist mit dem Bill-O-Meter identisch. Die Stapel habe ich dann gezeichnet, indem ich das Line Tool ausgewählt und die entsprechenden HyperTalk-Befehlen in der Messagebox abgesetzt habe:

	drag from 100, 250 to 100, 200

zeichnete so die Senkrechte des Startstapels. Die anderen Linien wurden ähnlich erstellt. Die Koordinaten wurden als "Funktionskonstanten" im Karten-Skript hinterlegt, damit die Handle beider Buttons darauf zugreifen können. Als nächstes wurden die Scheiben als Vordergrund-Buttons realisiert. Wichtig für unser Skript ist dabei, darauf zu achten, daß die kleinste Scheibe die Nummer 1, die nächstgrößere die Nummer 2 usw. bis zur größten Scheibe, die die Nummer 5 bekommt.

Die Animation wird ebenfalls mit dem drag-Befehl realisiert. Mit dem Befehl

	set dragspeed to 100

wird eine gleichmäßige Bewegung garantiert. Die Animation verläuft also nicht so ruckartig, wie bei dem Beispiel auf unserer ersten Karte. Der Nachteil ist allerdings, daß zum Ziehen der Buttons das Button Tool ausgewählt sein muß. Unsere Hintergrundknöpfe auf der Karte bekommen dadurch während der Animation einen Rahmen. Außerdem wird jedesmal abgefragt, wieviel Scheiben schon auf dem jeweiligen Stapel liegen und dies im Container stapel festgehalten. Mit

	bottomLine() - 24*stapel - 13

wird dann die Stapelhöhe bestimmt. 24 ist dabei die Höhe meiner Scheiben, 13 (fast) die Hälfte davon. Diese Werte müssen Sie gegebenenfalls abändern.

Der Button "Initialize" sorgt nur dafür, daß alle Scheiben wieder auf den Zielstapel abgelegt werden und ist vor jedem Start zu betätigen, da in dieser Version nicht nachgeprüft wird, ob die Scheiben zu Beginn auf dem Startstapel liegen. Diese einfache Erweiterung sei dem Leser zur Übung hinterlassen. (Hinweis: mit the loc of cd button <Nr> kann die Position jeder Scheibe abgefragt werden.)

Ansonsten kann das Programm sehr leicht auf eine größere Anzahl von Scheiben erweitert werden. Nur denken Sie bitte daran: Wenn 64 Scheiben vom Startstapel auf den Zielstapel gelegt worden sind, ist das Ende der Welt erreicht. Und möchten Sie daran Schuld sein ... ?

Wie weiter?

Natürlich wünscht man sich manchmal ausgefeiltere Animationen, als sie mit den Mitteln von HyperTalk möglich sind. Hier gibt es zwei Lösungen. Zum ersten gehört zum Lieferumfang von HyperCard ein Set von externen Funktionen (Quick Time Tools) mit dem es möglich ist, Quick Time Filme in HyperCard abzuspielen. Zum anderen wurde bisher mit HyperCard 2.3 das Programm AddMotion ausgeliefert, das es erlaubt, interaktiv sehr komplexe Animationen und Zeichentrickfilme zu erstellen, die ebenfalls in HyperCard abgespielt werden können. Damit bleiben dann dem Multimedia-Begeisterten keine Wünsche mehr offen.

Literatur

H.J. von Brandis: Anatomie und Physiologie für Schwestern und ärztliche Mitarbeiter, Stuttgart (Gustav Fischer Verlag) 5. Auflage 1977

Georg Colourus, Harold Thimbleby: HyperProgramming. Building interactive programs with HyperCard, Wokingham (Addison-Wesley) 1992

Dal Cin/Lutz/Risse: Programmieren in Modula-2. Eine Einführung in das modulare Programmieren mit Anwendungsbeispielen unter UNIX, MS-DOS und TOS, Stuttgart (Teubner) 4. Auflage 1989

Adolf Faller: Der Körper des Menschen, Stuttgart (Thieme) 7. Auflage 1976

Peter A. Gloor: Hypermedia-Anwendungsentwicklung. Eine Einführung mit HyperCard-Beispielen, Stuttgart (Teubner) 1990

Douglas R. Hofstadter: Metamagicum. Fragen nach der Essenz von Geist und Struktur, Stuttgart (Klett-Cotta) 1991

Hal R. Varian (Ed.): Economic and Financial Modeling with Mathematica, New York (Telos/Springer) 1993