Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Schaltflächen, Movieclips und Grafiken (Flash Tutorial)
Tutorial erstellt von Malte, letzte Änderung am 28.10.2007
Diese Tutorial beschäftigt sich mit 3 Sachen: Schaltflächen, Movieclips und Grafiken.
Wir beginnen mit dem allgemeinen teil:
Einem Kreis (Ja ich weiß Kreise sind meine Lieblingsobjekte)
Wir zeichnen also einen mit beliebigem Radius und anderem Eigenschaften.
Achtung: Hier handelt es sich um einen Kreis – Es können beliebige Objekte wie z.B. Striche und Quadrate verwendet werden!
Jedes beliebige Objekt kann eines der 3 genannten Dinge sein. So haben wir den Vorteil, das wir unsere eigenen Klickbuttons beliebig gestalten können. (Thema „Schaltfläche“ weiter unten)
Wie bekommen wir aber nun diesen Kreis z.B. in eine Schaltfläche konvertiert?
Ganz einfach: Schwarzen Mauszeiger ganz oben links aus der Werkzeigpalette auswählen, damit den Kreis Markieren und „F8“ drücken.

Listing 0100: Wir erstellen eine Schaltfläche
Unten haben wir die drei Möglichkeiten Schaltfläche, Movieclip und Grafik. Wir fangen hier mit dem einfachsten an: Schaltfläche. Wir wählen also aus der Liste „Schaltfläche“ aus und drücken auf „Ok“. Der Name und alles drum herum interessiert uns noch nicht. Wir sehen, dass sich unten einiges im Feld „Eigenschaften“ verändert hat, welches uns aber atm auch nichts angeht. Um die Schaltfläche nun zu editieren, klicken wir sie doppelt an. Wir sehen nun, das sich die Zeitleiste in die 4 Sektionen „Up, darüber, gedrückt und Aktiv“ verwandelt. Wenn wir an diesen etwas verändern wollen, so müssen wir erst mit der rechten Maustaste ein Schlüsselbild auf ihnen einfügen. Dies machen wir nun bei den Stadien „Up“ und „Darüber“ (Bei „Up“ ist standartgemäß ein Schlüsselbild vorhanden). Wir selektieren nun das Schlüsselbild für „Darüber“ und können unseren Kreis nun nach belieben bearbeiten, z.B. die Position, Größe und Farbe verändern oder auch ein Sound abspielen. Dazu Importieren wir einfach einen Sound in die Bibliothek und Dragge’n ihn auf die Bühne (Wie das geht steht im Einsteigertutorial).
Wir verlassen den Editiermodus, indem wir auf eine weisse stelle in der Bühne doppelklicken.
Wenn wir unseren Film nun testen (STRG + Enter) sieht der Kreis im Normalzustand noch so aus wie immer, wenn wir aber mit der Maus darüberfahren, dann verändert er sich so, wie wir ihn eben bearbeitet haben, und es wird je nach belieben auch ein Sound abgespielt. Das selbe kann auch mit dem Schlüsselbild für „Gedrückt“ gemacht werden.
Was noch fehlt ist der Status "aktiv", welcher in diesem Fall wichtig für uns ist, da er die Fläche beschreibt, die zu unserem Mouseover führt. Stellen wir uns als Beispiel einen Kreis vor. Legen wir nun bei "aktiv" ein Quadrat an, so sehen wir zwar später den Kreis und dessen Mouseover, dieses wird aber durch ein Quadrat aktiviert.
Besonders wichtig ist diese Funktion bei Schriftbuttons. Viele Anfänger machen den Fehler und definieren die Schrift auch für diesen Bereich. Die Folge daraus ist, dass man exakt auf die Schrift klicken muss und das will man normalerweise keinem User zumuten.
Aber probiert doch selbst mal ein wenig rum, dann dürfte diese Funktion sehr schnell klar werden.
Die zweite Auswahl, ein Movieclip, kann wie ein zweiter film angesehen werden, der sich bewegen kann, Form, Größe, Farbe verändern kann, seinen Inhalt verändern kann etc. Ihn werden wir noch oft brauchen.
Eine Grafik wird wie ein externes bild behandelt und kann nach diesem Verfahren auch so bearbeitet werden. Ich glaube, der Rest erklärt sich von selbst.
So, das wars erstmal hier, ich wünsch euch viel Spaß beim erstellen von Movieclips und Klickbuttons!
Kleiner tipp am Rande: Schon bemerkt? Sobald eine Schaltfläche, eine Grafik oder ein Movieclip erstellt wird, taucht diese Objekt in der Bibliothek auf und kann jederzeit wieder auf der Bühne platziert werden. Alle Eigenschaften bleiben erhalten!
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Wir beginnen mit dem allgemeinen teil:
Einem Kreis (Ja ich weiß Kreise sind meine Lieblingsobjekte)
Wir zeichnen also einen mit beliebigem Radius und anderem Eigenschaften.
Achtung: Hier handelt es sich um einen Kreis – Es können beliebige Objekte wie z.B. Striche und Quadrate verwendet werden!
Jedes beliebige Objekt kann eines der 3 genannten Dinge sein. So haben wir den Vorteil, das wir unsere eigenen Klickbuttons beliebig gestalten können. (Thema „Schaltfläche“ weiter unten)
Wie bekommen wir aber nun diesen Kreis z.B. in eine Schaltfläche konvertiert?
Ganz einfach: Schwarzen Mauszeiger ganz oben links aus der Werkzeigpalette auswählen, damit den Kreis Markieren und „F8“ drücken.

