Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 21 Komponenten anpassen
  Pfeil 21.1 Eigene Radiobuttons
  Pfeil 21.2 Eigene Checkboxen
  Pfeil 21.3 Zugriffskontrolle
  Pfeil 21.4 Komponenten anpassen


Rheinwerk Computing - Zum Seitenanfang

21.4 Komponenten anpassen  topZur vorigen Überschrift

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.

 



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern