[Flash MX] ActionScript Basics

Macromedia Flash MX - ActionScript - Basics - Tutorial - by Mackz


Bevor es mit dem Tutorial losgeht noch eine kurze Begriffserklärung:

AS = ActionScript

Instanzname = Spezieller Name eines Movieclips, Buttons oder dynamischen/eingabe(input) - Textfeldes.
Über den Instanznamen kann ein Objekt per Actionscript angesprochen werden.

Keyframe = Schlüsselbild in der Zeitleiste.
über Menü -> einfügen oder über die Funktionstasten; F6 übernimmt die Elemente aus dem vorherigen Frames, F7 erstellt ein leeres Schlüsselbild.

MC = Movieclip = Filmsequenz

_root = Hauptzeitleiste

stage = Bühne = Das "Hauptfenster" in Flash, in dem man den Inhalt einfügt.

Tween(ing) = Animation von einem Schlüsselbild zum nächsten.

Allgemeines
-------------

Actionscript ist die Flashinterne Scriptsprache dessen Syntax vollständig aus JavaScript übernommen wurde!

Ein Actionscript kann auf Movieclips, Buttons (Schaltflächen) und Keyframes gelegt werden.
Dies tut man entweder durch Klick auf das kleine Pfeil-Icon rechts oben im
Eigenschaften (Property) - Inspector (einblendbar mit Strg+F3), nachdem man das Objekt, auf welches das AS gelegt werden soll, per klick darauf ausgewählt hat. Oder durch Rechtsklick auf das Objekt -> Aktionen.

Tip: Transparente Objekte können durch Klick auf ihren Registrierungspunkt (der kleine weisse Punkt) ausgewählt werden.

Es öffnet sich nun der Editor. Dieser besitzt 2 Modi, den Normalmodus (Strg+Shift+N) und den Expertenmodus (Strg+Shift+E).
In dem Normalmodus ist es im Gegensatz zu dem Expertenmodus nicht möglich die Befehle selber einzugeben, sondern man muss sie über die Befehlsbibliothek hinzufügen. Diese sehr praktische Bibliothek verbirgt sich hinter dem ?+? direkt über dem Haupteingabefeld und enthält nahezu alle Befehle.
Anfänger sollten zunächst immer den Normalmodus verwenden um Syntaxfehlern vorzubeugen.

Variablen
---------

varName = varWert

Folgende Datentypen können sie enthalten: integer/float/string/boolsch.

Variablen können in Flash entweder Strings oder Nummern enthalten, ohne dies vorher angeben zu müssen.
Ausserdem sind sie global verfügbar, d.h. sie gelten über verschiedene Scripte hinweg, solange wie das Movie was sie erzeugt hat offen ist.
Jedes Movieclip kann seine eigenen Variablen haben, wodurch es möglich ist das es in verschiedenen Movieclips Variablen gleichen Namens geben kann. Dies ist allerdings nicht zu empfehlen um keine unnützen Fehler zu verursachen und der Übersicht halber, da man bei jedem Aufruf noch wissen muss in welchem Moviclip die jeweilige Variable definiert wurde!
Es empfielt sich deshalb möglichst viele Variablen in der Hauptebene des Movies (_root) zu definieren. Ausnahmen bilden z.b. Textfelder, die evtl. in Movieclips Verwendung finden, diese werden wie Variablen angesprochen!
Variablen, die sich nicht in der selben Ebene befinden, wie das AS in der sie angesprochen werden, werden entweder mit dem Befehl "tell target" oder in der DOT-Syntax adressiert.
Dazu ist es notwendig, dass die beteiligten MCs mit Instanznamen versehen sind.
Diese kann man im Eigenschaften (Property) - Inspektor angeben.

Beispiel: ( Ich gehe nur auf die DOT-Syntax ein, da sie aufgrund der kürzeren Schreibweise in der Praxis am häufigsten Verwendung findet. )
In der Hauptebene (_root) befindet sich ein Movieclip mit dem Instanznamen "hacker", in diesem MC wurde die Variable "board" definiert.

Aufruf dieser Variable ausserhalb des MCs "hacker" und Zuweisen des Variableninhaltes "test": (absoluter Pfad)

_root.hacker.board = "test";

Hinweis: Auf die selbe Art und Weise kann man auch die Eigenschaften (Properties) z.b. eines MCs ändern z.b.: _root.instanzname._alpha=10; (10% Transparent)

Die Pfadangaben müssen nicht "per Hand" eingetippt werden, sondern können im Zielpfad (Target)-Editor festgelegt und per Klick in das Script übertragen
werden. Dieser versteckt sich hinter dem Pfadenkreuz direkt über dem Script-Eingabefeld.

Folgende Optionen stehen hier zur Auswahl:
- Punkte: Erstellt einen Targetpfad in der Dot-Syntax.
- Schrägstriche: Erzeugt einen Pfad in Flash 4 Schreibweise.
- Relativ: Zeigt in der Targethierarchie nur die Instanzen und Unterinstanzen des aktuellen Frames und der aktuellen Timeline an.
"this" ist eine Referenz auf diesen Clip, also "Ich".
- Absolut: Stellt alle Instanzen des gesamten Movies dar.

Tip: Der Inhalt einer Variable kann mit dem Befehl trace(Variablennamen); ausgegeben und somit überprüft werden.

Regeln für Instanz - und Variablennamen:
- Sie sind nicht Case-sensitive, d.h. Gross - und Kleinschreibung ist egal.
- Sie müssen mit einem Buchstaben beginnen.
- Sie dürfen nur aus Buchstaben, Ziffern und Unterstrich bestehen.

Globale Variablen können mit _global.Variablenname = inhalt; definiert werden! Diese sind dann im gesamten Flashmovie, egal wo, einfach mit dem Variablennamen ansprechbar!

Schleifen und Bedingungen
----------------------------

Ich denke die folgenden Schleifen und Bedingungen sind selbsterklärend.
Syntax und Operatoren entsprechen beispielsweise PHP oder auch C ...
Eine Liste aller Operatoren findet man auch in der Flash Hilfe.

IF:

if (Bedingung) {

Aktion

} else {

Aktion

}


WHILE:

while (Bedingung) {

Aktion

}


FOR:

for (Startwert; Bedingung; Werterhöhung z.b. i++ ) {

Aktion

}


Textfelder
----------

Es gibt 3 Arten von Textfeldern.

- Statisches Textfeld: Dieses wird verwendet um normalen Text einzufügen.
- Dynamisches Textfeld: Wird verwendet um dynamische Texte wiederzugeben, beispielsweise einen Variableninhalt.
- Eingabe Textfeld: Wird verwendet um User-Eingaben zu realisieren. Zum Beispiel Textfelder bei einem Kontaktformular.

Dynamische und Eingabe - Textfeldern kann man im Eigenschaften-Inspektor unter "var:" einen Variablennamen zuordnen, somit entspricht der Inhalt des jeweiligen Textfeldes gleichzeitig des Variableninhaltes!
Diese Textfelder/Variablen sind wie Variablen ansprechbar!

Bei diesen beiden Textfeldern ist darauf zu achten, im Eigenschaften-Inspektor unter "Zeichen" die benötigten Zeichen der gewählten Schriftart in das Flash einzufügen.
Sollen Beispielsweise in einem Eingabefeld nur Zahlen eingeben werden, braucht man nur die Zahlen einzufügen, dann ist die Eingabe von Buchstaben nicht möglich. Gleiches gilt auch für dynamische Textfelder.

Beispiel einer Überprüfung eines Eingabefeldes:

if (betreff == "") {
betrefffeld.textcolor = 0xff0000;
betreff = "Bitte Betreff angeben!";
}

Variablenname = "betreff"
Instanzname = "betrefffeld"
betrefffeld.textcolor = 0xff0000; = Die Textfarbe wird nur für dieses eine Eingabefeld auf Rot geändert.
betreff = "please enter the subject!"; = "Bitte Betreff angeben!" wird im Eingabefeld ausgegeben!



das Date - Objekt
------------------

Um die Systemuhr auszulesen benötigt man das Datumsobjekt.
Damit die Eigenschaften und Funktionen des Date - Objekts genutzt werden können, benötigt man eine sog. Objektvariable.
Diese muß vor der Verwendung des Date - Objekts deklariert werden. (erstellt/erzeugt)

Der Aufbau einer Objektvariablen lautet:

varName = Objekt;

Nach der Deklaration wird das objekt durch die Variable representiert !

Beispiel einer Analoguhr:

zeit = new Date();
sekunde = zeit.getSeconds();
minute = zeit.getMinutes();
stunde = zeit.getHours();

Nun wird die Rotation der Zeiger festgelegt.

sek_zeiger._rotation = sekunde * 6;
min_zeiger._rotation = minute * 6;
st_zeiger._rotation = stunde * 30;

***_zeiger = Die Instanznamen der Zeiger MCs.


Scrollfunktion und Scrollbalken
-------------------------------

Es gibt 2 Möglichkeiten eine Scrollfunktion zu realisieren.
Entweder man bedient sich einer bereits vorgefertigten Scrollbar, unter Fenster -> Komponenten (STRG+F7) oder man erstellt sich eine eigene.

Die vorgefertigte muss man einfach nur auf die Stage ziehen und dann im Eigenschaften - Inspektor unter Parameters das Ziel Textfeld und die Scrollrichtung angeben.

Eine eigene Scrollfunktion ist auch nicht viel schwieriger.
Die benötigte Property heisst "scroll".

Ein Beispiel:

Hoch scrollen: pfad.textfeldvariable.scroll--;
Runter scrollen: pfad.textfeldvariable.scroll++;


Animationen per Actionscript
------------------------------

Natürlich ist es auch möglich per Actionscript Animationen zu erstellen.
Eine Animation ist ja nichts anderes als eine Änderung bestimmter Eigenschaften eines Objektes. Und die lassen sich natürlich auch mit AS ändern.

Beispiel:

_root.MC._width=20;

Die Breite des MCs beträgt 20 Pixel.

Alle Eigenschaften findet man geordnet in der Actionscript-Bibliothek, sowie in der Flash Hilfe.

Der Vorteil einer mit Actionscript "erschaffenen" Animation gegenüber eines Tweenings ist die geringere Dateigrösse.
Ausserdem lassen sich AS - Animationen viel dynamischer gestalten, bspw. abhängig von der Mausposition etc.

Sound
------

Folgende Soundformate können in Flash MX importiert werden.

Standartmässig:

WAV (nur Windows)
AIFF (nur Macintosh)
MP3 (Windows und Macintosh)

Wurde zusätzlich QuickTime 4 oder höher auf dem Rechner installiert, können aussderdem folgende Soundformate importiert werden:

AIFF (Windows und Macintosh)
Sound Designer II (nur Macintosh)
QuickTime Movies die nur Sound enthalten (Windows und Macintosh)
Sun AU (Windows und Macintosh)
System 7 Sounds (nur Macintosh)
WAV (Windows und Macintosh)


Um einen Sound per ActionScript ansprechen zu können, muss er zunächst einen eindeutigen Bezeichner erhalten.
Dazu klickt man ihn mit der rechten Maustaste in der Bibliothek (F11) an und wählt im Kontextmenü "Verknüpfung".
Im erscheinenden Dialogfenster muss die Option "Export für Actionscript" markiert werden.
In der Bezeichner-Eingabezeile kann man dem Sound nun einen beliebigen Namen zuweisen, z.B. "klicksound".

Nun kann ein neues Soundobjekt erstellt werden. In diesem Fall besitzt das neue Soundobjekt den Namen "meinSound":

meinSound = new Sound(this);

"this" verweisst auf die aktuelle Zeitleiste, wird die Klammer leer gelassen verweisst es auf _level0, also _root.

Nun wird dem Soundobjekt der verknüpfte Sound "klicksound" aus der Bibliothek zugewiesen:

meinSound.attachSound ("klicksound");

Nun braucht man nur noch den Sound zu starten:

meinSound.start (0, 1);

Hierbei gibt das erste Argument in Klammern (0) die Startsekunde an, ab der die Sounddatei wiedergegeben werden soll.
Das zweite Argument bestimmt die Anzahl der Wiederholungen. Bei einer Endlosschleife (loop) sollte dort eine hohe Zahl wie 100000000 angegeben werden, da man in Flash nicht direkt auf "endlos stellen" kann.

