Share
Da ActionScript 3 immer populärer wird und die Funktionen von Flash Player erweitert und zugänglich sind, ist es wichtig, einen gemeinsamen Workflow in Ihrem Unternehmen zu erstellen, damit Projekte flexibler werden und vor allem pünktlich geliefert werden können. Ein Hauptproblem bei ActionScript 2 war die Überbrückung der Kluft zwischen Designer und Entwickler. Entwickler mussten sich oft mit FLAs befassen, die Hunderte von Bibliotheksgegenständen mit schlechtem Namen enthielten, und das gefiel niemandem.
Mit den Fortschritten von ActionScript 3 und der Möglichkeit, außerhalb der Zeitachse zu codieren, werden SWCs häufig zu häufig verwendeten Elementen in großen Projekten, aber es gibt immer noch viele Leute, die nicht wissen, was sie sind oder wie sie erstellt / verwendet werden.
Beginnen wir damit, zu sehen, was SWCs eigentlich sind. Ein SWC [ShockWave-Komponente Abkürzung:Sw ~ iCK] :) ist einfach ein komprimiertes Paket von Dateien, die von der Flash IDE generiert wurden. Sie enthalten visuelle Elemente (wie MovieClips, Schaltflächen, Grafiken und Schriftarten) sowie Code. SWCs gibt es seit Flash MX 2004, haben sich aber erst seit ActionScript 3 wirklich durchgesetzt, weil Sie, wie gesagt, alles in der FLA behalten können.
In diesem Tutorial werde ich Ihnen zeigen, wie Sie visuelle Elemente, Schriftarten und ActionScript-Code einbetten und verwenden können.
Es gibt ein einfaches und solides Argument für die Verwendung von SWCs: Es unterscheidet das Design von der Entwicklung. Flash hat die Möglichkeit, das Design programmierter visueller Elemente durch 'CSS' wie Stylesheets zu beeinflussen (ähnlich wie bei Flex), aber die meisten Designer (nicht alle) werden durch Code, einschließlich einfaches CSS, abgeschreckt. Ein weiterer Punkt ist, dass Designer entwerfen. In der Regel erhalten sie Scheinschreibframes, aus denen sie dann Benutzeroberflächen in Programmen wie Photoshop und Illustrator erstellen. Wenn sie dann die Schnittstelle codieren mussten, war das Erstellen der Modelle in Photoshop möglicherweise nur Zeitverschwendung. Darüber hinaus kann es sehr zeitaufwändig sein, Schnittstellen zu codieren, die in visuellen IDEs wie Photoshop und Illustrator leicht erstellt werden können.
Zurück zu meinem Hauptaspekt ermöglicht der SWC den Designern, das Interface zu entwerfen, zu schneiden und dann einen SWC an den Entwickler zu übergeben, der alles zusammenfügt. Dadurch entsteht ein einfacher Arbeitsablauf, ohne dass die Menschen auf die Zehen anderer treten, um das zu erreichen korrektes Design.
Angenommen, Sie werden morgen über ein neues Projekt informiert, bei dem Sie mit einem Designteam zusammenarbeiten. Es liegt in der Verantwortung des Designteams, die Benutzeroberfläche zu erstellen, einschließlich aller Kleinigkeiten wie Schaltflächen für den Hover-Button, Loader-Animationen, abgerundeten Ecken und Symbolen. Es liegt in der Verantwortung des Entwicklungsteams, das Projekt zu erstellen und alle Elemente der Benutzeroberfläche einzubinden. Die Entwurfszeit würde alle Elemente erstellen, die sie benötigen, in eine SWC stellen und diese Datei dann an das Entwicklungsteam übergeben. Das Entwicklungsteam kann dann in die Elemente der Benutzeroberfläche Code eingeben, ohne sich um das Importieren von Schriftarten, das Spielen mit Stylesheets oder das Zusammensetzen mit dem Designer und die Programmierung der Benutzeroberfläche kümmern zu müssen.
Wie Mario Santos in seinem großartigen Artikel hervorhebt, hat Adobe kürzlich Flash Catalyst veröffentlicht, eine IDE, mit der Sie PSD- oder AI-Dateien importieren und in XML-basierte Vektorobjekte (FXGs) konvertieren können. Dies ist definitiv ein Schritt in die richtige Richtung, aber etwas, das nur in Flash Player 10 implementiert ist, von dem es nur eine Durchdringungsrate von 75% gibt. Wenn Sie also an Live-Projekten arbeiten, müssen Sie Flash Player 9 verwenden. Wenn also mehr Nutzer Flash Player 10 verwenden, sind SWCs eine gute Möglichkeit, dies zu tun.
Genug geredet, lass uns einen SWC erstellen. Ich werde ein paar Grafiken in Photoshop und Illustrator erstellen und in die Flash-IDE einfügen, wo ich sie mithilfe von SWCs für die ActionScript-Codierung einrichten kann. Ich werde auch über ein Konzept namens "Scale 9 grid" sprechen, also schneiden Sie Ihren bevorzugten Bildeditor hoch und erstellen Sie eine neue Datei:
Nehmen wir einfach einige standardmäßige benutzerdefinierte Formen, die von Adobe bereitgestellt werden, und kleben Sie sie auf die Zeichenfläche:
Damit wir nicht nur schwarze Vollbild-Bitmaps haben, fügen wir ihnen etwas Farbe hinzu:
OK, also haben wir ein paar hübsche Stars, wir wollen sie jetzt in unsere Flash-IDE aufnehmen.
Starten Sie die Flash IDE und erstellen Sie eine neue ActionScript 3-Datei:
Wenn Sie ein Veteran der Flash-IDE sind, werden Sie sich daran erinnern, dass Sie seit CS3 PSD-Dateien importieren konnten. Sie haben eine wirklich nette Schnittstelle eingeführt, wenn es darum ging, PSDs zu importieren, die eher durch Ihre Ebenen gehen würden Importieren einer großen Bitmap. Gehen Sie zu Datei> Importieren> In Bibliothek importieren, navigieren Sie zu Ihrer PSD und klicken Sie auf In Bibliothek importieren. Sie erhalten ein Fenster ähnlich dem folgenden Fenster:
In meinem Fall lasse ich alles vom Hintergrund getrennt, da es nur ein weißer Hintergrund ist. Jetzt haben wir unsere PSD-Layer als Elemente in unserer Bibliothek. Wir können damit beginnen, sie für die Entwickler vorzubereiten. Nimm einen der Stars aus der Bibliothek und lass ihn einfach auf die Bühne fallen:
Dann nehmen wir den Stern und konvertieren ihn in einen MovieClip. Wenn das Fenster angezeigt wird, nennen Sie es "BlueStarAsset", und klicken Sie auf "Export for ActionScript". Die beiden Eingabefelder werden jetzt bearbeitet. Sie müssen sie nicht anfassen, aber sie geben uns die Möglichkeit, anzugeben, welche Klasse dieses Asset genannt wird und welche Art von Klasse es erweitert wird. Wir bleiben bei "MovieClip":
Jetzt haben wir ein Asset in unserer Bibliothek, das wir in ActionScript exportieren können. Bevor wir fortfahren, probieren wir es aus. Gehen Sie zuerst zu Datei> Einstellungen für Veröffentlichungen. Klicken Sie auf die Registerkarte "Flash", wählen Sie "Player" Version 9 aus und klicken Sie auf "SWC exportieren":
Klicken Sie auf "Ok". Jetzt können wir unser SWC exportieren. Debuggen Sie die FLA, indem Sie STRG / CMD + Return drücken, und Sie sehen eine SWF- und eine SWC-Datei. Molke! Sie haben ein SWC erstellt, jetzt lassen Sie es einfach schnell verwenden. Starten Sie Ihre bevorzugte Codierungs-IDE und erstellen Sie ein neues ActionScript 3-Projekt. Konfigurieren Sie die Compilereinstellungen so, dass sie die soeben erstellte SWC-Datei in den Erstellungspfad aufnehmen. Erstellen Sie eine neue ActionScript 3-Basisdatei mit dem Namen "App.as" und verwenden Sie den folgenden Code:
package import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] öffentliche Klasse App erweitert Sprite öffentliche Funktion App () var star: MovieClip = new BlueStarAsset (); addChild (Stern);
Sie werden so etwas sehen:
Das ist also unser Star Asset.
Ich werde kurz über ein Konzept sprechen, das "Scale 9 grid" genannt wird. Dies ist einfach eine Methode, die es uns ermöglicht, ein visuelles Asset aufzuschlitzen, sodass bei der Größenänderung Dinge wie abgerundete Ecken in einem angemessenen Verhältnis bleiben können. Wenn wir beispielsweise ein abgerundetes Rechteck wie dieses haben und dann die Breite geändert haben, sehen Sie, dass die abgerundeten Ecken nicht länger proportional sind:
Um dies zu überwinden, verwenden wir die Slicing-Methode für das Scale 9-Raster, um ein Rechteck auf unser Asset zu setzen, dessen Größe geändert wird, sodass alles außerhalb des Rechtecks proportional bleibt, beispielsweise:
Das rote Rechteck in der Mitte wird skaliert, das Zeug aber nicht. Wir erstellen ein 9-Wege-Gitter, die obere Reihe hat 3, die mittlere 3 und das untere 3. So machen wir es praktisch, gehen wir zurück zur Flash-IDE und zeichnen einfach ein einfaches abgerundetes Rechteck. Erstellen Sie daraus einen neuen Movieclip, und aktivieren Sie das Kontrollkästchen "Export für ActionScript" (ich habe "SimpleRoundedRect" genannt). Hoffentlich haben Sie etwas Ähnliches:
Jetzt nehmen wir dieses neu erstellte Asset, exportieren den SWC erneut (durch Debugging des Films) und kehren zu unserer ActionScript 3-IDE zurück, wo wir unsere Klasse wie folgt aktualisieren:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] öffentliche Klasse App erweitert Sprite öffentliche Funktion App () var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = new Rectangle (10, 10, re. Breite - 20, re. Höhe - 20); rect.width = stage.stageWidth; addChild (rect);
Wir fügen einfach unser Rechteck zur Bühne hinzu, aber vorher zeichnen wir ein Rechteck mit den Formaten x: 10, y: 10 und 20 Pixel weniger Breite und Höhe als unser abgerundetes Rechteck. Hiermit wird das mittlere Rechteck für unsere Skalenschnitte definiert. Sie sehen jetzt, dass das Rechteck die gesamte Bühnenbreite erreicht, ohne dass die Ecken unverhältnismäßig werden. Um den Unterschied zu sehen, kommentieren Sie die Zeile 15 aus (beginnt mit "rect.scale9Grid") und sehen Sie, wie die Ecken jetzt gestreckt werden.
Ich weiß genau, was Sie denken "wenn der Designer die gesamte Asset-Arbeit erledigen soll, warum muss der Entwickler dann das Rechteck für das Schneiden festlegen?" Nun, der Entwickler muss nicht, wie der Designer kann! Klicken Sie mit der rechten Maustaste auf das Asset in der Bibliothek und wählen Sie Eigenschaften aus. Aktivieren Sie dann das Kästchen "Hilfslinien für die 9-Slice-Skalierung aktivieren". Folgendes wird angezeigt:
Jetzt kann der Designer diese Hilfslinien neu positionieren, sodass sich der Entwickler nicht um die Erstellung eines Rechtecks für das Raster der Skala 9 kümmern muss. Wenn Sie Zeile 15 auskommentiert lassen und diesen SWC erneut exportieren, werden Sie sehen, dass die Ecken jetzt wieder verhältnismäßig sind. Einfach eh?
SWCs können mehr als nur visuelle Elemente enthalten, egal ob flache Grafiken oder Timeline- / Skript-Animationen. Sie können auch vollständige Codebibliotheken enthalten. SWCs sind eine sehr gute Möglichkeit, Ihren Code zu verteilen. Es ist eine ziemliche Arbeit, aber nicht unmöglich, SWCs zu decodieren. Es bedeutet jedoch, dass Sie eine SWC-Datei posten können, anstatt sich um viele Dateien und Verzeichnisse kümmern zu müssen. Sie sind auch für den Benutzer einfacher. Ich habe zum Beispiel einen Ordner, in dem ich ActionScript-Codebibliotheken ablege, die ich verwende oder erstelle, aber dann habe ich einen separaten Ordner für nützliche SWCs, die ich verwenden möchte. Ich finde es einfacher, einen SWC auszuwählen und an das Projekt zu binden, anstatt den gesamten Ordner für freigegebene Skripts einzubinden - und er ist auch schneller!
Um Code-basierte SWCs zu erstellen, verwende ich Flash Builder - Sie können die Betaversion von Adobe herunterladen. In Flash Builder müssen Sie wie folgt ein neues "Flex Library-Projekt" erstellen:
Vergeben Sie einen Namen und stellen Sie sicher, dass Sie den Flex 3.4-Compiler auswählen:
Klicken Sie auf "Weiter" und aktivieren Sie das Kontrollkästchen neben "SRC". Hier werden unsere Klassen eingestellt:
Jetzt können wir mit dem Schreiben von Code für unsere Bibliothek beginnen. Erstellen Sie also eine neue ActionScript-Klasse, nennen Sie sie "Test", setzen Sie den Paketnamen auf "com.flashtuts.swc" und geben Sie den folgenden Code ein:
Paket com.flashtuts.swc import flash.display.Sprite; öffentliche Klasse Test erweitert Sprite öffentliche Funktion Test () init (); private Funktion init (): void var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (Sprite);
Wie Sie sehen, haben wir gerade eine rote Box erstellt. Lassen Sie uns dies also in unser ActionScript 3-Projekt integrieren.
Sie müssen jetzt den Flex-Compiler ändern, damit er die gerade erstellten neuen SWC-Assets aufnehmen kann. Wenn Sie dies getan haben, können Sie den Code Ihrer Anwendung folgendermaßen ändern:
package import com.flashtuts.swc.Test; import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] öffentliche Klasse App erweitert Sprite öffentliche Funktion App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = new Rectangle (10, 10, re. Breite - 20, re. Höhe - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = neuer Test (); addChild (redRect);
Dort sehen Sie Ihr rotes Rechteck! Einfach eh?
Viele Leute mögen jetzt argumentieren, dass SWCs nicht benötigt werden, aber sie helfen Designern und Entwicklern, synchron zu arbeiten, ohne sich gegenseitig auf die Zehen zu treten. Sie schützen Ihren Code und sind eine gute Möglichkeit, visuelle Elemente wie Preloader und Grafiken gemeinsam zu nutzen. Während FXGs viel besser sind, sind Flash-Player bis zur Wiederbelebung von Flash Player 10 der Standard, wenn es darum geht, Produktionswebsites zu erstellen, die skalierbar sein müssen, sowohl in Bezug auf Projektzeitpläne als auch auf visuelle Komponenten.
Accentsconagua