[Flash5]3d-Drehkreuz

[Wanderratte]

Anbei ein schönes Beispiel, wie man in Flash5 ein 3D- Kreuz erstellt.
Das Beispiel ist von dem User Larth zur Verfügung gestellt worden und wird mit Sicherheit, dem einen oder anderen behilflich sein.

Eventuelle Fragen zu der Fla, könnt ihr hier stellen.

[Larth]

Tutorial.fla

Tutorial:
Es handelt sich hierbei um eine kleine Bildergalerie mit 4 Bildern, die über die Zahlen im Drehkreuz angewählt werden können. Klickt man auf eine der Zahlen, dreht sie sich zu Bereich (1) und ein ihr zugewisenes Bild erscheint im Rahmen auf der rechten Seite.



1. Als erstes werden die Einzelbilder von der Animation des sich drehenden Kreuzes benötigt. Wieviele Bilder das sind, ist Einstellungssache (in meinem Fall 80). Wichtig ist, dass die Bilder eine komplette Umdrehung des Kreuzes ergeben. Die Animation habe ich in einem 3D-Programm erstellt, aber es muss ja nicht unbedingt dreidimensional sein.

In meinem Fall hat jedes Einzelbild die Grösse der Bühne (320 x 240 px), was man natürlich nicht so machen muss. Auf jeden Fall sollte man alle Bilder optimiert abspeichern, damit die Datei nicht zu gross wird. Ich habe die Bilder mittels "fürs Web speichern" in Photoshop als jpeg abgespeichert.

2. In Flash wird eine neue Datei angelegt und die Bühnengrösse angegeben (bei mir wie gesagt 320 x 240 px). Das geht indem man per Rechtsklick auf die Bühne klickt und "Eigenschaften" wählt. Im "Eigenschaften"-Fenster dann bei "Grösse" das gewünschte Format einstellen.

3. Die erste schon vorhandene Ebene wird zweimal angeklickt und "Animation" genannt. Auf dieser werden gleich die Einzelbilder abgelegt.



4. Im Menü "Datei" wird "Importieren.." gewählt. In der Mappe mit den Einzelbildern das erste wählen und auf "Öffnen" klicken.



Es ist wichtig, dass alle Bilder fortlaufende Bezeichnungen haben, wie etwa "Bild01", "Bild02", "Bild03", usw. Dadurch erkennt Flash, dass es sich um eine zusammenhängende Sequenz handelt und fragt, ob man alle anderen Bilder ebenfalls importieren will. Dieses mit "Ja" bestätigen.

Nach dem Import liegen alle Bilder übereinander auf der Bühne. In der "Animation"-Ebene wurde auf der Hauptzeitleiste für jedes Bild ein Frame angelegt. Wer Lust hat, kann sich die Animation in der Vorschau mit [Strg+Enter] ansehen.



weiter..

[Larth]

5. Da die Bilder beim Import nicht an der richtigen Stelle auf der Bühne abgelegt wurden, müssen alle verschoben werden. Hierfür auf "mehrere Frames bearbeiten" klicken (1) und mit den Markern in der Zeitleiste alle Frames markieren (2)



6. Mit dem Auswahlwerkzeug kann man jetzt alle Bilder per Rechteckauswahl anwählen und anschliessend an die gewünschte Postion verschieben. In meinem Fall genau auf den Bühnenrand. "Mehrere Frames bearbeiten" kann wieder abgewählt werden.



7. Jede der vier Zahlen benötigt eine Schaltfläche, die jede für sich eine eigene Ebene bekommt. Die "Animations"-Ebene anklicken und viermal auf das "Ebene einfügen"-Symbol klicken (1). So werden vier neue Ebenen erstellt, die "Schalter1", "Schalter2", "Schalter3" und "Schalter4" genannt werden.



8. Im Menü "Fenster" wird "Komponenten" [Strg+F7] gewählt. Aus der erscheinenden Komponenten-Box entnehmen wir eine Schaltfläche (Push-button) und fügen sie auf der "Schalter1"-Ebene im ersten Frame ein.



9. Mit dem "Transformieren"-Werkzeug (1) [Q] die Schaltfläche so anpassen, dass sie die Zahl 1 gut verdeckt. (2)



10. Da man die Schaltfläche nicht sehen soll, wird sie mittels "Alpha" unsichtbar gemacht. Dies geht, indem man unter "Eigenschaften" den Alpha-Wert auf Null stellt (Im "Farbe"-Menü).



11. Als Verhalten der Schaltfläche muss "Schaltfläche" gewählt werden.

[Larth]

12. Die Schaltfläche anwählen, über das "Fenster"-Menü den "Aktionen"-Editor [F9] öffnen und im Textfeld den folgenden Code eingeben (Dank an Wanderratte!):

(Eventuell muss man vorher auf den "Expertenmodus" wechseln, um den Code hineinzukopieren.)



