Du bist nicht angemeldet.

[Flash MX 2004] Animierte Buttons

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Mittwoch, 18. Mai 2005, 14:33

Animierte Buttons

Hallo zusammen

nach langem Suchen bin ich auf Euer Forum gestossen und denke dass ich hier richtig bin.
Ich möchte Buttons erstellen, die sich verändern wenn man mit der Maus darüberfährt. ich hab schon ein paar Tutorials gelesen, und auch hier gesucht. Leider habe ich nicht das Richtige gefunden. Alle Tut's beschreiben nur, wie ich ein Button erstelle, bei dem der Text ne andere Farbe bekommt, aber keins erklährt, wie es funktioniert wenn man einen Button erstellt mit Bildern.
Ich habe in Photoshop 2 Bilder gemacht (Bild1 und Bild2). Der Button sollte im "Normalzustand" so aussehen wie Bild 1, und wenn ich mit der Maus darüberfahre sollte er sich in Bild 2 ändern. Kann mir jemand erklähren wie man das macht? Ich krieg es einfach nicht hin, und bin schon 3 Abende am Üben :confused:

Danke vielmals und Gruss

Malligan
Signatur von »malligan« Grüsse vom Malligan

2

Mittwoch, 18. Mai 2005, 15:04

RE: Animierte Buttons

ja sicher bist du hier richtig :pleased:
ich werd dir es auch beweisen:

wenn du Flash MX offen hast, dann drück einfach mal F11
dies sollte dir die Bibliothek hinzaubern.

Dort erstellst du eine neue Schaltfläche. Klicke dazu auf das kleine blaue "+" unten links des Bibliothekfensters. Dann einfach erstmal OK und du kannst das Bibliothekfenster schliessen. Nun solltest du dies vor dir haben:


Nun bewege dein Mauszeiger auf
"Datei" => "In Bibliothek importieren" und wählst dein Bild1 aus. Das gleiche machst du nun auch mit dem Bild2

Hole dir nun einfach mal mit F11 die Bibliotheksfenster ran und du kannst sehen, dass die beiden Bilder vorhanden sind.

Jetzt klickst du mit der rechten Maustaste auf "Auf" und fügst ein leeres Schlüsselbild ein. Siehe nächstes Bild


Wenn du dieses getan hast, dann kannst du dein Bild1 aus dem Bibliotheksfenster einfach auf die Ebene ziehen. Ausrichten kannst du es mit dem "Ausrichten"-Fenster ... Strg+K

Die gleiche Prozedur machst du mit den Ebenen Darüber, Drücken und Aktiv. Bei Darüber nimmst du natürlich dein Bild2 :)

Wenn du das gemacht hast, dann gehe ich dein Szene zurück und ziehe die Schaltfläche aus der Bibliothek in deinen Film.


soviel erstmal auf die Schnelle.
Wenn dir das nicht ausreicht, dann sag einfach bescheid und ich schreib mal ausführlich incl. nen paar mehr bilder :-)

Ich hab doch gesagt, dass du hier richtig bist :grin:
Herzlich willkommen übrigens ;)

TNS
Signatur von »TheNobody Style«

3

Mittwoch, 18. Mai 2005, 15:22

Zunächst einmal herzlich Willkommen an Board, malligan... ;)
Es ist schön, mal wieder einem Flash-interessierten Zeitgenossen über den Weg zu laufen...

Die Lösung von TNS ist an sich brauchbar und für einfache Buttons völlig ausreichend. Allerdings erreichst Du damit auch tatsächlich "nur" Buttons, die einfache Zustände haben, die sprunghaft wechseln.

Wenn Du einen ausgefallereren Button machen willst, wo die Schrift nicht einfach schlagartig eine andere Farbe annimmt, sondern fadet. Oder sich mehrere Dinge bewegen oder ändern sollen, so gibt es dafür auch eine recht einfache Möglichkeit.

Wenn Dich diese Möglichkeit interessiert, sag' kurz bescheid. Ich schreib Dir dann ein kleines Tutorial...
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

