Flash CS5 pentru designeri TLF și ActionScript + Câștigă 1 din 3 copii semnat!

Sa schimbat foarte mult între modul în care a fost tratat textul în Flash CS4 și Flash CS5. Credem că acum este un moment bun pentru a scoate un scaun, a sta jos și a revizui, în termeni foarte generali, ceea ce trebuie să știți despre TLF înainte de a "conecta" un exercițiu sau un proiect folosind ActionScript.

Următorul este un exercițiu de la Fundația Flash CS5 pentru proiectanți de Tom Green & Tiago Dias.
 
Dacă vă simțiți norocoși, accesați competiția Activetuts + câștigă unul din cele 3 copii semnate! (Desigur, puteți cumpăra întotdeauna o copie ...)

Introducere

Cu noul TextLayoutFramework (TLF), textul se găsește în aceste lucruri numite containere. Ele pot fi desenate fizic pe scenă utilizând instrumentul Text și li se dă un nume de instanță sau, după cum este mai des întâlnit, pot fi create în timpul execuției. De asemenea, știți că textul poate fi formatat și manipulat utilizând panoul Proprietăți. Lucrul îngrijit aici este cuvântul proprietăţi. Dacă în panou există o proprietate, omologul său se găsește în ActionScript. Vestea proastă este că ActionScript este piatră, proastă rece. Nu are nici un indiciu, de exemplu, ce este un recipient până când îi spui să creeze unul. Nu va formata text până când nu-i spuneți ce să faceți. Nici nu va pune textul pe scenă până nu i se va cere să facă acest lucru.

Majoritatea proiectelor vor începe cu a-ți spune să creezi un Flash Configurare () obiect, care este folosit pentru a spune Flash există un container pe scenă și modul de gestionare a Text Layout Framework pentru lucrurile din container. Aspectul real este tratat de către TextFlow () clasa, care își ia ordinele, ca să spunem așa, din Configurare () obiect.

Bineînțeles, fiind prost, Configurare () obiect trebuie să se spună exact cum să gestionați textul în container. Formatul implicit este setat printr-o proprietate a clasei Configuration numită textFlowInitialFormat. Pentru ao schimba, pur și simplu utilizați TextlayoutFormat () pentru a seta fonturile, culorile, alinierea și așa mai departe, apoi spuneți șefului-Configurație ()-că ei textFlowInitialFormatsa schimbat la cele pe care le-ați setat folosind TextLayoutFormat ().Șeful va obține asta, dar nu este foarte strălucitor, deci trebuie să-i spuneți că trebuie să predea lucrarea reală unui alt membru al echipei de conducere, TextFlow () clasă. Această clasă are responsabilitatea globală pentru orice cuvânt dintr-un container. Fiind la fel de dulce ca șeful, TextFlow () trebuie să i se spună ce este un paragraf (ParagraphElement), cât de larg este paragraful (SpanElement), dacă orice grafică este încorporată în paragraful (InLineGraphicElement), dacă oricare dintre texte conține legături (Elementul de legătură), si asa mai departe. Nu numai asta, dar trebuie să i se spună ce text se adaugă containerului, astfel încât acesta să poată gestiona lungimea liniei și să adauge orice copil (addChild) care conțin formatul respectiv, astfel că utilizatorul îl poate vedea.

TextFlow () clasa, din nou, nu este prea teribil de strălucitoare, va transfera apoi treaba peste un alt membru al echipei de management, IFlowComposer () clasa, a cărei singură sarcină este de a gestiona aspectul și afișarea fluxului de text în interiorul sau între containere. Compozitorul de fluxuri finalizează procesul prin a decide cât de mult text intră într-un container și apoi adaugă liniile de text către sprite. Acest lucru este realizat prin utilizarea addController () metoda, care creează o ContainerController () obiect al cărui parametru identifică recipientul și proprietățile sale.

Ultimul pas obișnuit este să-i spui lui FlowComposer să actualizeze controlorii și să pună textul pe scena în funcție de modul în care ceilalți membri ai echipei i-au spus Configurare () obiect cum trebuie să fie gestionată piesa lor din proiect.

Cu ajutorul acestor informații, să trecem la lucrul cu TLF în ActionScript. Vom crea o coloană de text cu ActionScript.


Pasul 1: Document nou

