Tutorial

Das kleine Programm "Tangram" wurde mit Flash 4 von Macromedia entwickelt. Das anschließende Tutorial soll durch die Entwicklung eines Projektes Schritt für Schritt in die Handhabung dieses grafischen Entwicklungssystems einführen. Es werden nach und nach kleine Tricks und Kniffe eingewoben, die im Kontext zu der jeweiligen Problemstellung stehen.

Der Quelltext des Programms ist auf der CD-ROM (tangram3.fla) und steht Ihnen für Lernzwecke zur Verfügung.

Auf die grundsätzliche Bedienung des Programms Flash 4 und die jeweiligen Werkzeug- und Menüleisten wird nicht eingegangen. Dafür liegen dem Programm Flash entsprechende Hilfen und Tutorials bei. Es gibt zu diesem Entwicklungsprogramm inzwischen einiges an Sekundärliteratur. Dieses ist auch Gegenstand der praktischen Einführung im Seminar.

Die Schritt für Schritt Anleitungen beziehen sich auf die deutsche Version von Flash 4. Die 30-Tage Demo-Version ist in englischer Sprache. Es sind dann die entsprechenden englischen Bedeutungen zu wählen. Die Tastaturbefehle sind identisch.
 

grafische Objekte

Schaltflächen

Aktionen

Instanzen

Ebenen in der Zeitleiste

Programmablauf

 

grafische Objekte

Wir entwerfen zuerst die grafischen Objekte, die im Programmablauf vorkommen. Hierzu ist gute Planung und Vorbereitung wichtig. Man kann auch kleine Versuche vorweg machen, um Arbeitswege  und -möglichkeiten auszuprobieren.
Tangram-Elemente sind geometrisch exakte Formen, die in einem mathematischen Abhängigkeitsverhältnis zueinander stehen. Deswegen benutzen wir für die Gestaltung die Assitent- und Fangoptionen von Flash:

Schritt für Schritt
Menü: Modifizieren/Film... Gitterabstand auf 8 Pixel setzen (alle anderen Grundeinstellungen bleiben)
Menü: Ansicht/Gitternetz aktivieren - macht ein Hilfsgitter sichtbar
Menü: Ansicht/Ausrichten aktivieren - fängt beim Zeichnen die Gitterschnittlinien und andere Zeichnungskanten ein
Tastatur: z - Arbeitsfläche etwas größer zoomen (mit der Taste Alt kann man zwischen größer und kleiner zoomen wechseln)
Wir brauchen für die größten Elemente ca. 128 Pixel Platz (d.h. ca 20 Kästchen sichtbar einstellen).
Tastatur: r - Rechteck-Werkzeug (Optionen einstellen: Linienfarbe unsichtbar (oben links im Dialogfeld); Füllfarbe nach Geschmack - auf Kontrast achten)
Maus: linke Taste mit der Tastatur: Umschalt-Taste zusammen zeichnet ein Quadrat - 16 Kästchen Kantenlänge
Tastatur: n - Linien-Werkzeug (Optionen einstellen: Linienfarbe schwarz; Haarlinienstärke)
Diagonale durch das vorher erstellte Quadrat ziehen; eine dreieckige Hälfte anklicken (Dreieck ist markiert)
Tastatur: F8 - in Symbol konvertieren; dadurch wird das Dreieck als wiederverwendbares Symbol in der Bibliothek gespeichert
im Dialog: Name - D1a; Verhalten - Filmsequenz
Schaltfläche: Symbole bearbeiten - Name auswählen
Tastatur: Strg Alt i - Objektinspektor
im Dialog: Option Mittelpunkt verwenden aktivieren; in Feld x: 32; in Feld y 32; Schaltfläche Anwenden
Schaltfläche: Szene bearbeiten - Szene auswählen
Tastatur: Entf - Symbol von der Arbeitsfläche löschen