4

Mittwoch, 18. Mai 2005, 15:24

Hallo TNS :-)

Daaaaaaaaaaaaanke vielmals für Deine Beschreibung!! Sieht mir eigentlich sehr einfach aus :approve:
Ich werde es zuhause gleich mal ausprobieren, ich hoffe es klappt!
Die einzige Schwierigkeit sehe ich auf den ersten Blick nur beim Zurückwechseln in die Szene. (ich bin eben ein wirklicher, blutiger Anfänger :rolleyes:)

PS: Danke für den Willkommensgruss :thumbsup:
Signatur von »malligan« Grüsse vom Malligan

5

Mittwoch, 18. Mai 2005, 15:28

Hallo LapisInfernalis

auch Dir ein herzliches Danke für Dein Willkommensgruss :)
Wie meinst Du das, "wieder einmal einem Flashinteressierten"? :-) Gibts denn so wenige die sich dafür interessieren? Ich habe immer gedacht, Flash sein die zukunft des Webs? *g*
Tjo, Dein Vorschlag interessiert mich natürlich auch :D Ein Tutorial wie das funktioniert wäre sicher eine super Sache!! :applaus:
Signatur von »malligan« Grüsse vom Malligan

6

Mittwoch, 18. Mai 2005, 15:32

gern geschehen :-)

Zitat von »malligan«


Die einzige Schwierigkeit sehe ich auf den ersten Blick nur beim Zurückwechseln in die Szene. (ich bin eben ein wirklicher, blutiger Anfänger :rolleyes:)

ja das kenn ich auch aus meinen Anfangszeiten ... aber da gibt es zwei Wege die nach Rom führen.


Entweder klickst du auf "Szene 1" (Pfeil links) oder klappst das Dropfeld auf (Pfeil rechts) ;)
Man muss nicht alles wissen ... man muss nur jemanden kennen, der einen kennt der es wissen könnte :lol:
Signatur von »TheNobody Style«

7

Mittwoch, 18. Mai 2005, 18:35

Hollaaaaaaaaaa TNS

es hat gefunktioniert!!!!! Sooooooooooooooooo geil!!!! :hupferl: :hupferl: :hupferl:

Daaaaaaaaaanke nochmals!!!!!!!!!!
Signatur von »malligan« Grüsse vom Malligan

8

Mittwoch, 18. Mai 2005, 22:30

So, hier das kleine Button Tutorial...

Buttons mit komplexen Effekten in Flash MX


Schritt 1 - Vorbereitung

Zur Vorbereitung erstellt man einen neuen Movieclip (im weiteren kurz MC). Hierzu benutzt man die Tastenkombination STRG + F8.

Hierbei ist zu beachten, dass "Movieclip" angewählt ist, und nicht "Schaltfläche" oder "Grafik".

Anschließend öffnen wir die Bibliothek (STRG + L) und ziehen den eben erstellten, und noch leeren MC auf die Bühne.


Schritt 2 - Ebenen im MC

Zunächst wird das MC-Symbol (leerer Kreis) angeklickt. Im Eigenschaftsfenster geben wir dem MC einen Instanznahmen. Dieser sollte möglichst kurz sein, damit man ihn sich gut merken kann, denn er ist für den weiteren Verlauf von großer Bedeutung.

Für dieses Tutorial habe ich mich für "button_1" entschieden:



Durch einen Doppelklick auf den MC öffnen wir diesen. Dort benennen wir die erste Ebene in "Script" um, und erstellen anschließend soviele zusätzliche Ebenen, wie wir benötigen (1).




Schritt 3 - Die ActionScript-Ebene

Nun geht es an die erste Ebene. Dort fügen wir nun zunächst so viele Bilder ein, wie die Animation des Buttons insgesamt lang sein soll, also Eingangs- und Ausgangsanimation:
Wie man unschwer erkennt, hat die Animation im Beispiel 32 Bilder.