Stoppen lässt er sich mit meinSound.stop();

Die Lautstärke kann man mit meinSound.setVolume (100); regeln.
Das in Klammern angegebene Argument muss sich im Intervall von 0-100 (%) bewegen.


Arrays
-------

meinArray=new Array();

meinArray[0]=Inhalt1;
meinArray[0].Inhalt2;

meinArra[1]=Inhalt1;
meinArra[1].Inhalt2;
meinArra[1].Inhalt3;

meinArra[2]=Inhalt1;
meinArra[2].Inhalt2;



externe Textdateien
----------------------

In Flash ist es möglich den Inhalt von txt Dateien auszulesen.
In Verbindung mit php kann man so beispielsweise auf einfache Weise ein Gästebuch realisieren, bei dem die txts als Datenbank dienen.
Aber auch bei Inhalten die öffter, schnell aktualisiert werden müssen, wie z.b. bei News eignen sich externe Textdateien, da man so nicht das gesamte flash aktualisieren und wieder uploaden muss.

Eine externe Textdatei muss wie folgt aufgebaut sein:

Variablenname1=Variableninhalt1&Variablenname2=Variableninhalt2

Auslesen kann man eine Textdatei folgendermaßen:

loadVariables ("dateiname.txt", "Pfad");

oder

Pfad.loadVariables ("dateiname.txt");

Soll der Inhalt in die aktuelle Zeitleiste geladen werden kann der Pfad auch weggelassen bzw. "this" verwendet werden.

loadVariablesNum ("dateiname.txt", 0); Verwendet man wenn Variablen einer Textdatei in einen _level (hier 0) geladen werden.

Das Laden an sich nimmt meist ca 1-2 sek in Anspruch, man kann also nicht in einem Skriptabschnitt per loadVariables Daten anfordern und sofort mit ihnen in der nächsten Codezeile weiterarbeiten!

Hinweis: Ein häufiger Anfängerfehler ist das Textfarbe und Hintergrundfarbe eines Textfeldes identisch sind! Und dann natürlich scheinbar die Variablen nicht richtig übertragen werden! :)

Um sicher zu gehen das auch der gesamte Inhalt geladen wurde, kann man z.b. folgendes Script einsetzen:

onClipEvent (load) {
textfeld = "Text wird geladen...";
loadVariables ("dateiname.txt", "");
}
onClipEvent (data) {
textfeld = variable_aus_txt;
}

oder man verwendet das in Flash MX neu eingeführte LoadVars - Obejekt:

_root.textfeld = "Lade ...";

Erstellt ein neues LoadVars-Objekt:
externevars = new LoadVars();

Läd die Textdatei:
externeVars.load("dateiname.txt");

Führt nachdem das txt vollständig geladen wurde die function aus:
externeVars.onLoad=function() {
_root.textfeld = variable_aus_txt;
}



html in Flash MX?
-----------------

Generell ist es nicht möglich html Dateien in Flash eizubetten. ABER: Dynamische und Eingabe Textfelder sind in der Lage bestimmte simple html Tags zu interpretieren.
Code:
<p></p><a></a><Font></font> ( size , color, face )<b><i><br>
können verwendet werden.
Code:
textfeld.html = true; 
textfeld.htmlText = "<font color='#FF9900'><b>Hackerboard.de</b></font>";
Falls der html-Text nicht dargestellt wird, sollten man dem Texfeld nicht wie sonst die benötigten Zeichen einfügen.


Clip-Events
-------------

Mit Hilfe der Clip Events wird festgelgt wann welches Script ausgeführt wird!

Syntax:
onClipEvent (XXXXX) {
aktion;
}

Auf MCs stehen folgende Clip Events ( Event handler actions) zur Verfügung:

onClipEvent (load)

onClipEvent (unload)

onClipEvent (enterFrame)

Enter Frame hat die Wirkung einer Schleife! D.h. das nachfolgende Script wird ständig ausgeführt!
Ein Anwendungsbeispiel ist z.B. eine Uhr, denn es muss ja ständig die Uhrzeit aktualisiert werden.
Oder auch eine simple Animation per Actionscript:

onClipEvent (enterFrame) {
_root.ballMC._y++;
}

