7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Erstellen von Flash-Komponenten für die Verteilung

Scroll to top
Read Time: 25 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Tutorial werde ich erklären, wie eine FLA-basierte Benutzeroberfläche (UI) erstellt wird. Wie die mit Flash gelieferten Komponenten wird es auf der Bühne angezeigt. Die Vorschau wird dann automatisch aktualisiert, wenn Sie ihre Parameter ändern. Dieses spezielle Beispiel ist ein kreisförmiger Fortschrittsbalken.


Vorschau

So wird unsere Komponente aussehen. Klicken Sie auf das Beispiel, um zu sehen, wie es mit zufälligen Werten funktioniert:

In diesem Tutorial konzentrieren wir uns jedoch nicht auf das SWF-Ergebnis. Laden Sie die Zip-Datei herunter, extrahieren Sie sie und führen Sie RoundProgress.mxp aus, um die Komponente selbst anzuzeigen und ihren Skin zu ändern. (Möglicherweise müssen Sie zuerst den Adobe Extension Manager herunterladen.)


Schritt 1: Konfigurieren Sie Flash für UIComponent

UIComponent ist die Basisklasse aller Flash-Komponenten. Alle Komponenten der Benutzeroberfläche, die sich bereits in Flash befinden (wie der ColorPicker, das Kontrollkästchen usw.), erweitern die UIComponent (oder eine Klasse, die die UIComponent erweitert). Der Grund dafür ist, dass die UIComponent Entwicklern das "Skinnen" ihrer Komponenten erleichtert.

Bei Verwendung erstellt die UIComponent-Klasse das Objekt neu, entfernt alles auf der Bühne und fügt die Skins hinzu. Dies ist wichtig für die Personalisierung der Komponente. Der Benutzer kann einfach auf die Komponente doppelklicken und sie mit Flash visuell bearbeiten. Sie erstellen einfach einen Komponenten-Avatar in Frame 1 und die Skins in Frame 2, und die UIComponent-Klasse erledigt den Rest.

Sie können dies alles manuell tun, aber es ist viel besser, UIComponent zu verwenden - Sie werden sehen, warum.

Ich habe erklärt, was die UIComponent ist und was sie tut, aber Sie müssen den Klassenpfad für die UIComponent konfigurieren, da er nicht standardmäßig konfiguriert ist. Es müssen also einige Schritte befolgt werden:

  1. Gehen Sie zu Bearbeiten > Einstellungen (oder Strg + U).
  2. Klicken Sie in der Kategorie auf ActionScript
  3. Klicken Sie auf ActionScript 3.0-Einstellungen
  4. Wenn Sie "Quellpfad" haben, klicken Sie auf die Schaltfläche "+" und fügen Sie $(AppConfig)/Component Source/ActionScript 3.0/User Interface
  5. Klicken Sie auf OK, bis Sie alle Einstellungsfenster geschlossen haben.

Schritt 2: Neue Flash Actionscript 3.0-Datei

Beginnen wir mit der Erstellung einer neuen Flash AS3-Datei. Speichern Sie es als RoundProgress.fla, wo immer Sie möchten (Beispiel: C:\RoundProgress\)


Schritt 3: Bereiten Sie die Ordner vor

Wir nehmen das Paket org.display für unsere Komponente an. Erstellen Sie daher in demselben Ordner, in dem Sie RoundProgress.fla gespeichert haben, einen Ordner mit dem Unterordner /org/display (Beispiel: c:\roundprogress\org\display\).

Hier speichern wir unsere ActionScript-Komponentendatei. Dies wird nur verwendet, um die Komponente zu erstellen oder zu bearbeiten. Sie geben dem Endbenutzer nicht die ASA-Datei.


Schritt 4: Konfigurieren Sie die Bibliotheksordner

Wenn wir eine Komponente für Flash erstellen, ist die Bibliotheksorganisation sehr wichtig (vielleicht sogar wichtiger als gewöhnlich). Wenn Sie die Komponente in die Phase eines Projekts ziehen, werden ihre Bibliotheksressourcen automatisch zur Projektbibliothek hinzugefügt. Halten Sie sie also organisiert.

