Puzzle

Thema: puzzle Description: Ein Puzzle gestalten, die Teilchen nehmen den richtigen Platz ein, wenn sie in dessen Nähe geschoben wurden, Drehteilchen, Sound, Gitternetz usw nach Wunsch Keywords: Flash, Puzzle, Author: Almut Hubrich Date: 11.7.01 Doc-ID: 45-001 URL: http://www.uhustein.de Version: Flash 4 und Flash 5 Änderungen: - Anforderungen: - Vorkenntnisse: Grundkenntnisse Flash Download: PC: flash4puzzle,flash5puzzle MAC: flash4puzzle,flash5puzzle

Einleitung

  Was bringt dieses Tutorial?

  Die Teile

  Aktionscript

Was bringt dieses Tutorial?

Ein Puzzle gestalten, die Teilchen nehmen den richtigen Platz ein, wenn sie in dessen Nähe geschoben wurden, Drehteilchen, Sound, Gitternetz usw nach Wunsch




Die Teile

Achten Sie beim Nachbauen darauf, dass Sie kein einzelnes Teilchen verschieben. Das Puzzle "paßt" dann nicht mehr. Verschieben Sie gegebenenfalls nur alle gemeinsam.

Zeichen Sie das Gitternetz des Puzzle.

Es darf keine Lücken haben. Sie können sonst die Felder nicht einzeln füllen. Suchen Sie diese gegebenenfalls mit der Lupe, oder erhöhen Sie die "Lücken-größe" (Zusatztaste vom Fülleimer)

Füllen Sie die einzelnen Felder.

Deren Farbe ist gleichgültig, da sie später den Alphawert =0 (unsichtbar) erhalten. Diese Felder werden die "Platzhalter" für die Puzzleteile. Wird ein Teilchen darübergeschoben bewerten sie, ob es hier hineinpaßt oder nicht. Wenn es passt ziehen sie es "magnetisch" an. Dazu brauchen sie einen abrufbaren Namen. Deshalb müssen es Filminstanzen sein.

Erstellen Sie aus den gefüllten Felder Filmsymbole. Geben Sie ihnen die Namen a1 - a9. Nennen Sie die Instanzen genauso.

Importieren Sie Ihr gewünschtes Bild als Bitmapdatei. Es soll die gleiche Größe haben wie das Gitternetz. "Teilen" Sie es. (Menüleiste > "Modifizieren" > "Teilen")Legen Sie das Gitternetz genau darüber. Es teit die Puzzleteile. Sie können diese nun einzeln aktivieren.

Erstellen Sie nun die Puzzleteile. Konvertieren Sie sie erst in Schaltflächensympole b1 - b9 und diese in die Filmsymbole c1 -c9 . Bezeichnen Sie die Instanzen dieser Filmsymbole ebenfalls mit c1 -c 9

Die Schaltflächen machen es später möglich die Puzzleteilchen im Spiel mit "Drag and Drop" zu verschieben. Die Filmchen c1 - c9 werden die Kernstücke des Spiels. Sie werden die wichtigsten AktionScript - Anweisungen enthalten.

Konvertieren Sie das Gitternetz in ein Grafigsymbol und dieses in ein Filmsymbol. Nennen Sie deren Instanz "Gitter2".

Legen Sie "Gitter2" genau über die Platzhalter und darauf die Puzzleteile.

Das Übereinanderlegen muß genau stimmen. Verschieben Sie die Platzhalter oder die Puzzleteile immer gemeinsam. Nutzen Sie beim Übereinanderlegen den "Inspektor" ( Menüleiste > "Fenster" > "Inspektoren" > "Objekt") . Hier können sie jedesmal genau die gleich Position angeben.

Jetzt fehlt nur noch das Aktionscript!




Aktionscript

Damit das Puzzle in seiner Grundform funktioniert, benötigen lediglich die Filminstanzen c1 - c9, die Puzzleteilchen, Anweisungen in Aktionscript.



Wechseln Sie in den Bearbeitungmodus des Filmsymbols "1" (Doppelklick auf das dazugehörende Bildchen in der Bibliothek). Der Film hat bis jetzt ein Schlüsselbild mit dem Puzzleteilchen auf einer Ebene. Nennen Sie diese Ebene "Bild". Setzen Sie eine weiter Ebene darüber. Nennen Sie diese "Steuerung". Geben Sie dieser Ebene 3 leere Schlüsselbilder. Die untere Ebene bekommt ein weiteres volles Schlüsselbild im dritten Bild mit gleichem Inhalt.



Was soll das Puzzleteichen tun?



Bild 1

