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 publicatLa 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.
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.
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ă.
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:
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.
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:
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ă.
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:
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ă.
Iată câteva sfaturi utile pentru a vă ajuta să optimizați fluxul de lucru atunci când lucrați cu forme în Flash.
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.
Ș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.