Flash CS5 für Designer TLF und ActionScript + Gewinnen Sie 1 von 3 signierten Kopien!

Zwischen dem Umgang mit Text in Flash CS4 und Flash CS5 hat sich vieles geändert. Wir sind der Meinung, dass es jetzt ein guter Zeitpunkt ist, einen Stuhl hochzuziehen, sich hinzusetzen und in sehr weiten Begriffen zu prüfen, was man über TLF wissen muss, bevor eine Übung oder ein Projekt mit ActionScript "verkabelt" wird.

Das Folgende ist eine Übung von Foundation Flash CS5 für Designer von Tom Green & Tiago Dias.
 
Wenn Sie Glück haben, nehmen Sie am Wettbewerb Activetuts + teil Gewinnen Sie eine von 3 signierten Exemplaren! (Natürlich können Sie immer eine Kopie kaufen ...)

Einführung

Mit dem neuen TextLayoutFramework (TLF) wird in diesen Dingen Text gefunden Behälter. Sie können entweder mit dem Textwerkzeug physisch auf der Bühne gezeichnet und mit einem Instanznamen versehen werden oder, wie üblich, zur Laufzeit erstellt werden. Sie wissen auch, dass der Text mit dem Eigenschaftenbedienfeld formatiert und bearbeitet werden kann. Das nette hier ist das Wort Eigenschaften. Wenn im Panel eine Eigenschaft vorhanden ist, wird das entsprechende Element in ActionScript angezeigt. Die schlechte Nachricht ist, ActionScript ist steinig, kalt dumm. Es hat beispielsweise keinen Hinweis darauf, was ein Container ist, bis Sie ihm sagen, dass er einen Container erstellen soll. Der Text wird erst formatiert, wenn Sie ihm sagen, was er tun soll. Der Text wird nicht einmal auf die Bühne gestellt, bis er dazu aufgefordert wird.

Die meisten Projekte beginnen damit, dass Sie Flash dazu auffordern, eine Aufbau() object, das verwendet wird, um Flash mitzuteilen, dass sich auf der Bühne ein Container befindet und wie das Text Layout Framework für die Inhalte im Container verwaltet wird. Das eigentliche Erscheinungsbild wird vom übernommen TextFlow () Klasse, die sozusagen ihre Befehle von der Aufbau() Objekt.

Natürlich, dumm zu sein, das Aufbau() Das Objekt muss genau gesagt werden, wie der Text im Container verwaltet werden soll. Das Standardformat wird durch eine Eigenschaft der Konfigurationsklasse festgelegt textFlowInitialFormat. Um es zu ändern, benutzen Sie einfach die TextlayoutFormat () Klasse, um die Schriftarten, Farben, Ausrichtung usw. festzulegen, und informieren Sie den Chef-Aufbau ()-das ist es textFlowInitialFormathat sich zu den von Ihnen eingestellten geändert TextLayoutFormat ().Der Chef wird das verstehen, aber er ist nicht besonders schlau, deshalb müssen Sie ihm als Nächstes sagen, dass er die eigentliche Arbeit einem anderen Mitglied des Management-Teams übergeben möchte, dem TextFlow () Klasse. Diese Klasse trägt die Gesamtverantwortung für alle Wörter in einem Container. So schwach wie der Chef zu sein, TextFlow () muss gesagt werden, was ein Absatz ist (ParagraphElement), wie weit der Absatz ist (SpanElement), ob Grafiken in den Absatz eingebettet sind (InLineGraphicElement), ob der Text Links enthält (Element verbinden), und so weiter. Nicht nur das, es muss auch gesagt werden, welcher Text dem Container hinzugefügt wird, damit er die Zeilenlänge verarbeiten und alle untergeordneten Elemente hinzufügen kann (addChild) die diese Formatierung enthalten, so dass der Benutzer sie tatsächlich sehen kann.

Das TextFlow () Klasse, die wiederum nicht zu schrecklich klug ist, übergibt den Auftrag einem anderen Mitglied des Managementteams, der IFlowComposer () Klasse, deren einzige Aufgabe darin besteht, das Layout und die Anzeige des Textflusses in oder zwischen den Containern zu verwalten. Der Flow-Composer beendet den Vorgang, indem er entscheidet, wie viel Text in einen Container gelangt, und fügt dann dem Sprite die Textzeilen hinzu. Dies wird durch die Verwendung von erreicht addController () Methode, die ein erstellt ContainerController () Objekt, dessen Parameter den Container und seine Eigenschaften angeben.

Der übliche letzte Schritt besteht darin, den FlowComposer anzuweisen, die Steuerungen zu aktualisieren und den Text auf die Bühne zu setzen, je nachdem, wie die anderen Mitglieder des Teams dies gesagt haben Aufbau() Objekt, wie ihr Teil des Projekts verwaltet werden soll.

Lassen Sie uns mit diesen Informationen in der Hand arbeiten, um mit TLF in ActionScript zu arbeiten. Wir erstellen eine Textspalte mit ActionScript.


Schritt 1: Neues Dokument

Öffnen Sie ein neues Flash ActionScript 3.0-Dokument, benennen Sie Ebene 1 in Aktionen um, wählen Sie den ersten Frame der Aktionsebene aus und öffnen Sie das Bedienfeld Aktionen.


Schritt 2: ActionScript

Klicken Sie einmal in den Skriptbereich und geben Sie Folgendes ein:

var myDummyText: String = "Mit der Einführung der Adobe CS5-Produktlinie haben Sie einige leistungsstarke typografische Werkzeuge in den Händen - insbesondere eine neue API (Application Programming Interface), die als Type Layout Framework (TLF) bezeichnet wird - und weitere Tools in der Adobe-Linie Wenn Sie sich näher an einen Zusammenflusspunkt mit Flash bewegen, bewegt sich das Gebiet der typografischen Bewegungsgrafiken im Web in einem Gebiet, das noch nicht erforscht wurde. Um diese Erkundung zu starten, müssen Sie wissen, welcher Typ in Flash und ebenso wichtig ist , was können Sie damit tun, um die Kommunikationsboten Ihrer Inhalte zu ehren. ";

Sie benötigen etwas Text, um die Bühne hinzuzufügen. Diese Zeichenfolge ist der dritte Absatz dieses Kapitels. Jetzt, da Sie den Text haben, um in den Container zu gelangen, müssen Sie die Klasse laden, die ihn verwaltet.


Schritt 3: Konfiguration ()

Drücken Sie die Eingabetaste (Windows) oder den Zeilenschalter (Mac) und fügen Sie die folgende Codezeile hinzu:

 var config: Konfiguration = neue Konfiguration ();

Wie Sie vielleicht bemerkt haben, importierte Flash die Klasse, sobald Sie das Objekt Configuration () erstellt haben-flashx.textLayout.elements.Configuration -dessen Hauptaufgabe besteht darin, das Verhalten von TLF zu steuern. Der nächste Codeblock teilt TLF mit, wie der Text auf der Bühne angezeigt wird.


Schritt 4: TextLayoutFormat-Klasse

Drücken Sie zweimal die Eingabetaste (Windows) oder die Eingabetaste (Mac) und geben Sie Folgendes ein:

 var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; charFormat.paddingLeft = 100; charFormat.paddingTop = 100;

Die TextLayoutFormat-Klasse ist, wie bereits erwähnt, die Formatierung des Textes in einem Container. Die Eigenschaften dieser Klasse wirken sich auf das Format und den Stil des Textes in einem Container, einem Absatz oder sogar einer einzelnen Textzeile aus. In diesem Fall teilen wir Flash mit, welche Schriften verwendet werden sollen, welche Größe, Farbe und wie es auszurichten ist (beachten Sie die Großbuchstaben, die für die Ausrichtung verwendet werden) und die Auffüllung, die es von den Rändern des Containers entfernt.