Erstellen Sie in der Bibliothek einen Ordner mit dem Namen RoundProgress Assets.

In diesem Ordner erstellen Sie zwei weitere Ordner, Skins und _private.


Schritt 5: Erstellen Sie das RoundProgress-Objekt

Klicken Sie auf Einfügen > Neues Symbol. Für den Namen: RoundProgress; Typ: Movieclip; Verknüpfung: Aktivieren Sie die Optionen "Export für ActionScript" und "Export in Frame 1". für die Klasse: org.display.RoundProgress; Basisklasse: flash.display.MovieClip (wird jedoch geändert, wenn wir die AS-Datei für dieses Objekt erstellen).


Schritt 6: Komponentendefinition

Behandeln wir das RoundProgress-Objekt als Komponente. Öffnen Sie dazu die Bibliothek, klicken Sie mit der rechten Maustaste auf das RoundProgress-Objekt und klicken Sie auf "Komponentendefinition".

Fügen Sie im folgenden Fenster im Klassenfeld Folgendes ein: org.display.RoundProgress (diese Klasse wird später erstellt); Aktivieren Sie im Optionsfeld alle Optionen und geben Sie für Edit Frame "2" ein (dies ist eigentlich irrelevant). Das wichtigste Feld hier ist "Im Komponentenbedienfeld anzeigen": Mit dieser Option kann die Komponente beim Veröffentlichen im Komponentenbedienfeld angezeigt werden (wir werden dies später sehen).

Bisher haben wir in unserer Bibliothek das Objekt "RoundProgress" als Komponente und den Ordner "RoundProgress Assets" mit den Unterordnern "Skins" und "_private".


Schritt 7: Konfigurieren Sie die Timeline

Da wir die UIComponent verwenden, benötigen wir drei Ebenen und zwei Frames auf jeder Ebene. Wir benötigen zwei Frames, da UIComponent die Abmessungen des ersten Frames verwendet, um die Größe der Komponente zu definieren, und den zweiten Frame für die Skin-Bearbeitung verwendet.

Doppelklicken Sie in der Bibliothek auf die RoundProgress-Komponente, um sie als Movieclip zu öffnen.

Fügen Sie in der Zeitleiste zwei neue Ebenen hinzu, benennen Sie die obere Ebene in "Avatar", die mittlere Ebene in "Skins" und die untere Ebene in "Shim" um.

Erstellen Sie außerdem für jede Ebene einen neuen leeren Keyframe (wählen Sie Frame 2 aus und drücken Sie F7). Es sollte jetzt wie auf dem Bild aussehen:


Schritt 8: Avatar

Nein, nicht der Film, der Avatar ist ein Objekt, das die UIComponent als Größe des Objekts verwendet und dann entfernt. Erstellen wir ein Quadrat mit weißem Hintergrund und schwarzem Umriss (Haaransatz).

Wählen Sie das Quadrat aus und konvertieren Sie es in einen Movieclip (Ändern > In Symbol konvertieren) mit dem Typ: Movieclip und dem Namen: RoundProgressAvatar. Es ist wichtig, dass der Registrierungspunkt oben links liegt. Der Name ist völlig irrelevant.

Gehen Sie erneut in die Bibliothek und ziehen Sie den RoundProgressAvatar in den Ordner "_private" in "RoundProgress Assets".

Doppelklicken Sie dann erneut auf die RoundProgress-Komponente, um sie zu bearbeiten, wählen Sie Frame 1 und die Avatar-Ebene aus und ziehen Sie eine Instanz von RoundProgressAvatar auf die Bühne (so befindet sie sich in Frame 1 auf der Avatar-Ebene der RoundProgress-Komponente). Stellen Sie die Position auf x:0 und y:0 ein.


Schritt 9: Erstellen Sie den Hintergrund

Der Hintergrund wird einer der Skins sein, die wir erstellen werden. Er wird der Hintergrund unserer RoundProgress-Komponente sein.

Erstellen Sie einen neuen Movieclip (Einfügen > Neues Symbol):

Für den Namen verwenden wir "RoundProgressBarBackground"; Aktivieren Sie "Export für ActionScript" und "Export in Frame 1". Für die Klasse verwenden wir "RoundProgressBarBackground" genau wie den Namen. und für die Basisklasse verwenden wir "flash.display.Sprite", da wir keine Animation verwenden (aber wenn Sie flash.display.MovieClip verwenden, funktioniert dies auch).