Übertragungsauftrag
Der Rest der Quadratfläche kann noch einmal mittig geteilt werden, dann eines der entstehenden Dreiecke noch einmal mittig teilen; das Ergebnis sollen insgesamt drei Dreieck-Elemente sein: 1. Dreieck - Kathetenlänge von 128 Pixel (16 Kästchen), 2. Dreieck - Hypothenusenlänge von 128 Pixel (16 Kästchen), 3. Dreieck - Kathetenlänge von 64 Pixel (8 Kästchen)
Die Mittelpunkte der Symbole sollen jeweils in der Mitte der Dreiecke liegen.
Danach brauchen wir noch ein Quadrat mit der Kantenlänge von 64 Pixel (8 Kästchen) und eine Raute mit der kürzeren Kantenlänge von 64 Pixel (8 Kästchen) - wenn zwei kleine Dreiecke umgedreht aneinanderliegen bekommen wir die Form.

Schritt für Schritt
Tastatur: Strg l  oder Menü: Fenster/Bibliothek - in der Objektbibliothek können wir die Elemente verwalten
Maus: Doppelklick auf D1a - Bearbeitungsmodus für den Symbolfilm
Maus: Klick auf Bild 2 in der Zeitleiste
Tastatur: F6 - neues Schlüsselbild
Tastatur: n - Linienwerkzeug; Umrandung der Formenkanten des Dreiecks (im Bild 2 der Zeitleiste)
Tastatur: u - Füllwerkzeug; Optionen einstellen: Füllfarbe transparent oder hell oder nach Geschmack
Maus: Klick mit der rechten Maustaste auf Bild 1 in der Zeitleiste; Eigenschaften/Aktionen; auf das + Zeichen klicken und Aktion stop auswählen; ok-Taste
im Dialog Bibliothek: Maus: rechte Maustaste auf D1a; Dublizieren; Name - D1b; Verhalten - Filmsequenz

Übertragungsauftrag
Alle Symbole bekommen so ein zweites Filmbild, die Aktion stop bekommen alle Elemente im ersten Filmbild und das kleinste Dreieck soll zum Schluß noch dubliziert werden.


Bild 1: alle Einzelteile des Programms in der Objektbibliothek aufgelistet
 

Schaltflächen

Jetzt brauchen wir noch Schaltflächen, die dann im fertigen Programm jeweils für ganz bestimmte Zwecke eingerichtet werden. In der Objektbiliothek sind alle Schaltflächen aufgelistet. Diese brauchen wir nicht alle neu machen, sondern nutzen unsere schon vorhandenen Filmsequenzen ebenfalls dafür. Die Tangram-Elemente sind also auch als Schaltflächen zu definieren. Im Ordner "sonstige Button" sind die neu hinzugekommenen Objekte, die auch ganz neu zu entwerfen sind.


Bild 2: Die Schaltflächen (Button) im Programmprojekt

Wir ziehen aus der Objektbibliothek nacheinander die erstellten Filmsequenzen der Tangram-Elemente in die "Szene1" und platzieren sie entsprechend der obigen Abbildung. Die Button befinden sich zum größten Teil innerhalb einer Ebene, die wir "Button" nennen können.

Filmsequenz D1a wird mit der rechten Maustaste angeklickt. Eigenschaften auswählen.
Folgendes Dialogfeld öffnet sich:


Bild 3: Filme können auch als Schaltflächen behandelt werden, sie bekommen dadurch das Verhalten von Schaltflächen

Das Symbol D1a ist markiert. Das Verhalten stellen wir auf Schaltfläche. Die Maus soll dieses Element ebenfalls als Schaltfläche behandeln - Option Als Schaltfläche behandeln
Wir holen die Karte Farbeffekt hervor. Hier können wir eine Farbeffekt bestimmen, der für das ausgewählte Objekt nur hier in dieser Szene gilt.


Bild 4: Die Alpha-Einstellung (oder eine andere Einstellung) bestimmt in diesem konkreten Einsatz des Objekts seine Farbeigenschaften (hier die Transparenz)
 

Aktionen