Nun fügen wir zwei Schlüsselbilder in dieser Ebene ein. Ein Schlüsselbild an der Mitte der Animation (was nicht unbedingt auch der Mitte der Bildanzahl entsprechen muss) und ein Schlüsselbild am Ende der Animation.

Wichtig dabei ist, dass man sich die Bildnummer der beiden Schlüsselbilder merkt. Im unseren Fall sind dies die Bilder 16 und 32:



In die drei Schlüsselbilder (1, 16, 32) kommt nun folgendes ActionScript (im Folgenden kurz AS):

Bild 1

Quellcode

1
stop();
Damit die Animation nicht direkt von alleine startet.

Bild 16

Quellcode

1
stop();
Damit die Animation auf der Höhe der Animation stehen bleibt, bis der Mauszeiger den Button verlässt.

Bild 32

Quellcode

1
_root.button_1.gotoAndStop(1);
Dieser Code bewirkt, dass der Abspielkopf wieder auf die ursprüngliche Position springt, damit die Animation auch beim nächsten Anlauf tadellos funktioniert.

Dieser Code wirkt nicht viel komplexer als die vorherigen, dennoch versteckt sich dahinter eine sehr, sehr mächtige Möglichkeit von Flash, und zwar die Steuerung von MCs. Da dies ein sehr komplexes Thema ist und erzeugt bei Einsteigern oft und gerne jede Menge Verwirrung erzeugt, gehe ich hierauf an dieser Stelle etwas genauer ein:

Flash bietet die Möglichkeit, die Aktionen der einzelnen MCs auf sehr komplexe Art und Weise zu steuern. D.h. man kann von jedem MC aus Aktionen in einem beliebigen anderen MC steuern, egal ob der "Ziel-MC" in andere verschachtelt ist, oder sogar in dynamisch geladenen plaziert ist.

Wichtig ist, dass bei den entsprechenden Aktionen genau angegeben wird, wo sich der entsprechende Film befindet. Dabei ist nur wichtig, wo der Ziel-MC liegt, bei dem Aktionen ausgeführt werden sollen (Starten, Stoppen usw.). Wo der MC liegt, von dem aus die Aktion gesteuert wird, ist dabei (fast) völlig egal.

Die Betrachtungsweise ist immer die gleiche: Man beginnt bei der grundlegendsten aller Zeitleisten, und zwar die des "Hauptfilmes". Das ist die Flash-Datei, welche in die HTML-Datei eingebunden ist. Diese wird als "_root" (vgl. engl. Wurzel) bezeichnet.

Daraufhin folgen alle Instanznamen der MCs, in welcher der Ziel-MC verschachtelt ist. Der letzte Instanzname entspricht dem MC, der gesteuert werden soll.

Im vorliegenden Fall liegt der MC direkt auf der Hauptbühne:

Quellcode

1
_root.button_1.DER_BEFEHL();

Würde man nun einen MC machen, in welchen alle Buttons platziert werden, muss dieser entsprechend mit aufgeführt werden. D.h. plaziert man einen MC mit dem Namen "navigation" auf der Hauptbühne und darin die Buttons, so lautet der korrekte Pfad dorthin:

Quellcode

1
_root.navigation.button_1.DER_BEFEHL();

Ich denke, das Prinzip wird klar... Wenn nicht, fragen... ;)


Schritt 4 - Die Inhalts-Ebenen

Nun füllt man die anderen Ebenen mit dem Inhalt, wie er gewünscht ist. Für die meisten Effekte sind Tweens (Überblendungen) völlig ausreichend:




Schritt 5 - Die Steuerung

Nun verlassen wir die Bearbeitung des MCs (Auf "Szene 1" im Hauptfenster oben links klicken). Nun stellen wir sicher, dass der MC ausgewählt ist und drücken F9 um die ActionScript-Eingabe zu öffnen, falls dies nicht schon der Fall ist.

Ein Wort noch zur Steuerung: Im vorliegenden Fall legen wir die Aktionen zur Steurerung des MCs direkt auf den selbigen. Bei Buttons macht dies natürlich Sinn. An dieser Stelle soll aber erwähnt werden, dass es auch möglich ist, den Code auf andere Objekte zu legen...