Bevor Sie weitermachen, müssen Sie etwas tun. Es gibt ein Codierungsproblem. Blättern Sie nach oben zu den Importanweisungen. Wenn Sie diese Zeile sehen-import flashx.textLayout.elements.TextAlign;-Fahren Sie mit dem nächsten Codeblock fort. Wenn Sie dies nicht tun, löschen Sie diese Zeile im gerade eingegebenen Codeblock: charFormat.textAlign = TextAlign.LEFT;. erneut eingeben charFormat.textAlign =. Geben Sie die ersten beiden Buchstaben der Klasse ein (Te), drücken Sie Strg + Leertaste, und der Code-Hinweis sollte angezeigt werden. Finden Textausrichtung, und doppelklicken Sie darauf. Dies sollte die fehlende import-Anweisung hinzufügen. Um Ihren Verstand zu erhalten, stellen wir Ihnen eine Liste der Importanweisungen zur Verfügung, die am Ende jeder Übung erscheinen sollten. Wir empfehlen dringend, dass Sie Ihre Liste der Importanweisungen mit der angezeigten Liste vergleichen und, falls Sie welche vermissen, diese in Ihren Code einfügen.

Da Sie nun wissen, wie der Text formatiert wird, müssen Sie das Configuration () - Objekt anweisen, die Formatierung zu verwenden. Andernfalls wird die von Ihnen gewählte Standardeinstellung angewendet.


Schritt 5: textFlowInitialFormat

Drücken Sie zweimal die Eingabetaste (Windows) oder die Eingabetaste (Mac) und geben Sie Folgendes ein:

 config.textFlowInitialFormat = charFormat;

Schritt 6: TextFlow ()

Drücken Sie die Eingabetaste (Windows) oder den Zeilenschalter (Mac) und geben Sie den folgenden Codeblock ein:

 var textFlow: TextFlow = neuer TextFlow (config); var p: ParagraphElement = neues ParagraphElement (); var span: SpanElement = neues SpanElement (); span.text = meinDummyText; p.addChild (span); textFlow.addChild (p);

Das TextFlow () Das Objekt muss hier sein, da der gesamte Text im Container verwaltet werden muss. Der Konstruktor-TextFlow (config)-lässt TLF wissen, dass es das zuvor erstellte config-Objekt verwendet, damit es jetzt weiß, wie der Inhalt des Containers und sogar der Container selbst formatiert wird.
Der nächste Konstruktor-ParagraphElement ()-teilt Flash im Wesentlichen mit, wie ein Absatz behandelt werden soll. Es gibt nur einen hier, also braucht es wirklich keinen Parameter.

Der letzte Schritt besteht darin, alle Formatierungen und Layouts auf der Bühne in den Container zu übernehmen.


Schritt 7: ContainerController

Drücken Sie die Eingabetaste (Windows) oder den Zeilenschalter (Mac) und fügen Sie die beiden letzten Zeilen hinzu:

 textFlow.flowComposer.addController (neuer ContainerController (hier 500, 350)); textFlow.flowComposer.updateAllControllers ();

Die erste Zeile fügt das hinzu ContainerController und teilt Flash mit, dass der verwaltete Container das aktuelle DisplayObject ist (diese), die derzeit die Bühne ist, und ihre Abmessungen auf 500 Pixel Breite und 350 Pixel Höhe festzulegen.


Schritt 8: Test

Speichern Sie das Projekt und testen Sie den Film. Der unten dargestellte Text wird mit den von Ihnen festgelegten Formatierungsanweisungen angezeigt.

Anweisungen für diese Übung importieren

Dies sind die Importanweisungen für diese Übung:

 import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.container.ContainerController;

Verwenden Sie ActionScript zum Erstellen und Formatieren des Containers und des zugehörigen Textes

Obwohl diese Codierungsaufgabe auf den ersten Blick ein ziemlich komplizierter Prozess zu sein scheint, können wir versichern, dass dies nicht der Fall ist. Es ist fast selbstverständlich, wenn Sie ActionScript zum Abspielen von Text in den Containern verwenden.