Schritt 10: Zeichnen Sie den Hintergrund

Angenommen, Sie haben im letzten Schritt das RoundProgressBarBackground-Objekt geöffnet gelassen (wenn nicht, doppelklicken Sie in der Bibliothek darauf, um es erneut zu öffnen), zeichnen wir einen Ring. Zeichnen Sie zunächst einen Kreis mit einem Durchmesser von 150 Pixel.

Richten Sie es oben und links aus (Fenster > Ausrichten). seine Position ist x:0 und y:0.

Wenn Sie kopieren und an Ort und Stelle einfügen (mit Strg + Umschalt + V), erstellen Sie eine Kopie des Kreises. Deaktivieren Sie ihn jedoch nicht. Ändern Sie einfach seine Größe, um ihn etwas kleiner als den anderen Kreis zu machen. Ändern Sie dann die Farbe, ohne die Kopie des Kreises abzuwählen. Danach können Sie die Auswahl aufheben, sodass Sie einen Kreis in einem anderen erhalten. Anschließend können Sie den kleineren Kreis (der eine andere Farbe hat) auswählen und löschen, sodass ein Ring übrig bleibt.

Ändern Sie die Farbe Alpha auf 20%.

Jetzt können Sie den Bearbeitungsmodus des RoundProgressBarBackground-Objekts verlassen.

Öffnen Sie die Bibliothek und ziehen Sie den von uns erstellten RoundProgressBarBackground in den Ordner RoundProgress Assets / Skins.


Schritt 11: Erstellen Sie das Gesicht

Das Gesicht ist eine Kopie des Hintergrunds, wobei die Farbe Alpha auf 100% eingestellt ist. es muss genau die gleiche Breite und Höhe des Hintergrunds haben...

Öffnen Sie die Bibliothek, klicken Sie mit der rechten Maustaste auf RoundProgressBarBackground und klicken Sie auf "Duplizieren". Dadurch wird ein weiteres Objekt wie RoundProgressBarBackground erstellt. Verwenden Sie für den Namen RoundProgressBarFace für den Typ MovieClip die Optionen "Export for ActionScript" und "Export on Frame 1", für die Klasse "RoundProgressBarFace" und da die Basisklasse nicht animiert ist zu "flash.display.Sprite".

Rufen Sie den Bearbeitungsmodus auf (doppelklicken Sie in der Bibliothek auf das Objekt) und setzen Sie die Alpha-Farbe auf 100%.

Wenn es dort noch nicht vorhanden ist, ziehen Sie das RoundProgressBarFace-Objekt in den Ordner RoundProgress Assets / Skins.

Bisher haben wir in unserer Bibliothek die RoundProgress-Komponente, RoundProgressAvatar im Ordner _private und RoundProgressBarBackdround und RoundProgressBarFace im Ordner Skins.


Schritt 12: Die RoundProgress.as-Datei

OK, das Design ist fertig, jetzt starten wir den Dirty Job, den Code... Erstellen Sie zuerst eine neue Actionscript-Datei

Speichern Sie es als RoundProgress.as im Ordner org / display, der zu Beginn des Tutorials erstellt wurde, und beginnen Sie mit der Codierung.


Schritt 13: Paket und Importe

Lassen Sie uns das Paket erstellen und die erforderlichen Klassen importieren.

Da wir das Paket org.display verwenden möchten, haben wir unsere RoundProgress.as im Ordner org / display gespeichert, sodass das Paket org.display ist.

Wir importieren die Klasse fl.core.UIComponent, die wir erweitern werden. Dies wird die Basis unserer Komponente sein und die Sprite-Klasse wird die Maske sein.


Schritt 14: Erstellen Sie die Klasse

Jetzt erstellen wir die Klasse und erweitern die UIComponent-Klasse.


Schritt 15: Variablen

Als nächstes erstellen wir die in RoundProgress verwendeten Variablen