on(release)
{
_root.play()
_global.frame = 8
}



"8" ist hierbei der Frame, bei dem der Film anhalten soll, wenn die Zahl eins angeklickt wurde.



Bei den anderen drei Schaltflächen trägt man statt 8 die entsprechende Framezahl ein. In meinem Fall ist es Frame 28 für die Zwei, Frame 42 für die Drei und Frame 56 für die Vier.

13. Damit der Schalter im ganzen Film stets an der richtigen Stelle ist, muss er sich in jedem Frame über der 1 befinden, da er dieser ja zugewiesen ist. Hierfür in der Hauptzeitleiste auf den ersten Frame der Schaltfläche klicken und per Rechtsklick "Bewegungstween erstellen" wählen.



14. Im folgenden wird in Abständen von (wahlweise) fünf Frames per Rechtsklick ein neues Schlüsselbild (Keyframe) eingesetzt. Die Schaltfläche wird in jedem schlüsselbild so verschoben, dass sie gut über der eins sitzt. Diesen Vorgang bis zum letzten Frame (hier 81) fortsetzen.



15. Die Schritte 8 - 14 für die übrigen drei Schaltflächen/Zahlen wiederholen.
Als Ergebnis hat jede Zahl ihre eigene Schaltfläche, die sich immer schön mitdreht.



16. Mit [Strg+F8] wird ein neuer Film erstellt, der den Namen "Script" erhält.



Der Film bleibt leer und man kann ihn wieder schliessen, indem man auf "Szene 1" klickt (1).

[Larth]

17. Über den Schalter-Ebenen wird eine neue Ebene eingefügt, die ich hier ebenfalls "Script" nenne. (1)

Im "Fenster"-Menü wird "Bibliothek" gewählt [F11]. Den ersten Frame der "Script"-Ebene anwählen und den "Script"-Film aus der Bibliotheksliste auf die Bühne ziehen. (2)

Der Film wird als kleiner Kreis dargestellt. (3)



18. Auf der Bühne den "Script"-Film anwählen, (so dass ein Kreuz darin zu sehen ist) und im Textfeld des "Aktionen"-Fensters den folgenden Code eintragen:

onClipEvent (enterFrame) {
if (_root._currentframe == frame) {
_root.stop();
}
}



In der Vorschau [Strg+Enter] kann man jetzt testen, ob alles so funktioniert wie es soll.

19. Als nächstes wird ein leerer Bilderrahmen eingefügt, der immer zu sehen ist. Eine neue Ebene namens "Rahmen" einfügen, den ersten Frame wählen und mittles "importieren.." ein Bild einfügen, welches als Rahmen dienen soll.



20. Für die vier Bilder, die gezeigt werden sollen, werden vier weitere Ebenen namens "Bild1", "Bild2", "Bild3" und "Bild4" angelegt.



21. Auf jeder Ebene wird mittles "Importieren.." ein Bild abgelegt.

[Larth]

22. Die Bilder werden auf der Bühne nach rechts an die richtige Stelle gerückt, so dass ihre Postion dem leeren Rahmen überstimmt. Anschliessend wird ihre Präsens auf der Bühne auf jeweils nur einen Frame reduziert (mittels "Ctrl + linke Maustaste" in der Zeitleiste).



Jedes Bild erscheint also nur in einem einzigen Frame. In meinem Beispiel ist das:

Bild 1: Frame 8
Bild 2: Frame 28
Bild 3: Frame 42
Bild 4: Frame 56

..also, die Stop-Frames des Filmes (siehe Schritt 12).

23. Damit der Film am Anfang wartet, bis eine Zahl angeklickt wurde, wird dem ersten Frame auf der "Animation"-Ebene ein "stop();" im Aktionsfenster hinzugefügt.



Auf dem letzten Frame der "Animation" Ebene wird im Aktionsfenster "gotoAndPlay(2);" eingegeben, damit der Film eine Schleife ergibt.



24. Wer möchte, kann mit dem Textwerkzeug [T] auf einer neuen ebene namens "Text" noch einen Hinweis wie "Bitte eine Zahl wählen!" einfügen. Dieser ist dann den gesamten Film über zu sehen.



25. Aus rein gestalterischen Gründen habe ich auf einer ganz oben liegenden Extra-Ebene namens "Verlauf" noch einen Farbverlauf "Rot-transparent" hinzugefügt. Dieser muss natürlich nicht sein.

Hierfür unter "Fenster" den "Farbmischer" [Shift+F9] öffnen und als Füllstil "Linear" wählen (1). Mit den Reglern und dem Alphawert kann man Farben und Transparenz bestimmen (2). Anschliessend mit dem Rechteck-Werkzeug [R] ein Rechteck über die Bühne zeichnen (3).



Und das war's. Viel Spass damit!