Sfaturi Flash și cele mai bune practici pentru designeri desen

Prima dată când am folosit Flash a fost în jur de 13 ani în urmă. Era versiunea 3, iar Flash a fost apreciat ca fiind un instrument de animație cu o fantezie nouă, bazat pe vectori, care va lua în curând lumea de design web prin furtună. De-a lungul anilor, Flash a devenit un instrument bogat de dezvoltare a aplicațiilor, bogat la limită cu bunătatea ActionScript.

Ceea ce mulți oameni par să uite, totuși, este cât de mult Flash este în continuare un instrument de designer, permițându-ne să creăm operele de artă și animațiile modă veche de remiză și mișcare.

Tutorial publicat

La fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima dată în luna mai a anului 2011.

Să începem cu ceea ce ar începe cu cineva în Flash (sau orice aplicație de proiectare pentru asta) - desen. Fie că desenați forme regulate sau linii de urmărire, desenul este una dintre cele mai fundamentale acțiuni din Flash. Ceea ce face Flash unic, este modul în care se ocupă de forme. Se comportă destul de diferit de orice alt instrument de desen vectorial acolo și este iubit sau urât de mulți pentru asta. Desigur, există avantaje și dezavantaje pentru a segrega fiecare parte a unui obiect pentru editarea independentă. Să aruncăm o privire la câteva lucruri ciudate pe care Flash le face și cum să le folosească în avantajul nostru.

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.


Forme regulate vs. primite

De obicei, când desenați o formă obișnuită (dreptunghi sau elipsă) în Flash, acesta creează un patch cu proprietățile de umplere și curse selectate. Puteți selecta indicele umplerii și / sau cursei și puteți modifica proprietățile acestora. În Flash CS3, Adobe a introdus ceea ce ei numesc instrumente de formă "primitivă". Spre deosebire de instrumentele de formă implicite, care separă cursa de umplere, acestea creează o formă care poate fi selectată și editabilă ca un întreg.

Deși pentru designerii Flash de la veterani aceasta poate fi o schimbare iritantă, aduce cu ea un nivel de control care nu a fost văzut în Flash înainte de această versiune. Puteți schimba brusc proprietățile obiectului prin panoul proprietăților, adăugați colțuri rotunjite și convertiți cercurile în plăcinte cu precizie de punct zecimal. Există foarte puține motive să vă întoarceți la instrumentele tradiționale de formă odată ce ați folosit primitivele, însă mulți designeri știu că continuă să lucreze în mod vechi. O parte a problemei ar putea fi decizia lui Dumneavoastră de a păstra formele simple ca instrumente implicite, îngropând primitivele într-o meniuri în bara de instrumente.

Studiu de caz: Creați o diagramă precisă a plăcilor folosind forme primitive

Să încercăm să folosim formele primitive într-un scenariu realist în care utilizarea instrumentelor tradiționale de formă ar fi dovedit a fi un exercițiu în trăgarea părului. Spuneți că doriți să creați o diagramă grafică precisă folosind numere reale - cote de piață pentru sistemele de operare mobile în 2010, de exemplu.

Odată ce avem procentele (care adaugă până la 100), vom multiplica fiecare cu 3.6 pentru a le egala cu totalul de 360 ​​de grade într-un cerc. Apoi, este o chestiune simplă de a lipi șase cercuri unul peste celălalt și de a atribui unghiurile de start și de încheiere corespunzătoare fiecăruia pe baza calculelor noastre. Vedeți matematica din tabelul de mai jos, precum și proprietățile pentru una dintre plăcinte, pentru o idee mai bună.


Transformați liber forme cu mouse-ul

Prin însăși natura lor, obiectele din Flash pot fi editate în mod liber în toate felurile. Puteți selecta umplerea sau conturul unei forme, trageți-o în jurul și va afecta toate celelalte forme din zona respectivă, atâta timp cât acestea se află pe același plan. Ce se întâmplă atunci când selectați și / sau trageți un element, depinde de ce faceți clic și de unde. Să analizăm diferitele posibilități:

  • Dacă faceți clic și trageți o formă care este deja selectată, aceasta va fi mutată pur și simplu oriunde ați lăsat mouse-ul să meargă.
  • Dacă faceți clic și trageți în interiorul unei forme de umplere - chiar dacă nu este selectată - va fi selectată și mutată. Rețineți că acest lucru va muta doar umplerea și nu cursa. Dacă ați lăsat umplutura în partea de sus a cursei, orice parte din cursa care se află sub umplere va fi ștearsă.
  • Dacă faceți clic și trageți pe o linie dreaptă, veți face o curbă. Cât de departe trageți linia definește cât de abruptă este curba.
  • Apăsarea și tragerea pe o linie curbă existentă va modifica curbura.
  • Dacă faceți clic și trageți un punct de colț, acest punct va fi mutat. Dacă snapping este pornit, punctul se va apropia de orice alt colț din apropiere.