Hier der Code zunächst in Gänze:

Quellcode

1
2
3
4
5
6
7
8
9
on (rollOver) {
	_root.button_1.gotoAndPlay(2);
}
on (rollOut) {
	_root.button_1.gotoAndPlay(17);
}
on (release) {
	//Codeanweisung bei Mausklick
}


Der erste Block sorgt dafür, dass die Animation bei Mauskontakt (on[rollOver]) die Animation ab Bild 2 abspielt. Dies macht Sinn, da ja im ersten Bild eine stop-Anweisung das Abspielen verhindert.

Der zweite Teil wird aktiv, wenn der Mauszeiger die Buttonfläche wieder verlässt. Dann wird die Ausgangsanimation abgespielt. Diese beginnt logischerweise ein Bild nach unserer mittlereren stop-Anweisung aus Bild 16 (siehe Schritt 3), also bei Bild 17.

Der dritte, noch leere Codeblock kann allerlei Anweisungen enthalten, wenn der Button angeklickt wird.


Schritt 6 - Das Fazit

Das war es eigentlich schon. Hier nun ein simples Beispiel, wie das Ganze aussehen kann:

[swf=wsb-files.de]flash/button_malligan/button.swf,449,230[/swf]

Wer möchte, kann sich die Flash MX-Datei herunterladen: button.fla

Sollten noch Fragen unbeantwortet geblieben oder neue aufgetaucht sein, immer her damit... ;)

In diesem Sinne

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

9

Donnerstag, 19. Mai 2005, 13:57

Hohooooo :) "kleines" Buttontutorial ist gut :)

Mal schauen ob ich das hinkrieg zuhause *g* auf jeden Fall jetzt schon mal ein dickes Dankeschön dafür!!
Ich hab hier noch mal ne kleine Frage :angel:bin aber glaub ich nicht im richtigen Forum. ich stell sie trotzdem mal....
Also, ich versuche mich ja hier ein bisschen am Dreamweaver. Nun, meine Seite sollte jetzt so aussehen, dass ich oben einen Banner habe, in der Mitte sozusagen das Hauptfenster, und unten die Navigationsleiste. Wie schaff ich das jetzt, dass oben das Banner, und unten die Nav.Leiste immer schön zentral (und fest) ausgerichtet sind und in der Mitte der Text, die Bilder oder was auch immer dort dann rein kommt flexibel sind? So dass es ein Scrollbalken gibt falls mal was nicht ganz auf dem Bildschirm Platz hat. Ich suche mich schon halb zu Tode, aber ich finde keine mir einleuchtenden Antworten auf diese Fragen :undecided:

Falls ich die Frage in einem anderen Forum stellen soll, bitte sagts mir :)

Danke tausenmal!!
Signatur von »malligan« Grüsse vom Malligan

10

Freitag, 20. Mai 2005, 09:26

Hiho alle

weiss mir denn niemand Rat?
Signatur von »malligan« Grüsse vom Malligan

11

Freitag, 20. Mai 2005, 09:49

Verpasse dem Body einfach per CSS eine zentrierte Textausrichtung, d.h.

Quellcode

1
2
3
4
body
{
text-align : center;
}

Dadurch wird alles zentriert.

Des weiteren kannst Du einfach drei DIVs unteinander platzieren, die Du dann entsprechend mit dem Inhalt füllst.

Diesen kannst Du z.B. eine feste Breite zuweisen. Dadurch sind diese zwar immer gleich breit, in der Höhe aber variabel.
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

12

Freitag, 20. Mai 2005, 10:48

Hallo LapisInfernalis

Danke für Dein Beispiel. Ich weiss aber nicht genau obs mir hilf, tschuldigung. Schau doch mal meinen anderen Thread an, dort geht es um Frames. Anscheinend kann man es nicht anders lösen :(

Thread
Signatur von »malligan« Grüsse vom Malligan