Wie erstelle ich eine Schaltfläche in Flash? (Anfänger)

Dieses Tutorial richtet sich an Flash-Neulinge und Anfänger. Ich werde mit einfachsten Mitteln erklären, wie man eine Schaltfläche in Flash ohne viel Actionscript oder Animationen erstellt, um auf verschiedene Bilder in der Zeitleiste des Flashfilms zu springen. Geringes grundlegendes Wissen, über den Aufbau der Programmoberfläche ist hilfreich.

Als Programmversion nutze ich Adobe Flash CS3 in englischer Sprache auf dem PC unter Windows Vista. Die Unterschiede zu anderen Betriebssystemen und den Flashversionen 8 und CS3 sind für dieses Tutorial marginal. Ihr könnt die Übung also auch unter Windows XP oder Appels OSX und auch in Flash 8 umsetzten.
Englische Begrifflichkeiten übersetzte ich möglichst ins Deutsche
(Toolbar = Werkzeugleiste, Stage = Bühne, Properties = Eigenschaften, …).

1. Zu Beginn erstellt Ihr ein leeres Actionscript 2.0 Flash Dokument (FLA Datei). In Flash 8 steht die Auswahl Actionscript 2.0 und 3.0 noch nicht zur Verfügung, hier sind Dokumente standardmäßig Actionscript 2.0 Dokumente.

2. Klickt auf die Bühne um im Eigenschaftenfenster die Eigenschaften des Dokumentes zu erhalten (Beim erstellen eines neuen Dokumentes normalerweise schon ausgewählt) und stellt die Bildwiederholungsrate (Frame rate oder fps = frames per second) auf 30.

3. Wählt das Rechteckwerkzeug in der Werkzeugleiste aus.

4. Zieht eine Rechteckige Form in der gewünschten Größe eurer Schaltfläche an eine beliebige Position eurer Bühne.
Die Farbe eurer Fläche könnt ihr
(genau wie die Farbe der Außenlinie eurer Fläche) entweder vor dem Erstellen unten in der Werkzeugleiste wählen, oder nach dem erstellen, durch Anwählen der Fläche oder Linie im Eigenschaften-Fenster.

5. Wählt in der Werkzeugleiste das Auswahlwerkzeug aus.

Mit dem Auswahlwerkzeug markiert Ihr nun euer Rechteck und wählt oben in der Menüleiste von Flash die Option: »Modifizieren > In Symbol konvertieren«.

Nun erhaltet Ihr die Möglichkeit die Fläche in 3 verschiedene Symbolarten zu konverieren (Movieclip, Schaltfläche und Grafik). Hier entscheidet Ihr euch für die Schaltfläche (Button). Als Namen könnt Ihr Beispielsweise »Knopf« angeben, der Name dient später nur zu Übersichtszwecken und hat keinen Einfluss auf die Funktion eines Symbols.
Die erweiterten Eigenschaften könnt Ihr in diesem Fall ignorieren.

6. Nachdem Ihr das Schaltflächen Symbol erstellt habt, müsst Ihr dieses mit dem Auswahlwerkzeug markieren. Dann öffnet Ihr das »AktionenFenster« (Actions) .
Überprüft, ob die Option »Scripthilfe« (oben rechts im Aktionen-Fenster) bei euch aktiviert ist.

7. Klickt auf das kleine Pluszeichen (oben links im Aktionen-Fenster) und wählt die Aktion »Globale Funktionen > Zeitleistensteuerung > goto« aus.

8. Um auf ein Bild in der Zeitleiste eures Flashfilms zu springen und dort zu bleiben, müsst Ihr in der Aktion die Zeile »gotoAndPlay(1);« markieren und in den Einstellungsmöglichkeiten oberhalb eurer Aktion »gehe zu und stoppe« (goto and stop) auswählen.
Die Eigenschaft »Bild« (Frame) ändert Ihr in unserem Fall auf den Wert »2« Damit sagt Ihr der Schaltfläche, dass Sie beim Ausführen der Aktion auf das zweite Bild (Frame) der Zeitleiste springen soll, auf der eure Schaltfläche liegt.

