Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Flash > 3D-Drehkreuz

3D-Drehkreuz

Es handelt sich hierbei um eine kleine Bildergalerie mit vier 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 zugewiesenes Bild erscheint im Rahmen auf der rechten Seite.

1. Als Erstes werden die Einzelbilder von der Animation des sich drehenden Kreuzes benötigt. Wie viele 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öße 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 groß 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öße 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öße" das gewünschte Format einstellen.

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

tooltipp

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

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. tooltipp

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) tooltipp

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

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. tooltipp

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. tooltipp

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

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ü). tooltipp

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

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 in den "Expertenmodus" wechseln, um den Code hineinzukopieren.) tooltipp

on(release)

{

_root.play()

_global.frame = 8

}

tooltipp

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

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. tooltipp

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. tooltipp

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. tooltipp

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

Der Film bleibt leer, und man kann ihn wieder schließen, indem man auf "Szene 1" klickt (1). tooltipp

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) tooltipp

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();

}

}

tooltipp

In der Vorschau [Strg+Enter] kann man jetzt testen, ob alles wunschgemäß funktioniert.

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. tooltipp

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

21. Auf jeder Ebene wird mittels "Importieren.." ein Bild abgelegt. tooltipp

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

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. tooltipp

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

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. tooltipp

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). Anschließend mit dem Rechteck-Werkzeug [R] ein Rechteck über die Bühne zeichnen (3). tooltipp

Und das war's. Viel Spaß damit!

 

Autor: Larth

Abbildungen

Abbildung 1

Abbildung 1

Abbildung 2

Abbildung 2

Abbildung 3

Abbildung 3

Abbildung 4

Abbildung 4

Abbildung 5

Abbildung 5

Abbildung 6

Abbildung 6

Abbildung 7

Abbildung 7

Abbildung 8

Abbildung 8

Abbildung 9

Abbildung 9

Abbildung 10

Abbildung 10

Abbildung 11

Abbildung 11

Abbildung 12

Abbildung 12

Abbildung 13

Abbildung 13

Abbildung 14

Abbildung 14

Abbildung 15

Abbildung 15

Abbildung 16

Abbildung 16

Abbildung 17

Abbildung 17

Abbildung 18

Abbildung 18

Abbildung 19

Abbildung 19

Abbildung 20

Abbildung 20

Abbildung 21

Abbildung 21

Abbildung 22

Abbildung 22

Abbildung 23

Abbildung 23

Abbildung 24

Abbildung 24

Abbildung 25

Abbildung 25

Abbildung 26

Abbildung 26

Abbildung 27

Abbildung 27

Abbildung 28

Abbildung 28

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /