Sfaturi și cele mai bune practici pentru designeri Simboluri și text

Pentru majoritatea începătorilor, conceptul de simboluri în Flash poate fi destul de confuz. Am cunoscut destui designeri care - chiar și după ce lucrează cu Flash de ani de zile - sunt destul de clueless despre modul cel mai bun de a folosi simboluri în munca lor. Să aruncăm o privire mai atentă la simboluri și text.

Bine ați venit în cea de-a doua parte a seriei noastre Flash Sfaturi și bune practici pentru designeri. În prima parte ne-am uitat la desen, ceea ce este, de obicei, primul lucru pe care l-ar aborda când începe cu Flash. Odată ce ați stăpânit instrumentele de creație, totuși, nu durează prea mult pentru a realiza că formele de la sine sunt destul de inutile. Sigur, puteți aplica culori și accidente vasculare cerebrale și le puteți manipula în orice fel doriți, dar probabil că sunteți acolo pentru a face lucrurile să se miște. Iar cel mai bun mod de a începe cu asta este de a transforma formele în simboluri.

Un alt aspect critic al designului în Flash pe care îl vom acoperi astăzi este textul. De-a lungul anilor, capacitatea lui Flash de a crea și de a face text a făcut niște salturi destul de mari. Îmi amintesc încă de zilele în care nu exista nici un set de "anti-alias pentru animație", iar gândul de a avea blocuri de text nu era decât un coșmar. Asta a dispărut acum și cu abilitatea de a aplica direct filtre la text, este o rutină mult mai puțin dureroasă acum. Cu toate acestea, există mult de făcut cu instrumentul de text din Flash astăzi. Vom analiza câteva astfel de trucuri.

Deși acest post a fost scris pentru Flash Professional CS5, majoritatea sfaturilor ar trebui să funcționeze foarte bine în versiunile mai vechi. Voi încerca să fac un punct pentru a evidenția ori de câte ori ceva este foarte specific pentru cea mai recentă versiune a Flash.


Alegeți simbolurile dvs.

Pentru început, există trei tipuri de simboluri pe care le puteți crea în Flash: grafic, buton și clip video. Deși numele ar trebui să fie destul de explicative, nu este întotdeauna evident ce este diferența dintre cele trei. Te rog să ai parte de mine dacă sună prea puțin, dar știu mulți designeri Flash care nu sunt siguri de ce e. Deci, aici mergem:

  • Grafic: Cel mai de bază tip de simbol în Flash, și probabil cel mai inutil. Nu puteți avea animație în interiorul graficului (bine, tehnic puteți, dar Flash va ignora pur și simplu) și nu puteți să atribuiți prea mult în numele funcționalității grafice folosind ActionScript. Pentru mine, este doar un pas peste gruparea elementelor.
  • Buton: După cum sugerează și numele, acesta este un element interactiv. Un buton este convertit automat la un element activ pe care puteți face clic, ca un link într-o pagină HTML. Fiecare buton are trei stări - în sus (sau normal), deasupra și în jos. Aveți posibilitatea să atribuiți butonul ActionScript pentru a porni, de exemplu, animația.
  • Movie Clip: Acesta este de departe cel mai folosit tip de simbol în Flash, și pentru un motiv bun. Pentru a începe, puteți avea o animație în cadrul unui clip video. O instanță a unui clip video plasat pe scenă va anima, indiferent de linia temporală principală. Este, de asemenea, singurul tip de simbol pe care îl puteți aplica modurilor de amestecare și filtrelor (mai multe despre cele într-un minut).

Notă: Puteți seta comportamentul unei instanțe a oricărui simbol individual. A pus un film pe scenă, dar nu vrea să animeze? Trebuie doar să selectați instanța și să modificați comportamentul în panoul "Proprietăți".


Moduri de amestecare

Modurile de combinare aduc una dintre caracteristicile iubite de la aplicațiile de editare a imaginilor la spațiul de lucru vectorial Flash. Ca și Photoshop, Fireworks, Illustrator și altele, puteți modifica aspectul elementelor prin suprapunerea lor și alegerea diferitelor moduri de transparență. De exemplu, ați putea dori să întunecați o parte a unui obiect pe baza a ceea ce se află pe partea de sus a acestuia sau, poate, să îl luminați. O modalitate obișnuită de a utiliza acest lucru este atunci când aveți o imagine de import logo-ul raster cu un fundal alb care ar dori să se arate prin intermediul. Pur și simplu modificați modul de amestecare la "Multiplicați" în secțiunea "Afișaj" din panoul Proprietăți.