Listing 0100: Wir erstellen eine Schaltfläche
Unten haben wir die drei Möglichkeiten Schaltfläche, Movieclip und Grafik. Wir fangen hier mit dem einfachsten an: Schaltfläche. Wir wählen also aus der Liste „Schaltfläche“ aus und drücken auf „Ok“. Der Name und alles drum herum interessiert uns noch nicht. Wir sehen, dass sich unten einiges im Feld „Eigenschaften“ verändert hat, welches uns aber atm auch nichts angeht. Um die Schaltfläche nun zu editieren, klicken wir sie doppelt an. Wir sehen nun, das sich die Zeitleiste in die 4 Sektionen „Up, darüber, gedrückt und Aktiv“ verwandelt. Wenn wir an diesen etwas verändern wollen, so müssen wir erst mit der rechten Maustaste ein Schlüsselbild auf ihnen einfügen. Dies machen wir nun bei den Stadien „Up“ und „Darüber“ (Bei „Up“ ist standartgemäß ein Schlüsselbild vorhanden). Wir selektieren nun das Schlüsselbild für „Darüber“ und können unseren Kreis nun nach belieben bearbeiten, z.B. die Position, Größe und Farbe verändern oder auch ein Sound abspielen. Dazu Importieren wir einfach einen Sound in die Bibliothek und Dragge’n ihn auf die Bühne (Wie das geht steht im Einsteigertutorial).
Wir verlassen den Editiermodus, indem wir auf eine weisse stelle in der Bühne doppelklicken.
Wenn wir unseren Film nun testen (STRG + Enter) sieht der Kreis im Normalzustand noch so aus wie immer, wenn wir aber mit der Maus darüberfahren, dann verändert er sich so, wie wir ihn eben bearbeitet haben, und es wird je nach belieben auch ein Sound abgespielt. Das selbe kann auch mit dem Schlüsselbild für „Gedrückt“ gemacht werden.
Was noch fehlt ist der Status "aktiv", welcher in diesem Fall wichtig für uns ist, da er die Fläche beschreibt, die zu unserem Mouseover führt. Stellen wir uns als Beispiel einen Kreis vor. Legen wir nun bei "aktiv" ein Quadrat an, so sehen wir zwar später den Kreis und dessen Mouseover, dieses wird aber durch ein Quadrat aktiviert.
Besonders wichtig ist diese Funktion bei Schriftbuttons. Viele Anfänger machen den Fehler und definieren die Schrift auch für diesen Bereich. Die Folge daraus ist, dass man exakt auf die Schrift klicken muss und das will man normalerweise keinem User zumuten.
Aber probiert doch selbst mal ein wenig rum, dann dürfte diese Funktion sehr schnell klar werden.
Die zweite Auswahl, ein Movieclip, kann wie ein zweiter film angesehen werden, der sich bewegen kann, Form, Größe, Farbe verändern kann, seinen Inhalt verändern kann etc. Ihn werden wir noch oft brauchen.
Eine Grafik wird wie ein externes bild behandelt und kann nach diesem Verfahren auch so bearbeitet werden. Ich glaube, der Rest erklärt sich von selbst.
So, das wars erstmal hier, ich wünsch euch viel Spaß beim erstellen von Movieclips und Klickbuttons!
Kleiner tipp am Rande: Schon bemerkt? Sobald eine Schaltfläche, eine Grafik oder ein Movieclip erstellt wird, taucht diese Objekt in der Bibliothek auf und kann jederzeit wieder auf der Bühne platziert werden. Alle Eigenschaften bleiben erhalten!
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!