AS3 101: Funktionen – Basix

German (Deutsch) translation by Valentina (you can also view the original English article)

Dies ist Teil 2 der Einführung in die ActionScript 3.0-Reihe. Wir werden über Funktionen sprechen. Genau wie beim letzten Mal, als wir uns auf Variablen konzentrierten, richten wir uns in erster Linie an den Anfänger-Programmierer, der wenig bis gar keine Erfahrung mit Funktionen hat. Aber auch wenn Sie mit Funktionen relativ vertraut sind, möchten Sie dieses Tutorial vielleicht überfliegen, wenn bestimmte Aspekte davon – wie Datentypen und Standardwerte – nicht ganz zu Ihnen passen.

Wir werden die erste Hälfte des Tutorials damit verbringen, Dinge auf einer eher theoretischen Ebene zu behandeln, und dann einige dieser Ideen in der zweiten Hälfte anwenden. Wir werden ein sehr einfaches Stück mit einer Reihe von Schaltflächen erstellen, die den Inhalt auf einem anderen Teil der Seite austauschen. Dazu werden einige Funktionen verwendet, in erster Linie eine, die die Einstellung des Inhalts übernimmt. Machen Sie es sich bequem, schauen Sie sich die Demo an und steigen Sie dann in das Tut ein..

Schritt 1: Was ist eine Funktion?

Wenn Sie das AS3 101-Tutorial zu Variablen lesen, wissen Sie, dass das Programmieren von Variablen ihre Wurzeln in der Mathematik hat. Funktionen teilen sich tatsächlich dieselbe Abstammung, was passend ist, da Variablen und Funktionen die beiden grundlegendsten Bausteine in jeder Programmiersprache sind.

In der Mathematik nimmt eine Funktion einen einzelnen Wert an und erzeugt einen zugehörigen einzelnen Wert. Das heißt, die Funktion von x ist der Wert y. Die Eingabe von x in die Funktion erzeugt einen neuen Wert y. Der gleiche Wert für x sollte immer den gleichen Wert von y ergeben.

In der Programmierung kann eine Funktion genau die gleiche Aufgabe erfüllen wie in der Mathematik, ist jedoch weit weniger von den Ein- und Ausgabewerten abhängig. Die Idee ist jedoch dieselbe: Eine komplexere Aufgabe wird in eine Art Wrapper gekapselt, den wir dann durch einfachen Aufruf der Funktion ausführen können.

Das heißt, wir haben ein wenig Code, um einen Stern zu zeichnen, und wir brauchen viele Sterne in unserem Programm. Vielleicht braucht es 10 Zeilen Code, um den Stern tatsächlich zu zeichnen. Anstatt diese 10 Zeilen (oder Varianten davon) immer wieder zu schreiben, können wir sie in eine Funktion stecken. Wenn wir dies tun, rufen wir jedes Mal, wenn wir einen Stern zeichnen müssen, unsere Funktion einfach beim Namen auf, anstatt jedes Mal diese 10 Zeilen zu kopieren und einzufügen.

Anders ausgedrückt, so wie Variablen einem Wert einen Namen geben können, geben Funktionen Aufgaben Namen. Einmal definiert, kann die Aufgabe einfach wiederholt werden, indem sie mit dem Namen aufgerufen wird.

Für diejenigen unter Ihnen, die mit anderen Programmierkenntnissen zu ActionScript gekommen sind, oder diejenigen unter Ihnen, die hier vielleicht anfangen, sich aber in anderen Sprachen versuchen werden, könnte Folgendes für Sie interessant sein. Was ActionScript als "Funktion" bezeichnet, ist ein sehr grundlegendes Konzept in der gesamten Programmierung, kann aber in anderen Sprachen andere Namen tragen. In der objektorientierten Programmierung(OOP) hören Sie beispielsweise den Begriff "Methode" viel mehr als Funktion, obwohl sie im Wesentlichen gleich sind. Außerdem sind die Begriffe "Unterprogramm", "Unterprogramm" und "Prozedur" nur Synonyme für dieselbe Idee.

Für weitere Informationen (oder eine Auffrischung!) zu mathematischen Funktionen besuchen Sie bitte den Wikipedia-Eintrag zu diesem Thema. Um etwas mehr mit mathematischen Funktionen herumzuspielen, bietet Wolfram eine hervorragende Sammlung von Funktionen und Visualisierungen. Weitere grundlegende Informationen zur programmatischen Funktion finden Sie wiederum in Wikipedia.

Schritt 2: Erstellen Sie bereits eine Funktion!

OK, sehen wir uns an, was es braucht, um eine Funktion in ActionScript 3.0 zu schreiben.

Öffnen Sie ein neues Flash-Dokument (natürlich ActionScript 3), klicken Sie in den ersten Frame der ersten Ebene (es sollte der einzige verfügbare Frame sein) und drücken Sie F9 (Windows) oder Opt-F9 (Macintosh), um das Bedienfeld „Aktionen“ aufzurufen. Fahren Sie fort und heften Sie das Skript an, damit wir unseren Platz nicht verlieren, wenn Sie an anderer Stelle im Dokument herumklicken müssen.

Schreiben wir das absolute Minimum, mit dem wir möglicherweise durchkommen, und nennen es dennoch eine gültige Funktion:

1	function doSomething() {
2	trace("Doing something.");
3	}

Lassen Sie uns das jetzt aufschlüsseln. Erstens gibt es eine Schlüsselwort-Funktion. Dies ist ein reserviertes Wort in der ActionScript-Sprache und ähnelt dem Schlüsselwort var. Wenn Sie es verwenden, sagen Sie, dass als nächstes der Name der Funktion folgen wird (ähnlich wie das nächste, was nach var der Name der Variablen ist).

In diesem Fall ist "doSomething" der Name der Funktion. Die Regeln für die Benennung einer Funktion sind die gleichen wie für die Benennung von Variablen: Alphanumerische Zeichen, der Unterstrich und das Dollarzeichen sind die einzigen zulässigen Zeichen und der Name darf nicht mit einer Zahl beginnen. Wenn Sie sich an die Diskussion über die Benennung von Variablen erinnern, gelten die gleichen Konventionen und Empfehlungen: Err auf der Seite beschreibender Namen anstelle von Kurznamen, verwenden Sie die Groß-/Kleinschreibung (und beginnen Sie mit einem Kleinbuchstaben) usw.

Nach dem Namen kommt eine Reihe von leeren Klammern. Wir werden später mehr darüber sprechen, aber im Moment sollten Sie sich nur bewusst sein, dass sie ein erforderlicher Teil der Funktionsdeklaration sind (und oft als Teil des Namens angesehen werden, aber wirklich nicht sind).

Dann haben wir eine öffnende geschweifte Klammer. Ganz am Ende unseres Snippets haben wir eine schließende geschweifte Klammer. Diese geschweiften Klammern legen den Hauptteil der Funktion beiseite. Alles im Körper ist Code, der ausgeführt werden kann. Dieser Code wird ausgeführt, wenn die Funktion ausgeführt (oder aufgerufen) wird. In unserem Fall verfolgt die Funktion einfach eine bestimmte Nachricht. In unserem Sternzeichen-Szenario hätten wir mehrere Zeilen Zeichencode zwischen den geschweiften Klammern.

Zusammenfassend zeigt das folgende Bild die Anatomie einer (minimalen) Funktion:

Schritt 3: Verstehen, wann der Körper ausführt

Beachten Sie, dass der Code in der Funktion zwar ausgeführt wird, wenn sie aufgerufen wird, der Code jedoch NICHT ausgeführt wird, wenn die Funktion definiert wird. Probieren Sie es aus, indem Sie den Film jetzt testen. Im Moment definiert Ihr Skript nur die Funktion, ruft sie aber nicht auf. Wenn Sie den Film testen, sollten Sie ... nichts sehen! Das heißt, alles funktioniert und ist zu erwarten. Wohlgemerkt, eine Funktion nützt nichts, wenn wir sie nicht aufrufen, also machen wir das als nächstes.

Schritt 4: Rufen Sie die Funktion auf

Um unsere Funktion aufzurufen, schreiben wir einfach Folgendes in das Skript:

1	doSomething();

Wenn Sie den Film testen, führt das Hinzufügen dieser Zeile dazu, dass eine Ablaufverfolgung an das Ausgabebedienfeld gesendet wird:

Ein paar Dinge zum Verständnis der Syntax: Um auf die Funktion zu verweisen, verwenden wir zunächst einfach ihren Namen. Denken Sie daran, dass man sich eine Funktion als benannte Aufgabe vorstellen kann. Wenn wir den Namen der Funktion beispielsweise in "doSomethingElse" ändern, würden wir sie aufrufen, indem wir "doSomethingElse()" schreiben. Dies ist der Benennung und Verwendung von Variablen sehr ähnlich.

Zweitens sind die Klammern am Ende erforderlich. Sie werden als Ausführungsoperator bezeichnet. Ohne sie haben wir uns einfach auf die Funktion selbst bezogen, ohne deren Ausführung zu verlangen. Dies ist tatsächlich eine sehr nützliche Technik, weshalb Sie zu dem zusätzlichen Schritt gehen müssen, um die Funktion tatsächlich aufzurufen. Diese nicht-anrufende Technik geht jedoch über den Rahmen dieses Tutorials hinaus, und wir müssen eine andere Gelegenheit finden, dies zu besprechen. Wenn Sie es versuchen möchten, entfernen Sie einfach die Klammern, lassen Sie den Funktionsnamen allein und führen Sie den Film aus. Sie werden sehen, dass Ihr Trace verschwindet, da Sie die Funktion nicht mehr tatsächlich aufrufen (ausführen).

Oftmals besteht der Sinn einer Funktion darin, eine bestimmte Aufgabe zu kapseln, damit sie nicht einmal, sondern beliebig oft aufgerufen werden kann, jedes Mal mit den gleichen Ergebnissen. Versuchen wir Folgendes: Kopieren Sie doSomething(); Zeile so oft Sie möchten und führen Sie den Film aus. Sie sollten die entsprechende Anzahl von Spuren im Ausgabebedienfeld sehen.

Beachten Sie außerdem, dass die Reihenfolge der Funktionsdefinition und des Funktionsaufrufs keine Rolle spielt. Das gesamte Skript könnte so aussehen:

1	function doSomething() {
2	trace("Doing something.");
3	}
4	doSomething();

Oder dieses

1	doSomething();
2	function log() {
3	trace("Doing something.");
4	}

Vergleichen Sie dies mit Variablen. Wenn Sie versuchten, eine Variable zu verwenden, bevor sie deklariert wurde, würde dies zu Problemen und wahrscheinlich zu Fehlern führen, die Ihr gesamtes Programm zum Absturz bringen würden. ActionScript analysiert Ihr Skript tatsächlich und stellt sicher, dass die Funktionen definiert und verfügbar sind, bevor der Rest des Skripts tatsächlich ausgeführt wird. Es gibt keinen wirklichen Konsens darüber, welches der obigen Skripte "richtig" ist. Vertrauen Sie in diesem Fall Ihren Gefühlen.

Schritt 5: Ausführungsreihenfolge verstehen

Schauen wir uns ein wenig genauer an, wie und wann eine Funktion ausgeführt wird. Der Hauptteil der Funktion wird ausgeführt, wenn sie aufgerufen wird; das wissen wir schon. Es ist jedoch wichtig zu verstehen, dass das Skript einen Funktionsaufruf im Grunde so behandelt, als ob der Hauptteil der Funktion kopiert und in die Zeile eingefügt würde, in der der Aufruf stattfindet. Um dies zu veranschaulichen, schreiben wir ein kleines Skript, das unsere doSomething-Funktion verwendet.

function doSomething() {
	trace("Doing something.");
}

trace("This happens first.");
doSomething();
trace("This happens last.");

Wenn Sie dies ausführen, sehen Sie im Ausgabebedienfeld Folgendes:

Beachten Sie, dass, obwohl das Erste im Skript die Funktionsdefinition ist, das Erste, was im Programm passiert, die Trace-Anweisung ist, die nach der Funktionsdefinition erfolgt. Da wir die Funktion nach diesem Trace aufrufen, sehen wir dann den Trace von der zweiten Funktion und schließlich folgt der zweite Trace, den wir machen. Nochmals: Eine Funktion wird nicht ausgeführt, wenn sie definiert wird; es muss aufgerufen werden, um den Code auszuführen.

Schritt 6: Parameter verstehen

Manchmal können Funktionen in ihrer eigenen isolierten Welt existieren, einige Codezeilen ausführen und nie etwas anderes tun. Sie haben beispielsweise einige Funktionen zum Starten und Stoppen der Wiedergabe eines Videos, deren Logik sich von Verwendung zu Verwendung nie wirklich ändert.

Meistens möchten Sie jedoch, dass eine Funktion eine Aufgabe erledigt und diese von Aufruf zu Aufruf leicht variiert. Das Laden eines Videos kann beispielsweise jedes Mal die gleichen Schritte umfassen, mit Ausnahme der zu ladenden Videodatei. Mit Hilfe von Parametern können wir eine Funktion flexibler gestalten, indem wir für jeden Funktionsaufruf bestimmte Werte unterschiedlich setzen lassen.

Um eine integrierte Funktion als Beispiel zu verwenden, betrachten Sie eine der mathematischen Funktionen wie Math.max(). max nimmt zwei Zahlen, vergleicht sie und gibt diejenige mit dem höheren Wert zurück. Um max zu verwenden, müssen Sie es mit zwei Zahlen in Form von Parametern versorgen. Ansonsten wäre es keine sehr nützliche Funktion.

Es ist wichtig zu beachten, dass Parameter in Wirklichkeit nur Variablen sind. Sie sind insofern besonders, als sie nur für die Dauer der Funktion gültig sind und beim nächsten Aufruf der Funktion mit(möglicherweise) neuen Werten neu erstellt werden. Sobald die Funktion beendet(beendet) ist, werden die Parameter weggefegt. Innerhalb der Funktion werden sie genauso verwendet wie Variablen. Wenn Sie eine Auffrischung der Vor- und Nachteile von Variablen benötigen, empfehle ich Ihnen, mein vorheriges AS3 101-Tutorial zu Variablen zu lesen.

Um eine Tangente in die Esoterik zu bringen, wird der Begriff „Argument“ oft synonym mit dem Begriff „Parameter“ verwendet. Es gibt jedoch einen feinen Unterschied zwischen den beiden Begriffen. Technisch gesehen ist ein Parameter die Variable, die die Funktion definiert, und ein Argument ist der Wert, der beim Aufruf der Funktion an den Parameter übergeben wird. Mit anderen Worten, der Parameter ist der Variablenname und das Argument ist der Wert, der dieser Variablen zugewiesen wurde. Diese Unterscheidung wird jedoch weitgehend ignoriert, und die meisten Programmierer wissen, wovon Sie sprechen, unabhängig davon, welchen Begriff Sie verwenden.

Auch hier empfehle ich zum Weiterlesen Wikipedia oder sogar Google.

Schritt 7: Parameter hinzufügen

Was wäre, wenn unsere doSomething-Funktion nicht einfach "etwas tun" nachverfolgen würde, sondern uns stattdessen die verfolgte Nachricht anpassen ließe? Machen wir es so (und wenn wir schon dabei sind, machen wir den Funktionsnamen etwas pragmatischer):

1	function log(message) {
2	trace("Log: " + message);
3	}

Sehen Sie, was gerade passiert ist? Wir haben einen Parameter zwischen die Klammern geschmuggelt. Dorthin gehen Parameter (zumindest in ActionScript). Sie geben einfach den Namen ein, den der Parameter (die Variable) haben soll, und verwenden diesen Namen dann, wo immer Sie diesen Wert haben möchten. Das heißt, es ist wie eine Variable, nur ohne das Schlüsselwort "var".

Um diese Funktion aufzurufen und ein Argument weiterzugeben (denken Sie daran, Argumente sind die Werte, die an Parameter gesendet werden ... aber das ist Haarspalterei), ziehen wir einen ähnlichen Trick und setzen den Wert, den wir übergeben möchten, zwischen die Klammern (der Aufruf Operator), wenn wir die Funktion aufrufen:

1	log("This isn't just a trace, it's a log.");

Wenn die obige Funktion und der Funktionsaufruf ausgeführt werden, erhalten wir im Ausgabebedienfeld Folgendes:

Darüber hinaus können wir log erneut aufrufen, aber einen anderen Wert an den Message-Parameter übergeben und ähnliche, aber unterschiedliche Ergebnisse erhalten. Das folgende vollständige Skript:

function log(message) {
	trace("Log: " + message);
}
log("This isn't just a trace, it's a log.");
log("Here we go again.");

Führt zu zwei Ablaufverfolgungen im Ausgabebedienfeld, denen jeweils „Log:“ vorangestellt ist, aber danach ist es eine benutzerdefinierte Nachricht. Wir haben die Anfänge eines benutzerdefinierten Protokollierungstools, das möglicherweise reichhaltigere und flexiblere Spuren liefern könnte.