Das _face und der _background sind die Haut für Gesicht und Hintergrund; Wir werden Sprites für diese verwenden. Die _mask ist ein leeres Sprite, die const RAD ist nur ein Umrechnungsfaktor von Grad in Bogenmaß und das _ratio ist der aktuelle Fortschrittswert, der von 0 bis 1 reicht.


Schritt 16: Überschreiben von configUI()

Die Funktion protected configUI() stammt aus der UIComponent-Klasse. Es wird aufgerufen, wenn das Objekt erstellt wird - fast wie die Konstruktorfunktion, aber es entfernt alles von der Bühne, sodass Sie alles neu erstellen müssen.

Da wir die Funktion configUI() überschreiben, müssen wir sie in unserer Klasse aufrufen. Wenn nicht, wird unser Skript ausgeführt, aber nichts wird von der Bühne entfernt, sodass unser Avatar dort ist, wenn wir die Komponente verwenden. Wir rufen die configUI() -Methode der Superklasse mit super.configUI() auf:

Da die Funktion addChild() ein DisplayObject zurückgibt, können wir ein Objekt beim Erstellen instanziieren und wie gewünscht umwandeln (in diesem Fall habe ich es als Sprite umgewandelt). In einer einzigen Zeile habe ich das Objekt erstellt, als Sprite umgewandelt und in unser Objekt eingefügt.


Schritt 17: Die draw() -Methode

Die Methode draw() stammt ebenfalls von UIComponent. Es wird aufgerufen, wenn eine Eigenschaft in unserer FLA-Datei geändert wird und die Live-Vorschau der Komponente aktualisiert wird. Auf diese Weise kann der Benutzer sehen, wie sich die Komponente auf der Bühne ändert, anstatt eine SWF kompilieren zu müssen. Wir werden es überschreiben, damit beim Ändern eines Werts die Zeichenmethode aufgerufen wird.

Mach dir keine Sorgen über diesen Code. Wie ich bereits sagte, steht es nicht im Mittelpunkt des Tutorials.


Schritt 18: Erstellen der Ratio-Eigenschaft

Nun, hier erstellen wir die Ratio-Eigenschaft. Dies ist wie eine Variable, aber es ist eine Funktion: Wir verwenden das Tag [Inspectable] unmittelbar vor der Definition der Funktion, damit diese Eigenschaft mit dem "Component Inspector" geändert werden kann, wenn wir sie in Flash verwenden.

Lassen Sie uns [Inspectable] in den Griff bekommen. Wir haben einige Parameter, die wir verwenden können, wie defaultValue, name und einige andere. Wenn Sie defaultValue verwenden, verwendet Flash diesen als Standardwert im Komponenteninspektor (wo wir die Parameter ändern können). Der Parameter name definiert, wie er im Komponenteninspektor angezeigt wird, ist jedoch nicht erforderlich. Wenn Sie hierfür beispielsweise einen anderen Namen festlegen möchten, können Sie [Inspectable(name="MyCustomName", defaultValue = 0)] verwenden. Sie können auch den Typ (Nummer, Zeichenfolge) festlegen. Da dies jedoch in unserer Verhältnis-Eigenschaft festgelegt ist, wird dies nicht benötigt.


Schritt 19: Die Funktion setProgress()

Fügen wir eine Funktion hinzu, um den Fortschritt festzulegen. Sie können einen aktuellen Wert und einen Maximalwert verwenden.


Schritt 20: Prozent Eigenschaft

Die Prozent-Eigenschaft entspricht der Verhältnis-Eigenschaft, verwendet jedoch anstelle von Werten zwischen 0 und 1 0 bis 100. Es handelt sich um eine Prozentberechnung, die auch einen Gleitkommawert zwischen 0 und 100 zurückgibt:

Speichern Sie Ihr Dokument (denken Sie daran, in /org/display/RoundProgress.as, wenn Sie es noch nicht gespeichert haben).


Schritt 21: Live-Vorschau

Nein, es ist noch nicht fertig. Wenn wir unsere Komponente jetzt auf die Bühne ziehen, wird sie als weißes Quadrat mit dem schwarzen Umriss angezeigt. Wenn wir jedoch unseren Film testen, wird die Komponente angezeigt. Dies liegt daran, dass wir keine "Live-Vorschau" erstellt haben. Die Live-Vorschau kann eine SWF der Komponente visualisieren. Wenn wir die Eigenschaften festlegen, wird sie auch visuell angepasst und aktualisiert. Wenn wir keine Live-Vorschau haben, wird nur der Avatar angezeigt.

