Accessibility
 
Macromedia / Deutschland / Designer & Developer Center / Flash MX Application Development Center
Flash-Symbol Macromedia Flash Support Center - Anwendungen erstellen
Benutzerdefinierte Oberfläche für die Komponente erstellen

Eine benutzerdefinierte Oberfläche ist ein Flash-Film, in dem ein Benutzer Werte für die Komponentenparameter eingeben kann. Die benutzerdefinierte Oberfläche ersetzt hierbei die Oberfläche des Eigenschafteninspektors für Komponenten. Wie beim Live-Vorschau-Film verwenden Sie einen Exchange-Movieclip namens xch zur Übergabe von Werten an die Komponente.

Wir haben eine benutzerdefinierte Oberfläche für die Button-Komponente mit einer Textbox zur Eingabe der Schaltflächenbezeichnung, einer Rollliste zur Auswahl der Bezeichnungsschrift und Textboxen für die Rot-, Grün- und Blauwerte für Sie erstellt. Diese Oberfläche dupliziert die Standardoberfläche im Eigenschafteninspektor für Button-Komponenten. Sie können jedoch weitere Oberflächenelemente erstellen, um die Eingabe anderer Parameterwerte zu erleichtern. Für die Beispielkomponente wären beispielsweise Schieber zum Einstellen der RBG-Werte recht nützlich.

Benutzerdefinierte Oberfläche mit Textboxen für die Rot-/Grün-/Blauwerte und die Bezeichnung sowie mit einem Popupmenü und einer Textbox für die Bezeichnungsschrift

Der ActionScript -Code für die benutzerdefinierte Oberfläche sieht wie folgt aus. Die einzelnen Aktionen werden anhand von Kommentaren erläutert.

// Standardwerte für Farb-Fader festlegen
xch.c1 = 0;
xch.c2 = 0;
xch.c3 = 0;
// Auf dem Benutzersystem verfügbare Schriften in Kombifeld
// aufnehmen und alphabetisch sortieren
fontList.setEditable(true);
fontList.setDataProvider(textField.getFontList());
fontList.sortItemsBy("label", "asc");
//
_root.onEnterFrame = function() {
// Im Kombifeld ausgewählte Schrift als Bezeichnungsschrift
// einstellen und Einstellung beim Aus-/Abwählen der
// Komponente speichern
fontList.onKillFocus = function() {
selecting = false;
};
fontList.onSetFocus = function() {
selecting = true;
};
if (selecting) {
xch.labelFont = fontList.getValue();
} else {
fontList.setValue(xch.labelFont);
}
// Bei Eingabe eines Werts über 255 die RGB-Werte auf 255 setzen
for (i=1; i<=3; i++) {
if (xch["c"+i]>255) {
xch["c"+i] = 255;
}}
// r-, g- und b-Werte durch bitweise Verschiebung und
// bitweises OR zu einem Wert kombinieren und diesen 
// als Beschriftungsfarbe verwenden
xch.labelColor = (xch.c1 << 16 | xch.c2 << 8 | xch.c3);
};

Je nach Anzahl und Art der Parameter in der Komponente und Art der gewünschten Interaktivität kann der ActionScript-Code, der zur Erstellung einer benutzerdefinierten Oberfläche erforderlich ist, recht komplex sein.

Hinweis: Weitere Beispiele für Komponenten mit benutzerdefinierten Oberflächen finden Sie in Flash MX unter Hilfe > Beispiele > Ausgewählte Funktion: Komponenten, Live-Vorschau und benutzerdefinierte Oberfläche (Help > Samples > Feature Highlight: Components, Live Preview, and Custom UI).

1 Wählen Sie Datei > Neu (File > New), um einen neuen Flash-Film zu erstellen.
2 Erstellen Sie die Oberflächenelemente, die der Benutzer zur Eingabe von Parameterwerten verwenden soll, wie z. B. Popupmenüs, Schieber, Optionsfelder oder Drag & Drop-Menüelemente.
Hinweis: Zur Erstellung einer benutzerdefinierten Oberfläche können Sie die Flash-UI-Komponenten verwenden.
3 Wählen Sie Einfügen > Neues Symbol (Insert > New Symbol), um ein leeres Movieclip-Symbol zu erstellen. Stellen Sie eine Instanz des leeren Movieclips in Bild 1 auf der Bühne, und nennen Sie sie xch.
4 Fügen Sie den ActionScript-Code zum Erfassen der vom Benutzer eingegebenen Parameterwerte und zum Kopieren in die xch-Instanz zur xch-Instanz hinzu.
5 Wählen Sie Datei > Veröffentlichen (File > Publish), um den Film mit der benutzerdefinierten Oberfläche als SWF-Film zu veröffentlichen.
6 Um den Pfad zum Film mit der benutzerdefinierten Oberfläche festzulegen, wählen Sie die Button-Komponente im Bedienfeld Bibliothek (Library) aus, und wählen Sie im Optionsmenü der Bibliothek den Befehl Komponentendefinition (Component Definition).
7 Klicken Sie im Dialogfeld Komponentendefinition (Component Definition) auf die Schaltfläche Einstellen (Set) rechts neben dem Feld Benutzerdefinierte UI (Custom UI).
8 Klicken Sie im Dialogfeld Benutzerdefinierte UI (Custom UI) auf die Option Benutzerdefinierte UI mit in .fla-Datei eingebetteter .swf-Datei (Custom UI with SWF File Embedded in FLA File), um den Film mit der benutzerdefinierten Oberfläche in die FLA-Datei der Komponente einzubetten. Wenn Sie den Film lieber als externe Datei verknüpfen möchten, wählen Sie Benutzerdefinierte UI in externer .swf-Datei (Custom UI in External SWF File).
Hinweis: In Flash 5 können Filme mit benutzerdefinierten Oberflächen nicht eingebettet werden. Wenn Sie die Komponente als SWF-Film im Flash 5-Format speichern möchten, müssen Sie den Film mit der benutzerdefinierten Oberfläche als externe Datei verknüpfen.
9 Wählen Sie unter Anzeige (Display) eine der folgenden Optionen:
Wenn die benutzerdefinierte Oberfläche für den Eigenschafteninspektor zu groß ist, wählen Sie Anzeige in Komponentenparameter-Bedienfeld (Display in Components Parameters Panel).
Wenn die benutzerdefinierte Oberfläche relativ klein ist und in den Eigenschafteninspektor passt, wählen Sie Anzeige in Eigenschafteninspektor (Display in Component Property inspector).
Hinweis: Der Eigenschafteninspektor für Komponenten wird in Flash 5 nicht unterstützt. Wenn Sie die Komponente im Flash 5-Format speichern und in der Flash 5-Authoring-Umgebung öffnen, wird die benutzerdefinierte Oberfläche im Bedienfeld Komponentenparameter (Component Parameters) angezeigt.
10 Geben Sie den Pfad zum Film mit der benutzerdefinierten Oberfläche in das Textfeld ein, oder klicken Sie auf Durchsuchen, und machen Sie den Film ausfindig.
11 Klicken Sie auf OK.
Zum Inhaltsverzeichnis Zurück zum vorherigen Dokument Weiter zum nächsten Dokument