Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Einführung in Actionscript (Flash Tutorial)
Tutorial erstellt von Malte, letzte Änderung am 24.10.2007
Uuuuuuuund Action…
In diesem Tutorial bekommen sie eine kleine Einführung in ActionScript 2. Sie werden eine dynamische Flashseite gestalten und somit noch mehr Spaß an Flash bekommen. Aber lange Rede, kurzer Sinn. Schreiten wir zur Tat.
Erstellen sie eine Schaltfläche auf der Bühne. Wie das geht beschreibe ich im Tutorial „Schaltflächen, Movieclips, Grafiken“. Nennen sie die Schaltfläche „Symbol 1“ (dieser Name ist standartgemäß auch vorgegeben). Verändern sie nun nach belieben die Eigenschaften wie z.B. Größe und Farbe. Auch die Stadien „Up“, „Darüber“ und „Gedrückt“ dürfen sie verschönern und Sounds hinzuladen. Tun sie sich keinen Zwang an ;-)

Listing 0100: Eine Schaltfläche.
Nun kommt etwas neues. Wie sie wissen, befindet sich ihre Schaltfläche nun in der Bibliothek. Klicken sie sie mit rechts an (Der Eintrag mit dem Namen „Symbol 1“) und wählen sie duplizieren. In dem sich öffnenden Fenster können sie einen neuen Namen bestimmen, ich belasse es bei „Kopie von Symbol 1“.

Listing 0120: Eine duplizierte Schaltfläche.
Die neue Schaltfläche hat nun GENAU dieselben Eigenschaften wie die erste. Ziehen sie sie nun aus der Bibliothek auf die Bühne und ordnen sie sie rechts neben der ersten Schalkfläche an.

Listing 0130: So weit, so gut.
Erstellen sie nun ein Textfeld mit weißem Hintergrund und schwarzem Rand auf der Bühne. Dies tun sie, Indem sie zuerst Flash - Einführung in Actionscript wählen und dann unten im Feld „Eigenschaften“ das Rahmen-Symbol auswählen (Im Bild rot makiert).
Achtung: Sie sehen ein DropDown-Menü, In dem man zwischen den Optionen „Statischer Text“, „Dynamischer Text“ und „Eingabetext“ hin und herwählen kann. Wählen sie dort bitte „Dynamischer Text“ aus! (Standardgemäß ist „Statischer Text“ eingestellt)

Evtl. Sehen sie doch einige dieser Optionen gar nicht und ihr Eigenschaften-Fenster sieht nur so aus:

Dazu klicken sie einfach auf den Rot markierten Pfeil.
Nun kommen wir zum Instanznamen: Sie sehen neben dem Button für den Rahmen ein Feld, wo der Text „var“ vorsteht. Tragen sie in das Textfeld daneben bitte „text“ ein. Nehmen sie nun bitte ALLE Einstellung wie in diesem Bild vor:

Listing 0200: Die Einstellungen im Textfeld.
Die Einstellungen sind nun abgeschlossen. Wechseln sie nun in den Editiermodus für die erste Schaltfläche, indem sie sie doppelt markieren. Drücken sie nun die Taste „F9“. Der Actionscript-Editor öffnet sich. Tragen sie dort folgende Zeilen ein:
Code:
on(press)
{
text = "Dieser Text wird beim drücken der 1. Schaltfläche angezeigt.";
}

Listing 0200: Das erste Actionscript.
Ich erkläre ihnen jetzt erstmal was sie gemacht haben:
Sie haben die 1. Schaltfläche markiert. Dadurch können sie ihre Eigenschaften verändern. Im Grunde kann von jedem Objekt die Eigenschaft verändert werden. Durch das drücken von „F9“ haben sie den ActionScript-Editor geöffnet. Um den ActionScript-Code erklärt zu bekommen, lesen sie sich bitte das rein theoretische Turorial „AS 2“ durch.
Wiederholen sie das ganze auch für die 2. Schaltfläche:
Sie makieren
2. F9 drücken
ActionScript-code einfügen.
Achtung: Nehmen sie folgenden code zum eintragen:
Code:
on(press)
{
text = "Dieser Text wird beim drücken der 2. Schaltfläche angezeigt. Ganz schön dynamisch ODER?";
}
Testen sie ihr Script nun durch STRG + Enter. Je nach dem, welche Schaltfläche sie anklicken, ändert sich die Beschriftung im Textfeld.