Die Karte Aktionen ist nur beim Verhalten als Schaltfläche sichtbar. Diese Aktionen werden ausgeführt, wenn die Maus mit der Schaltfläche zusammentrifft. Die Scriptbefehle werden größenteils durch Button, Listen und Optionsfelder eingetragen.
Maustaste auf das Plus-Zeichen wählt aus einer Liste von Befehlsstrukturen. Wir wählen die folgenden aus:


Bild 5: Aktionen nennt man die Script-Sprache innerhalb von Flash. Sie können Schaltflächen oder Schlüsselbildern in der Zeitleiste zugeordnet werden.

zu 1: On (...) ... End On schließt alle Schaltflächenaktionen unter den anzugebenden Maus- oder Tastaturbedienungen ein.
zu 2 und 5: Begin Tell Target (...) ... End Tell Target schließt alle Aktionen ein, die ein Filmobjekt als benanntes Ziel ausführen soll.

die Bedeutung dieses Aktionsscripts in "Umgangsdeutsch":
Beim Loslassen der Maustaste über diesem Objekt oder dem Tastendruck "1" stoppe die laufende Filmsequenz, die mit der Variablen "Teil" bezeichnet wurde auf dem dortigen Bild 1.
Dann soll die Variable mit der Filmsequenzinstanz "/Dreieck1a" gefüllt werden (Filminstanz wird weiter unten erklärt).
Anschließend soll die Eigenschaft Sichtbarkeit der Filmsequenz mit dem Instanznamen "/klapp" auf Nichtsichtbar gestellt werden (Button nur für Element Raute notwendig, also nicht hier).
Jetzt soll die Filmsequenz (also D1a) auf das Bild 2 springen und dort stoppen. Ende dieser Mausaktion.
uff - und das alles im Moment des Loslassens der Maustaste oder dem Tastendruck "1".

Und was soll das alles? - Bedeutung: Markiere das dreieckige Element D1a auf der Arbeitsfläche! (welches wir dort noch platzieren müssen)


Bild 6: Der Objektinspektor informiert über einzelne Objekte und man kann darüber auch Ort, Größe und Drehung verändern.
 

Instanzen

Das Symbol R (Raute) verhält sich etwas anders. In dieser Aktion wird zusätzlich die Sichtbarkeit der Filminstanz /klapp gesteuert.


Bild 7: Hat ein Objekt das Verhalten einer Filmsequenz, kann man ihm einen Instanznamen geben, worüber man an anderer Stelle gezielt das Verhalten dieses Films steuern kann.

Wir erzeugen eine neue Ebene in der Szene 1 und nennen sie D1a. Die Ebene Button schließen wir gegen unbeabsichtigtes Editieren mit dem Schloßsymbol. Die Ebene D1a aktivieren wir und ziehen den Film D1a aus der Objektbibliothek auf die Arbeitsfläche.
Mausklick mit der rechten Maustaste auf diesem Film; Eigenschaften wählen - Wir belassen dieses Symbol in seinem Verhalten als Filmsequenz und vergeben den Instanznamen Dreieck1a. Durch diesen Instanznamen wird dieses Filmelement auch von anderer Stelle über die Aktionen ansprechbar.
Nun bekommt jedes Tangram-Element eine eigene Ebene, auf die jeweils das entsprechende Element gezogen wird. Die jeweiligen Instanznamen lauten: Dreieck1b, Dreieck2, Dreieck3a, Dreieck3b, Quadrat, Raute.
 

Ebenen in der Zeitleiste


Bild 8: In der Zeitleiste sind die Objekte aufgelistet, die zu einem bestimmten Zeitpunkt sichtbar sind und wie jeweils auf transparenten Folien übereinandergeschichtet sind. leerer Punkt - Schlüsselbild ohne Objektinhalt; voller Punkt - Schlüsselbild mit Objekt; graue Fläche - "Folie" ist sichbar; a - Aktionen (Script) in den Bildeigenschaften; rotes Fähnchen - Bildbezeichnung (zur Orientierung oder zum Aufruf); Pfeil über mehere Bilder - der Computer berechnet die Zwischenzustände von einem Schlüsselbild zum anderen

