Share
V-ați întrebat vreodată cum guru-ul de design Joshua Davis face aceste imagini choatice? Am facut. Cu arta sa ca inspirație, am luat o ceașcă de cafea și am pornit să-i imită stilul. Acest tutorial vizează designerii și începătorii flash și documentează procesul meu de a realiza ceva similar cu compozițiile timpurii ale lui Joshua.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Vreau sa iau o alta te uiți la rezultatul final la care vom lucra? Faceți clic pe filmul flash (pentru a vă asigura că este focalizat) și apăsați orice tastă pentru a viziona haosul la locul de muncă!
Creați un nou fișier ActionScript 3.
Sunteți destul de liberi să schimbați setările după cum doriți, am plecat de la mine ca implicit și tocmai am schimbat culoarea de fundal în negru.
Deschideți biblioteca (dacă nu este afișată, puteți să "crtl + l") faceți clic dreapta pe lista goală și selectați "New Symbol".
Vom adăuga un movieclip conținând formele pe care dorim să le prezentăm în compoziția finală. Va trebui să putem instaura din bibliotecă; realizăm acest lucru spunând că simbolul pe care tocmai l-am creat este o clasă proprie, care extinde o clasă movieclip.
Prin aceasta putem crea un nou set de obiecte prin scrierea pur și simplu var object = obiecte noi ();
Când creați un nou simbol folosind această metodă, Flash o va deschide automat pe scenă pentru a vă putea edita. Creați-vă creativitatea și adăugați o grămadă de forme, fiecare în propriul cadru cheie. Iată câteva din a mea:
Nu vă faceți griji cu privire la culori, le vom randomiza printr-o paletă pe care o vom defini ulterior când codificăm.
Acum este momentul să setați codul. Mergeți la cronologia principală (care ar trebui să fie în prezent necompletată doar cu o singură cheie cheie) și deschideți panoul dvs. de acțiuni (sau utilizați F9 ca o comandă rapidă).
// setări de compoziție; var count: Number = 100 // aceasta este cantitatea de forme pe care o vom adăuga la compoziția noastră var maxscale: Number = 10 // aceasta este valoarea maximă a scalei pe care formele noastre le vor permite să atingă var minscale: Number = 1 / / aceasta este valoarea minimă a scalei pe care formele noastre le va permite să atingă var maxrotation: Number = 180 // valoarea maximă de rotație pentru formele noastre var offsetX: Number = 100 // offsetul este valoarea care va declanșa discrepanța compoziției tale var offsetY: Number = 100 // var marginX: Number = 100 // aceasta este marja pentru axa x var marginYY: Number = 100 // aceasta este marja pentru y axix
Încă mai trebuie să adăugăm culoarea compoziției noastre. Fac asta, nu încercând să îmi dau seama de o paletă suficient de bună pentru a fi folosită, ci folosind o paletă pe care eu ști este destul de bun. Eu folosesc Kuler.
Accesați kuler.adobe.com și descărcați cea mai recentă versiune de aer a aplicației Kuler Air.
Ceea ce vă va permite să faceți acest lucru (pe lângă căutarea paletelor care vă plac) este să copiați culorile hexazecimale ca valori separate de virgule, făcând clic pe acest buton:
Reveniți la fișierul dvs. Flash, deschideți panoul ActionScript și adăugați această linie de cod:
var colorPalete: Array = []
În interiorul acestei matrice puteți adăuga valorile clipboard pe care le-ați luat de la aplicația aeriană a lui Kuler.
var colorPalete: Array = [191919,182828,60702D, AAB232, E6FA87]
Nu uitați să le editați, pentru a ajunge la numerele hexazecimale reale. Paleta finală va fi o matrice care ar trebui să arate similar cu aceasta:
var colorPalete: Array = [0x191919,0x182828,0x60702D, 0xAAB232,0xE6FA87]
Compoziția noastră este configurată cu câteva reguli, deci acum trebuie să aplicăm acele reguli. Să creăm o funcție care să genereze compoziția pentru noi.
Nota editorului: Mi-e teamă că ActionScript în acest pas provoacă accentuarea sintaxei noastre de a călători Firefox în sus (acest lucru se întâmplă uneori și nu am idee de ce). Deocamdată, este mai bine să o descărcați pentru a arunca o privire. Scuze pentru neplăceri.
Puteți testa lucrarea de artă așa cum este, deși veți observa că, în ciuda aspectului ok, ceva lipsește. Da, fundalul gradientului.
Pentru a face un fundal cu gradient adăugați această mică funcție:
// setările pentru gradientul de fundal; tipul var: String = GradientType.LINEAR; var culori: Array = [0x990000, 0x220000]; var alphas: Array = [1, 1]; rapoarte var: Array = [0, 255]; var matr: Matrice = Matrice nouă (); var sprMethod: String = SpreadMethod.PAD; var bg: Sprite = Sprite nou (); var g: Grafica = grafica bg; // Funcția de creare a fondului createBackground () // începe o casetă de gradient matr.createGradientBox (500, 440, 90, 0, 0); // a face gradientul dimensiunea scena, setati rotatia la 90 de grade // incepe umplerea g.beginGradientFill (tip, culori, alphas, ratios, matr, sprMethod); // trage dreptunghiul g.drawRect (0, 0, 500, 440); // asigurați-vă că ați desenat dreptunghiul dimensiunilor scenei tale // adaugă la etapa addChild (bg);
Asigurați-vă că adăugați un apel la acest lucru în prima linie a funcției createComposite ().
Acest lucru funcționează doar prin introducerea obiectelor copilului în scenă și eliminarea acestora.
function removeComposite () while (numChildren> 0) // elimina toate obiectele copil din cronologia principala removeChildAt (0)
Pentru a crea compoziții în timpul rulării, voi folosi tastatura ca declanșator. Voi adăuga un ascultător KEY_DOWN pe scenă, astfel încât, de fiecare dată când o tastă este apăsată, compoziția se va schimba într-o nouă.
stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress) funcția onKeyPress (e) removeComposite (); createComposite ();
Aceasta este partea complicată. Pentru a salva compoziția, trebuie să o imprimați într-un fișier. Eu folosesc bullzip imprimanta pdf pentru asta.
Accesați bullzip.com și descărcați driverele de imprimantă. Urmați instrucțiunile de instalare.
Porniți-vă SWF-ul, generați compoziții prin apăsarea oricărei taste până ajungeți la unul care vă convine.
Faceți clic dreapta pe imagine și selectați "print".
Selectați imprimanta bullzip și faceți clic pe imprimare.
În "format" alegeți ceea ce preferați.
Cu toate acestea, dacă alegeți PDF, veți ajunge la toate formele vectoriale, ceea ce înseamnă că aveți libertatea de a le scala și de a le edita mai târziu.
După cum puteți vedea, aceasta este o abordare destul de simplă pentru a realiza simțul pe care Joshua îl aduce la munca sa (ceea ce este în mod evident mult mai complex decât acesta).
Sper că ți-a plăcut acest tutorial, nu ezitați să lăsați comentarii și întrebări. Vă mulțumim pentru lectură!
Notă: Dacă sunteți interesat în utilizarea codului lui Joshua, asigurați-vă că verificați noul cadru HYPE al lui Joshua Davis și Branden Hall de la hype.joshuadavis.com.
Accentsconagua