Schritt 8: Einen weiteren Parameter hinzufügen

Wenn wir mehr als einen Parameter einschließen wollten, könnten wir einfach Kommas dazwischen setzen und sicherstellen, dass sie alle zwischen den Klammern stehen. Fügen wir beispielsweise einen Level-Parameter hinzu:

function log(message, level) {
	if (level >= 1) {
		trace("Log: " + message);
	}
}

Jetzt haben wir zwei Parameter. Der erste ist genau der gleiche wie zuvor, und wir haben einen Level-Parameter hinzugefügt. Dies ist eine Zahl, die, wenn sie größer als 1 ist, die Ablaufverfolgung ermöglicht. Theoretisch könnten wir Protokollnachrichten aktiv halten, aber unterdrücken, indem wir ihr Level auf 0 setzen.

Um die Funktion aufzurufen, verwenden wir wieder ein Komma, um die Argumentliste zu trennen:

1	log("This isn't just a trace, it's a log.", 2);
2	log("Here we go again.", 0);

Wenn Sie den Film mit diesen Änderungen ausführen, sehen Sie nur die erste Protokollmeldung. Sie können dann mit der Idee der Protokollebenen herumspielen, indem Sie die beteiligten Zahlen sowohl beim Aufruf der Funktion als auch in der Funktion selbst ändern. Das heißt, durch Ändern der Zeile

1	if (level >= 1)

1	if (level >= 3)

Am Ende haben Sie keine Spuren. Ändern in

1	if (level >= 0)

gibt Ihnen zwei Spuren. Stellen Sie sich vor, Sie hätten mehrere Dutzend Protokollmeldungen in Ihrer Anwendung. Sie können die Ausführlichkeit Ihrer Ausgabe erhöhen oder verringern, indem Sie eine einzelne Zahl in der Funktion ändern. Dies ist nur ein weiteres Beispiel dafür, warum Funktionen in der Lage sind, Code zu kapseln und wiederzuverwenden. Eine Änderung an einem Ort kann das Verhalten mehrerer anderer Dinge ändern.

Schritt 9: Datentypisierung-Parameter

Wie Sie im Variablen-Tutorial gelernt haben, kann (und sollte) eine Variable einen Datentyp haben. Wenn Sie Datentypen auffrischen möchten, verweise ich Sie zurück auf das Variablen-Tutorial, aber die 10-Cent-Zusammenfassung lautet: Eine Variable ohne Datentyp ist einfach ein Name, der sich auf einen Wert bezieht. Durch Hinzufügen eines Datentyps können wir garantieren, dass der Wert der Variablen einen bestimmten Typ hat, z. B. String, Number, MovieClip oder XML. In ActionScript sieht das so aus:

1	var totalPigeons:Number;

Der Doppelpunkt gibt an, dass die Variable links den Typ hat, der rechts deklariert ist.

In Funktionen ist es eine gute Idee, Ihre Parameter mit einem Datentyp zu versehen, aus genau den gleichen Gründen, aus denen es eine gute Idee ist, Ihre Variablen zu typisieren. Und es sieht schrecklich ähnlich aus. Wir wissen, dass unser Nachrichtenparameter vom Typ String sein sollte. Wir wissen auch, dass der Parameter level numerisch ist, aber nicht nur das, er wäre idealerweise eine nicht negative ganze Zahl, was bedeutet, dass ein uint ein guter Kandidat für einen Datentyp ist. Wir ändern die Funktion so, dass sie wie folgt aussieht:

function log(message:String, level:uint) {
	if (level >= 1) {
		trace("Log: " + message);
	}
}

Die Datentypisierung von Parametern hat ziemlich den gleichen Effekt wie die Datentypisierung von normalen Variablen. Das bemerkenswerteste ist, dass es den Missbrauch der Funktion verhindert. Nehmen wir an, wir haben die Reihenfolge der Parameter durcheinander gebracht und versucht, es so zu nennen:

1	log(2, "This isn't just a trace, it's a log.");

Da wir versucht haben, einen numerischen Wert an einen als String typisierten Parameter und einen String an einen als uint typisierten Parameter zu übergeben, erhalten wir beim Testen des Films die folgenden Compiler-Fehler:

1	1067: Implicit coercion of a value of type int to an unrelated type String.
2	1067: Implicit coercion of a value of type String to an unrelated type uint.

"Zwang" ist ein etwas schändlicher Begriff für den Versuch, den Typ eines Wertes zu ändern. "Impliziter Zwang" ist, wenn wir versuchen, dies zu tun, ohne den Wert explizit umzuwandeln. Dies ist bei verwandten Typen wie Number, int und uint möglich, aber bei nicht verwandten Typen wie Strings und uints schlägt dies fehl und wir erhalten den Fehler. Der Compiler ist nicht schlau genug, um vorzuschlagen, dass Sie die Argumente vielleicht in der falschen Reihenfolge erhalten haben, aber Sie erhalten eine Benachrichtigung, dass etwas nicht stimmt und Sie sind gezwungen, den Fehler zu korrigieren.

Schritt 10: Optionale Parameter

Manchmal braucht man einen Parameter und manchmal nicht. In einem solchen Fall können Sie den Parameter optional machen. Zur Vereinfachung bietet ActionScript 3.0 eine Methode zum Bereitstellen von Standardwerten für Parameter, denen kein Wert übergeben wird. Tatsächlich ist es dieser Standardwert-Mechanismus, der einen Parameter optional macht.

Lassen Sie uns den Level-Parameter optional machen, damit die Funktion auch dann funktionieren kann, wenn er nicht übergeben wird, aber annehmen, dass wir einen Level von 0 haben wollten. Wir müssen einfach die Funktionssignatur wie folgt ändern:

