*     Kieselsteine Tutorial *


Figuren Tutorial   | Tutorial zu Pfaden   | Tutorial für Masken   | Tween's
Button's   | MovieClip   | Cinema 4d   |

Blender 2.5 VideoTutorials

FlashVideoTutorials

Video Tutorials

HTML, CSS, javaScript

Webseite der Kieselsteine

Kieselsteine Blog

Seite 1   |    Seite 2   |    Seite 3   |    Seite 4   |    Seite 5     Seite 6

Die Fla's zum herunterladen
rechts klicken und Ziel speichern unter wählen.

Giraffe.fla

Tutorial über MovieClip
Zum Thema HitTest() und Drag and Draw und der Methode swapDepths()

Giraffe.fla:
            

Das Giraffe.fla ist schon etwas komplexer. Um es besser verstehen zu können nun alle Zutaten der Reihe nach.

Obwohl im obigen Beispiel die HitTestMethode nicht auf den ersten Blick zu erkennen ist, bildet sie darin ein der wichtigen GrundPfeiler.

Hier also ein einfachers Beispiel, das zeigen soll, wie die hitTest() Methode funktioniert; (hitTest.fla unten)

Es gibt zwei arten von der hitTest() Methode. Ich brauche hier die einfachere. Sie erwartet einen Parameter. Es wird der Name und Pfadangabe einer Instanz von einem anderen MovieClip oder einer Schaltfläche erwartet. Ja Du kannst auch Schaltflächen Instanzen einen Namen geben. (Bild 1 unten)
Dazu klickst Du sie an und schreibst auch unten im Eigenschaftsfenster den Namen ein.

Bild 2:
Bild 1:


Die hitTestMethode, die ich hier brauche sieht im allgemeinen so aus

Dein_movieClip.hitTest(Dein_ZielMovieClip);

Als Zield kannst Du auch eine Instanz einer Schaltfläche angeben.

In Beispiel hitTest.fla sind zwei Blumen. Sie sind Instanzen von den MovieClip "blume1" und "blume2" mit den InstanzenNamen "blume1" und "blume2".
Dazu die Schaltfläche mit dem InstanzenNamen "hand". Das ergibt folgendes im MovieClip "blume1";

onClipEvent (enterFrame) {
     if (_root.streichel == 1) {
          if (this.hitTest(_root.hand)) {
              gotoAndPlay(2);
          }
     }
}


Fangen wir mit der innersten Klammer an;

          if (this.hitTest(_root.hand)) {
              gotoAndPlay(2);
          }


Hier siehst Du die hitTest- Abfrage in einer if- Abfrage
this bezieht sich auf sich selber in dem Fall die Instanz "blume1"
Wenn diese Instanz also das Objekt _root.hand berührt das ist die Schaltfläche mit dem Instanzen Name "hand", dann soll die "blume1" auf das zweite SchlüsselBild gehen und "playen".

Das nächst äussere Klammerpaar ist diese if- Abfrage;

     if (_root.streichel == 1) {
          }


Auf der RootZeitLeiste hat es unter anderem die Variable "streichel". Sie ist auf den Wert 1 gesetzt beim start des Filmes.
Diese Vorbedienung hat den Sinn darin, dass verhindert werden soll, dass bei Berührung, die Instanz des MovieClip "blune1" bei jeder FrameRate also in diesem Projekt zwölf mal in der sekunde auf das Schlüsselbild 2 gehen soll. So kämme der Film der Blume nie weiter!
Im Blumen Film selber steht auf dem ersten Schlüsselbild der zweiten Ebene der Befehl stop(); auf dem zweiten Schlüsselbild aber die Anweisung _root.streichel = 0.
Wenn jetzt erneut in die Anweisung von oben hineingegangen wird, wird die Aktion hier abgebrochen, weil die Variable nicht mehr == 1 ist!
So kann die Blume in Ruhe blühen.
Erst auf ihrem letzten Schlüsselbild stellt sie die Variable "streicheln" wieder auf den Wert 1 und ist so wieder parat für ein hitTest Ereigniss.

onClipEvent (enterFrame) {
}
Die äusserste Klammer haben wir nun eigentlich auch schon besprochen. Mit dem Parameter enterFrame wird das Ereigniss bei einer FrameRate von 12 Bildern in der Sekunde 12 mal in der Sekunde abgearbeitet. Siehe dazu auch auf seite 1 dieses Tutorials)

Die praktisch gleiche Geschichte steckt auch in der Instanz der "blume2"

hitTest.fla:


Wieso ist nun aber die Hand eine Schaltfläche?

Sie ist eine Schaltfläche, weil in ihr das drag & Drop Ereigniss ausgelöst wird.
In der Schaltfläche hand steht folgendes;
on (press) {
     startDrag(_root.hand);
}
on (release) {
     stopDrag();
}
Das heisste so viel wie;
Bei press wird das drag & Drop Ereigniss begonnen.
Bei release sprich beim loslassen der rechten Maustaste des Users wird das Ereigniss wieder abgebrochen.

Das Berühren wird hier also nicht von der Hand registriert sondern von den Blumen wie oben beschrieben! Der Effekt ist aber letzt endlich der selbe.

Im Giraffen.fla ganz oben wird das hitTest Ereigniss von unsichbargestellten streifenMovieClips ausgelöst, die über die ganze Bühne verteilt liegen. Sie simulieren so eine nicht vorhandene dritte Dimension. Die Tierchen werden grösser beim in den Vordergrund kommen. Zusätzlich wird ihre Tiefe höher, sprich sie kommen weiter in den Vordergrund. So kommt ein Elefant hinter die Giraffe zu stehen, wenn sein _y Wert kleiner ist. Zusätzlich ist das Problem da, dass nur ein Objekt gleichzeitig in einer Tiefe stehen kann. So mussten für jeden unsichtbaren "z" MovieClip quasi fünf Parkplätze freigehalten werden. Der Elefant1 zum Beispiel geht über dem MovieClip "z1" in die Tiefe 1, über dem MovieClip "z2" aber schon in die Tiefe 6! die Tiefen 2-5 sind reserviert für die vier anderen Gesellen, falls sie gerade auch über dem MovieClip "z1" stehen sollten.

Schaue Dir nun das Giraffen.fla genauer an und versuche zu verstehen wie es in etwa funktioniert. Versuche selber ein Projekt zu bauen mit dieser Möglichkeit der Simulation der 3.Dimension. Zum Beispiel mit fünf Schachfiguren.
Falls Du alle 64 Schachfiguren einbauen möchtest, wirst Du eine Weile daran arbeiten müssen!!!

Da jede Tiefe dann 64 Parkplätze frei halten müsste, und mindestens 32 Tiefen da sein müssten, kommst Du auf 2048 Tiefen. Hi. Diese Tiefen müsstest Du bei jedem der 32 "z" MovieClips 64 mal genau einschreiben.... Natürlich gäbe es für den Fall auch raffiniertere Lösungen. Doch die zu verstehen, habe ich bis jetzt noch nicht geschafft. Hier müsste auf jeden Fall die OOP Einzug halten. Das geht. In Flash kannst Du OOP programieren, wenn Du verstehtst wie....(-;

Für den Anfang kannst Du aber auch schon mit der Giraffen Lösung einigen Blödsinn anstellen und viele lustige Projekte bauen.

Giraffe.fla




Seite 1   |    Seite 2   |    Seite 3   |    Seite 4   |    Seite 5     Seite 6

Blender 2.5 VideoTutorials

FlashVideoTutorials

Video Tutorials

HTML, CSS, javaScript

Webseite der Kieselsteine

Kieselsteine Blog