Lassen Sie uns unsere Live-Vorschau erstellen. Ich kenne zwei Möglichkeiten, um die Live-Vorschau zu erstellen. Daher erkläre ich die, die für mich perfekt funktioniert.

Klicken Sie in der Bibliothek von RoundProgress.fla mit der rechten Maustaste auf die RoundProgress-Komponente, klicken Sie auf "SWC exportieren" und exportieren Sie in denselben Ordner wie die Datei RoundProgress.fla. Die SWC-Datei ist eine komprimierte Datei, sodass Sie sie mit WinRAR oder ähnlichem öffnen können. Alternativ können Sie die Erweiterung in ".zip" umbenennen und auf diese Weise öffnen.

Öffnen Sie die .swc wie oben und Sie werden einige Dateien sehen. Eine davon ist die library.swf; Extrahieren Sie die Datei library.swf in denselben Ordner wie die .fla-Datei.


Schritt 22: Implementieren der Live-Vorschau

Kehren Sie zur Flash-Authoring-Umgebung zurück. Öffnen Sie in der Datei RoundProgress.fla die Bibliothek, klicken Sie mit der rechten Maustaste auf die RoundProgress-Komponente und klicken Sie auf die Option "Komponentendefinition".

Beachten Sie in der Komponentendefinition, dass wir in Parametern jetzt das Parameterverhältnis haben, das die Variable "ratio" und der Wert "0" ist - dies ist das [Inspectable], das wir mit defaultValue = 0 definiert haben (die anderen Parameter stammen von der UIComponent-Klasse). Es ist möglicherweise noch nicht konfiguriert. Wenn nicht, müssen Sie das Fenster Komponentendefinition öffnen und auf OK klicken, um dies zu aktualisieren, wenn Sie Änderungen an der AS-Datei vornehmen.

Klicken Sie nun im Bereich Live Preview auf die Schaltfläche "Set...".

Wählen Sie in diesem sich öffnenden Fenster die Option "Live-Vorschau mit in die .fla-Datei eingebettetem SWF" und klicken Sie auf Durchsuchen:

...wählen Sie dann die library.swf aus, die wir aus der .swc-Datei extrahiert haben.

Wenn Sie die RoundProgress-Komponente auf die Bühne ziehen, sollte nun die "Live-Vorschau" angezeigt werden. Versuchen Sie, den Wert von "ratio" im Komponenteninspektor zu ändern.


Schritt 23: ComponentShim

Bisher haben wir die Komponente erstellt und sie funktioniert bereits mit einer Live-Vorschau. Wenn Sie Ihre Komponente jedoch als .mxp-Datei verteilen möchten, müssen Sie die .as-Datei in der .mxp-Datei senden. Vielleicht möchten Sie nicht, dass Benutzer Zugriff auf Ihre .as-Quelldatei haben, oder wenn Sie viele .as-Dateien haben, ist es möglicherweise langweilig, die .mxi-Datei zu erstellen (Erklärung später). Das Beste, was Sie tun können, ist, die .as-Datei in die .fla-Datei in einen kompilierten Clip einzubetten, den wir ComponentShim nennen.

Beachten Sie, dass beim Ziehen einer Benutzeroberflächenkomponente auf die Bühne ein ComponentShim-Objekt vorhanden ist. Schauen Sie sich zum Beispiel die Bibliothek in Component Assets/_private an - dies ist ein kompilierter Clip, aber wir werden diesen nicht verwenden, sondern unseren eigenen erstellen.

Ein weiterer guter Grund für die Verwendung eines Shim-kompilierten Clips ist, dass er bereits kompiliert ist. Wenn Sie also Ihre .swf-Datei kompilieren, wird sie nur hinzugefügt und nicht neu kompiliert, was eine schnellere Kompilierung ermöglicht.

Beginnen wir damit, eine weitere .fla-Datei zu erstellen und unter dem Namen "RoundProgressShim.fla" im selben Ordner wie "RoundProgress.fla" zu speichern.