Studiu de caz: Faceți undele calea ușoară

Să încercăm să aplicăm aceste cunoștințe pentru a face ca linii ondulate complexe să fie calea simplă - folosind linii drepte de zig-zag. Începeți prin simpla trasare a unor linii drepte pentru a defini dimensiunea și forma aproximativă a undelor. Asigurați-vă că linia nu este selectată. Apoi, faceți clic și trageți fiecare segment de linie pentru a face o curbă pentru val. În cele din urmă, selectați punctele de colț și deplasați-le în sus sau în jos până când se fixează pentru a face curba fără sudură pe ambele părți.


Colțuri rotunjite netede

Din motive cunoscute cel mai bine de Adobe, nu s-au adresat niciodată unei probleme inerente cu redarea colțurilor rotunjite în Flash. Dacă conturul unui dreptunghi rotunjit este un număr impar (1, 3, 5 etc.), colțurile tind să aibă aceste artefacte urâte care fac imaginea să pară neclară. Un hack tipic pe care l-am folosit și l-am văzut fiind folosit este să vă asigurați că contururile de pe dreptunghiurile rotunjite sunt întotdeauna 2, 4, 6 sau orice număr par. Încă nu funcționează dacă forma ta se află pe o coordonate sub-pixel - fie coordonatele x sau y sunt în zecimale (2.6, 4.12, 98.57 etc.) - dar este o problemă mai ușoară de rezolvat.

Dar dacă am nevoie de conturul pentru a fi un singur pixel? O soluție pe care am descoperit-o recent și am folosit-o de mult, din moment ce este aceasta:

  1. Desenați dreptunghiul folosind instrumentul dreptunghiular primitiv și setați-l la orice dimensiune aveți nevoie. Asigurați-vă că coordonatele X și Y ale dreptunghiului sunt fiecare număr întreg fără puncte zecimale în ele.
  2. Modificați rotunjimea la preferințele dvs..
  3. Completați acest obiect cu culoarea de care aveți nevoie pentru conturul dreptunghiului.
  4. Copiați și inserați dreptunghiul în poziție, apoi împingeți-l cu un pixel în dreapta și în jos.
  5. Reduceți înălțimea și lățimea noului dreptunghi la 2 pixeli mai puțin decât cel original și schimbați umplerea la orice culoare aveți nevoie pentru forma.
  6. Încă nu am terminat. Reduce rotunjirea noului dreptunghi la unul mai mic decât conturul. Deoarece Flash atribuie rotunjirea cu pixeli și nu cu procent, având aceeași valoare de rotunjire pentru ambele dreptunghiuri, provoacă mici inconsecvențe față de centrul fiecărei curburi.

Deși această tehnică ar trebui să funcționeze în majoritatea cazurilor, nu este fără capcane. Este de nici un folos, de exemplu, în situațiile în care aveți nevoie de obiect pentru a fi translucid. Reducerea alpha a dreptunghiului de umplere va afișa doar mai multă culoare din conturul din spate. O hack pentru a obține în jurul valorii de el ar fi să rupă ambele dreptunghiuri (convertiți-le la forme obișnuite).

S-ar putea să vă gândiți, de asemenea, să folosiți sugestii de lovire pentru a vă ghida când trageți strokes pe scenă.


Distribuiți Gradients în Obiecte

Cui nu-i plac declivitățile? Desenele în zilele noastre sunt destul de incomplete, fără cel puțin o sugestie subtilă a unui gradient pentru a le conferi o senzație realistă și adesea contemporană. Problema cu modul în care Flash se ocupă de formele, totuși, este că fiecare piesă autonomă este o formă și are proprietăți proprii. Nu puteți aplica umpluturi de gradient la grupuri de obiecte și nu există nici o modalitate de a "conecta" două forme disparate. Ce se întâmplă, atunci când aveți nevoie de un gradient pentru a se întinde pe mai multe obiecte - spuneți toate cuvintele dintr-un logotip personalizat?