Deschideți un nou document Flash ActionScript 3.0, redenumiți Layer 1 la acțiuni, selectați primul cadru al stratului de acțiuni și deschideți panoul Acțiuni.


Pasul 2: ActionScript

Faceți clic o dată în panoul Script și introduceți următoarele:

var myDummyText: String = "Introducerea liniei de produse Adobe CS5 pune în mâinile dvs. câteva instrumente tipografice puternice - în special, un nou API (Application Programming Interface) numit Type Layout Framework (TLF) - și cu mai multe instrumente în linia Adobe până la un punct de confluență cu Flash, câmpul de grafică a mișcărilor tipografice de pe Web este pe cale să se mute în teritoriu care nu a fost încă explorat. Pentru a începe această explorare, trebuie să înțelegeți ce tip este în Flash și, la fel de important , ce puteți face cu aceasta pentru a onora mesagerii de comunicare ai conținutului dvs. ";

Aveți nevoie de text pentru a adăuga la scenă. Acest șir este al treilea paragraf al acestui capitol. Acum că aveți textul pentru a intra în container, trebuie să încărcați clasa care o va gestiona.


Pasul 3: Configurație ()

Apăsați tasta Enter (Windows) sau Return (Mac) și adăugați următoarea linie de cod:

 var config: Configurație = Configurație nouă ();

După cum ați observat, de îndată ce ați creat obiectul Configurație (), Flash a importat clasa-flashx.textLayout.elements.Configuration -a cărei sarcină principală este să controleze modul în care se comportă TLF. Următorul bloc de coduri îi spune TLF cum va apărea textul pe scenă.


Pasul 4: Clasa TextLayoutFormat

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

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

Clasa TextLayoutFormat, așa cum am spus mai devreme, este modul în care textul dintr-un container este formatat. Proprietățile din această clasă afectează formatul și stilul textului dintr-un container, un paragraf sau chiar o singură linie de text. În acest caz, le spunem Flash ce fonturi să folosească, mărimea, culoarea, cum trebuie aliniate (notați majusculele utilizate pentru aliniere) și căptușeala care o deplasează de pe marginile containerului.

Înainte de a trece mai departe, trebuie să faceți ceva. Există o problemă de codare. Derulați până la declarațiile de import. Dacă vedeți această linie-import flashx.textLayout.elements.TextAlign;-treceți la următorul bloc de cod. Dacă nu, ștergeți această linie din blocul de cod introdus exact: charFormat.textAlign = TextAlign.LEFT;. Reintroduceti charFormat.textAlign =. Introduceți primele două litere ale clasei (te), apăsați Ctrl + bara de spațiu și indicatorul de cod ar trebui să apară. Găsi Aliniere text, și faceți dublu clic pe el. Aceasta ar trebui să adauge declarația de import lipsă. Pentru a vă păstra sănătatea, vom furniza o listă a declarațiilor de import care ar trebui să apară la sfârșitul fiecărui exercițiu. Vă sugerăm cu insistență să comparați lista dvs. de declarații de import cu lista prezentată și, dacă lipsește, să le adăugați în codul dvs..

Acum că știți cum va fi formatat textul, trebuie să spuneți obiectului Configuration () să utilizeze formatarea. Dacă nu, se va aplica orice setare implicită pe care o alege.


Pasul 5: textFlowInitialFormat

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

 config.textFlowInitialFormat = charFormat;

Pasul 6: TextFlow ()

Apăsați tasta Enter (Windows) sau Return (Mac) și introduceți următorul bloc de coduri:

 Var textFlow: TextFlow = TextFlow nou (config); var p: ParagraphElement = new ParagraphElement (); var span: SpanElement = nou SpanElement (); span.text = myDummyText; p.addChild (span); textFlow.addChild (p);

TextFlow () obiect trebuie să fie aici pentru că sarcina sa este de a gestiona întregul text din container. Constructorul-TextFlow (config)-permite TLF să știe că este de a utiliza obiectul config creat mai devreme, așa că acum știe cum să formateze conținutul containerului și chiar containerul.
Următorul constructor-ParagraphElement ()-în esență, spune Flash cum trebuie tratat un paragraf. Există doar una aici, deci într-adevăr nu are nevoie de un parametru.

Pasul final este de a obține toate formatul și aspectul în containerul de pe scenă.


Pasul 7: ContainerController