Öffnen Sie im Dokument RoundProgressShim.fla die Bibliothek.

Für jede Komponente mit externen AS-Dateien können Sie ein neues Objekt in der RoundProgressShim.fla erstellen. Da wir nur eine Komponente mit einer .as-Datei haben, erstellen wir den Shim nur für diese Komponente.

Erstellen Sie ein neues Symbol in der Bibliothek. Es muss vom Typ Movieclip sein und als Namen den gleichen Namen wie unsere Komponente wählen (in diesem Fall RoundProgress). Aktivieren Sie die Optionen "Export für ActionScript" und "Export in Frame 1". Für die Klasse verwenden wir den Namen der Komponente. Verwenden Sie daher "org.display.RoundProgress".

OK, dies ist unsere Referenz für das Objekt org.display.RoundProgress (wir benötigen eine Referenz für jede Komponente).

Jetzt erstellen wir die Shim-Quelle. Öffnen Sie die Bibliothek erneut in RoundProgressShim.fla und erstellen Sie ein neues Symbol mit dem Namen "RoundProgressShim source". Aktivieren Sie die Optionen "Export für ActionScript" und "Export in Frame 1". Verwenden Sie für die Klasse org.display.RoundProgressShim (dies ist irrelevant). Verwenden Sie für die Basisklasse flash.display.Sprite. Beachten Sie, dass der Name und die Klasse nicht wirklich existieren, aber dies ist unser kompilierter Clip. Um Konflikte zu vermeiden, kann er nicht denselben Namen oder dieselbe Klasse wie unsere Komponente haben...

Klicken Sie nun in der Bibliothek mit der rechten Maustaste auf "RoundProgressShim source" und wählen Sie "In kompilierten Clip konvertieren". Jetzt haben wir ein weiteres Objekt in der Bibliothek namens "RoundProgressShim source SWF". Benennen Sie es in "RoundProgressShim" um.

OK, unser benutzerdefiniertes ComponentShim wird erstellt. Speichern Sie einfach die RoundProgressShim.fla im selben Ordner wie die RoundProgress.fla und schließen Sie die RoundProgressShim.fla.


Schritt 24: Verwenden von RoundProgressShim

Zurück in unserem RoundProgress.fla-Dokument klicken Sie auf Datei > Importieren und dann auf "Externe Bibliothek öffnen" (Strg + Umschalt + O). Suchen Sie die RoundProgressShim.fla, wählen Sie sie aus und öffnen Sie sie als Bibliothek.

Stellen Sie die beiden Bibliotheken nebeneinander, die Bibliothek von RoundProgress.fla und die Bibliothek von RoundProgressShim.fla.

Ziehen Sie nun das RoundProgressShim-Objekt aus der RoundProgressShim.fla-Bibliothek in den Ordner RoundProgress Assets/_private in der RoundProgress.fla-Bibliothek.

...und jetzt können Sie die RoundProgressShim.fla-Bibliothek schließen.

Wechseln Sie erneut in den Bearbeitungsmodus der RoundProgress-Komponente (doppelklicken Sie in der Bibliothek auf das RoundProgress-Objekt), wählen Sie die Ebene Shim aus und gehen Sie zu Frame 2.

Ziehen Sie nun einfach RoundProgressShim von RoundProgress Assets/_private in der Bibliothek auf die Bühne.

OK, jetzt ist unsere Komponente einsatzbereit. Speichern Sie es und lernen Sie, wie Sie es in eine .mxp-Datei packen, die zur Verteilung bereit ist.


Schritt 25: Erstellen Sie die .mxi-XML-Datei

Erstellen Sie eine neue XML-Datei außerhalb von Flash. Verwenden Sie dazu Dreamweaver oder sogar den Editor. Ich werde Dreamweaver verwenden.

Speichern Sie es als "RoundProgress.mxi" im selben Ordner wie RoundProgress.as. Es ist sehr wichtig, dass Sie den Typ (.mxi) definieren, sonst speichern Sie nur als XML-Datei, was für uns nicht gut ist.

Kopieren Sie das XML, das ich für dieses Tutorial erstellt habe, und fügen Sie es in Ihre RoundProgress.mxi ein:

Lassen Sie uns die XML-Datei aufschlüsseln: In der ersten Zeile weisen wir den Namen unserer Komponente (dies gilt nur für den Adobe Extension Manager, nicht für Flash), die Version und den Typ (Bibliothek) zu. Überprüfen Sie für andere Typen die Adobe-Erweiterung Manager-Handbuch).

Das author-Tag definiert den Autor des Pakets. Auch dies gilt nur für den Erweiterungsmanager.

Das Produktetikett definiert, für welches Produkt Ihre Komponente bestimmt ist. In unserem Fall ist es für Flash CS3 oder CS4, daher verwenden wir für den Namen "Flash", wobei die Version "9" (CS3) ist.

Das Beschreibungs-Tag steht für eine Beschreibung in Adobe Extension Manager. Es kann nicht null sein, aber Sie können dort alles schreiben. Das CDATA-Tag sagt uns, dass wir HTML-Code enthalten können, damit es nicht versucht, als XML zu lesen.

Innerhalb des UI-Access-Tags können Sie festlegen, wie Ihre Komponente verwendet werden soll und wie im Flash-Authoring-Tool darauf zugegriffen werden soll.

Das Dateitag enthält die Liste der Dateien, die in den Konfigurationsordner von Flash kopiert werden. In unserem Fall kopieren wir nur die RoundProgress.fla. Während wir die RoundProgressShim erstellt haben, müssen wir auch die org/display/RoundProgress.as nicht kopieren. Wenn Sie mehr Dateien kopieren möchten, können Sie diese im Dateitag angeben (daher kann es diesen Schritt langweilig machen, wenn Sie viele AS-Dateien haben!).


Schritt 26: Packen Sie den MXI in MXP

Die .mxi-Datei enthält lediglich Anweisungen, wie der Adobe Extension Manager die .mxp-Datei erstellen soll. Die .mxp-Datei ähnelt einer komprimierten Datei. Wenn Sie jedoch versuchen, sie in einer Zip-Anwendung zu öffnen oder umzubenennen, wird ein Fehler zurückgegeben. Dies liegt daran, dass sich der Komprimierungsalgorithmus vom Zip-Algorithmus unterscheidet. Der Adobe Extension Manager kann jedoch den Inhalt der MXP-Datei und die Anweisungen der MXI-Datei lesen und verwendet diese Informationen, um Ihre Komponente zu installieren.

Wenn Sie die MXP-Datei mit Adobe Extension Manager installieren, wird die MXI-Datei auch zum späteren Entfernen der Komponente kopiert. Es befindet sich im Konfigurationsordner von Flash im Erweiterungsordner.

Wenn alles in Ordnung ist, können Sie jetzt die soeben erstellte .mxi-Datei finden und darauf doppelklicken, um sie mit Adobe Extension Manager zu öffnen.

Wenn der Erweiterungsmanager geöffnet wird, werden Sie gefragt, wo Sie Ihr Erweiterungspaket speichern möchten. Wählen wir denselben Ordner wie RoundProgress.fla aus, obwohl er sich an einer beliebigen Stelle befinden kann, da sich RoundProgress.fla jetzt in der MXP-Datei befindet.

Anschließend wird Ihre MXP-Datei generiert und gespeichert.


Schritt 27: Verwenden der .mxp-Erweiterung

Es ist wichtig, dass Sie dies mit Flash tun, wenn Ihre Adobe Flash-Sprache nicht mit der Computersprache übereinstimmt (dies ist ein Fehler im CS4-Erweiterungsmanager: Angenommen, Ihr Computer ist in portugiesischer Sprache, Flash wurde jedoch in englischer Sprache installiert Wenn Sie nur auf eine .mxp-Datei doppelklicken und sie hinzufügen, wird der Erweiterungsmanager verstehen, dass die Sprache, in der er installiert werden muss, Portugiesisch und nicht Englisch ist, also im Konfigurationsordner von Flash, anstatt den Ordner /en zu verwenden Es wird ein neuer Ordner /pt erstellt und stattdessen die Dateien dorthin kopiert. Wenn Sie Flash öffnen, klicken Sie auf Hilfe und wählen Sie die Option "Erweiterungen verwalten". Der Erweiterungsmanager wird in derselben Sprache wie Flash geöffnet, sodass sich alles, was Sie hier hinzufügen, an der richtigen Stelle befindet.)