Listing 0200: Fertig!
Achtung: Ihr Textfeld muss groß genug sein. Um seine Größe zu ändern, klicken sie es doppelt an und ziehen sie den Nippel in der rechten unteren Ecke in die beliebige Größe.
Für alle, bei denen es nicht klappt, die können sich die Beispieldatei herunterladen.
Kleiner Tipp zum Schluss:
Sie haben bestimmt bemerkt, das sie sich leicht ihre eigene Homepage damit bauen können, die sie beliebig verschönern können. Um einen Text auf die Buttons zu schreiben, wählen sie das Textwerkzeug im Werkzeigkasten aus, in dem DropDownMenü muss allerdings „Statischer Text“ ausgewählt sein. Sie können den Text dann direkt über den Buttons platzieren.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
In diesem Tutorial bekommen sie eine kleine Einführung in ActionScript 2. Sie werden eine dynamische Flashseite gestalten und somit noch mehr Spaß an Flash bekommen. Aber lange Rede, kurzer Sinn. Schreiten wir zur Tat.
Erstellen sie eine Schaltfläche auf der Bühne. Wie das geht beschreibe ich im Tutorial „Schaltflächen, Movieclips, Grafiken“. Nennen sie die Schaltfläche „Symbol 1“ (dieser Name ist standartgemäß auch vorgegeben). Verändern sie nun nach belieben die Eigenschaften wie z.B. Größe und Farbe. Auch die Stadien „Up“, „Darüber“ und „Gedrückt“ dürfen sie verschönern und Sounds hinzuladen. Tun sie sich keinen Zwang an ;-)

Listing 0100: Eine Schaltfläche.
Nun kommt etwas neues. Wie sie wissen, befindet sich ihre Schaltfläche nun in der Bibliothek. Klicken sie sie mit rechts an (Der Eintrag mit dem Namen „Symbol 1“) und wählen sie duplizieren. In dem sich öffnenden Fenster können sie einen neuen Namen bestimmen, ich belasse es bei „Kopie von Symbol 1“.

Listing 0120: Eine duplizierte Schaltfläche.
Die neue Schaltfläche hat nun GENAU dieselben Eigenschaften wie die erste. Ziehen sie sie nun aus der Bibliothek auf die Bühne und ordnen sie sie rechts neben der ersten Schalkfläche an.

Listing 0130: So weit, so gut.
Erstellen sie nun ein Textfeld mit weißem Hintergrund und schwarzem Rand auf der Bühne. Dies tun sie, Indem sie zuerst Flash - Einführung in Actionscript wählen und dann unten im Feld „Eigenschaften“ das Rahmen-Symbol auswählen (Im Bild rot makiert).
Achtung: Sie sehen ein DropDown-Menü, In dem man zwischen den Optionen „Statischer Text“, „Dynamischer Text“ und „Eingabetext“ hin und herwählen kann. Wählen sie dort bitte „Dynamischer Text“ aus! (Standardgemäß ist „Statischer Text“ eingestellt)

Evtl. Sehen sie doch einige dieser Optionen gar nicht und ihr Eigenschaften-Fenster sieht nur so aus:

Dazu klicken sie einfach auf den Rot markierten Pfeil.
Nun kommen wir zum Instanznamen: Sie sehen neben dem Button für den Rahmen ein Feld, wo der Text „var“ vorsteht. Tragen sie in das Textfeld daneben bitte „text“ ein. Nehmen sie nun bitte ALLE Einstellung wie in diesem Bild vor:

Listing 0200: Die Einstellungen im Textfeld.
Die Einstellungen sind nun abgeschlossen. Wechseln sie nun in den Editiermodus für die erste Schaltfläche, indem sie sie doppelt markieren. Drücken sie nun die Taste „F9“. Der Actionscript-Editor öffnet sich. Tragen sie dort folgende Zeilen ein:
Code:
on(press)
{
text = "Dieser Text wird beim drücken der 1. Schaltfläche angezeigt.";
}

Listing 0200: Das erste Actionscript.
Ich erkläre ihnen jetzt erstmal was sie gemacht haben:
Sie haben die 1. Schaltfläche markiert. Dadurch können sie ihre Eigenschaften verändern. Im Grunde kann von jedem Objekt die Eigenschaft verändert werden. Durch das drücken von „F9“ haben sie den ActionScript-Editor geöffnet. Um den ActionScript-Code erklärt zu bekommen, lesen sie sich bitte das rein theoretische Turorial „AS 2“ durch.
Wiederholen sie das ganze auch für die 2. Schaltfläche:
Sie makieren
2. F9 drücken
ActionScript-code einfügen.
Achtung: Nehmen sie folgenden code zum eintragen:
Code:
on(press)
{
text = "Dieser Text wird beim drücken der 2. Schaltfläche angezeigt. Ganz schön dynamisch ODER?";
}
Testen sie ihr Script nun durch STRG + Enter. Je nach dem, welche Schaltfläche sie anklicken, ändert sich die Beschriftung im Textfeld.

Listing 0200: Fertig!
Achtung: Ihr Textfeld muss groß genug sein. Um seine Größe zu ändern, klicken sie es doppelt an und ziehen sie den Nippel in der rechten unteren Ecke in die beliebige Größe.
Für alle, bei denen es nicht klappt, die können sich die Beispieldatei herunterladen.
Kleiner Tipp zum Schluss:
Sie haben bestimmt bemerkt, das sie sich leicht ihre eigene Homepage damit bauen können, die sie beliebig verschönern können. Um einen Text auf die Buttons zu schreiben, wählen sie das Textwerkzeug im Werkzeigkasten aus, in dem DropDownMenü muss allerdings „Statischer Text“ ausgewählt sein. Sie können den Text dann direkt über den Buttons platzieren.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!