Auf die Ebene Hintergrund wird alles untergebracht, was sich über einen längeren Zeitraum nicht verändert und als "Folie" ganz unten liegt. Die Button für die Übungswechsel liegen auf einer eigenen Ebene (sie haben ein anderes Verhalten als die restlichen Button)
 

Programmablauf

Das fertige Programm besteht in der Logik von Flash aus 25 Bildern, davon sorgen 20 Bilder für den Vorspann, in dem die Tangramelemente auseinanderfliegen (und sich dabei teilweise drehen). Bild 20 zeigt die Programmoberfläche. Bild 21 bis 25 wechseln zu den Übungsvorlagenzeichnungen. Bild 26 ist ein Speicher das Erstellen neuer Übungen (also für den Programmierer) und darin befindet sich eine Aktion, die öfter aufgerufen werden soll.

Im Szenenbild 1 wird über eine Aktion eine Initialisierung der Variablen Teil (also des jeweils aktiven Elements) vorgenommen; für "nichts" hätte auch etwas anderes stehen können, das kein Element beschreibt - im Anfang soll kein Element markiert sein.

Rechte Maustaste auf das das erste Bild der obersten Ebene - Eigenschaften auswählen - Karte Bezeichnung anklicken - init als Bezeichnung eintragen. Dann Karte Aktionen anklicken - plus-Zeichen - Set Variable auswählen und Teil als Variable und nichts als Wert eintragen.

Bild 9: Initialisierung der Variablen Teil

Fügen Sie die Szenebilder bis Bild 20 wie in dem Beispiel zusammen.
Die Aktion in Bild 20 hat folgenden Inhalt:

Stop
Set Variable: "Uebung" = 1
Set Variable: "TextField1" = "1"
Call ("init1")

Stop hält die Szene hier an. Die Variablen Uebung und TextField1 brauchen wir zum Hochzählen der Übungen und für den Inhalt des Textfeldes (in der Ebene Button). Call () bedeutet, daß ab dieser Stelle eine kleine Aktion abläuft, die sich im Bild 26 mit der Bezeichnung init1 befindet:

Bild 10: Bezeichnung eines Bildes in der Szene, hier zum Aufrufen einer Aktion von anderer Stelle


Bild 11: Die Aktionen von init1.

Mit dieser Aktion wird ein Element "Teil" (kann jedes Tangram-Element sein) auf das Bild 1 der jeweiligen kleinen Filmsequenz eingestellt und gestoppt. Die Variable "Teil" wird neu initialisiert der Button klapp (Raute spiegeln) wird auf unsichtbar gestellt.
Vor jeder neuen Übung muß dieses gewährleistet sein. Also ruft jedes Übungsbild (21 - 25) wieder init1 auf:

Bild 12: Jede Übung ruft erst init1 auf

Auch wenn weitere Übungen aufgerufen werden, bleiben die Inhalte aus Bild 20 (Alle Tangram-Teile und die Button) bestehen.
Die häufigste Aktion findet auf der Arbeitsfläche ("Spielwiese") statt. Diese Arbeitsfläche ist ein großer transparenter Button, der folgende Aktion beinhaltet:

Bild 13: Die Schaltfläche "Spielwiese", d.h. die Arbeitsfläche sorgt für das "Drag und Drop" von Elementen

Start Drag ( ) ist eine Funktion, die das Element Teil mit der Maus mitgehen läßt (solange die Maustaste gedrückt ist), beim Loslassen der Maus wird die Funktion Stop Drag ( ) aktiv. Bei einem Tastendruck o dreht sich das Element Teil in 5° - Schritten.


Bild 14: Die Aktionen für die Drehungen und das Spiegeln von Elementen


Bild 15: Diese Aktion beschreibt den "Schalter", der die Übungen sequenziell aufruft (analog zu Symbol vor verhält sich das Symbol back)