1	function log(message:String, level:uint=0) {

Beachten Sie das =0 nach der Deklaration und dem Datentyp des zweiten Parameters. Indem wir ein Gleichheitszeichen und dann einen Wert eingeben, erklären wir, dass der Parameter optional ist und geben den Standardwert an, wenn das Argument weggelassen wird.

Wenn wir dann ein paar Nachrichten protokollieren sollten:

1	log("This is an important message", 1);
2	log("This is another important message");
3	log("This is a so-so message", 0);

Wir werden sehen, dass nur die erste Nachricht tatsächlich protokolliert wird. Der zweite lässt das Level-Agrument weg und die Funktion geht daher davon aus, dass wir einen Wert von 0 haben wollten, was zu keiner Spur führt.

Dies wirft die Frage auf: Was passiert, wenn wir die Nachricht weglassen? Der Message-Parameter wird implizit als erforderlich deklariert, da er nicht als optional deklariert ist. Wenn Sie versuchen, den Film mit dem folgenden Login auszuführen:

log();

Sie erhalten diesen Fehler:

1	1136: Incorrect number of arguments. Expected 1.

Was ziemlich selbsterklärend ist. Es gibt insgesamt einen erforderlichen Parameter, aber wir haben keine Argumente mitgeschickt. Daher stimmt die Anzahl der Argumente nicht. Dies führt zu einem weiteren erwähnenswerten Punkt, und wenn wir drei Parameter übergeben hätten, würden wir im Wesentlichen den gleichen Fehler erhalten:

1	1137: Incorrect number of arguments. Expected no more than 2.

Denken Sie daran, dass die Parameter, die Sie für eine Funktion festlegen, in Stein gemeißelt sind und davon ausgegangen wird, dass alle erforderlichen Parameter übergeben werden müssen, damit eine Funktion ordnungsgemäß funktioniert.

Natürlich gibt es ein paar Regeln, wenn es um optionale Parameter geht. Am leichtesten vergisst man, dass optionale Parameter nach erforderlichen Parametern stehen müssen. Das ist zum Beispiel nicht gut:

1	function log(level:uint=0, message:String):void {

Schließlich müssen die Standardwerte Konstanten zur Kompilierzeit sein, was eine ausgefallene Phrase ist, die Sie sich einfach so vorstellen können, dass sie nichts allzu Komplexes bedeutet. Der Zahlenwert 0 ist in Ordnung. Der mathematische Ausdruck 1+ 3 ist auch in Ordnung. Aber Math.sin(0) muss zur Laufzeit berechnet werden (weil Math.sin eine Funktion ist), ist zu komplex und führt zu einem Fehler. Ich werde nicht das Regelwerk aufstellen, was funktioniert und was nicht. Probieren Sie es einfach aus und wenn Flash es nicht mag, erfahren Sie es über das Compiler-Fehlerfenster.

Schritt 11: Rückgabewerte

Unsere Log-Funktion ist eine Art Knopf oder Schalter. Wie ein Türknauf, der eine Tür öffnet, hat er eine Funktion, die dazu führt, dass eine Aktion ausgeführt wird. Das ist in Ordnung, normal und erwartet. Einige Funktionen werden einfach Dinge tun. Es ist jedoch gut zu wissen, dass eine Funktion nicht nur etwas tun kann, sondern Ihnen auch etwas zurückgeben kann. Dies wird als Rückgabe eines Wertes bezeichnet. Wenn wir zum Beispiel jemals eine Mathematik ausführen müssen, ist der Aufruf einer Funktion, die einen Wert zurückgibt, ein guter Weg, dies zu tun.

ActionScript liefert uns trigonometrische Funktionen wie Math.sin und Math.cos, die gute Beispiele für Funktionen sind, die einen Wert zurückgeben (wie alle Math-Funktionen). Eine Sache bei den trigonometrischen Funktionen, die Leute abschreckt, ist, dass der Winkelparameter eine Zahl ist, die im Bogenmaß angegeben werden soll. Die meisten Leute denken in Graden, daher ist in der Regel eine Umrechnung notwendig. Wir können eine Funktion schreiben, die es uns ermöglicht, einen Wert in Grad zu übergeben und den Sinuswert als Rückgabewert zurückzugeben.

1	function degSin(degrees:Number):Number {
2	var radians:Number = degrees * Math.PI / 180;
3	return Math.sin(radians);
4	}

Hier sind einige Dinge passiert. Beachten Sie zunächst, dass wir ganz am Ende der Funktionssignatur nach den Klammern eine ":Number" haben. Dies ist die Art und Weise von ActionScript, dass diese Funktion einen Wert zurückgibt und dass dieser vom Typ Zahl (oder was auch immer Sie angeben) ist. Durch die Angabe eines Rückgabetyps sagen wir nicht nur, dass diese Funktion einen Wert zurückgibt, sondern stellen auch sicher, dass wir tatsächlich einen Wert zurückgeben. Wenn kein Wert zurückgegeben wird, wird ein Fehler verursacht, ebenso wie ein Fehler des falschen Typs.

Das zweite, was passierte, war in der letzten Zeile, wir haben das Schlüsselwort return eingeführt. Dies tut, was Sie vielleicht schon denken, es tut. Es bringt das Ding zu seiner Rechten zurück. In diesem Fall berechnen wir den Sinus des Winkels, nachdem die Grad in Bogenmaß umgewandelt wurden, und geben diesen Wert zurück. Wir haben tatsächlich einige Schichten im Gange; Wenn wir degSin aufrufen, ruft es Math.sin auf, das einen Wert an degSin zurückgibt, das dann einen Wert an den ursprünglichen Aufrufpunkt zurückgibt.

Die Verwendung von Rückgabewerten ist einfach; Rufen Sie einfach die Funktion auf, bei der der Wert ausgewertet werden soll. Beispielsweise:

1	trace("The sine of 45 degrees is " + degSin(45));

Was ist, wenn wir keinen Wert zurückgeben, wie in unserer Protokollfunktion? Nun, Best Practice legt nahe, dass wir diese Absichten immer noch deklarieren. Wir können dies tun, indem wir unsere Funktion genauso wie bei der letzten datentypisieren, nur verwenden wir einen speziellen Typ, der als "void" bekannt ist.

1	function log(message:String, level:uint=0):void {

Dies besagt, dass die angegebene Funktion keinen Wert zurückgibt und der Versuch, dies zu tun, einen Fehler verursacht. Es mag trivial erscheinen, aber sicherzustellen, dass alle Ihre Funktionen richtig eingegeben wurden, einschließlich der nicht zurückkehrenden, kann die Entwicklung tatsächlich beschleunigen, indem Sie auf Probleme aufmerksam gemacht werden, die auftreten, wenn die Regeln nicht befolgt werden.

Schließlich passierte in diesem Schritt noch eine dritte Sache, die ich irgendwie in den Code eingeschmuggelt habe, aber es muss erwähnt werden. Wißen Sie was das ist? Natürlich tun Sie das, Sie haben ein scharfes Auge! Das ist richtig, ich habe eine lokale Variable in der degSin-Funktion erstellt. Das hat nicht viel mit der direkten Rückgabe von Werten zu tun, aber es ist ein wichtiges Konzept und jetzt ist ein guter Zeitpunkt, es zu erwähnen. Wenn eine Variable im Hauptteil einer Funktion erstellt wird, wird sie als lokale Variable bezeichnet. Das heißt, es ist "lokal" für die Funktion selbst und nichts anderes hat Zugriff darauf. Mit anderen Worten, sie sind Wegwerfvariablen. Dies ist eine wichtige Unterscheidung, da Sie manchmal eine Variable nur für die Zwecke der Funktion verwenden möchten (wie in diesem Fall: Wir benötigen nur eine vorübergehende Umwandlung von Grad in Bogenmaß). Andererseits möchten Sie manchmal, dass die Variable bestehen bleibt. In diesem Fall fragen Sie sich vielleicht, warum der Wert, den Sie in einer Funktion festlegen, außerhalb der Funktion nicht verfügbar ist.

Es läuft auf eine Grundregel hinaus: Eine außerhalb einer Funktion definierte Variable ist innerhalb der Funktion verfügbar; eine innerhalb einer Funktion definierte Variable ist außerhalb der Funktion nicht verfügbar. Zu klären; eine Variable, die in einer Funktion definiert ist, ist in einer anderen Funktion nicht verfügbar. Dies fängt an, in das Thema des Umfangs einzudringen, das schwer zu fassen sein kann, also hören wir hier auf, darüber zu sprechen.

Zur weiteren Lektüre verweise ich noch einmal auf Wikipedia. Zweimal sogar. Plus eine Bonuserwähnung für lokale Variablen.

Schritt 12: Die erweiterte Funktionssignatur

Lassen Sie uns die Anatomie einer Funktion zusammenfassen, da sie von unserem Ausgangspunkt aus ziemlich erweitert wurde.

Schritt 13: Wissen, wann eine Funktion zu schreiben ist

Theoretisch könnten Sie eine vollständige Anwendung erstellen, bei der alles darin eine Funktion ist (tatsächlich neigen moderne OOP-Anwendungen sehr zu diesem Extrem). Ebenso ist es theoretisch möglich, eine vollständige Anwendung zu erstellen, die nicht einmal eine Funktion verwendet (obwohl dies in ActionScript für eine Anwendung beliebiger Größe sehr schwierig ist).

Wenn Sie gerade erst mit Funktionen beginnen, sollten Sie bedenken, dass Sie unbedingt eine Funktion schreiben müssen, die Ereignisse wie Mausklicks oder Datenladevorgänge verarbeitet (dazu später mehr). Darüber hinaus sollten Sie sich an meine goldene Regel erinnern, um zu wissen, wann Sie Funktionen schreiben müssen:

Schreiben Sie nie zweimal dasselbe.

Das heißt, wenn Sie feststellen, dass Sie mehr als einmal genau dasselbe oder sogar etwas sehr Ähnliches schreiben, können Sie dies wahrscheinlich in eine Funktion einfügen und die Funktion einfach zweimal aufrufen.

Der Hauptgrund dafür ist, dass Sie die Änderung an einem einzigen Ort vornehmen können, wenn Sie dieses Codestück jemals aktualisieren müssen. Wenn Sie dasselbe an einem dritten Ort tun müssen, können Sie die Funktion auch viel einfacher ein drittes Mal aufrufen, anstatt den Code an einem dritten Ort zu kopieren und einzufügen (was wiederum die Wartbarkeit weiter erschwert Codeblock). Erinnern Sie sich an unser Sternzeichnungsbeispiel. Dies gilt jedoch auch für viel weniger offensichtliche Situationen.

Um eine Analogie zu machen, ähnelt die Wiederverwendung des Verhaltens einer Funktion der Idee, die Grafik eines Symbols in einer separaten Movieclip-Instanz wiederzuverwenden. So wie zwei Instanzen desselben Symbols beide aktualisiert werden, wenn das Symbol geändert wird, haben zwei Ausführungen derselben Funktion ein unterschiedliches Verhalten, wenn die von der Funktion definierte Aufgabe geändert wird.

Dieses Konzept ist übrigens eher als DRY-Prinzip bekannt: Wiederholen Sie sich nicht.

Nur für leistungskritische Anwendungen wie Spiele oder Audioprozessoren wird keine Funktion geschrieben. Funktionen haben einen inhärenten Overhead, der durch das bloße Aufrufen der Funktion entsteht. Daher können Sie in einigen Situationen die Wartbarkeit zugunsten der Leistung opfern. Diese Situationen sind in der Regel weitaus seltener.

Schritt 14: Erstellen Sie eine Inhaltskontrollfunktion

Wir setzen unser Wissen über Funktionen ein, indem wir eine einfache Site erstellen, die eine Handvoll Seiten anzeigt, von denen jede einer ähnlichen Vorlage folgt. Dies wird eine extrem einfache Site sein und in der realen Welt würden Sie viel mehr Sorgfalt und Detail in Ihre Funktionen investieren, aber dies dient als praktische Demonstration (eine der vielen) Verwendungen von Funktionen.

Beachten Sie bei der Entwicklung dieses Stücks die im letzten Schritt angegebene Regel. Stellen Sie sich vor, wie viel mühsamer und nicht wartbarer dies ohne die Funktionen wäre, die wir in den folgenden Schritten schreiben.

Wenn Sie möchten, habe ich ein Starterprojekt für Sie bereitgestellt, mit der anfänglichen FLA-Datei und den Bildern, die wir laden werden. Fühlen Sie sich frei, es zu verwenden, oder gehen Sie mit dem Artwork und den Bildern genauso frei in Ihre eigene Richtung.

Ich habe ein Starterprojekt für Sie bereitgestellt, mit der anfänglichen FLA-Datei und den Bildern, die wir laden werden. Ich werde nicht ins Detail gehen, wie man das Artwork erstellt und Dinge ohne Code einrichtet. Sie können diese FLA-Datei unverändert verwenden oder als Referenz für Ihre eigenen Grafiken und Bilder verwenden. Es geht nicht darum, einen bestimmten Stil zu erreichen, sondern sich mit Funktionen in einem praktischen Umfeld vertraut zu machen.

Laden Sie die Quelldateien hier herunter und verwenden Sie die Datei start.fla

Schritt 15: Machen Sie eine Tour durch die FLA

Es werden eine Reihe von Movieclip-Schaltflächen erstellt, von denen sich die meisten auf der Bühne in einer Spalte auf der linken Seite befinden. Diese sind so eingerichtet, dass sie die gleichen Hintergrundgrafiken verwenden, nur mit einem anderen Textetikett darin. Jeder Button ist ziemlich einfallslos benannt: button1_mc bis button5_mc.

Rechts befindet sich der Inhaltsbereich. Über dem weißen Hintergrund befinden sich zwei Textfelder, eines mit großer Fettschrift für die Überschrift und eines mit normaler Körperschrift für die Beschreibung. Die Felder sind beide als dynamischer Text festgelegt, sodass wir mit ihnen über ActionScript arbeiten können. Sie erhalten auch Instanznamen: title_tf und body_tf. Unten befindet sich eine weitere Movieclip-Schaltfläche, die einen Link zum vollständigen Artikel aktiviert. Dies hat den Instanznamen link_mc. Wo ist das Bild, fragen Sie? Da wir Bilder mit ActionScript laden, erstellen wir auch einen Loader mit ActionScript. Es existiert nicht in der FLA, wo Sie es sehen können. Wir machen das alles im Code.

Wenn Sie über die FLA hinausschauen, sehen Sie, dass sich im selben Ordner ein Verzeichnis namens images befindet. Darin sind einige Bilder, die wir laden werden. Unabhängig davon, ob Sie die Starterdatei aus dem Download verwenden oder Ihre eigene erstellen, stellen Sie sicher, dass sich die FLA im selben Ordner wie Ihr Bilderordner befindet. Der Einfachheit halber veröffentlichen wir die SWF-Datei einfach im selben Ordner und erwarten, dass die Bilder aus dem Bilderordner geladen werden.

(Eine kurze Randnotiz, bevor wir zum Code übergehen: Sie werden feststellen, dass Sie die FLA-Datei und die Bühne umso weniger verwenden, wie Sie es wahrscheinlich gewohnt sind, je mehr Sie ActionScript verwenden, um Ihre Projekte voranzutreiben. Dies kann beunruhigend sein, aber je besser Sie Ihre Assets durch Code einrichten, desto mehr Flexibilität haben Sie und desto einfacher können Sie später Änderungen vornehmen.)

Schritt 16: Einrichten der Tasten

Wir müssen den Inhalt des Hauptteils festlegen, wenn auf die Schaltflächen geklickt wird. Daher beginnen wir mit der Codierung, indem wir einen Ereignis-Listener für das CLICK-Ereignis auf jeder Schaltfläche einrichten. Es besteht eine gute Chance, dass wir ein AS3 101-Tutorial zu Ereignissen auf der ganzen Linie erstellen, daher speichere ich mir die ausführliche Diskussion darüber für später. Es ist jedoch erwähnenswert, dass wir zum Hinzufügen eines Ereignis-Listeners eine Funktion benötigen. Die Funktion selbst wird als Listener oder Handler bezeichnet. Es wird automatisch von dem Ding aufgerufen, das das Ereignis verursacht (in unserem Fall ein Movieclip, auf den geklickt wurde).

Beachten Sie, dass wir unsere Funktionen zwar normal definieren, den Namen jedoch nur verwenden, wenn addEventListener verwendet wird. Das heißt, wir lassen den Anrufoperator (die Klammern) weg. Auf diese Weise können wir dem Ding, das die Ereignisse verursacht, mitteilen, welche Funktion aufgerufen werden soll, ohne es während der Einrichtung aufzurufen.

button1_mc.addEventListener(MouseEvent.CLICK, onButton1Click);
button2_mc.addEventListener(MouseEvent.CLICK, onButton2Click);
button3_mc.addEventListener(MouseEvent.CLICK, onButton3Click);
button4_mc.addEventListener(MouseEvent.CLICK, onButton4Click);
button5_mc.addEventListener(MouseEvent.CLICK, onButton5Click);

function onButton1Click(event:MouseEvent):void {
	trace("button 1");
}

function onButton2Click(event:MouseEvent):void {
	trace("button 2");
}

function onButton3Click(event:MouseEvent):void {
	trace("button 3");
}

function onButton4Click(event:MouseEvent):void {
	trace("button 4");
}

function onButton5Click(event:MouseEvent):void {
	trace("button 5");
}

Bemerkenswert in Bezug auf das Ereignissystem von ActionScript 3 ist auch, dass allen Ereignis-Listenern (den Funktionen) genau ein Parameter übergeben wird, der als Event-Objekt bezeichnet wird. Dieses Objekt enthält nützliche Informationen über das gerade passierte Ereignis, aber wir werden es hier weitgehend ignorieren. Es ist jedoch erforderlich und daher müssen wir es in der Funktionsdefinition deklarieren, oder wir werden auf Fehler stoßen, die den zuvor gesehenen Fehlern bei der Anzahl der Nichtübereinstimmungen ähnlich sind.

Wir werden auf diesen Abschnitt zurückkommen und dafür sorgen, dass die Schaltflächen etwas viel Aussagekräftigeres tun, als die Senderidentifizierung zu ermitteln, aber testen Sie Ihren Film zunächst und stellen Sie sicher, dass er funktioniert. Sie sollten in der Lage sein, auf die fünf Hauptschaltflächen zu klicken und die richtige Ausgabe zu sehen.

Schritt 17: Schreiben Sie eine Inhaltsfunktion

Wenden wir unsere Aufmerksamkeit dem Inhaltsteil zu. Bevor wir die Funktion schreiben, untersuchen wir, was passieren muss, wenn wir die Vorlage füllen.

Der Überschriftstext muss in title_tf eingegeben werden
Fließtext muss in body_tf
Ein Bild muss in ein Loader-Objekt geladen werden (das auch erstellt werden muss)
Die Schaltfläche "Weiterlesen" muss beim Anklicken zu einer anderen URL gehen

Lassen Sie uns nun klarstellen, was passieren muss, wenn auf eine unserer Schaltflächen geklickt wird und was nur einmal während der Initialisierung passieren muss.

Die Überschrift und der Haupttext müssen bei jedem Klick ausgefüllt werden. Das ist einfach, aber das Bild wird ein wenig kniffliger. Wir brauchen ein Loader-Objekt, aber wir brauchen nicht jedes Mal ein neues Loader-Objekt. Wir können denselben Loader wiederverwenden und jedes Mal eine neue URL verwenden. Für die Schaltfläche "Weiterlesen" muss der CLICK-Handler nicht jedes Mal neu erstellt werden; wir brauchen nur eine Möglichkeit, mit jedem Inhaltssatz eine neue URL zu verwenden.

Wir können aus diesem Gedankenexperiment etwas Praktisches machen. Wenn wir die Datenbits bestimmen, die sich bei jedem Tastenklick ändern und was gleich bleibt, haben wir eine Vorstellung davon, welche Teile an Parameter übergeben werden müssen und welche Teile fest in den Funktionsrumpf eingebunden werden können. Lesen Sie bei Bedarf den vorherigen Absatz erneut und versuchen Sie, eine Liste von Daten zu erstellen, die jeden Funktionsaufruf über Parameter anpasst.

Hier ist meine Liste:

Überschriftstext
Hauptteil
Bild URL
Link URL

Fangen wir klein an und schreiben einfach eine Funktion, die die benötigten Teile aufnimmt und einfach nachverfolgt.

function setContent(title:String, body:String, imageUrl:String, link:String):void {
	trace("title: " + title);
	trace("body:  " + body);
	trace("image: " + imageUrl);
	trace("link:  " + link);
}

Wie es der Zufall will, sind alle unsere Daten vom Typ String. Das ist reiner Zufall und diese Technik funktioniert mit jedem Datentyp. Wir hätten ein URLRequest-Objekt für die URL-Parameter benötigen können, aber das wäre erfunden und Sie hätten es gewusst.

Schritt 18: Rufen Sie die Inhaltsfunktion auf

Zurück in den onButtonNClick-Funktionen, rufen wir die setContent-Funktion auf, damit wir sie in Aktion sehen können. Denken Sie daran, dass wir vier Argumente übergeben: den Titeltext, den Textkörper, die Bild-URL und die Link-URL, in dieser Reihenfolge. Nun, da der Textkörper ein wenig lang sein kann, wird der resultierende Code ein wenig umständlich. Wenn ich es vereinfachen und Dummy-Daten verwenden würde, könnte ein einzelner Funktionsaufruf etwa so aussehen:

1	function onButton1Click(event:MouseEvent):void {
2	setContent("1", "One", "one.jpg", "http://www.one.com");
3	}

Es ersetzt einfach die Ablaufverfolgung aus der vorherigen Version von onButton1Click durch einen Aufruf von setContent, wobei vier Argumente übergeben werden.

Wenn wir jedoch tatsächliche Daten übergeben würden, würde dieser Aufruf wie folgt aussehen:

function onButton1Click(event:MouseEvent):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

Es ist chaotisch, aber es ist wirklich das Gleiche. Die einzigen Unterschiede sind, dass die übergebenen Strings deutlich länger sind und dass ich einige Rückgaben zwischen den Argumenten hinzugefügt habe, um mit der Tatsache zu helfen, dass die Strings so lang sind. ActionScript kümmert sich normalerweise nicht allzu sehr um Leerzeichen. Solange ein Komma zwischen zwei Argumenten steht, können Sie so viel oder so wenig Leerzeichen einfügen, wie Sie wollen.

OK, jetzt wissen wir, was wir zu erwarten haben. Es ist nicht so schlimm; Sie wissen, dass Sie nicht ausflippen müssen, wenn Sie die folgende Auflistung sehen, die unseren vorherigen Block von onButtonNClick-Funktionen ersetzt:

function onButton1Click(event:MouseEvent):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

function onButton2Click(event:MouseEvent):void {
	setContent("Build a Dynamic Flash Gallery with Slider Control",
			"In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.",
			"slider.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-gallery-with-actionscript-30-and-php/#more-509"
	);
}

function onButton3Click(event:MouseEvent):void {
	setContent("Build a Dynamic Guest Book with XML and ActionScript 3.0",
			"Guest books are a great thing to enhance the online experience your viewers receive. The ability for the viewer to talk to you and others, respond to questions you’ve raised, comment on your work or just to socialize means a guest book is a must have for most web sites. Let’s see how we can build our own guest book with ActionsScript 3.0, XML and PHP.",
			"guestbook.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-guest-book-with-xml-and-actionscript-30/#more-539"
	);
}

function onButton4Click(event:MouseEvent):void {
	setContent("Create Your Own Pseudo 3D Pong Game",
			"In this tut I’ll describe how to create a basic 3D scene using the new 3D options of Flash Player 10. Then I’ll explain how to add interactivity to the elements and set up a basic pong game. Let’s go..",
			"pong.jpg",
			"http://flash.tutsplus.com/tutorials/games/create-a-pseudo-3d-pong-game/#more-620"
	);
}

function onButton5Click(event:MouseEvent):void {
	setContent("Build a Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D",
			"Today we’re going to build a wiimote controlled lightsaber using WiiFlash and Papervision3D. The goal of this tutorial will be to learn how to use a wiimote within flash and how to combine it with papervision3D. Afterwards, of course, you can use this app to train for your Jedi mastership.",
			"wiimote.png",
			"http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/#more-634"
	);
}

Normalerweise schlage ich vor, dass Sie, wenn Sie eine Programmiersprache lernen, am besten alles abtippen, anstatt zu kopieren und einzufügen. In diesem Fall ist jedoch so viel davon einfach willkürliche Daten, dass ich Sie ermutigen würde, diesen Codeblock zu kopieren und einzufügen, es sei denn, Sie wollen ihn wirklich abtippen. Wenn Sie möchten, können Sie jederzeit Ihre eigenen, weniger intensiven Daten eingeben, um die Konzepte zu üben, und dann kopieren und einfügen, wenn Sie das Gefühl haben, dass Sie es drauf haben.

Wie auch immer Sie diesen Code in Ihr Skript bekommen, er lässt uns die setContent-Funktion testen, während er verschiedene Werte für jeden Schaltflächenklick weitergibt. Testen Sie den Film und klicken Sie auf die Schaltflächen. Sie sollten sehen, dass relevante Informationen im Ausgabebereich angezeigt werden. Die Funktion "setContent" ist erst der Anfang.

Schritt 19: Füllen Sie den Text aus

Gehen wir zurück zur Funktion setContent. Wir sind bereit, sie etwas Wichtigeres tun zu lassen. Anstatt den Titel zu verfolgen, füllen wir das Textfeld auf dem Bildschirm aus. Ersetzen Sie in setContent die Zeile, die den Titel nachzeichnet, durch diese:

1	title_tf.text = title;

Ebenso können wir das Textfeld für den Textkörper ausfüllen, indem wir die Körperspur durch ersetzen:

1	body_tf.text = body;

Dynamische Textfelder haben eine Texteigenschaft, mit der Sie den Textinhalt des Feldes festlegen oder abrufen können. Wir übergeben nur den Titel und den Textkörper aus den Parametern an die jeweiligen Textfelder.

Wenn Sie den Film erneut ausführen, sollten Sie zumindest eine Überschrift und einen Textkörper im Inhaltsbereich sehen. Jetzt kommen wir weiter!

Beachten Sie, dass wir an dieser Stelle das Einstellen von Inhalten an insgesamt fünf Stellen aufrufen, jedoch Änderungen an einer einzigen Stelle in unserem Skript vornehmen, die sich auf das Verhalten aller fünf Aktionen zum Einstellen von Inhalten auswirken. Das liegt daran, dass wir die Aufgabe, den Inhalt zu setzen, in eine benannte Funktion gekapselt haben und sie mit ihrem Namen aufrufen, anstatt Code zu kopieren und einzufügen.

Schritt 20: Laden Sie das Bild

Bevor wir ein Bild laden können, brauchen wir etwas, in das wir es laden können. Erstellen Sie außerhalb unserer Funktion, vielleicht am Anfang des Skripts, eine Variable, die einen Loader enthält. Fügen Sie ihn gleich als untergeordnetes Element zu content_mc hinzu und positionieren Sie ihn.

1	var image:Loader = new Loader();
2	addChild(image);
3	image.x = 170;
4	image.y = 34;

Denken Sie daran, dass wir den Loader wiederverwenden werden und einfach ein neues Bild in ihn laden, wenn wir den Inhalt austauschen. Gehen Sie dazu zurück zur Funktion "setContent" und fügen Sie Folgendes hinzu:

1	var url:URLRequest = new URLRequest("images/" + imageUrl);
2	image.load(url);

Beachten Sie, dass wir zwei Variablen, "url" und "image", in zwei verschiedenen Gültigkeitsbereichen verwenden. Die Variable "url" wird in der Funktion deklariert und ist somit eine lokale Variable für die Funktion und hört auf zu existieren, sobald die Funktion endet. Die Bildvariable hingegen wird im Hauptteil des Skripts deklariert, so dass sie von Funktionsaufruf zu Funktionsaufruf bestehen bleibt. Außerdem deklarieren wir sie nicht in der Funktion, sondern verwenden sie einfach. Wenn wir es also verwenden, verweisen wir auf das Loader-Objekt, das wir ursprünglich erstellt haben, und verwenden es jedes Mal wieder, wenn wir ein Bild laden wollen.

Fahren Sie fort und testen Sie. Sie sollten jetzt Bilder mit Ihrem Inhalt haben. Ausgezeichnete Arbeit!

Beachten Sie einen weiteren Vorteil der Verwendung einer Funktion hier. Wir übergeben letztlich nur den Bildnamen und lassen die Funktion bestimmen, wo das Bild zu suchen ist. Wir setzen "images/" vor den Bildnamen, was bedeutet, dass alle Bilder (zumindest für dieses Inhaltsstück) im Verzeichnis images liegen sollten. Wenn wir jemals den Namen oder den Speicherort des Bildverzeichnisses ändern müssten, dann brauchen wir diese Informationen nur an einer Stelle zu aktualisieren - in der Funktion.

Schritt 21: Einrichten der Verbindung

Die Link-URL ist ein etwas anderes Biest. Sie ist dem Loader insofern ähnlich, als dass wir die Schaltfläche außerhalb der Funktion erstellen müssen, damit sie bestehen bleibt. Zum Einrichten gehört eine weitere Funktion, die den KLICK der Schaltfläche behandelt.

Fügen Sie wiederum im Hauptteil des Skripts einen Ereignis-Listener für die Schaltfläche hinzu:

1	link_mc.addEventListener(MouseEvent.CLICK, onReadMoreClick);

Und wenn wir schon dabei sind, definieren Sie die Funktion:

1	function onReadMoreClick(me:MouseEvent):void {
2
3	}

Für den Moment werden wir es mit einigen hart kodierten Funktionen ausfüllen, um zu illustrieren, was wir tun werden. Alles, was wir wirklich tun müssen, ist einen Link in einem neuen Browserfenster zu öffnen. Das ist ziemlich einfach zu machen, aber es wird ein wenig komplizierter, wenn wir es dynamisch machen, also lassen Sie uns das in Phasen machen.

Wir müssen eine weitere URLRequest erstellen, die auf die gewünschte URL zeigt (wir verwenden jetzt einfach die FlashTuts+-Startseite) und diese dann in die navigateToURL-Funktion einspeisen, zusammen mit einer Direktive zum Öffnen eines neuen Browserfensters:

1	function onReadMoreClick(me:MouseEvent):void {
2	var url:URLRequest = new URLRequest("http://flash.tutsplus.com");
3	navigateToURL(url, "_blank");
4	}

Wenn Sie den Film testen, werden Sie sehen, dass sich beim Klicken auf die Schaltfläche ein Browser öffnet und Sie zur FlashTuts+-Website gelangen.

Um dies dynamischer zu gestalten, erstellen wir eine weitere Variable, die sich im Hauptanwendungsbereich befindet (d. h. dort, wo sie neben dem Loader usw. bestehen bleiben kann).

1	var linkUrl:String;

Verwenden Sie dann diese Variable anstelle der literalen Zeichenfolge, die wir in der Funktion verwendet haben:

1	function onReadMoreClick(me:MouseEvent):void {
2	var url:URLRequest = new URLRequest(linkUrl);
3	navigateToURL(url, "_blank");
4	}

Schließlich müssen wir diese linkUrl-Variable in der setContent-Funktion setzen. Dies ist so einfach wie das Setzen des Wertes auf den Wert, der an den Link-Parameter übergeben wurde:

1	linkUrl = link;

Die endgültige setContent-Funktion sollte in etwa so aussehen:

function setContent(title:String, body:String, imageUrl:String, link:String):void {
	title_tf.text = title;
	body_tf.text = body;
	var url:URLRequest = new URLRequest("images/" + imageUrl);
	image.load(url);
	linkUrl = link;
}

Jetzt können Sie den Film testen und Sie sollten ein voll funktionsfähiges "Featured Article"-Stück haben. Das ist keine kleine Leistung und Sie sollten stolz auf sich sein!

Schritt 22: Hinzufügen einer sechsten Schaltfläche

Sie haben gute Arbeit geleistet, um so weit zu kommen, aber lassen Sie uns noch einen Schritt weiter gehen. Für eine so einfache Seite ist es nicht völlig unvernünftig zu denken, dass wir ohne diese ganze Funktionssache auskommen könnten. Um jedoch die allgemeine Nützlichkeit für die Kapselung von Funktionalität in eine parametrisierte Funktion zu veranschaulichen, fügen wir eine sechste Schaltfläche hinzu, die ein sechstes Stück Inhalt hinzufügt.

Bevor wir das Ganze jedoch abschließen, sollten wir uns vorstellen, was wir tun müssten, wenn wir keine setContent-Funktion hätten.

Das Hinzufügen einer Schaltfläche würde bedeuten:

Hinzufügen einer weiteren Instanz des Schaltflächen-Filmclips, mit einer neuen Beschriftung
Einrichten des Klick-Handlers
Einstellen des Überschriftentextes
Einstellen des Textkörpers
Laden eines neuen Bildes
Aktualisieren des "Weiterlesen"-Links

Wir können diesen Arbeitsaufwand jedoch halbieren, indem wir unsere setContent-Funktion verwenden. Damit sind unsere Aufgaben erfüllt:

Hinzufügen einer weiteren Instanz des Schaltflächen-Filmclips, mit einer neuen Beschriftung
Einrichten des Klick-Handlers
Aufruf von setContent mit den entsprechenden Informationen

An diesem Punkt in unserer Entwicklung ist das Aktualisieren des Codes vereinfacht. Sie finden ein Bild für die 6. Schaltfläche in den Starterdateien (bereits im Ordner images) und es gibt bereits ein Symbol Button6 in der Bibliothek der Starter-FLA. Ziehen Sie es auf die Bühne und geben Sie ihm den Instanznamen button6_mc. Alles andere kann mit Code behandelt werden. Hier ist der Schaltflächenabschnitt des Skripts, mit Ergänzungen in Fettdruck:

button1_mc.addEventListener(MouseEvent.CLICK, onButton1Click);
button2_mc.addEventListener(MouseEvent.CLICK, onButton2Click);
button3_mc.addEventListener(MouseEvent.CLICK, onButton3Click);
button4_mc.addEventListener(MouseEvent.CLICK, onButton4Click);
button5_mc.addEventListener(MouseEvent.CLICK, onButton5Click);
<strong>button6_mc.addEventListener(MouseEvent.CLICK, onButton6Click);</strong>

function onButton1Click(event:MouseEvent):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

function onButton2Click(event:MouseEvent):void {
	setContent("Build a Dynamic Flash Gallery with Slider Control",
			"In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.",
			"slider.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-gallery-with-actionscript-30-and-php/#more-509"
	);
}

function onButton3Click(event:MouseEvent):void {
	setContent("Build a Dynamic Guest Book with XML and ActionScript 3.0",
			"Guest books are a great thing to enhance the online experience your viewers receive. The ability for the viewer to talk to you and others, respond to questions you’ve raised, comment on your work or just to socialize means a guest book is a must have for most web sites. Let’s see how we can build our own guest book with ActionsScript 3.0, XML and PHP.",
			"guestbook.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-guest-book-with-xml-and-actionscript-30/#more-539"
	);
}

function onButton4Click(event:MouseEvent):void {
	setContent("Create Your Own Pseudo 3D Pong Game",
			"In this tut I’ll describe how to create a basic 3D scene using the new 3D options of Flash Player 10. Then I’ll explain how to add interactivity to the elements and set up a basic pong game. Let’s go..",
			"pong.jpg",
			"http://flash.tutsplus.com/tutorials/games/create-a-pseudo-3d-pong-game/#more-620"
	);
}

function onButton5Click(event:MouseEvent):void {
	setContent("Build a Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D",
			"Today we’re going to build a wiimote controlled lightsaber using WiiFlash and Papervision3D. The goal of this tutorial will be to learn how to use a wiimote within flash and how to combine it with papervision3D. Afterwards, of course, you can use this app to train for your Jedi mastership.",
			"wiimote.png",
			"http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/#more-634"
	);
}

function onButton6Click(event:MouseEvent):void {
	setContent("Intro to Flash Camo: Part 1",
			"Welcome to an introduction of the Flash Camouflage Framework. Flash Camo (for short) is a graphics framework that is broken down into 3 core areas: \"Decals\", the \"CSS Parser\" and the \"CamoDisplay\". These systems can be used individually or combined to fit your needs. When used together they form a powerful set of tools to help skin and style any Flash application. With Camo’s modular approach, you can use as little or as much of the framework as you want.\n\nIn this two part tutorial we’re going to build a simple website to show how easy it is to incorporate Flash Camo into your next project.",
			"flashcamo.jpg",
			"http://flash.tutsplus.com/tutorials/workflow/intro-to-flash-camo-part-1/#more-776"
	);
}

Von hier aus ist es nicht mehr weit, unsere Daten in ein XML-Dokument (oder sogar eine Datenbank) zu externalisieren und unsere Schaltflächen "on the fly" zu erstellen. Ein solcher Aufbau macht es viel einfacher, Ihre Inhalte aktuell zu halten, aber das würde den Rahmen dieses Tutorials sprengen. Bleiben Sie aber dran, denn es ist ein AS3 101 XML-Tutorial geplant.

Schritt 23: Der letzte Schliff

Nun, alles sieht ziemlich gut aus, bis auf einen kleinen Wermutstropfen: Der Inhaltsbereich ist ziemlich leer, wenn Sie den Film zum ersten Mal starten. Sie denken jetzt wahrscheinlich, dass wir das Problem lösen könnten, indem wir einen zusätzlichen Aufruf von setContent mit dem Inhalt der ersten Schaltfläche einfügen. Wenn Sie dies zum Beispiel ganz am Ende Ihres Skripts einfügen, sollte es funktionieren.

setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
		"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
		"maginfy.jpg",
		"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
);

Aber erinnern Sie sich an das Prinzip, das ich damals erwähnte, als ich darüber sprach, wann Sie eine Funktion schreiben sollten? Dasjenige, das DRY - wiederholen Sie sich nicht - heißt? Wir wiederholen uns in großem Stil, indem wir den obigen Code hinzufügen. Was würde passieren, wenn wir den von der ersten Schaltfläche angezeigten Inhalt ändern müssten? Wir müssten daran denken, es an zwei Stellen zu aktualisieren. Das ist nicht gut. Es wäre toll, wenn wir einfach den bereits geschriebenen Funktionsaufruf wiederverwenden könnten, um den Inhalt für die erste Schaltfläche zu setzen.

Nun, wir können! Dieser Funktionsaufruf befindet sich selbst in einer anderen Funktion, dem Event-Handler für das Klick-Ereignis der ersten Schaltfläche. Wir können einfach diese Funktion aufrufen. Der einzige Haken ist, dass sie ein Event-Objekt als Parameter erwartet und der Funktionsaufruf Fehler verursacht, wenn wir ihr kein Argument übergeben. Hier ist noch ein letzter Trick für Sie: Wir verwenden den Event-Parameter gar nicht, wir brauchen ihn nur, weil ein Event vom Click-Event übergeben wird. Wenn wir einen Parameter jedoch nicht immer benötigen, können wir ihn optional machen. Wenn wir die Funktionssignatur so umschreiben, dass sie wie folgt aussieht:

1	function onButton1Click(event:MouseEvent=null):void {

Wir können dann einfach aufrufen:

1	onButton1Click();

Am Ende unseres Skripts, um das Äquivalent eines Klicks auf die Schaltfläche1 auszulösen und so sicherzustellen, dass die erste Seite des Inhalts angezeigt wird, wenn wir den Film starten. Hier ist das ganze Skript als Referenz:

var image:Loader = new Loader();
addChild(image);
image.x = 170;
image.y = 34;

link_mc.addEventListener(MouseEvent.CLICK, onReadMoreClick);
var linkUrl:String;
function onReadMoreClick(me:MouseEvent):void {
	var url:URLRequest = new URLRequest(linkUrl);
	navigateToURL(url, "_blank");
}

button1_mc.addEventListener(MouseEvent.CLICK, onButton1Click);
button2_mc.addEventListener(MouseEvent.CLICK, onButton2Click);
button3_mc.addEventListener(MouseEvent.CLICK, onButton3Click);
button4_mc.addEventListener(MouseEvent.CLICK, onButton4Click);
button5_mc.addEventListener(MouseEvent.CLICK, onButton5Click);
button6_mc.addEventListener(MouseEvent.CLICK, onButton6Click);

function onButton1Click(event:MouseEvent=null):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

function onButton2Click(event:MouseEvent):void {
	setContent("Build a Dynamic Flash Gallery with Slider Control",
			"In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.",
			"slider.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-gallery-with-actionscript-30-and-php/#more-509"
	);
}

function onButton3Click(event:MouseEvent):void {
	setContent("Build a Dynamic Guest Book with XML and ActionScript 3.0",
			"Guest books are a great thing to enhance the online experience your viewers receive. The ability for the viewer to talk to you and others, respond to questions you’ve raised, comment on your work or just to socialize means a guest book is a must have for most web sites. Let’s see how we can build our own guest book with ActionsScript 3.0, XML and PHP.",
			"guestbook.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-guest-book-with-xml-and-actionscript-30/#more-539"
	);
}

function onButton4Click(event:MouseEvent):void {
	setContent("Create Your Own Pseudo 3D Pong Game",
			"In this tut I’ll describe how to create a basic 3D scene using the new 3D options of Flash Player 10. Then I’ll explain how to add interactivity to the elements and set up a basic pong game. Let’s go..",
			"pong.jpg",
			"http://flash.tutsplus.com/tutorials/games/create-a-pseudo-3d-pong-game/#more-620"
	);
}

function onButton5Click(event:MouseEvent):void {
	setContent("Build a Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D",
			"Today we’re going to build a wiimote controlled lightsaber using WiiFlash and Papervision3D. The goal of this tutorial will be to learn how to use a wiimote within flash and how to combine it with papervision3D. Afterwards, of course, you can use this app to train for your Jedi mastership.",
			"wiimote.png",
			"http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/#more-634"
	);
}

function onButton6Click(event:MouseEvent):void {
	setContent("Intro to Flash Camo: Part 1",
			"Welcome to an introduction of the Flash Camouflage Framework. Flash Camo (for short) is a graphics framework that is broken down into 3 core areas: \"Decals\", the \"CSS Parser\" and the \"CamoDisplay\". These systems can be used individually or combined to fit your needs. When used together they form a powerful set of tools to help skin and style any Flash application. With Camo’s modular approach, you can use as little or as much of the framework as you want.\n\nIn this two part tutorial we’re going to build a simple website to show how easy it is to incorporate Flash Camo into your next project.",
			"flashcamo.jpg",
			"http://flash.tutsplus.com/tutorials/workflow/intro-to-flash-camo-part-1/#more-776"
	);
}

function setContent(title:String, body:String, imageUrl:String, link:String):void {
	title_tf.text = title;
	body_tf.text = body;
	var url:URLRequest = new URLRequest("images/" + imageUrl);
	image.load(url);
	linkUrl = link;
}

onButton1Click();

Schritt 24: Extra Kredit

Vielleicht möchten Sie das Konzept, das im Variablen-Tutorial behandelt wurde (mit einer Gruppe von Schaltflächen arbeiten und jeweils nur eine auswählbar machen), auf dieses Projekt anwenden. Das ist der Punkt, an dem die Dinge anfangen, interessant zu werden: Sie nehmen ein bisschen Wissen hier, ein bisschen dort, mischen sie zusammen und kommen mit etwas Großartigem heraus.

Schlussfolgerung

An dieser Stelle sind Sie, der angehende ActionScripter, hoffentlich mit dem Konzept der Funktionen und den verrückten Dingen, die man damit machen kann, vertraut. In diesem Tutorial wurde noch nicht einmal über den Restparameter, die Methoden call() und apply(), Funktionsschließungen, den Aufrufstapel, Rekursion und die Idee einer Funktion als Objekt erster Klasse gesprochen. Das kommt später. Sie sollten jedoch mit genügend Wissen über die grundlegende Verwendung von Funktionen bewaffnet sein, um damit beginnen zu können, Ihre Programme in wiederverwendbare Code-Blöcke zu unterteilen.

Denken Sie nur daran, wenn Sie sich jemals dabei ertappen, dass Sie dieselbe (oder eine sehr ähnliche) Sache zweimal tippen, sollten Sie über die Verwendung von Funktionen nachdenken!