Jetzt müsst Ihr noch festlegen wann die Aktion ausgeführ werden soll. Dazu markiert Ihr die oberste Zeile
in eurer Aktion (standardmäßig »on (release) {«). hier könnt Ihr nun auswählen wann die Aktion ausgeführ werden soll. Die Schaltfläche bietet dazu mehrere Möglichkeiten wie zum Beispiel RollOver, Press oder Release (Drüber rollen, Klicken, Loslassen). Wählt hier am besten Press aus und Release ab.

Nun könnt Ihr das Aktionen-Fenster wieder schließen.

9. Als nächsten Schritt müsst ihr in eurer Flashfilm-Zeitleiste das leere 2. Bild auswählen. Dann wählt Ihr im oberen Flashmenü »Einfügen > Zeitleiste > Leeres Schlüsselbild« um ein leeres Bild zu erstellen.

10. Wählt dieses Bild aus und zeichnet oder schreibt etwas Beliebiges auf die leere Bühne.

11. Wenn Ihr den Film jetzt im Flashplayer abspielt (STRG-Enter oder Apfel-Enter), läuft dieser immer bis zum letzten Bild des Flashfilms durch und springt dann wieder auf das erste Bild, um erneut durchzulaufen. Diese »Endlosschleife« unterbindet Ihr, indem auf das erste Bild eurer Zeitleiste eine Stop-Aktion gelegt wird.

Dazu müsst Ihr nun wieder das erste Bild in der Zeitleiste auswählen und das Aktionen-Fenster öffnen.

Dann erstellt Ihr über das kleine Kreuzsymbol (oben links im Aktionen-Fenster), die Aktion »Globale Funktionen > Zeitleistensteuerung > stop« aus.

12. Um eurer Schaltfläche einen rollover Effekt zu geben, müsst ihr diese per Doppelklick öffnen.
Dann markiert Ihr das erste Bild der Schaltflächenzeitleiste per Klick.
Jetzt könnt Ihr mit gedrückter ALT-Taste das erste Bild per Drag and Drop auf das zweite Bild ziehen.
Auf Bild 2 verändert Ihr nun die Farbe eurer Fläche. Wenn man im fertigen Film mit der Maus über die Schaltfläche rollt, wird sich diese nun verändern.
Per Doppelklick neben die Fläche, kommt Ihr wieder zurück auf eure Flashfilm Bühne.


13.
Eure Schaltfläche ist nun fertig, mit Hilfe des gelernten Prinzips, könnt Ihr schon kleine Navigationen für Webseiten oder Präsentationen erstellen. Vielleicht schafft Ihr es ja jetzt eigenständig eine Schaltfläche auf dem 2. Bild eures Flashfilms zu erstellen, um bei klick wieder auf das erste Bild zu springen.

Die Quelldatei könnt Ihr hier finden:
Button_Anfaenger.zip

Copyright Felix Simonsen 2008 – Alle Rechte Vorbehalten

Dieser Eintrag wurde veröffentlicht in Übungen und getagged , , , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

9 Kommentare

  1. Profilbild von Lisa lisa.stanzel
    Erstellt am 26. Oktober 2008 um 15:37 | Permanent-Link

    hallo!
    also, bis schritt 5 ist ja noch alles wunderbar, dann läufts nicht mehr. mein aktionen fenster in der cs3 sieht anders aus und zwar: globale funktionen > zeitleisteneinstellung > und dann kommt eine reihe optionen, jedoch kein „goto“. on release, rollover etc finde ich auch nicht. kann jemand helfen? =)

  2. Profilbild von sandra sandra.jasper
    Erstellt am 26. Oktober 2008 um 15:44 | Permanent-Link

    he super!
    auf das gleiche problem bin ich auch gerade gestoßen, die obere box mit den genaueren beschreibungen von goto fehlt!

    „on relaese“ erscheint nicht in der scipt-hilfe-liste.

    ???

  3. Erstellt am 26. Oktober 2008 um 23:16 | Permanent-Link

    Hallo Lisa, hallo Sandra,

    wichtig ist, dass Ihr das Symbol, das Ihr zuvor als Schaltfläche definiert habt, auswählt. Dann müsstet Ihr beim Einfügen des Scripts auch ein „goto“ finden.

    Das „onRelease“ kommt natürlich nur bei Schaltflächen vor, wenn Ihr ein Bild in der Zeitleiste ausgewählt habt, sind die Skriptmöglichkeiten anders, als wenn Ihr eine Schaltfläche markiert habt.

    Um die graue Box mit den „Beschreibungen“ von goto zu bekommen, müsst ihr die Scripthilfe aktivieren (Screenshot unter Punkt 6).

    Ich habe euch noch nicht viel zu Symbolen wie der Schaltfläche erzählt, ein bischen mehr Hintergrund braucht Ihr vielleicht noch für das Tutorial.
    Ansonsten wollte ich das Tutorial Morgen zusammen mit euch im Kurs machen, nachdem ich euch noch ein bischen über Flash erzählt habe.

  4. Erstellt am 26. Oktober 2008 um 23:35 | Permanent-Link

    Ich habe es noch einmal nachgebaut, der Grund ist höchstwahrscheinlich, dass Ihr die Scripthilfe nicht aktiviert habt. Den entsprechenden Knopf findet Ihr rechts oben im Aktionenfenster 😉

  5. Erstellt am 28. November 2008 um 18:18 | Permanent-Link

    Hallo, ich finde dein Tutorial echt super, nur ich komme nun ebenfalls nicht weiter. Die Scripthilfe ist bei mir grau und lässt sich nicht durch einen einfachen Knopfdruck aktievieren. Was kann ich da nun machen?

  6. Erstellt am 28. Dezember 2008 um 22:49 | Permanent-Link

    Hallo RukiFox, bist du bei mir im Kurs? Dein Problem wird sein, dass du nicht das Bild in der Zeitleiste oder die entsprechende Schaltfläche angeklickt hast, auf die du eine Aktion legen möchtest. Ist dein Knopf nur eine einfache Form und keine Schaltfläche, kannst du keine Aktionen zuweisen. Dann bleibt auch die Scripthilfe deaktiviert.
    Wenn das nicht der Fall ist, dann lösche nochmal das ganze Script und schaue, ob es dann funktioniert.

  7. Niklaas Thiel
    Erstellt am 5. Februar 2010 um 12:29 | Permanent-Link

    Also, ich machs kurz: Ich habe die Schaltfläche ausgewählt. Scriphilfe ist aktiviert. Aber das Fenster sagt mir: „An die aktuelle Auswahl können keine Aktionen angefügt sein.“ Alle möglichen Aktionen sind grau und nicht anwählbar. Uunten links in dem Fenster kann ich Bild 1 auswählen und dann etwas eingeben. Für meinen Fall brauche ich einen stop(); Nur, wird dann dieser Befehl global ausgeführt und nicht durch Druck auf die Schaltfläche. Was nun?

  8. Erstellt am 5. Februar 2010 um 18:04 | Permanent-Link

    Dann ist wahrscheinlich nicht die Schaltfläche alleine ausgewählt. Ich vermute, dass du mehrere Objekte angewählt hast und deshalb keine Schaltflächenaktion erstellen kannst. Wenn du eine Schaltfläche ausgewählt hast, sollte auch über dem Aktionenfenster „Schaltfläche“ stehen.

  9. Erstellt am 3. Juni 2013 um 17:12 | Permanent-Link

    Kann Ihre Website leicht nicht verlassen, ohne noch zeitig zu erwähnen,
    dass ich es toll finde, wie sie in Ihrem Blog hilfreiche Erläuterungen für Ihre Leser bereitstellen.
    Warte gespannt auf neuwertige Beiträge.

2 Trackbacks

  1. Von dissertation process validation am 13. August 2016 um 05:47

    dissertation process validation

    Wie erstelle ich eine Schaltfläche in Flash? (Anfänger)

  2. Von VPN am 12. September 2016 um 14:24

    VPN

    Wie erstelle ich eine Schaltfläche in Flash? (Anfänger)

Ihr Kommentar

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Zur Werkzeugleiste springen