Schaltfläche

Es soll sich mit Drag and Drop verschieben lassen. Die integrierte Schaltfäche bekommt also die Anweisung:

On (Press)

Start Drag ("", lockcenter)

End On

On (Release)

Stop Drag

End O



erstes Schlüsselbid

für flash 4:

Im ersten Schlüsselbild wollen Sie wissen, über welchem Film sich das Puzzleteilchen gerade befindet. Die passende Aktionscript - Anweisung ist Get(Property("",_droptarget).

Das heißt erst soll ermittelt werden (GetProperty) über welchen Film (droptarget) dieser Film ("") geschoben wurde (Ganz genau über welchen Film die Mauszeigerspitze mit diesem Film geschoben wurde).

Daraus machen Sie eine "Wenn/ Dann" Anweisung:

Wenn (if) er über dem Film "/a1" ist (eq) soll er eine neue X-Position und eine neue Y-Position einnemen (Set Property ("", X-Position), Set Property ("", Y-Position)). Nämlich die von "/a1" (GetProperty ( "/a1", _x ),GetProperty ( "/a1", _y )). Außerdem soll der film auf Bild 3 springen und dort stoppen (Go to and Stop (3)).



Geben Sie also dem ersten Bild die Anweisung:

If (GetProperty ( "", _droptarget) eq "/a1")

Set Property ("", X-Position) = GetProperty ( "/a1", _x )

Set Property ("", Y-Position) = GetProperty ( "/a1", _y )

Go to and Stop (3)

End If



für flash 5:

Im ersten Schlüsselbild prüfen Sie, ob das Teilchen schon fast an seinem Platz ist. Also ob sich Teilchen und sein Platzhalter schon berühren ( hittest):

if (this.hitTest(_root.a1)) {

wenn dem so ist, soll das Teilchen die Position seines Platzhalters einnehmen:

this._x = _root.a1._x;

this._y = _root.a1._y;

Außerdem soll der film auf Bild 3 springen und dort stoppen :

gotoAndStop (3);}

Geben Sie also dem ersten Bild die Anweisung:

if (this.hitTest(_root.a1)) {

this._x = _root.a1._x;

this._y = _root.a1._y;

gotoAndStop (3);}



Bild 2

Bei Fehlanzeige, wenn "if" also nicht zutrifft, springt der Film auf Bild 2. Dort wird er wieder auf Bild 1 geschickt zum erneuten Prüfen. Anweisung:

Go to and Play (1)



Bild 3

Schaltfläche

Das Puzzleteilchen ist am Ziel. Es soll sich nicht mehr verschieben lassen. Vergewissern Sie sich, dass die Schaltfläche hier keine Aktionen enthält.

leeres Schlüsselbild

"Drag and Drop" soll aber sofort gestopt werden und nicht erst, wenn das nächste mal auf das Teilchen gedrückt wird. Anweisung:

Stop Drag

Bearbeiten Sie nun auch die anderen Puzzleteilchen, die Filme c2 - c9 entsprechend. Die Platzhalter

heißen jetzt "/a2" - "/a9". Testen Sie das Puzzle. Es müsste jetzt funktionieren.

Ausgestaltung

Das Puzzle funktioniert so, läßt sich aber noch ausgestalten:

Die Platzhalter können eine einheitiche Farbe - besser überhaupt keine - bekommen.

Die Puzzleteilchen können mit einem Sound auf ihre Plätze rutsche (Sound im dritten Bild)

Die Puzzleteilchen können drehbar sein ( eine kleine Schaltfläche auf den Teilchen dreht diese bei Anklicken jeweils um 90 Grad weiter, auch das aktionscript muß erweitert werden))

Das Gitternetz kann nach Wunsch sichtbar oder unsichtbar sein ( Schaltfläche die Film "Gitter2" visible=0 bzw visible=1 setzt)

Ein Rand um das Teilchen über dem die Maus ist - damit man weiß welches gemeint ist - (die Schaltflächen b1-b9 bekommen beim zweiten Bild "darüber" diesen Rand.

Die Teilchen sollen erst reagieren, wenn sie "genauer" über den Platzhalter stehen (scalieren Sie die Platzhalter kleiner)

Vorschaubild (kein Problem?)

Nachwort: Das puzzle ist schon ziemlich alt. Das actionscript würde ich heute anderst machen. Aber die Teile würde ich wohl wieder so entwickeln. Wem das alles zu langwierig ist, kann sich auf meiner homepage "www.uhustein.de" ein "puzzle-modul" herunterladen - einfach das Bild auswechseln - und Ihr puzzle ist fertig.