Rețineți că modurile de amestecare pot fi aplicate numai la simbolurile clipului video și ale butonului. Pentru mai multe detalii despre modurile de amestecare în Flash, verificați acest ecran.


Studiu de caz: Aplicați efecte de iluminare pe texturile plane

Să presupunem că aveți nevoie de un fundal realist din lemn pentru designul dvs. Există tone de texturi libere disponibile acolo, dar o problemă obișnuită este că toți au tendința de a arăta neted. Acum, dacă încercați să re-creați o masă, trebuie să existe o anumită aparență a unei surse de lumină din una din laturi, nu? Să încercăm să recreăm acest efect în Flash utilizând modurile de amestecare.

  1. Importați textura pe scenă și poziționați-o după cum este necesar.
  2. Desenați un dreptunghi în partea superioară a imaginii, care corespunde dimensiunilor și coordonatelor x & y. Utilizați instrumentul Primitiv dreptunghi aici; o formă normală de dreptunghi va apărea întotdeauna în spatele imaginii dacă nu o desenați pe un nou strat.
  3. Îndepărtați eventualele curse din dreptunghi și adăugați o umplere gradientă radială alb-negru. Reglați umplerea astfel încât centrul alb să fie aproape de colțul în care aveți nevoie sursa de lumină pentru a fi în interior și marginile negre sunt aproape de colțul în diagonală opus.
  4. Acum convertiți acest dreptunghi la un simbol Movie Clip și schimbați modul de amestecare în "Overlay". Este posibil să trebuiască să ajustați puțin "Alpha" pentru a intra în vigoare doar.

Efecte de culoare

Unul dintre primele lucruri pe care le învață despre animație în Flash este cum să fadezi lucrurile în interior și în afară. Iar tehnica implicită de a face acest lucru este de a schimba valoarea "Alpha" a unui simbol. Dar este mult mai mult pentru celelalte elemente din acea listă de dropdown, denumite împreună Color Effects.

Deși Alpha pare a fi cea mai bună cale de a stinge lucrurile în interior și în exterior, nu este întotdeauna cea mai potrivită opțiune. De exemplu, dacă simbolul dvs. este un desen cu o grămadă de forme suprapuse, Alpha reduce transparența fiecărei forme individuale, ceea ce aduce artefacte în stările semi-transparente. În astfel de cazuri, dacă opera dvs. de artă este pe un fundal alb, modificarea valorilor luminozității funcționează mult mai bine pentru a obține efectul de estompare. În cazul în care fondul este o altă culoare plată, puteți utiliza și Tint și completați opera de artă cu culoarea de fundal. Din păcate, dacă fundalul este un gradient, un model sau altceva, singura opțiune este să intri în simbol, să distrugi toate formele și grupurile și să le aduci pe un singur strat pentru a face un obiect.

Rețineți că, spre deosebire de modurile de amestecare, aplicațiile Color Effects pot fi aplicate oricărui simbol - clipuri video, butoane și elemente grafice.


Studiu de caz: Creați mai multe butoane colorate de la un simbol

Când proiectez interfețe în Photoshop sau Fireworks, o tehnică pe care o folosesc foarte des este de a crea un element de interfață de bază - ca un buton - și de a face variații de culoare ale acestuia utilizând filtrele Hue-Saturation. Recent am realizat o modalitate de a face ceva similar în Flash. Ideea este să creați un singur simbol neutru și apoi să utilizați efecte avansate de culoare pentru a crea variații ale acestuia.

Pentru a începe, creați un simbol cu ​​orice gradienți, subliniere, umbre și suprapuneri pe care doriți. Puteți să faceți acest lucru în orice culoare, dar prefer să folosiți doar nuanțe gri. Deci, rezultatul este un buton care este la fel de mat, plastic sau orice stil pe care îl vrei, dar în gri. Apoi, plasați câteva exemple de simbol pe scenă. Apoi pur și simplu selectați o instanță, aplicați efectul de culoare "Avansat" și începeți să jucați cu valorile de culoare RGB. Dacă vă străduiți să faceți acest lucru corect, o modalitate este să selectați Tint, să alegeți culoarea de care aveți nevoie și apoi să mergeți la panoul Avansat pentru a-l optimiza. Clătiți și repetați pentru celelalte simboluri.


Filtre

