|
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. |
 |
|
|