Share
Es ist keine Überraschung, dass Sie TLF-Text als Schaltfläche zum Starten eines Ereignisses in Ihrem Film verwenden können. Beispielsweise könnte sich auf der Bühne ein Textblock befinden, der über einen Besuch des Times Square in New York spricht. Wenn der Benutzer auf den Ausdruck Times Square klickt, wird ein Foto auf der Bühne angezeigt. In diesem Beispiel klicken Sie auf einen Text und ein gelber Stern, den Sie auf der Bühne erstellen, beginnt sich zu drehen.
Das Folgende ist eine Übung von Foundation Flash CS5 für Designer von Tom Green & Tiago Dias.Öffnen Sie ein neues Flash ActionScript 3.0-Dokument und speichern Sie es als TLF_eventLink_AS.fla. Ändern Sie den Namen von Layer 1 in Stern, und fügen Sie eine neue Ebene mit dem Namen Aktionen hinzu.
Klicken Sie einmal in das erste Bild der Sternebene. Klicken und halten Sie das Rechteckwerkzeug in der Werkzeugleiste, und wählen Sie das Polystar-Werkzeug aus.
Drehen Sie im Eigenschaftenfenster die Eigenschaften Fill und Stroke nach unten und setzen Sie den Wert für Stroke auf None und den Wert für Fill auf Gelb (# FFFF00)..
Rufen Sie die Werkzeugeinstellungen auf und klicken Sie auf die Schaltfläche Optionen, um das in Abbildung 6-26 dargestellte Dialogfeld Werkzeugeinstellungen zu öffnen. Wählen Sie in der Dropdownliste Stil die Option Stern aus, und geben Sie 5 als Anzahl der Seiten ein. Klicken Sie auf OK, um das Dialogfeld zu schließen.
Verwenden Sie das PolyStar-Werkzeug zum Erstellen von Sternen.
Zeichnen Sie irgendwo in der unteren Hälfte der Bühne einen Stern, konvertieren Sie ihn in einen Movieclip mit dem Namen Star, setzen Sie den Registrierungspunkt auf Center und geben Sie im Eigenschaftenfenster dem Star-Movieclip den Instanznamen starMC an.
Klicken Sie auf den ersten Frame der Aktionsebenen und öffnen Sie das Bedienfeld Aktionen. Wenn das Fenster geöffnet wird, klicken Sie einmal in das Skriptfenster und geben Sie den folgenden Codeblock ein:
var containerSprite: Sprite = new Sprite (); this.addChild (containerSprite); containerSprite.x = 25 containerSprite.y = 50;
Ein Sprite ist ein virtueller Movieclip ohne Zeitleiste. Zunächst erstellen wir ein Sprite namens containerSprite, in dem der Text gespeichert wird. Der Grund, warum wir das brauchen, ist, weil Interaktivität involviert sein wird. Dieses Sprite befindet sich 25 Pixel vom linken Bühnenrand und 50 Pixel vom oberen Rand entfernt.
Drücken Sie zweimal die Eingabetaste (Windows) oder die Eingabetaste (Mac) und geben Sie den folgenden Code ein:
var container: ContainerController = neuer ContainerController (containerSprite, 400, 300);var config: Konfiguration = neue Konfiguration (); var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0X000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat;
Nichts Neues hier. Der Container für den Text wird zusammen mit dem erstellt Aufbau() Objekt und die Formatierung für den Text, der in den Container eingefügt werden soll, wird erstellt.
Drücken Sie zweimal die Eingabetaste (Windows) oder die Eingabetaste (Mac) und geben Sie Folgendes ein:
var textFlow: TextFlow = neuer TextFlow (); var p: ParagraphElement = neues ParagraphElement (); p.linkHoverFormat = color: 0XFF0000; p.linkNormalFormat = color: 0x0000FF, textDecoration: TextDecoration.NONE;
Die letzten beiden Zeilen sind neu und dienen dazu, die Farbe eines Wortes oder einer Gruppe von Wörtern ändern zu können, wenn der Benutzer über sie rollt. Die linkHoverFormat -Eigenschaft gehört zur TextFormat-Klasse und wird verwendet, um Flash mitzuteilen, in welcher Farbe der als Link gekennzeichnete Text angezeigt wird, wenn der Mauszeiger darüber bewegt wird. In diesem Fall ändert sich die Farbe in Rot.
Wie Sie vielleicht schon erraten haben, zeigt die zweite Zeile Flash an, welche Farbe der Link haben soll, wenn die Maus abrollt. In diesem Fall ist es blau. Natürlich werden Links traditionell unterstrichen. Die Unterstreichung wird entfernt, wenn Sie die NONE-Konstante verwenden, die Teil der TextDecoration-Klasse ist. Wenn Sie die Unterstreichung wünschen, ist dies TextDecoration.UNDERLINE.
Der nächste Schritt besteht darin, Flash mitzuteilen, was zu tun ist, wenn auf den farbigen Text geklickt wird.
Drücken Sie zweimal die Eingabetaste (Windows) oder die Eingabetaste (Mac) und geben Sie Folgendes ein:
var link: LinkElement = neues LinkElement (); link.addEventListener (FlowElementMouseEvent.CLICK, linkClicked);
Es gibt natürlich nichts zu klicken. Lasst uns mit diesem Thema umgehen.
Drücken Sie mehrmals die Eingabetaste (Windows) oder die Eingabetaste (Mac), und fügen Sie Folgendes hinzu:
var linkSpan: SpanElement = neues SpanElement (); linkSpan.text = "Hier klicken"; link.addChild (linkSpan); var span: SpanElement = neues SpanElement (); span.text = "um Ihren Stern auf der Bühne zu drehen"; p.addChild (link); p.addChild (span);
Der nächste Schritt besteht darin, den Text in den Container zu fließen.
Drücken Sie die Eingabetaste (Windows) oder den Zeilenschalter (Mac) und fügen Sie Folgendes hinzu:
textFlow.addChild (p); textFlow.flowComposer.addController (Container); textFlow.flowComposer.updateAllControllers ();
Das letzte Code-Bit ist die Funktion, die den Stern beim Klicken auf den Text in Rotation versetzt. Gebe folgendes ein:
function linkClicked (evt: FlowElementMouseEvent): void evt.preventDefault (); var tween: Tween = neuer Tween (starMC, "Rotation", Elastic.easeOut, 0, 180, 2, true);
In der ersten Codezeile wird Flash aufgefordert, die Standardeinstellungen für die Maus und den Text im Container zu ignorieren.
Die Magie geschieht in dieser zweiten Zeile. Die Parameter geben der Tween-Klasse an, mit der Rotationseigenschaft des Sterns (starMC) zu arbeiten und nach Beendigung der Rotation ein easeOut auf den Stern anzuwenden. Da Flash blöd ist, muss natürlich gesagt werden, dass die Rotation mit dem Stern bei 0 Grad beginnt und um 180 Grad gedreht wird. Es tut dies zweimal und verwendet Sekunden als Zeitmaß.
Klicken Sie auf die Schaltfläche Check Syntax (Syntax überprüfen), wenn Sie den Code zum ersten Mal nach Fehlern suchen. Wenn keine vorhanden sind, wird Ihr Computer beschädigt. Wenn Fehler gefunden werden, werden diese im Compiler-Fenster angezeigt. Der am häufigsten auftretende Fehler ist die Rechtschreibung oder eine fehlende Importanweisung.
Hier ist ein kurzer Tipp. Wenn eine Klasse nicht als Import angezeigt wird, weist das Compiler-Bedienfeld Sie darauf hin, dass die Eigenschaft nicht definiert ist. Wählen Sie die Klasse im Code aus, an der sie angezeigt wird, und löschen Sie den Text. Geben Sie die ersten beiden Buchstaben der Klasse ein und drücken Sie Strg + Leertaste. Die Klasse wird im resultierenden Codehinweis angezeigt. Doppelklicken Sie auf die Klasse, um sie wieder in den Code einzufügen. Dadurch wird auch die fehlende Importanweisung erstellt.
Der Text ist farbig. Wenn Sie mit der Maus klicken, dreht sich der Stern. Eine vollständige Version dieser Datei ist im Quelldownload enthalten.
Dies sind die Importanweisungen für diese Übung:
import flash.display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.LinkElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.events.FlowElementMouseEvent; import fl.transitions.Tween; import flashx.textLayout.formats.TextDecoration; import fl.transitions.easing.Elastic; import flashx.textLayout.formats.TextAlign;
Genoss das? Mehr wollen? Sie können immer eine Kopie von FriendsOfEd kaufen…
Accentsconagua