Timp de foarte mult timp, designerii Flash au rămas cu instrumentele de creație vectoriale strict în Flash. Umbrele umbrite și blururile de mișcare au fost lucruri pe care le-ați hacked împreună folosind gradienți incomode sau imagini raster importate din Photoshop. Apoi au venit Filtrele în Flash 8 și totul sa schimbat. Astăzi, aproape orice efect este posibil în interiorul Flash cu un control decent asupra tuturor aspectelor filtrului. Să ne uităm la câteva moduri în care poți folosi filtrele pentru a adăuga niște jazz la desenele tale.


Umbre cutie curbate

Desigur, există umbre pentru că atunci când vrei să iasă un element din fundal sau să îl diferențiezi de orice altceva în jurul lui. Dar pentru momentele când nu este suficientă o umbră de picătură simplă, poți să te joci cu picioarele în picioare pentru a adăuga acel extra stil de stil. O modalitate de a face acest lucru este să creați o copie a formei dvs. și să o optimizați pentru a obține curbura de care aveți nevoie. Apoi convertiți-l la un simbol, adăugați un efect de culoare de nuanță negru 100% și o estompare gaussiană. Apoi, ajustați pur și simplu valoarea alpha pentru a obține intensitatea de care aveți nevoie din umbra. Verificați câteva exemple de mai jos.

Nu uitați să setați calitatea la "Ridicat" ori de câte ori utilizați un filtru. Efectul este mult mai bun. Mă bate în totalitate de ce setarea "scăzută" este setată ca valoare prestabilită. Am folosit filtre în animații complexe și impactul asupra performanței este abia vizibil.


helio

Când vine vorba de textul mare, efectul de tip letterpress este destul de popular. Cu abilitatea de a adăuga mai multe filtre de același tip (ceva ce Photoshop nu are încă), efectul de tip letterpress este destul de ușor de realizat în Flash. Tot ce trebuie să faceți este să adăugați pur și simplu două filtre de umbrire - unul cu o umbră albă de 1px la 90 de grade și un negru la 270 de grade. Consultați imaginea de mai jos pentru toate detaliile.


Scalarea în 9 straturi

O altă caracteristică introdusă în Flash 8 este scalarea cu 9 felii - capacitatea de a scala un obiect fără a afecta anumite părți ale acestuia. Cel mai bun exemplu în care funcționează acest lucru este dreptunghiurile rotunjite. Dacă ați încercat fiecare să creați dreptunghiuri rotunjite și apoi să le scalați, știți cum colțurile tind să scape din formă dacă scalarea nu este proporțională. Scalarea cu 9 felii rezolvă această problemă. Să vedem cum.

  1. Desenați forma dorită și deschideți caseta de dialog "convertire în simbol".
  2. Selectați Clip film din lista derulantă Tip. Scalarea cu 9 felii poate fi aplicată doar unui simbol pentru film.
  3. Dați clic pe linkul "Avansat" din partea din stânga jos a casetei de dialog și bifați opțiunea "Activați ghidajele pentru scalarea cu 9 secțiuni".
  4. Acum faceți dublu clic pe simbolul pentru al edita.
  5. Ar trebui să vedeți două linii verticale și două linii orizontale punctate deasupra formei. Deplasați-le în afară, astfel încât acestea să fie doar în interiorul curbelor din toate cele patru colțuri.

Iată cum funcționează. Am etichetat fiecare dintre cele 9 secțiuni pe care le avem acum, împărțite de liniile punctate. Când vă întoarceți pe scenă și scalați obiectul - proporțional sau în alt mod - A, C, E & G nu va scala deloc. Ei își vor păstra dimensiunea și forma. B & F va scala numai orizontal, în timp ce D & H va scala numai vertical. În acest fel, indiferent de ce faceți, dreptunghiul rotunjit își păstrează personalitatea de bază. Această tehnică poate face minuni atunci când aveți nevoie de o grămadă de elemente similare la dimensiuni diferite - cum ar fi butoane, ferestre pop-up sau bule de vorbire.

Rețineți că scalarea cu 9 secțiuni nu va funcționa în toate contextele. Dacă operele de artă au forme complexe sau colțuri foarte rotunde, cu reflexii curbate sau chiar umpleri de modele, scalarea poate să nu fie consecventă.


Text

Dacă a existat o plângere despre Flash care a depășit totul în trecut, a fost modul în care textul manipulat cu Flash. În versiunile mai vechi, mai ales înainte de preluarea de Adobe, redarea textului în Flash a suge, pentru ao pune frumos. Atât de mult încât a refuzat o întreagă industrie de casete de fonturi de pixeli care au fost proiectate să acționeze în jurul incapacității Flash de a face ușor textul mic. Din fericire, prin adăugarea de "anti-alias pentru lizibilitate", lucrurile au devenit mult mai suportabile. Singurul sfat pe care-l dau oricui eu care a avut vreodată ceva de-a face cu Flash este să evite orice altceva decât "anti-alias pentru citire", cum ar fi ciuma. De fapt, nici măcar nu știu de ce au această opțiune, deoarece redarea textului în player a fost acum optimizată suficient pentru a face textul "ușor de citit" în orice scenariu.