Die Frequenz der Wiederholungen der Schleife entspricht der Frame Rate des Movies.


onClipEvent (mouseDown)

onClipEvent (mouseUp)

onClipEvent (mouseMove)

onClipEvent (keyDown)

onClipEvent (keyUp)

onClipEvent (data)

Erhält das Mc/die Ebene in der das Script liegt Daten, wird das Script ausgeführt.


Folgende Clip Events stehen für Buttons zur Verfügung:

on (press)

on (release)

on (releaseOutside)

on (rollOver)

on (rollOut)

on (dragOver)

on (dragOut)

on (keyPress"...")

... Sie sind eigentlich selbsterklärend.

Eigentlich kann man Clip Events nur auf Mcs und Buttons legen aber in Flash MX ist es jetzt möglich auch in Keyframes mit Event handler Methoden zu arbeiten !

Beispiel:

_root.onEnterFrame = function() {

aktion;

}


Preloading
-----------

Bei Preloadern ist darauf zu achten das sie nicht allzu gross werden. Schließlich müssen sie schnell bei Aufruf des swfs geladen werden.
Im Prinzip ist ein Preloader nichts anderes als ein script welches das Movie erst weiter laufen lässt wenn es 100% geladen wurde. Er läd also die Datei vor.

Zuerst muss die Gesamtgrösse des Movies bestimmt werden.

onClipEvent (load) {
gesamt = _root.getBytesTotal();
}


Nun wird ausserdem bestimmt wieviel schon geladen wurde. Natürlich on enterFrame, damit die Daten ständig aktualisiert werden.

onClipEvent (enterFrame) {
bereits = _root.getBytesLoaded();
noch = gesamt - bereits;

Nun kann man z.b. auch ermittelen wieviel Prozent bereits geladen wurden und evtl. in einem Textfeld ausgeben.

prozent = int((bereits/gesamt)*100);

Zusätlich kann man auch noch z.b. die Breite eines MCs in Abhängigkeit mit den bereits geladenen Prozent setzen, ein Ladebalken entsteht! ...

balken_mc._width = prozent *2;

... oder z.b. ein MC in Abhängigkeit der Prozent rotieren lassen!

tacho_mc._rotation = prozent * 3.6;

Sind 100% erreicht, also das swf vollständig geladen wurde, wird das swf weiter abgespielt.
Dies setzt natürlich vorraus das vorher das Movie durch stop(); in einem der ersten Frames angehalten wurde!
Sonst hätte der Preloader natürlich keine Wirkung, da ohne stop(); das Movie gestream worden wäre! D.h. sobald z.b. das nächste MC oder auch ein Sound geladen ist wird das Movie weiter abgespielt.
Dies ist nur bei kleineren swfs sinnvoll.

if (prozent == 100) {
_root.play();
}
}




Häufige Probleme:
-------------------

- Umlaute und Sonderzeichen werden nicht / nicht richtig dargestellt.
Lösung: System.useCodepage = true; in das erste Frame des Movies.

- Das swf wird nach der Veröffentlichung in der html skaliert.
Lösung: fscommand("allowscale", "false"); in das erste Frame des Movies.

- Im ActionScript Editor ist die Eingabe von geschweiften ({ }) und eckigen ([]) Klammern nicht möglich.
Lösung: -> Bearbeiten -> Tastenkombinationen -> Aktuelle Auswahl die Option Flash 5 einstellen.



Für
Code:
<object> und <embed>
gibt es seit dem Flash6-plugin einen neuen Parameter, "FlashVars":

Hiermit ist es möglich, dem Flashfilm beim Laden Variablen mitzugeben, etwa dynamisch mit JavaScript, PHP, etc...

Beispiel:
Code:
<EMBED src=\"document.swf\" FlashVars=\"habo=31337\" quality=high menu=false bgcolor=#000000 WIDTH=100% HEIGHT=100% TYPE=\"application/x-shockwave-flash\" PLUGINSPAGE=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\"></EMBED>


... das wars fürs erste :eek:) ...

Kritik, Verbesserungsvorschläge, Fragen oder Sonstiges bitte an mackz_AT_hackerboard.de
 
Zurück
Oben