+3   4   |   Bewertung: Keine Berechtigung!  

Vorwort

---

In diesem Tutorial möchte ich euch zeigen, wie ihr mit Flash und einem Bisschen Actionscript eine Diashow erstellt.
Zwar kann man mithilfe von Photoshop oder ähnlichen bereits vorgefertigte Diashows erzeugen, diese könnt ihr allerdings
an euren Geschmack anpassen :D

Schritt 1

---

Abb.1Als Ausgangsmaterial benötigt ihr zunächst eure Bilder.

Schritt 2

---

Abb.2Erstellt nun in Flash ein neues Dokument in den Abmessungen eurer Bilder, in meinem Fall ist das 1024x768.

Schritt 3

---

Abb.3Jetzt importiert ihr die Bilder in die Bibliothek und erstell eine neue Ebene, die ihr "Bilder" nennt.
Nun zieht ihr das erste Bild in eure Bühne und zentriert es mithilfe der Ausrichten Funktion.

Schritt 4

---

Abb.4Nun erstellt ihr auf auf der Ebene Bilder hinter dem ersten Frame ein Keyframe und ersetzt das erste Bild in der Bühne
durch euer 2.
Das Gleiche macht ihr mit den restlichen Bildern, bis jedes eurer Bilder ein eigenes Keyframe besitzt.
Wenn ihr den Film nun mit STRG+Enter testet, müssten alle Bilder nacheinander durchlaufen, so könnt ihr auch noch testen,
ob alle Bilder auch wirklich zentriert sind und nicht irgendwo Ränder sind, es würde sich dafür aber empfehlen, die Bildrate
auf ca. 1 Sekunde oder niedriger herunterzustellen.

Schritt 5

---

Abb.5Nun erstellt ihr einen neuen Ebenenordner, den ihr "Navigation" nennt. In diesem Ordner erstellt ihr nun eine weitere Ebene,
die ihr "Hintergrund" nennt.
Auf der Bühne erstellt ihr dann zunächst mit dem Rechteckwerkzeug eine Rechteck, so wie ihr es auf dem Bild seht.
Bei den Fülloptionen wäjlt ihr dann einen linearen Farbverlauf von Schwarz anch Schwarz, allerdings wird der rechte Reiter mit dem
Alphawert 0% versehen, sodass er im Prinzip durchsichtig ist.
Den rechten Reiter verschiebt ihr ein Wenig nach links und gebt ihm einen Alphawert zwischen 70 und 90%.
Der der Verlauf jetzt jedoch von links nach rechts is, müssen wir ihn mit dem Verlauf Farbverlaufswerkzeug 90° nach rechts drehen.
Ihr findet das Farbverlaufswerkzeug unter dem Frei Transformieren Werkzeug (Icon gedrückt halten) oder erreich es mit der Taste F.
Die Farbe könnt ihr natürlich acuh nach Belieben ändern.

Schritt 6

---

Abb.6Nun Erstellt ihr eine neue Eben in dem Ordner Navigation, die ihr Bildbeschriftung nennt.
Jetzt müst ihr auf der Zeitleiste alle Bilder bis auf das Erste löschen.
Wählt nun das Textwerkzeug mit einer Schriftwart, Farbe und Schriftgröße eurer Wahl und gebt einen Passenden Namen für das Bild ein,
achtet darauf, dass sich die Auswahl an die Textlänge anpasst, dieses ist der Fall, wenn beim Textfenster rechts oben ein Kreis statt
einen Rechteck ist, ändern könnt ihr es mit einem Doppelklick auf das Rechteck bzw. den Kreis.

Schritt 7

---

Abb.7Nun müsst ihr den Text noch Ausrichten, das mächt ihr mit folgenden beiden Icons:

Schritt 8

---

Abb.8Fügt hinter dem ersten Keyframe nun ein neues Keyframe ein, in dem ihr den text an das neue Bild anpasst.
Nach jeder textänderung müsst ihr den neuen Text natürlich auch neu ausrichten.

Um den Text noch etwas schöner zu machen geben wir ihm noch einen kleinen Hintergrund.
Dazu erstellen wir eine weitere Ebene, die wir Beschriftungshintergrund nennen.
Achtet bitte darauf, dass sich diese Ebene unter der Beschriftungsebene und über dem eigentlichen Hintergrund befindet.
Wählt nun das Rechteckwerkzeug und wechelt auf der Zeitleiste in das Bild, bei dem die Beschriftung am längsten ist,
achtet jedoch darauf, dass ihr euch immernoch in der eben erstellten Ebene befindet.

Nun erstellt ihr ein Rechteck, das sich über dem ganzen text befindet. Sehr schick sieht es noch aus, wenn ihr runde Kanten hinzufügt.
Richtet es dann noch passend zum Text aus.
Zu guter Letzt stellt ihr die Farbfüllung ( in meinem Fall übrigens weiss) noch auf Alpha 20%.

Schritt 9

---

Abb.9Nun kümmern wir uns um die Buttons.
In diesem Tutorial möchte ich lieber etwas schlichtere Buttons verwenden, Fortgeschrittene können die Buttons jedoch an ihre Wünsche anpassen :D

Wir erstellen eine weitere Ebene, die wir "Buttons" nennen.
Auf dieser Ebene erstellen wir 2 gleichgroße Rechtecke mit möglichst der gleichen Höhe wie der des vorherigen Rechtecks.
Die Rechtecke richten wir dann noch beliebig aus.

Schritt 10

---

Abb.10
Nun wählen wir das Polysternwerkzeug, das sich unter dem rechteck verteckt und gebem ihm die Werte, die ihr auf dem Bild seht,
wobei die Füllfabre weiss Alpha 80% hat.
Mit dem Polysternwerkzeug erstellen wir nun ein passendes Dreieck, wie ihr auf dem Bild seht.

Schritt 11

---

Abb.11Sperrt nun alle Ebenen, bis auf die mit den Buttons und wählt den linken Button aus.
mit der Taste F8 verwandeln wir ihn in eine Schaltfläche mit dem Namen Pfeil_links, das Gleiche macht ihr mit dem rechten Button, nennt diesen Pfeil_rechts.

Schritt 12

---

Abb.12Mit einem Doppelklick auf den "Pfeil_links", können wir diesen genauer bearbeiten.
Erstellt zunächst ein Keyframe bei "Darüber".
in diesem Keyframe ändern wir die Alpha-einstellungen der Füllung auf 40%.

Schritt 13

---

Abb.13
Ein weiteres Keyframe wird bei "Gedrückt" eingefügt, hier ändert ihr die die Füllung des Dreiecks auf schwarz (oder eine Farbe die euch gefällt ;) )
Das gleiche macht ihr für den "Pfeil_rechts".
Zu guter letzt müssen wir den Buttons noch Instanznamen zuteilen, nehmt dazu am Besten einfach "button_rechts" bzw. "button_links".

Schritt 1

---

Abb.1Hier ist das Beispiel

Als Ausgangsmaterial benötigt ihr zunächst eure Bilder.