Share
În acest tutorial vă prezint HYPE, un framework ActionScript 3 lansat de Joshua Davis și Branden Hall pe 31 octombrie 2009.
Scopul acestei introduceri nu este de a intra în complexitatea cadrului, ci de a vă deplasa într-un exercițiu destul de simplu, conceput pentru a demonstra unele dintre posibilitățile pe care le oferă acest proiect Open Source.
Așa cum mulți dintre voi ați presupus că nu sunt un coder dur.
Motivul, așa cum îi voi spune oricui ascultă, este că "codificarea nu este greu conectată la genele mele". Dă-mi un panou ActionScript gol în Flash și mă voi uita la el timp de ore. Ceea ce face acest lucru ciudat este că pot citi codul atunci când acesta mi-a fost dat. Gândește-te la mine ca fiind tipul de tip care va sta într-o cafenea din Franța citind o carte franceză, dar nu poate vorbi limba.
Trebuie să-ți spun asta acum pentru că e important că știi cum am abordat exercițiul. De asemenea, vreau să înțelegeți în mod clar că, deși l-am cunoscut pe Josh și pe Branden de câțiva ani, nu sunt chiar aproape de a fi în liga lor sau parte a "mașinii lor hype". Sunt doar un tip, ca tine, care a dat peste ceva care mi-a făcut viața mai ușoară. În calitate de profesor, mi sa oferit un instrument care să-mi permită să predau elementele de bază AS3 într-un mod care oferă feedback-ului "învățării vizuale".
Lucrul este, eu obține acest cod, precum Flash IDE este un "mediu creativ". Lucrurile care se întâmplă atunci când artiștii și designerii se ocupă de cod este minunat să privim. Cu toate acestea, discutați cu persoane care vin în Flash sau au descoperit că trebuie să știe AS3 să își extindă posibilitățile creative și veți auzi: "Omule, lucrurile acestea sunt grele". În acel moment, frustrarea se reține și, așa cum se spune, "Acum știți restul povestirii ..."
Acest lucru mă aduce la Josh și Branden. Au auzit aceeași poveste de la oamenii pe care îi întâlnesc în călătoriile lor. Lucrul este că Josh era cândva în pantofii lor și ceea ce îl diferențiază de restul pachetului este că el a stăpânit fundamentele codului, în timp ce, în același timp, aducându-și minunatele talente de arte frumoase la munca sa. El nu a făcut-o singură.
Branden și Josh au început să se implice profund între ei la FlashForward 2000, când au fost relativ necunoscuți și, de atunci, sa dezvoltat o profundă profundă relație profesională între ei. De-a lungul anilor, Josh a venit cu idei, Branden le-a conectat, iar apoi Josh a rearanjat cablajul pentru a duce munca la nivele care nu se așteptau acum 10 ani.
Ceea ce ma lovit întotdeauna, dacă le-ați văzut vreodată la o conferință sau o prezentare, este simțul lor infecțios de "mirare" și "distracție" când vine vorba de colaborările sau eforturile lor solo.
Odată cu introducerea ActionScript 3, atât Josh, cât și Branden au realizat repede că "mirare" și "distracție" erau două cuvinte care dispar de la comunitatea Flash. Reclamele au evitat codul ca mediu de creație, deoarece limba a fost percepută, printre acest grup, ca fiind prea complicată sau complexă pentru a stăpâni. Capacitatea de a juca ceea ce eu numesc jocuri "Ce se întâmplă dacă ..." a devenit prea riscantă, deoarece șansele de a rupe proiectul au fost aproape 100% dacă nu ați avut o înțelegere profundă a OOP.
În multe privințe, acest lucru explică creșterea în ultimii ani a "dezvoltatorului" din comunitatea Flash. Eu nu spun că este un lucru rău sau "dising" dezvoltatorii. Doar datorită complexității limbajului, echilibrul critic al parteneriatului Designer / Developer a devenit mai mult ponderat față de dezvoltator. Branden și Josh, în loc să vorbească despre asta, au decis să facă ceva.
Ceea ce mulți oameni nu știu este că geneza pentru HYPE a fost un alt proiect, Flow, care în esență a încercat să facă lucrurile mai ușor pentru designeri, dar a căzut pe față doar pentru că era prea înaintea lui. Mai degrabă decât să renunțe, Branden retooled Flow și cu ajutorul lui Josh a evoluat în HYPE.
Ceea ce mi-a adus în legătură cu proiectul HYPE este că cuvintele "mirare" și "distracție" se vor întoarce dacă comunitatea creatoare se va afla în spatele ei. Pe măsură ce sunteți pe punctul de a descoperi, într-adevăr nu aveți nevoie de o diplomă în Rocket Science pentru a vă prinde de HYPE. Tot ce ai nevoie este să nu te temi să joci cu numere și valori.
Rețineți că Branden și Josh sugerează că ați instalat Flash Professional CS4 înainte de a începe, chiar dacă acest produs va funcționa împreună cu CS3.
Dezarhivați descărcarea și faceți dublu clic pe fișierul .mxp pentru a lansa Extension Manager. Managerul de extensii va instala totul în destinațiile lor finale. Dacă sunteți curios, explorați folderul HYPE - hype_01 - pe care tocmai l-ați dezarhivat. În interior veți găsi:
Faceți dublu clic pe Setup Classpath.jsfl pentru a lansa Flash. Tot ce face acest pas este sa lasati Flash sa stie unde a fost plasat totul in timpul instalarii.
Asta e tot. Acum e timpul să jucăm.
Ideea acestui exercițiu a apărut într-un tweet trimis de Branden cu o săptămână înainte de lansarea HYPE. El a spus că Josh a jucat prea multă distracție cu SoundAnalyzer în HYPE și a postat această legătură.
Tweet-ul mi-a atras atenția, deoarece unul dintre lucrurile pe care îmi place să le arăt este Audio Visualization în Flash. Folosesc-o ca un exemplu de a fi neînfricată în jurul codului, mai degrabă decât o lecție full-spaniolă ActionScript ... Eu mă folosesc ca poster pentru acest lucru și arată cum, jucând cu numere și schimbând lucrurile pe care le cunosc, complexul poate deveni interesant. Începeți cu o vizualizare de bază și apoi treceți la un spectacol cu lumină completă.
Chiar dacă mi-am făcut interesant și distractiv, dacă aș intra în subteranul de a lucra cu clasa SoundMixer și Byte Arrays, aș putea să arunc o bucată de folie de aluminiu la lucrul strălucitor pe care publicul îl privește acum . Ei vor fi sunat, pentru că merg pe drum, peste cap. Când am văzut exemplul lui Josh, am făcut imediat o scurtă introducere în codul care căuta ceea ce nu era acolo; complexitatea.
Să revenim la distracție să jucăm cu audio în Flash:
Deschideți un nou document Flash ActionScript 3.0. Pentru a vă începe să apucați un fișier audio mp3. Acest exemplu utilizează "Busted Chump", o pistă demo ActiveDen, dar orice fișier audio din colecția dvs. va face.
Desenați un mic triunghi umplut pe scenă și convertiți-l într-un movieclip numit "Triunghi". Odată ce ați desenat triunghiul și l-ați convertit într-un movieclip, ștergeți movieclip-ul din scenă.
Faceți clic dreapta pe simbolul din Bibliotecă și deschideți Proprietățile simbolurilor. Selectați Export pentru acțiuni. Numele dvs. de simbol va apărea ca clasă. Faceți clic pe OK și ignorați mesajul de eroare care apare.
După cum probabil ați ghicit, HYPE va scoate simbolul din Bibliotecă și vă va permite să jucați cu el folosind ActionScript. Pentru cei dintre voi care vă scot din acest lucru, rețineți că în inima sa HYPE este un loc de joacă care oferă reclamanților oportunitatea de a juca jocuri "Ce se întâmplă dacă ..." și de a vedea rezultatele cu foarte puține eforturi. În cazul acestui exercițiu, voi juca trei jocuri "Ce se întâmplă dacă ...":
Introduceți următorul ActionScript:
import hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = noul GridLayout (30,30, 70, 50, 10); pentru (var i: uint = 1; i < numItems; ++i) var clip:Triangle = new Triangle(); gridLayout.applyLayout(clip); addChild(clip); ;
Primul joc "Ce se întâmplă dacă" implică plasarea lui movieclip într-o rețea și, pentru a parafraza Apple, "există o clasă pentru asta". De fapt, în HYPE există o clasă pentru practic tot ce vreți să faceți. Dacă nu există, scrieți unul, deoarece HYPE este Open Source.
Următoarea linie spune Flash că vrei să pui 80 de triunghiuri pe scenă. După ce ați făcut acest lucru, acum determinați cum vor apărea pe grilă prin adăugarea parametrilor în obiectul GridLayout. În acest caz, vreau ca grila să pornească cu 30 de pixeli în stânga scenei și la 30 de pixeli din partea de sus a scenei. De asemenea, trebuie să existe 70 de pixeli de spațiu între triunghiurile de pe axa x și 50 de pixeli de spațiu între rânduri. Parametrul final spune HYPE că vreau să văd ce se întâmplă dacă sunt 10 coloane de triunghiuri.
Buclele "pentru" indică HYPE modul de plasare a celor 80 de triunghiuri pe scenă. Coborâți movieclip-ul din bibliotecă, dați-i un nume de instanță, apoi, utilizând metoda applyLayout () din clasa Gridlayout, puneți obiectele în grilă utilizând parametrii obiectului GridLayout.
Salvați și testați filmul.
A fost ușor și, dacă vreau să schimb o privire, tot ceea ce trebuie să fac este să joc cu valorile din numItem variabilă și parametrii în obiectul GridLayout. Nu-ți place triunghiul? Apoi, aruncați altceva - o imagine, de exemplu - în movieclip sau creați un altul și altfel utilizați acest loc.
Triunghiurile sunt pe o rețea și acum este timpul pentru următorul nostru joc "Ce se întâmplă dacă ...". În acest caz: Ce se întâmplă dacă valorile alfa și scalările triunghiurilor au fost legate de o piesă audio? În acest moment, multe reclame ar fi, după cum am spus mai devreme, uitându-se la "lucrul strălucitor" de acolo. Țineți minte că întregul scop al HYPE este să vă lași să jucați, să nu deveniți un coder dur. Hai să ne distrăm:
Faceți clic pe linia 2 a scriptului și adăugați următorul cod:
import hype.extended.behavior.FunctionTracker; import hype.framework.sound.SoundAnalyzer;
Aceste două clase lucrează împreună în HYPE. FunctionTracker, în termeni foarte simpli, gestionează funcțiile care rulează și asigură că acestea sunt mapate la proprietățile specifice ale obiectului țintă. În cazul nostru, vom juca cu proprietățile de alfa și de scalare ale triunghiului pe măsură ce reacționează la piesa audio.
Clasa SoundAnalyzer este locul unde se întâmplă magia. Ceea ce face, din nou, în termeni foarte simpli, este de a transforma un fișier audio în date care pot fi apoi jucate cu. Ceea ce ador în mod absolut la această clasă este că nu trebuie să scriu un ton de cod foarte complex pentru a obține rezultate imediate. Trebuie doar sa stiu ce fac parametrii si apoi sa inceapa sa joace.
Adăugați următoarele două linii de cod după declarațiile de import:
var SoundAnalyzer: SoundAnalyzer = nou SoundAnalyzer (); soundAnalyzer.start ();
Toate aceste două linii fac este să creați obiectul SoundAnalyzer și să îl porniți folosind metoda start () (care este modul în care activați și dezactivați aceste clase în HYPE). Gândiți-vă la metoda start () ca pe nimic mai mult decât un comutator de lumină.
Adăugați următorul cod sub metoda "applyLayout" în bucla "pentru":
var ranNum: Numărul = int (Math.random () * 7); var alphaTracker: FuncțieTracker = Funcție nouăTracker (clip, "alpha", soundAnalyzer.getOctave, [ranNum, 0.01, 1]); var scaleTracker: FunctionTracker = FuncționalTracker nou (clip, "scale", soundAnalyzer.getOctave, [ranNum, 0.5, 4]); alphaTracker.start (); scaleTracker.start ();
Cheia vizualizării reprezintă primele trei linii ale blocului de coduri.
Clasa SoundAnalyzer folosește octavele piesei audio; valorile pentru octave variază de la 0 la 7. Prima linie, prin urmare, creează un număr aleator pe baza valorii maxime a octavei permise. Țineți cont de acest lucru atunci când jucați cu această valoare. Numerele mai mari de 7 vor fi rotunjite până la 7.
Următoarele două linii utilizează clasa funcționalăTracker pentru a juca cu triunghiurile din grilă. Obiectați obiectul, spuneți funcției Trader proprietatea obiectului cu care doriți să redați, care este funcția de rulare (getOctave) și care sunt valorile de utilizat.
În acest caz, vom juca cu valorile aleatorii ale octavei- ranNum - și asigurați-vă că valorile alfa variază de la 1% la 100% alfa pe baza "dimensiunii" octavei din piesa audio. Numerele mici înseamnă alfa scăzut, numerele mari înseamnă alfa complet. De asemenea, rețineți că aceste valori trebuie să fie transmise ca array și că proprietățile modificate sunt valori String.
Cele două linii finale pornesc funcțiile.
Adăugați următorul ActionScript la sfârșitul blocului de cod:
Accentsconagua
var sunet: Sunet = nou Sunet (); sound.load (noua adresă URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play (); Salvați și testați filmul.
După cum ați descoperit, aceste lucruri nu sunt grele și, de fapt, pur și simplu, jucând cu numere, puteți avea o mulțime de distracție în timp ce "tweak" modul în care aceste triunghiuri pulsa și se estompeze. Acum, că avem de lucru, să ne jucăm jocul final "Ce se întâmplă dacă ..." și să-i punem în mișcare. Iată cum:
Faceți clic o dată la sfârșitul listei de clasă și adăugați o clasă suplimentară:
importă hype.extended.behavior. Oscilatorul;
Această clasă este o explozie absolută de jucat, pentru că pune un obiect pe un val oscilant. Iată cea mai bună parte: Nu aveți nevoie de un fundal trigonometric pentru a face acest lucru. De fapt, nu există matematică implicată.
Adăugați următorul ActionScript sub declarațiile de import:
var myWidth = stage.stageWidth; var myHeight = stage.stageHeight; var freq: int = 20;
Tot ceea ce face acest cod este să limitați animația rezultată la limitele stadiului și să setați o valoare pentru frecvența undei. Este timpul să jucați cu grila.
Adăugați următorul cod după variabila "scaleTracker" în buclă "pentru":
var ypositionOsc: Oscilator = nou Oscilator (clip, "y", Oscillator.sineWave, freq, clip.y, myHeight / 3, i / (freq / 2)); var scaleOsc: Oscilator = nou Oscilator (clip, "scaleY", Oscillator.sineWave, freq, 5,50, i / (freq / 2)); var rotateOsc: Oscilator = nou Oscilator (clip, "rotație", Oscillator.sineWave, frecvență, 0,90, i / (freq / 2)); yOsc.start (); sOsc.start (); rOsc.start ();
Din nou, obiectul Oscilator, ca și obiectul FunctionTracker, nu necesită o diplomă în fizica particulelor. Parametrii sunt foarte simpli:
În acest caz, aplicăm un sineWave la trei proprietăți - poziția y, yScale și rotația - triunghiului și apoi folosind ceilalți trei parametri pentru a seta aspectul mișcării undei.
Restul de trei linii comută oscilatorul. Valorile pe care le-am folosit pur și simplu au ieșit din "Mă întreb cum ar arăta animația dacă aș folosi aceste numere?" Nimic mai mult.
Salvați și testați animația.
Acest exercițiu a fost proiectat să vă prezinte cadrul HYPE și să vă ofere șansa de a lovi pneurile. V-am arătat cum să îl instalați și apoi ați folosit trei scenarii "Ce se întâmplă dacă ...", care au luat un triunghi simplu și l-au reîncărcat într-o rețea pulsatoare care a fost condusă de o pistă audio. În regulile ActionScript care codifică acele sarcini, pentru mulți, ar fi un motiv pentru a "Flee Screaming. Into noapte".
În schimb, ați descoperit că HYPE vizează să formați partea dezvoltatorului a ecuației Flash în timp ce aduceți distracția înapoi pe partea designerului. După ce ați finalizat acest exercițiu, s-ar putea să nu fie o idee proastă să revizuiți codul cu un punct de vedere diferit. Ce ar fi asta? În multe privințe, utilizarea HYPE pentru a elabora idei urmează foarte mult procesul creativ. Nu te încurca în cod, dar, în schimb, jucând cu numere și valori, ajungi să faci ceea ce faci cel mai bine: joacă jocuri "Ce se întâmplă ...".
