21.4 Komponenten anpassen 

Abschließend soll die Anwendung etwas »verschönert« werden. Vielleicht ist Ihnen in den Abbildungen aufgefallen, dass die Schriftart auf der Schaltfläche eine andere ist als die Schriftart, die Sie beim Öffnen innerhalb von Flash sehen. Das ist eine Art der Verschönerung.

Prinzipiell gibt es zwei Möglichkeiten, das Aussehen von Komponenten zu verändern. Eine Methode, die immer funktioniert, ist die Erstellung eines CSS-Stils und anschließend die Zuweisung an die Komponente. Das wollen wir Ihnen anhand der Schaltfläche gleich zeigen:

Schritt für Schritt: Stile erzeugen und zuweisen

Um die Stilzuweisung später gut erweitern und auch austauschen zu können, erstellen Sie eine Funktion und den Aufruf dieser Funktion. Der nachfolgende Code landet innerhalb der Funktion:

setzeStil1();
function setzeStil1() {
   / /...
}

Zunächst erzeugen Sie einen Stil. Dazu wird die Klasse mx.styles.CSSStyleDeclaration instanziiert, ein Stilname (styleName) vergeben und dieser Stil in _global.styles eingefügt:

   var stil = new mx.styles.CSSStyleDeclaration;
   stil.styleName = "Buttonstil";
   _global.styles.Buttonstil = stil;

Der Stil namens Buttonstil ist in die Stiltabelle eingefügt und steht im gesamten Film zur Verfügung.

Als Nächstes können Sie Eigenschaften des Stils setzen. Eine komplette Übersicht befindet sich in der Flash-Hilfe; am häufigsten werden jedoch die Schrifteigenschaften modifiziert. Der folgende Code setzt Schriftart, -größe, -stil (z.  B. kursiv) und Schriftbreite für den Stil:

   stil.fontFamily = "_sans";
   stil.fontSize = 14;
   stil.fontStyle = "normal";
   stil.fontWeight = "bold";

Der letzte Schritt ist gleichzeitig der einfachste: Sie müssen den Stil zuweisen. Das erledigen Sie mit der Methode setStyle(), die bei jeder Komponente existiert. Als ersten Parameter übergeben Sie "styleName" , als zweiten den Namen des Stils, in diesem Fall also "Buttonstil":

   anmelden_btn.setStyle("styleName", "Buttonstil");

Das war es auch schon! Die Schaltfläche erscheint jetzt fett, 14 Punkt groß.

Abbildung 21.5 Die Schaltfläche, wie sie beim Ausführen des Films aussieht

Schritt für Schritt: Komponenten-Stil zuweisen

Die Hilfe verrät, dass die Schaltflächen-Komponente einige der CSS-Schrifteigenschaften direkt als Komponenten-Eigenschaft unterstützt. Sie sollten es sich in diesem Fall sparen, extra einen Stil zu erzeugen. Setzen Sie einfach die Eigenschaften! Zunächst müssen Sie den Aufruf von setzteStil1() auskommentieren und einen Aufruf von setzeStil2() einbauen, um beide Methoden vergleichen zu können:

//setzeStil1();
setzeStil2();

Setzen Sie nun direkt die Eigenschaften für die Schrift:

function setzeStil2() {
   anmelden_btn.fontFamily = "_sans";
   anmelden_btn.fontSize = 14;
   anmelden_btn.fontStyle = "normal";
   anmelden_btn.fontWeight = "bold";
}

Der Effekt ist derselbe wie bei der Erzeugung eines neuen Stils. Auf der CD-ROM finden Sie die fertige Datei unter dem Namen zugriff_AS2.fla bzw. zugriff_AS1.fla.

Leider ist es nicht möglich, innerhalb von Flash die Schriftart ohne weiteres zu ändern. Deswegen müssen Sie den Umweg über die Erzeugung eines neuen Stils wählen. Alternativ können Sie auch einen extra Skin (Theme) erstellen, aber das wäre noch aufwendiger. Immerhin als kleiner Trost: Der gezeigte Vorgang funktioniert gleichermaßen bei den anderen Komponenten. Haben Sie die Anpassung einmal erfolgreich umgesetzt, schaffen Sie es immer wieder, und zwar für alle Komponenten.

Ihr Kommentar