Flash CS5 per progettisti utilizzo del testo TLF come pulsante

Non dovrebbe sorprendere che tu possa utilizzare il testo TLF come pulsante per dare il via a un evento nel tuo film. Ad esempio, potresti avere un blocco di testo sul palco che parla di una visita a Times Square a New York, e quando l'utente fa clic sulla frase Times Square, sul palco appare una foto. In questo esempio, farai clic su un testo e una stella gialla che creerai sul palco inizierà a girare.

Quello che segue è un esercizio della Fondazione Flash CS5 per i designer di Tom Green e Tiago Dias.

Passaggio 1: nuovo documento

Aprire un nuovo documento Flash ActionScript 3.0 e salvarlo come TLF_eventLink_AS.fla. Cambia il nome di Livello 1 in Stella e aggiungi un nuovo livello denominato azioni.


Passaggio 2: selezionare lo strumento Polystar

Fare clic una volta nel primo fotogramma del livello Stella. Fai clic e tieni premuto sullo strumento Rettangolo sulla barra degli strumenti e seleziona lo strumento Polystar.


Passaggio 3: giallo morbido

Nel pannello Proprietà, ruotare le proprietà Riempimento e tratto e impostare il valore Tratto su Nessuno e il valore Riempimento su Giallo (# FFFF00).


Step 4: Star

Ruota le impostazioni dello strumento e fai clic sul pulsante Opzioni per aprire la finestra di dialogo Impostazioni strumento mostrata nella Figura 6-26. Seleziona Stella dal menu a discesa Stile e inserisci 5 per Numero di lati. Fare clic su OK per chiudere la finestra di dialogo.

Usa lo strumento PolyStar per creare stelle.


Passaggio 5: MovieClip

Disegna una stella da qualche parte nella metà inferiore dello stage, convertila in un clip filmato denominato Star, imposta il suo punto di registrazione su Center e nel pannello Proprietà assegna al clip filmato Star il nome dell'istanza di starMC.


Passaggio 6: azioni

Fare clic sul primo fotogramma dei livelli delle azioni e aprire il pannello Azioni. Quando il pannello si apre, fai clic una volta nel riquadro Script e inserisci il seguente blocco di codice:

 var containerSprite: Sprite = new Sprite (); this.addChild (containerSprite); containerSprite.x = 25 containerSprite.y = 50;

A Sprite è un filmato virtuale senza linea temporale. Iniziamo creando uno Sprite chiamato containerSprite, che verrà usato per contenere il testo. Il motivo per cui abbiamo bisogno è che ci sarà un po 'di interattività. Questo Sprite è posizionato a 25 pixel dal bordo sinistro dello stage e 50 pixel dall'alto.


Passaggio 7: configurazione ()

Premi due volte il tasto Invio (Windows) o A capo (Mac) e inserisci il seguente codice:

 var container: ContainerController = new ContainerController (containerSprite, 400, 300);

var config: Configuration = new Configuration (); var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0X000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat;

Niente di nuovo qui. Il contenitore per il testo viene creato insieme al Configurazione() oggetto e viene creata la formattazione per il testo da inserire nel contenitore.


Passaggio 8: linkHoverFormat

Premi due volte il tasto Invio (Windows) o A capo (Mac) e inserisci quanto segue:

 var textFlow: TextFlow = new TextFlow (); var p: ParagraphElement = new ParagraphElement (); p.linkHoverFormat = color: 0XFF0000; p.linkNormalFormat = color: 0x0000FF, textDecoration: TextDecoration.NONE;

Le ultime due righe sono nuove e il loro scopo è quello di farti cambiare il colore di una parola o di un gruppo di parole quando l'utente le passa sopra. La proprietà linkHoverFormat appartiene alla classe TextFormat e viene utilizzata per indicare a Flash di che colore viene visualizzato il testo identificato come collegamento quando il mouse si sposta su di esso. In questo caso, il colore cambierà in rosso.

Come avrai intuito, la seconda riga indica a Flash di che colore deve essere il link quando il mouse si sposta. In questo caso, sarà blu. Naturalmente, i collegamenti sono tradizionalmente sottolineati. Il modo in cui viene rimossa la sottolineatura consiste nell'utilizzare la costante NONE, che fa parte della classe TextDecoration. Se vuoi la sottolineatura, sarebbe TextDecoration.UNDERLINE.

Il prossimo passo nel processo è dire a Flash cosa fare quando si fa clic sul testo colorato.


Passaggio 9: fare clic

Premi due volte il tasto Invio (Windows) o A capo (Mac) e inserisci quanto segue:

 var link: LinkElement = new LinkElement (); link.addEventListener (FlowElementMouseEvent.CLICK, linkClicked);

Non c'è, ovviamente, nulla da cliccare. Affrontiamo questo problema.


Step 10: Span

Premi il tasto Invio (Windows) o A capo (Mac) un paio di volte e aggiungi quanto segue:

 var linkSpan: SpanElement = new SpanElement (); linkSpan.text = "Clicca qui"; link.addChild (Linkspan); var span: SpanElement = new SpanElement (); span.text = "per vedere la tua stella girare sul palco"; p.addChild (link); p.addChild (ampiezza);

Il prossimo passo è far scorrere il testo nel contenitore.


Step 11: Spin

Premi il tasto Invio (Windows) o A capo (Mac) e aggiungi quanto segue:

 textFlow.addChild (p); textFlow.flowComposer.addController (contenitori); textFlow.flowComposer.updateAllControllers ();

Il bit di codice finale è la funzione che fa ruotare la stella quando si fa clic sul testo. Digita il seguente:

 function linkClicked (evt: FlowElementMouseEvent): void evt.preventDefault (); var tween: Tween = new Tween (starMC, "rotation", Elastic.easeOut, 0, 180, 2, true); 

La prima riga di codice indica a Flash di ignorare eventuali impostazioni predefinite che potrebbero esserci per quanto riguarda il mouse e il testo nel contenitore.

La magia avviene in quella seconda linea. I parametri dicono alla classe Tween di lavorare con la proprietà di rotazione della stella (starMC) e di applicare un easOut alla stella quando termina la rotazione. Naturalmente, Flash, essendo stupido, ha bisogno di sentirsi dire che la rotazione inizia con la stella a 0 gradi e di ruotare di 180 gradi. Lo fa due volte e usa i secondi come misura del tempo.


Passaggio 12: Controllo errori

Fai clic sul pulsante Controlla sintassi come prima barra attraverso il codice in cerca di errori. Se non ce ne sono, il tuo computer eseguirà il ding. Se vengono trovati errori, verranno mostrati nel pannello del compilatore. L'errore più comune sarà l'ortografia o una dichiarazione di importazione mancante.

Ecco un suggerimento veloce. Se una classe non viene visualizzata come importazione, il pannello del compilatore ti dirà che la proprietà non è definita. Seleziona la classe nel codice in cui appare e cancella il testo. Digita le prime due lettere della classe e premi Ctrl + barra spaziatrice. La classe apparirà nel suggerimento sul codice risultante. Fare doppio clic sulla classe per aggiungerla nuovamente al codice. Questo crea anche la dichiarazione di importazione mancante.


Passaggio 13: Salva e prova il film

Il testo è colorato Quando fai clic con il mouse, la stella gira. Una versione completa di questo file è inclusa nel download di origine.

Importa dichiarazioni per questo esercizio

Queste sono le dichiarazioni di importazione per questo esercizio:

 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; importare fl.transitions.Tween; import flashx.textLayout.formats.TextDecoration; importare fl.transitions.easing.Elastic; import flashx.textLayout.formats.TextAlign;

Ci è piaciuto? Voglio di più? Puoi sempre acquistare una copia da FriendsOfEd ...