Ei bine, blochează-te la salvare. Când utilizați instrumentul "Bucket Paint", veți vedea o pictogramă în partea inferioară a paletei de unelte cu un gradient și o blocare pe ea. Selectați formele pe care trebuie să le umpleți, comutați pictograma "Blocare blocare", selectați un gradient din paleta de culori de umplere și faceți clic pe oricare dintre formele selectate. Nu vă faceți griji dacă nu vedeți întregul gradient aplicat. De cele mai multe ori, umplerea blocată se extinde cu mult peste formele selectate și trebuie să utilizați "Gradient Transform Tool" pentru a redimensiona gradientul așa cum aveți nevoie.

Această tehnică nu este însă fără problemele sale. Iată câteva lucruri de reținut când utilizați umpluturi blocate:

  • Blocările blocate funcționează doar cu forme obișnuite. Dacă ați folosit forme primitive, va trebui să le distrugeți pentru a putea aplica un gradient în mai multe obiecte.
  • Dacă selectați unul dintr-un grup de forme cu umplutură blocată și apoi modificați proprietățile, această formă va fi deconectată din grup.
  • După cum am menționat mai înainte, limitele unui gradient într-o umplere blocată tind să fie mult mai mari decât zona formelor. Utilizați doar "instrumentul de transformare a gradientului", selectați oricare dintre forme și ajustați marginile gradientului. Este posibil să trebuiască să micșorați un pic pentru a putea vedea comenzile de gradient.

Joacă în jurul valorii de Strokes personalizate

Blițul vine în mod prestabilit cu un set de stiluri de accident vascular cerebral - Solid, Dashed, Dotted, Ragged, Stipples și Hatched - care funcționează bine în cea mai mare parte. Pentru situațiile în care aveți nevoie de mai mult control asupra accidentului, există un editor de accident vascular cerebral foarte puternic, care vine cu Flash. Pentru a începe să jucați într-adevăr cu loviturile dvs., faceți clic pe pictograma de editare din dreptul listei "Stil" din panoul "Proprietăți" a cursei selectate.

Să presupunem că aveți nevoie de o linie întreruptă, dar liniile sunt în prezent prea apropiate în stilul "Dashed" implicit. În panoul "Editare cursă", pur și simplu creșteți numărul din al doilea câmp de introducere de lângă "Dash" până când obțineți efectul de care aveți nevoie. În timp ce sunteți, bifați caseta "Colțuri Sharp". Dacă ați fost vreodată bugat de colțurile ciudate pe care le obțineți cu linia punctată implicită în Flash, aceasta se rezolvă.


Sfaturi utile

Iată câteva sfaturi utile pentru a vă ajuta să optimizați fluxul de lucru atunci când lucrați cu forme în Flash.

  • Din cauza modului în care Flash gestionează forme, făcând clic pe o schiță selectă numai o secțiune a liniei, nu întregul lucru. Faceți dublu clic pe o secțiune a cursei pentru a selecta simultan toate secțiunile conectate.
  • Dacă faceți dublu clic pe o umplere, selectați umplerea și toate secțiunile de linie din jurul acesteia.
  • Dacă doriți să împărțiți o formă cu un spațiu între cele două diviziuni:

    1. Desenați o linie în care aveți nevoie de diviziune.
    2. Reglați grosimea liniei, în funcție de spațiul de care aveți nevoie între diviziuni.
    3. Asigurați-vă că linia este selectată; apoi mergeți la "Modificați> Forme" din bara de meniu și selectați "Conversia liniilor în umpleri".
    4. Ștergeți linia.

  • Implicit, liniile au capete și colțuri rotunjite în Flash, dar dacă aveți nevoie de margini pentru a fi greu din anumite motive, le puteți seta modificând proprietățile "Cap" și "Alăturați" în panoul "Proprietăți" pentru o linie selectată.

Concluzie

Și aceasta este o întindere pentru prima parte a acestei serii despre cele mai bune practici Flash pentru designeri. Sper că aceste sfaturi vă vor ajuta să îmbunătățiți și să vă optimizați fluxul de lucru în Flash pe termen lung. Vă rugăm să aveți libertatea de a vă împărtăși sfaturile și cele mai bune practici în secțiunea de comentarii. Mă voi întoarce cu următoarea parte a acestei serii cu sfaturi despre cum să vă gestionați textul și simbolurile în Flash.

Cod