Un fenomen foarte nou și potențial de rupere este Text Layout Framework (TLF), API-ul la nivel înalt Adobe pentru noul Flash Text Engine introdus în Flash Player 10. Începând cu versiunea CS5, aveți posibilitatea de a alege orice bloc de text să fie "text clasic" sau "text TLF". Stiu, ca si cum nu ar fi fost prea multe alegeri de facut, corect! Ei bine, deși TLF este în mod clar viitorul textului în Flash, acesta nu este compatibil cu versiunile mai vechi ale Playerului Flash sau cu AS2 și mai jos. Deci, dacă doriți compatibilitate înapoi, textul clasic este cel mai bun pariu.

TLF adaugă în esență o încărcătură de caracteristici la un vechi text vechi în Flash. Doriți să mențineți un control strâns asupra conducerii și urmăririi în textul dvs.? Aveți nevoie de orientare verticală pentru text? Ce zici de mai multe coloane? Heck, aveți nevoie doar de textul dvs. pentru a afișa frumos într-o limbă indiană (sau cele mai multe script-uri non-latine, pentru asta)? TLF este răspunsul. Există prea multe opțiuni pentru a modifica modul în care blochează textul TLF, mai mult decât ceea ce putem acoperi aici. Aș spune să mergeți mai departe și să vă jucați puțin. Amintiți-vă că acest lucru nu a fost prea mult timp - nici în instrumentul de creație, nici în cel al jucătorului - și trebuie să existe unele probleme cu modul în care funcționează în prezent.


Sfaturi utile

Iată câteva sugestii rapide și sugerate cele mai bune practici pentru a utiliza cele mai bune instrumente de text în Flash:

  • Tastele rapide pentru bold și italic în Flash sunt diferite de cele mai multe aplicații - Ctrl + Shift + B este pentru caractere aldine și Ctrl + Shift + I este pentru italic.
  • Cu instrumentul de text selectat, faceți clic o dată pe scenă pentru a crea un câmp de text cu o singură linie. Faceți clic și trageți pentru a crea un paragraf.
    • Pentru a converti un paragraf la o singură linie, faceți clic oriunde în interiorul blocului de text și faceți dublu clic pe mânerul păstrat în partea dreaptă sus a selecției.
    • Pentru a converti o singură linie într-un paragraf, trageți pur și simplu una dintre cele patru mânere de selecție.
    • Un pătrat gol în partea dreaptă sus indică faptul că blocul selectat este un paragraf, în timp ce un cerc gol reprezintă o singură linie.
  • Un bloc text poate fi de trei tipuri:
    • Static: Un bloc static de text care este hardcoded în FLA și nimic mai mult.
    • Dinamic: Dacă aveți nevoie să înlocuiți conținutul unui bloc text în timpul zborului, acesta este un mod de a merge.
    • Intrare: Numele spune totul, într-adevăr. Utilizați această opțiune atunci când aveți nevoie ca utilizatorul să introducă text - ca în formele, etc.
  • Dacă aveți nevoie să încorporați un font în fișierul dvs. Flash și textul va fi simplu alfabete, numere și punctuații de zi cu zi, selectați "Basic Latin" în dialogul Embed. Există o șansă bună să nu mai aveți nevoie de altceva de acel font.
  • Filtrele pot fi aplicate direct într-un bloc de text din Flash. Nu aveți nevoie să îl convertiți la un clip video ca la orice altceva. Du-te și du-te nebun cu aceste umbre de 1 pixel de text, deja!

Concluzie

Și așa faceți simboluri și text în Flash. Desigur, există mai multă tonă decât am acoperit, dar încercarea a fost să încercăm să compilam câteva dintre cele mai bune sfaturi și bune practici atunci când lucrăm cu simboluri și text. Nu ezitați să adăugați propriile sfaturi și scurtături în secțiunea de comentarii. Sau provocați tot ce am spus. Voi fi primul care va recunoaște că nu știu tot ce trebuie să știți despre Flash, deci orice este nou sau diferit este întotdeauna binevenit.

Data viitoare vom intra în funcționalitatea de bază și punct de vânzare unic de Flash: animație. Rămâneți aproape!

Cod