Flash CS5 pentru designeri Utilizarea textului TLF ca buton

Ar trebui să nu fie o surpriză faptul că puteți utiliza textul TLF ca un buton pentru a lansa un eveniment în filmul dvs. De exemplu, ați putea avea un bloc text pe scena care vorbește despre o vizită la Times Square din New York și când utilizatorul face clic pe fraza Times Square, apare o fotografie pe scenă. În acest exemplu, faceți clic pe un text, iar o stea galbenă pe care o veți crea pe scenă începe să se rotească.

Următorul este un exercițiu de la Fundația Flash CS5 pentru proiectanți de Tom Green & Tiago Dias.

Pasul 1: Document nou

Deschideți un nou document Flash ActionScript 3.0 și salvați-l ca TLF_eventLink_AS.fla. Schimbați numele Stratului 1 în Stelute și adăugați un nou strat numit acțiuni.


Pasul 2: Selectați Tool Polystar

Faceți clic o dată în primul cadru al stratului Star. Faceți clic pe și mențineți apăsat instrumentul Rectangle de pe bara de instrumente și selectați instrumentul Polystar.


Pasul 3: Miel galben

În panoul Proprietăți, răsuciți proprietățile de umplere și curse și setați valoarea Stroke la None și valoarea Fill to Yellow (# FFFF00).


Pasul 4: Steaua

Răsuciți setările de instrument și faceți clic pe butonul Opțiuni pentru a deschide caseta de dialog Setări de instrumente afișată în Figura 6-26. Selectați Star din meniul drop-down Style și introduceți 5 pentru Number of Sides. Faceți clic pe OK pentru a închide caseta de dialog.

Utilizați instrumentul PolyStar pentru a crea stele.


Pasul 5: MovieClip

Desenați o stea pe undeva în jumătatea inferioară a scenei, convertiți-o într-un clip video numit Stelu, stabiliți punctul de înregistrare la Centrul, iar în panoul Proprietăți dați clipului pentru filmul Star numele de instanță al starMC.


Pasul 6: Acțiuni

Faceți clic pe primul cadru al straturilor de acțiuni și deschideți panoul Acțiuni. Când panoul se deschide, faceți clic o dată în panoul Script și introduceți următorul bloc de cod:

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

Un Sprite este un clip video virtual fără o cronologie. Începem prin crearea unui container Sprite denumit containerSprite, care va fi folosit pentru a menține textul. Motivul pentru care avem nevoie de acest lucru se datorează faptului că vor fi implicate unele interactivități. Acest Sprite este plasat la 25 de pixeli de la marginea din stânga a scenei și de 50 de pixeli din partea de sus.


Pasul 7: Configurarea ()

Apăsați de două ori tasta Enter (Windows) sau Return (Mac) și introduceți următorul cod:

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

var config: Configurație = Configurație nouă (); var charFormat: TextLayoutFormat = nou TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0X000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat;

Nimic nou aici. Containerul pentru text este creat împreună cu Configurare () obiect și se creează formatarea textului care urmează să fie plasat în container.


Pasul 8: linkHoverFormat

Apăsați de două ori tasta Enter (Windows) sau Return (Mac) și introduceți următoarele:

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

Ultimele două linii sunt noi, iar scopul lor este să vă permită să schimbați culoarea unui cuvânt sau a unui grup de cuvinte atunci când utilizatorul se rotește peste ele. Proprietatea linkHoverFormat aparține clasei TextFormat și este utilizată pentru a spune Flash ce culoare va fi textul identificat ca un link atunci când mouse-ul se rotește peste el. În acest caz, culoarea se va schimba în Roșu.

Așa cum probabil ați ghicit, a doua linie indică Flash ce culoare trebuie să fie legătura atunci când mouse-ul se desprinde. În acest caz, va fi albastru. Firește, legăturile sunt în mod tradițional subliniate. Modul în care este eliminată sublinierea este utilizarea constantei NONE, care face parte din clasa TextDecoration. Dacă doriți să subliniați, ar fi TextDecoration.UNDERLINE.

Următorul pas în acest proces este de a spune Flash ce să facă când se face clic pe textul colorat.


Pasul 9: Faceți clic pe

Apăsați de două ori tasta Enter (Windows) sau Return (Mac) și introduceți următoarele:

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

Nu există, desigur, nimic de făcut clic. Să rezolvăm problema.


Pasul 10: Span

Apăsați de câteva ori tasta Enter (Windows) sau Return (Mac) și adăugați următoarele:

 var linkSpan: SpanElement = nou SpanElement (); linkSpan.text = "Faceți clic aici"; link.addChild (linkSpan); var span: SpanElement = nou SpanElement (); span.text = "pentru a vedea rotirea stelei pe scenă"; p.addChild (link); p.addChild (interval);

Următorul pas este să introduceți textul în recipient.


Pasul 11: Rotiți

Apăsați tasta Enter (Windows) sau Return (Mac) și adăugați următoarele:

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

Bitul de cod final este funcția prin care steaua se rotește când se face clic pe text. Introduceți următoarele:

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

Prima linie de cod îi spune lui Flash să ignore orice setări implicite care ar putea exista în ceea ce privește mouse-ul și textul din container.

Magia se întâmplă în a doua linie. Parametrii spun ca clasa Tween functioneaza cu proprietatea de rotatie a stelei (starMC) si pentru a aplica un usorOut la stea atunci cand se termina rotirea. Firește, Flash, fiind prost, trebuie să se spună că rotația începe cu steaua la 0 grade și se rotește cu 180 de grade. Face acest lucru de două ori și utilizează secunde ca măsură a timpului.


Pasul 12: Verificarea erorilor

Faceți clic pe butonul Verificați sintaxa ca primă înregistrare prin codul care caută erori. Dacă nu există niciunul, calculatorul dvs. va dinge. Dacă se găsesc erori, ele vor fi afișate în panoul Compilator. Cea mai obișnuită eroare va fi ortografia sau o declarație de import lipsă.

Iată un sfat rapid. Dacă o clasă nu apare ca un import, panoul Compiler vă va spune că proprietatea este nedefinită. Selectați clasa din codul în care apare și ștergeți textul. Introduceți primele două litere ale clasei și apăsați Ctrl + bara de spațiu. Clasa va apărea în sugestia de cod rezultată. Faceți dublu clic pe clasă pentru al adăuga înapoi în cod. De asemenea, aceasta creează declarația de import lipsă.


Pasul 13: Salvați și testați filmul

Textul este colorat. Când faceți clic pe mouse-ul, steaua se rotește. O versiune completă a acestui fișier este inclusă la descărcarea sursei.

Documente de import pentru acest exercițiu

Acestea sunt declarațiile de import pentru acest exercițiu:

 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;

Bucurați-vă de asta? Vreau mai mult? Puteți cumpăra întotdeauna o copie de la FriendsOfEd ...

Cod