Mit der Einführung des Textlayoutformats haben Sie die Möglichkeit, Text zu erstellen, Text zu formatieren, in Spalten zu platzieren und im Allgemeinen mit ActionScript zu bearbeiten, Ihre kreativen Möglichkeiten erheblich erweitert. Bevor Sie sich darüber aufregen, müssen Sie das Wort kennen Rahmen gibt es einen grund dafür.

Alle von Ihnen erstellten TLF-Textobjekte hängen von einer bestimmten TLF-ActionScript-Bibliothek ab, die auch als a bezeichnet wird Laufzeitbibliothek (RSL). Wenn Sie auf der Bühne in der Flash-Benutzeroberfläche arbeiten, stellt Flash die Bibliothek bereit. Dies ist nicht der Fall, wenn Sie die SWF-Datei veröffentlichen und auf einer Webseite platzieren. Es muss, ähnlich wie Flash Player, auf dem Computer des Benutzers verfügbar sein. Wenn die SWF geladen wird, sucht sie an drei Stellen nach der Bibliothek:

  • Der lokale Computer: Flash Player sucht auf dem lokalen Computer, auf dem er abgespielt wird, nach einer Kopie der Bibliothek. Wenn es nicht dort ist, geht es nach Adobe.com.
  • Adobe.com: Wenn keine lokale Kopie verfügbar ist, fragt Flash Player die Adobe-Server nach einer Kopie der Bibliothek. Die Bibliothek muss wie das Flash Player-Plug-In nur einmal pro Computer heruntergeladen werden. Danach verwenden alle nachfolgenden SWF-Dateien, die auf demselben Computer abgespielt werden, die zuvor heruntergeladene Kopie der Bibliothek. Wenn es aus irgendeinem Grund nicht dort greifen kann, wird es in dem Ordner gesucht, der die SWF-Datei enthält.
  • In dem Ordner, der die SWF-Datei enthält: Wenn die Server von Adobe aus irgendeinem Grund nicht verfügbar sind, sucht Flash Player im Web-Server-Verzeichnis, in dem sich die SWF-Datei befindet, nach der Bibliothek. Um diese zusätzliche Sicherungsebene bereitzustellen, laden Sie die Bibliotheksdatei zusammen mit Ihrer SWF-Datei manuell auf den Webserver hoch. Weitere Informationen dazu finden Sie in Kapitel 15.

    Wenn Sie eine SWF-Datei veröffentlichen, die TLF-Text verwendet, erstellt Flash eine zusätzliche Datei mit dem Namen textLayout_X.X.X.XXX.swz (wobei die X durch die Versionsnummer ersetzt werden) neben Ihrer SWF-Datei. Sie können diese Datei optional zusammen mit Ihrer SWF-Datei auf Ihren Webserver hochladen. Dies ermöglicht den seltenen Fall, dass die Server von Adobe aus irgendeinem Grund nicht verfügbar sind. Wenn Sie die Datei öffnen, in der Sie diese Übung gespeichert haben, werden sowohl die SWF-Datei als auch die SWZ-Datei angezeigt (siehe Abbildung 6-25).

Die .swz-Datei enthält das Text Layout Framework.


Das Werbegeschenk!

Wir haben dieses Werbegeschenk etwas anders gemacht, seit Adam von Aetuts + Wildfire in meine Richtung gedrängt hat… Wildfire ist ein brillanter Promotionsbauer und macht die Teilnahme an Wettbewerben zum Kinderspiel! Wenn Sie eine von drei signierten Exemplaren von "Foundation Flash CS5 for Designers" gewinnen möchten, geben Sie einfach ein!

Wie komme ich rein??

  1. Senden Sie einen Tweet von der Einstiegsseite. Für jeden Twitter-Follower, den Sie über Ihren Link eingeben, erhalten Sie einen zusätzlichen Eintrag.
  2. Geben Sie Ihre Daten ein, wenn Sie dies getan haben. Das ist es!

Die drei Gewinner werden am Montag, 6. September, bekannt gegeben. Viel Glück!