Öffnen Sie den Extension Manager über Flash (Hilfe > Erweiterungen verwalten).

Klicken Sie im Erweiterungs-Manager oben in der Anwendung auf "Installieren".

Suchen Sie die .mxp-Datei und stimmen Sie allem zu, was Sie benötigen. OK, es ist installiert; Sie können jetzt den Extension Manager schließen. Sie müssen Flash auch schließen und erneut öffnen, damit diese Änderungen wirksam werden.


Schritt 28: Testen Sie Ihre Komponente

Erstellen Sie eine neue Actionscript 3.0-Datei und speichern Sie sie an einem beliebigen Ort, z. B. in c:\test\RoundProgressTest.fla

Stellen Sie die Bühnengröße auf 170 x 170 Pixel ein und gehen Sie dann zu Fenster > Komponenten.

Beachten Sie, dass sich unsere Komponente jetzt in der Liste befindet, da sie sich in der RoundProgress.fla befindet und im RoundProgress-Ordner mit dem Namen der darin enthaltenen Komponente angezeigt wird. Wenn wir es im Ordner "Benutzeroberfläche" haben möchten, müssen wir die .fla als "User Interface.fla" speichern. Dies ist jedoch keine gute Vorgehensweise, da eine Datei andere überschreiben kann.

Ziehen Sie nun die RoundProgress-Komponente auf die Bühne. Sie können sehen, dass die Live-Vorschau jetzt funktioniert. Sie zeigt unsere Komponente mit den Skins usw.

Stellen Sie die Position der Komponente auf x:10 und y:10 ein, um die Komponente auf der Bühne zu zentrieren. Öffnen Sie den Komponenteninspektor ("Fenster -> Komponenteninspektor") und sehen Sie sich bei Auswahl unserer Komponente auf der Bühne die Registerkarte Parameter an. Dort können Sie die Parameter unserer Komponente sehen. Ändern Sie also den Verhältniswert auf 0,3 und Sie sehen das Live-Vorschau-Update.

Sie können darauf doppelklicken, um die Skins zu bearbeiten, und Sie können neben jedem Skin eine Textbeschriftung anbringen, um sie zu identifizieren (die UIComponent entfernt alles). Sie können auch die Bibliothek öffnen und in RoundProgress Assets/Skins auf jede Skin doppelklicken, um sie zu bearbeiten. Beachten Sie jedoch: Die Größe des Kreises darf beim Bearbeiten der Skin nicht geändert werden, wenn Sie möchten, dass die Größe der Komponente auf der Skin größer oder kleiner wird Bühne.

Wichtig: Wenn Sie den Verhältniswert in einer ActionScript-Datei festlegen, lassen Sie den Parameter in der Komponente auf seinen Standardwert (in unserem Fall 0) gehen.

Die Parameter, die wir einstellen und abrufen können, sind ratio und percent: Der Verhältnisbereich liegt zwischen 0 und 1 und der Prozentbereich zwischen 0 und 100. Beide machen dasselbe, aber die Bereiche sind unterschiedlich. Wir haben auch die Methode setProgress() mit 2 Parametern: Der erste ist der aktuelle Wert und der zweite ist der Maximalwert.


Abschluss

Nachdem Sie nun gelernt haben, wie Sie eine Flash-Komponente erstellen, können Sie Ihre eigenen Komponenten erstellen, diese dann auf ActiveDen verkaufen oder hier einige Werbegeschenke für uns erstellen. Ich hoffe es gefällt euch und wenn ihr Fragen habt, fragt einfach in den Kommentaren.

Eine letzte Sache: Wenn Sie im obigen Beispiel ein Tween verwenden möchten, können Sie: Nehmen wir an, der Instanzname unserer Komponente ist progressbar und unsere Tween-Engine ist TweenLite. Sie können das Verhältnis im Komponenteninspektor auf 0 setzen und es dann auf einen beliebigen Wert größer als 0 und kleiner als 1 einstellen. Zum Beispiel:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.