Apăsați tasta Enter (Windows) sau Return (Mac) și adăugați aceste două linii finale:

 textFlow.flowComposer.addController (nou ContainerController (acest lucru, 500, 350)); textFlow.flowComposer.updateAllControllers ();

Prima linie adaugă ContainerController și spune Flash că containerul care este gestionat este actualul DisplayObject (acest), care este în prezent etapa, și de a stabili dimensiunile sale la 500 de pixeli lățime de 350 de pixeli înălțime.


Pasul 8: Testați

Salvați proiectul și testați filmul. Textul, după cum se arată mai jos, apare utilizând instrucțiunile de formatare pe care le-ați setat.

Declarații de import pentru acest exercițiu

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

 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;

Folosind ActionScript pentru a crea și format containerul și textul acestuia

Deși această sarcină de codare poate, la început, pare a fi un proces destul de complicat, putem asigura că nu este; va deveni aproape a doua natură în timp ce începeți să utilizați ActionScript pentru a reda cu text în containere.

Odată cu introducerea formatului Text Layout, abilitatea dvs. de a crea text, de a formata text, de ao plasa în coloane și, în general, de ao manipula folosind ActionScript, a extins foarte mult posibilitățile creative. Înainte de a vă bucura de toate acestea, trebuie să știți acest cuvânt Cadru există pentru un motiv.

Orice obiecte text TLF pe care le creați se vor baza pe o bibliotecă specifică ActionScript TLF, denumită și a runtime bibliotecă partajată (RSL). Când lucrați pe scenă în interfața Flash, Flash furnizează biblioteca. Nu este cazul când publicați SWF și plasați-l într-o pagină web. Trebuie să fie disponibil, la fel ca Flash Player, pe mașina utilizatorului. Când SWF se încarcă, va vâna pentru Bibliotecă în trei locuri:

  • Computerul local: Flash Player caută o copie a bibliotecii pe aparatul local pe care se joacă. Dacă nu există, se îndreaptă spre Adobe.com.
  • Adobe.com: Dacă nu este disponibilă nicio copie locală, Flash Player va interoga serverele Adobe pentru o copie a bibliotecii. Biblioteca, ca și plug-in-ul Flash Player, trebuie să se descarce o singură dată pe computer. După aceea, toate fișierele SWF ulterioare care se vor juca pe același computer vor folosi copia descărcată anterior a bibliotecii. Dacă, din anumite motive, nu o poate apuca, va arăta în dosarul care conține SWF.
  • În dosarul care conține SWF: Dacă serverele Adobe nu sunt disponibile din anumite motive, Flash Player caută biblioteca în directorul serverului web unde se află fișierul SWF. Pentru a oferi acest nivel suplimentar de backup, încărcați manual fișierul de bibliotecă pe serverul web împreună cu fișierul SWF. Oferim mai multe informații despre modul în care puteți face acest lucru în Capitolul 15.

    Când publicați un fișier SWF care utilizează text TLF, Flash creează un fișier suplimentar numit textLayout_X.X.X.XXX.swz (unde X este înlocuit cu numărul versiunii) de lângă fișierul SWF. Puteți alege opțional să încărcați acest fișier pe serverul dvs. web împreună cu fișierul dvs. SWF. Acest lucru permite cazurile rare în care serverele Adobe nu sunt disponibile din anumite motive. Dacă deschideți fișierul în care ați salvat acest exercițiu, veți vedea atât SWF, cât și, după cum se arată în Figura 6-25, fișierul SWZ.

Fișierul .swz conține Text Layout Framework.


The Giveaway!

Facem acest dăruire puțin diferit, deoarece Adam de la Aetuts + a împins Wildfire în felul meu ... Wildfire este un constructor promoțional genial și face să intre în concursuri o bucată de tort! Dacă doriți să participați cu o șansă de a câștiga unul din cele trei copii semnate ale "Fundației Flash CS5 pentru designeri", trebuie doar să introduceți!

Cum intru?

  1. Trimiteți un tweet de la pagina de intrare. Pentru fiecare urmăritor Twitter care intră prin linkul dvs. obțineți o intrare suplimentară.
  2. Completați detaliile dvs. odată ce ați făcut acest lucru. Asta e!

Cei trei câștigători vor fi anunțați luni, 6 septembrie. Mult noroc!

Cod