Verfügbare Informationen zu "Buttons mit Flash MX erstellen"
Qualität des Beitrags: Beteiligte Poster: Dennis - Christian Forum: www.ft2d3.online.ms Forenbeschreibung: Forum der Klasse FT2D3 der Fachschule für Wirtschaft, Steinfurt aus dem Unterforum: Allgemein Antworten: 3 Forum gestartet am: Samstag 22.01.2005 Sprache: deutsch Link zum Originaltopic: Buttons mit Flash MX erstellen Letzte Antwort: vor 18 Jahren, 4 Monaten, 16 Tagen, 2 Stunden, 29 Minuten
Alle Beiträge und Antworten zu "Buttons mit Flash MX erstellen"
Re: Buttons mit Flash MX erstellen
Dennis - 12.12.2005, 17:37Buttons mit Flash MX erstellen
Da wir seit letzte Woche angefangen haben eigene Seiten zu erstellen habe ich einen kleinen interessanten Kurs gefunden in dem beschrieben wird wie man mit dem Programm "Flash MX" eigene Schaltflächen erzeugt. Dies wurde leider gar nicht erklärt bislang. Vielleicht kommt uns dieser Kurs ja gut aus wenn richtig einsteigen beim erstellen der Seite. Und da wir Flash MX auf den Rechnern in der Schule haben ließe sich das ganze auch anwenden.
Los geht es mit dem ersten von zwei Teilen:
Schaltflächen, im Web-Jargon auch gerne als Buttons bezeichnet, bieten Ihnen eine ideale Möglichkeit, mit dem Anwender zu interagieren. So können Sie dem Benutzer durch das Bereitstellen von Schaltflächen beispielsweise die Abspielsteuerung einer Animation überlassen oder gar das Navigieren durch die gesamte Webseite ermöglichen. Zum Erstellen eines Flash-Buttons benötigen wir natürlich eine optische Vorlage. Nutzen Sie die Flash-Werkzeuge und kreieren Sie sich eine Schaltfläche bis ins letzte Detail, so wie es der Benutzer später sehen soll. Prinzipiell reicht für unsere Ausführungen zunächst auch ein einfacher Text. Als nächstes müssen Sie Ihre Vorlage in ein Schaltflächen-Symbol konvertieren. Symbole sind wiederverwendbare Objekte, welche in der Bibliothek von Flash gelagert werden. Ein Symbol kann mehrmals auf der Bühne platziert werden. Dabei entstehen so genannte Instanzen vom Originalsymbol. Die Instanzen können Sie mit beliebigen Effekten ausstatten. Das Originalsymbol bleibt dabei unberührt. Wenn Sie jedoch das Originalsymbol bearbeiten, dann verändern Sie auch alle Instanzen auf der Bühne. Zum Erstellen eines Schaltflächen-Symbols markieren Sie zunächst die entsprechenden Objekte auf der Bühne. Wählen Sie nun aus dem Kontextmenü der rechten Maustaste den Eintrag „In Symbol konvertieren“. Sie können nach dem Markieren die Objekte ebenso in das Bibliothek-Bedienfeld ziehen oder die Funktionstaste F8 betätigen. In jedem Fall gelangen Sie zu einem neuen Fenster, in dem Sie aufgefordert werden, die Symbolart zu bestimmen und einen Namen für das Symbol zu vergeben.
Erstellen eines Symbols:
Zusätzlich können Sie den Registrierungspunkt angeben. Letzteres ist vor allem für die Drehbewegung und das Ausrichten des Symbols von Bedeutung. Wir wollen natürlich eine Schaltfläche erstellen. Wählen Sie daher die Symbolart „Schaltfläche“. Das Symbol wird nach Betätigung der OK-Schaltfläche unter dem gewählten Symbolnamen in der Bibliothek gelistet.
Entfernen Sie, falls nötig, im Menü „Steuerung“ unter „Schaltflächen aktivieren“ den Haken und klicken Sie anschließend doppelt auf die Instanz des Symbols, um in den Bearbeitungsmodus zu wechseln. Statt der üblichen Zeitleiste mit durchnummerierten Bildern sehen Sie nun vier Spezialbilder: „Up“, „Darüber“, „Gedrückt“ und „Aktiv“.
Die vier Zustandsbilder eines Schaltflächen-Symbols:
Das Bild „Up“ definiert den Zustand, den der Benutzer zu sehen bekommt, wenn kein Ereignis eintritt. Dieser Zustand legt somit das generelle Erscheinungsbild des Buttons fest. Im Zustandsbild „Darüber“ bestimmen Sie das Aussehen und Verhalten der Schaltfläche, wenn der Benutzer sich mit seinem Mauszeiger über der Schaltfläche befindet. Der Zustand „Gedrückt“ tritt ein, sobald der Benutzer die Schaltfläche betätigt. Das letzte Zustandsbild „Aktiv“ ist ein spezielles Bild. Hier definieren Sie den Bereich, auf den die Schaltfläche reagieren soll. Das Bild legt somit den klickbaren Bereich bzw. den Hotspotbereich für die Zustände „Darüber“ und „Gedrückt“ fest.
Bisher befindet sich nur im Zustand „Up“ ein Schlüsselbild. Damit Sie in den Bildern „Darüber“ und „Gedrückt“ optische Veränderungen am Button vornehmen oder aber ein weiterführendes Verhalten definieren können, benötigen Sie ebenso in diesen Zuständen ein Schlüsselbild. Klicken Sie hierfür auf das entsprechende Bild und betätigen Sie die Funktionstaste F6. Erstellen Sie ebenso im Zustand „Aktiv“ ein Bild und definieren Sie durch eine Form wie ein Rechteck oder einen Kreis den aktiven Bereich der Schaltfläche. Sollten Ihre Schaltfläche, wie anfänglich als ausreichend erklärt, lediglich aus einer Textebene bestehen, so reicht es keinesfalls, ein weiteres Text-Schlüsselbild im Zustand „Aktiv“ zu erstellen. Dieser häufige Anfängerfehler hätte zur Folge, dass der Mauszeiger bei geringen Positionsveränderungen innerhalb des Textes stetig zwischen dem Pfeil- und dem Handcursor wechselt. Der Grund liegt in der Tatsache, dass sich in diesem Fall im Bild „Aktiv“ nur der Text und keine durchgängige Fläche befindet. Beachten Sie, dass immer nur der Bereich einer Schaltfläche aktiv ist, der im Zustandsbild „Aktiv“ auch zeichnerisch vorgenommen wurde.
Verändern Sie beispielsweise im Zustand „Darüber“ die Farbe des Buttons und wechseln Sie anschließend wieder in die Bühnenansicht. Wenn Sie nun Ihre Schaltfläche mit Strg + Enter testen, sollten Sie zunächst den Zustand „Up“ sehen. Sobald Sie den Mauscursor über die Schaltfläche bewegen, sollte der entsprechende Zustand „Darüber“ mit dem Farbwechsel eintreten.
Neben der Standard-Schaltfläche gibt es einige weitere interessante Variationen. So können Sie ganze Animationen in einer Schaltfläche abspielen oder Sound-Dateien einbinden. Im zweiten Teil des Artikels werden wir auf diese Möglichkeiten zurückkommen. Eine ganz spezielle Variation der üblichen Schaltfläche bietet die so genannte unsichtbare Schaltfläche. Im ersten Moment scheint die Bezeichnung „unsichtbare Schaltfläche“ paradox. Was hätten Sie von einer Schaltfläche in ihrer Flash-Datei, die niemand sehen kann? Stellen Sie sich vor, Sie wollen nachträglich alle Schaltflächen mit einer neuen Schriftart versehen. Da Sie für jede Schaltfläche einzeln in den Zuständen „Up“, „Darüber“ und „Gedrückt“ eine entsprechende Korrektur vornehmen müssten, wären Sie bei lediglich 10 Schaltflächen schon bei 30 Korrekturvorgängen. Legen Sie jedoch eine unsichtbare Schaltfläche über einen normalen Text, so müssen Sie bei einem gewünschten Wechsel der Schriftart nur noch 10 Mal nachbessern.
Zum Erstellen einer unsichtbaren Schaltfläche gehen Sie zunächst gleichermaßen wie zuletzt vor. Erstellen Sie ein Rechteck und wandeln Sie dieses anschließend in ein Schaltflächen-Symbol um. Wie gewohnt, befindet sich lediglich im Bild „Up“ ein Schlüsselbild. Verschieben Sie dieses Schlüsselbild in den Zustand „Aktiv“. Das Rechteck legt somit den aktiven Bereich des Buttons fest.
Erstellen einer unsichtbaren Schaltfläche:
Das war auch schon alles. Wechseln Sie wieder in die Bühnenansicht. Sie sehen nun ein halbtransparentes Rechteck. Dies dient nur zur visuellen Kommunikation während der Bearbeitung und ist in der späteren Flash-Datei nicht mehr zu sehen. Legen Sie den gewünschten Text unter die Schaltfläche und testen Sie Ihr Ergebnis mit Strg + Enter.[/img]
Und hier der zweite Teil:
Animierte Schaltflächen sind nicht nur schön anzuschauen, sie sind auch noch recht simpel zu erstellen. Durch das Hinzufügen eines Sounds erreichen Sie spätestens ein Niveau, das man nur auf wenigen guten Flash-Webseiten wieder findet.
Öffnen Sie ein neues Projekt und erstellen Sie einen Text. Ich habe mich für den Schriftzug „Flash-Button“ entschieden, wie Sie der im Anschluss des Artikels beigefügten Beispieldatei entnehmen können. Konvertieren Sie den Text in ein Grafik-Symbol. Gehen Sie dafür wie gewohnt vor, indem Sie den Text markieren und beispielsweise die Funktionstaste F8 drücken.
Erstellen eines Grafik-Symbols:
Wählen Sie als Symbolart „Grafik“. Verlassen Sie das Fenster über die OK-Schaltfläche und rufen Sie danach sofort wieder das Fenster auf. Dieses Mal erstellen Sie eine Schaltfläche. Wechseln Sie danach in den Bearbeitungsmodus des Schaltflächensymbols. Erstellen Sie in den Zuständen „Darüber“ und „Gedrückt“ ein Schlüsselbild. Im Zustand „Aktiv“ müssen Sie wegen der im ersten Teil erklärten Problematik eine durchgängige Fläche (z. B. ein Rechteck) zeichnen. Klicken Sie auf das Schlüsselbild im Zustand „Darüber“, sodass es markiert ist. Nun wollen wir unsere Animation erstellen. Rufen Sie hierfür erneut das Fenster zum Erzeugen eines Symbols auf. Dieses Mal wählen Sie die Symbolart „Movieclip“. Wechseln Sie anschließend in den Bearbeitungsmodus des Movieclips. Dies gelingt Ihnen am schnellsten über das Pulldown-Menü am rechten oberen Rand der Arbeitsbühne.
Symbolauswahl:
Sie können ebenso in der Bibliothek im Kontextmenü der rechten Maustaste den Eintrag „Bearbeiten“ wählen um zum Bearbeitungsmodus zu gelangen. Sie sehen erneut eine leere Zeitleiste vor sich. In der vorhandenen Ebene befindet sich lediglich eine Instanz des Grafik-Symbols. Erzeugen Sie eine weitere Ebene und fügen Sie dieser ebenso eine Instanz des Grafik-Symbols hinzu. Wiederholen Sie diesen Schritt. Zentrieren Sie die Symbole auf der Bühne, so dass alle Schriftzüge direkt übereinander liegen. Wechseln Sie in die mittlere Ebene und markieren Sie das Grafik-Symbol. Setzen Sie den Alpha-Wert auf 50%. Gehen Sie hierfür ins Eigenschaften-Bedienfeld und wählen unter Farbe den Eintrag „Alpha“. Setzen Sie im daneben erscheinenden Feld den Wert auf die besagten 50%. Wiederholen Sie diesen Schritt ebenso für die unterste Ebene der Zeitleiste.
Anpassung des Alpha-Wertes:
Fügen Sie nun im Bild 10 der mittleren Ebene ein Schlüsselbild ein. Markieren Sie in diesem Schlüsselbild das Grafik-Symbol und transformieren Sie die Größe des Symbols auf 200%. Hierfür rufen Sie am Besten das Bedienfeld „Transformieren“ auf. Setzen Sie den Alpha-Wert für die Grafik in diesem Schlüsselbild auf 0%. Nun wollen wir ein Bewegungs-Tween zwischen dem Schlüsselbild im Bild 1 und im Bild 10 erstellen. Wählen Sie hierfür wiederum das Bild 1 an und betätigen Sie die rechte Maustaste. Im aufkommenden Kontextmenü wählen Sie den Eintrag „Bewegungs-Tween erstellen“.
Wechseln Sie in die unterste Ebene und fügen Sie im Bild 5 und im Bild 15 ein Schlüsselbild ein. Wir wollen zwischen diesen beiden Schlüsselbildern den eben erstellen Effekt wiederholen. Gehen Sie also ins Bild 15 und transformieren Sie hier die Größe des Grafik-Symbols auf 200%, setzen Sie zudem den Alpha-Wert auf 0%. Erstellen Sie anschließend erneut ein Bewegungs-Tween zwischen dem Bild 5 und dem Bild 15. Da die anderen Ebenen keinen Effekt bis ins Bild 15 besitzen, müssen wir diese noch mit Bildern auffüllen. Gehen Sie in die entsprechenden Ebenen ins Bild 15 und wählen Sie im Kontextmenü der rechten Maustaste den Eintrag „Bild einfügen“ oder drücken Sie die Funktionstaste F5. Da unsere Animation nur ein Mal abgespielt werden soll, benötigen wir noch einen Stopp-Befehl. Gehen Sie ins Bild 15 der untersten Ebene und rufen Sie anschließend das Aktionen-Bedienfeld auf. Wählen Sie über das blaue Kreuz unter „Globale Funktionen“ im Bereich „Zeitleistensteuerung“ den Eintrag „stop“. Das Bedienfeld sollte nun folgendermaßen aussehen:
Testen Sie anschließend die fertige Animation mit Strg + Enter. Es sollte nacheinander zwei Mal der Schriftzug des Grafik-Symbols aus dem Original-Schriftzug austreten und schließlich verblassen. Die Zeitleiste der fertigen Animation sollte wie folgt aussehen:
Wechseln Sie zurück in die Bühnenansicht. Sollte die Animation wie erwünscht funktionieren, so sollte nun auch Ihre Schaltfläche die Animation im Zustand „Darüber“ abspielen.
Lassen Sie uns die Schaltfläche mit einem Sound erweitern. Der Sound soll ebenso mit der Animation im Zustand „Darüber“ abgespielt werden. Hierfür müssen wir zunächst eine Sound-Datei im MP3- oder WAV-Format importieren. Gehen Sie im Menü „Datei“ auf den Eintrag „Importieren“ und wählen Sie hier den Befehl „In Bibliothek importieren“ aus. Wie der Befehl vermuten lässt, finden wir die Sound-Datei nach dem Importieren in der Bibliothek wieder. Damit der Sound nun mit der Animation abgespielt wird, müssen Sie wiederum in den Bearbeitungsmodus der Schaltfläche wechseln. Erstellen Sie eine zweite Ebene. Fügen Sie im Bild „Darüber“ ein Schlüsselbild ein. Gehen Sie anschließend in das Bedienfeld „Eigenschaften“. Unter „Sound“ können Sie nun Ihre Sounddatei auswählen. Sie sollten folgendes Bild in der Zeitleiste vorfinden:
Bei Bedarf können Sie Ihren Sound noch mit Effekten wie beispielsweise einem Fade-In oder einem Fade-Out versehen. Die entsprechenden Einstellungen finden Sie ebenso im Bedienfeld „Eigenschaften“ unter „Effekte“. Mit einem Klick auf die Schaltfläche „Bearbeiten“ gelangen Sie zu einem erweiterten Editiermodus, um Ihren Sound mit individuellen Effekten auszustatten.
Bisher sind die erstellten Schaltflächen lediglich schön anzusehen. Sie lösen jedoch kein Ereignis aus und erzielen somit keine Interaktion mit dem Benutzer. Um die Schaltfläche mit einem Hyperlink zu versehen, klicken Sie auf die Schaltflächen-Instanz und rufen Sie anschließend das Aktionen-Bedienfeld auf. Fügen Sie folgende Codezeilen in das Bedienfeld ein:
Zitat:
001: on(release) {
002: getURL("http://www.google.de", "_blank", "GET");
003: }
Schaltflächen reagieren auf verschiedene Maus-Ereignisse. Wenn Sie eine Aktion ausführen wollen, muss das zu behandelnde Maus-Ereignis stets mit angegeben werden. Mit der Anweisung „on(release)“ reagieren Sie auf das Loslassen der Maustaste. Dies ist zugleich das am Häufigsten verwendete Ereignis. Mit dem Befehl „getURL“ erzeugen Sie einen Aufruf der im ersten Parameter angegebenen URL. Im zweiten Parameter bestimmen Sie das Zieldokument. Wählen Sie hier zwischen den in HTML üblichen Angaben „_blank“, „_parent“, „_self“ und „_top“. Mit dem Wert „_blank“ rufen wir die URL in einem neuen Browserfenster auf. Entscheiden Sie sich im letzten Parameter für eine der Request-Methoden „GET“ oder „POST“.
Re: Buttons mit Flash MX erstellen
Christian - 12.12.2005, 20:20
Na, ist ja ganz einfach :) .
In Dreamweaver sind doch schon fertige Flash-Buttons eingebaut. Reichen die den nicht?
Re: Buttons mit Flash MX erstellen
Dennis - 13.12.2005, 01:32
Die bereits fertigen Flash Buttons in Dreamweaver sind eigentlich recht mager und vor allem einfallslos. Einige von denen unterscheiden sich teilweise nur in der Farbe. Diese läßt sich zudem nicht verändern in Dreamweaver so das man abermals eingeschränkt wird. Ein Großteil der Buttons die mitgeliefert werden ist überhaupt nicht zu gebrauchen (z.B. Holzdesign oder einfache Pfeile).
Wenn wir solche Buttons einbauen sollten werden wir also selbstständig welche entwerfen müssen. Den ersten Teil der Anleitung finde ich jetzt gar nicht mal so schwer. Das sollte mit etwas Übung klappen denke ich. Schwieriger ist wirklich der zweite Teil dieses Kurses. Das ist nicht mal eben gemacht in 2 Minuten denke ich.
Das ganze ist ja auch nur für den Fall der Fälle gedacht gewesen. Denn die Wahrscheinlichkeit das ich die Seite nicht wieder finde wenn wir sie brauchen sollten ist recht groß.
Mit folgendem Code, können Sie den Beitrag ganz bequem auf ihrer Homepage verlinken
Weitere Beiträge aus dem Forum www.ft2d3.online.ms
bubblesort2.java - gepostet von Christian am Freitag 03.03.2006
Schnellumfrage zur Plakatauswahl - gepostet von Christian am Mittwoch 17.05.2006
Favicon geändert - gepostet von Dennis am Montag 14.08.2006
Checklisten - gepostet von Sabine am Freitag 16.06.2006
Projektstart - gepostet von Christian am Freitag 24.03.2006
Bildungsangebote - Ansprechpartner - gepostet von Nicole am Dienstag 27.06.2006
Ähnliche Beiträge wie "Buttons mit Flash MX erstellen"
ÖGD Bundesgebiet: News-Flash - Uwe Gerber (Dienstag 16.05.2006)
Regeln für das Erstellen von Band-Threads - MetalFreak (Sonntag 13.02.2005)
Code für Buttons - Anonymous (Mittwoch 30.11.2005)
Erstellen neuer Darsteller Threads - cheekylady (Donnerstag 21.12.2006)
Lebt ihr noch? - Samina167 (Samstag 12.02.2011)
Flash Board - spirti (Sonntag 29.05.2005)
Macromedia Flash MX 2004 - Mr. Hex (Dienstag 09.11.2004)
Ein Flash zur Hebung der Stimmung. - Amat (Dienstag 26.07.2005)
Signatur erstellen - Fjordi777 (Montag 13.08.2007)
Flash - mandor (Mittwoch 10.05.2006)