Share
I denne opplæringen skal jeg introdusere deg til HYPE, et ActionScript 3-rammeverk utgitt av Joshua Davis og Branden Hall 31. oktober 2009.
Formålet med denne introduksjonen er ikke å komme inn i rammene i rammen, men å gå gjennom en ganske enkel øvelse designet for å demonstrere noen av mulighetene dette Open Source-prosjektet gir deg.
Som mange av dere kanskje har gjettet, er jeg ikke en hard kjernecoder.
Årsaken, som jeg vil fortelle alle som lytter, er at "koding ikke er hardt kablet i mine gener". Gi meg et tomt ActionScript-panel i Flash, og jeg vil stirre på det i flere timer. Det som gjør dette merkelig er at jeg kan lese koden når den er gitt til meg. Tenk på meg som den typen fyr som vil sitte i en kafé i Frankrike, lese en fransk bok, men kan ikke snakke språket.
Jeg må fortelle deg dette nå fordi det er viktig at du vet hvordan jeg nærmet øvelsen. Også, jeg vil at du skal forstå klart at selv om jeg har kjent Josh og Branden i ganske mange år, er jeg ikke engang nær å være i deres liga eller en del av deres "hype machine". Jeg er bare en fyr, som deg, som snublet over noe som gjorde livet mitt enklere. Som lærer har jeg fått et verktøy som lar meg undervise AS3 grunnleggende på en måte som gir "Visual Learners" umiddelbar tilbakemelding.
Saken er, jeg få den koden, som Flash IDE, er et "kreativt medium". Ting som skjer når kunstnere og designere får tak i koden, er fantastisk å se. Likevel snakk med folk som kommer inn i Flash eller har oppdaget at de trenger å vite AS3 for å utvide sine kreative muligheter, og du vil høre, "Man, dette er vanskelig". På den tiden tar frustrasjonen seg, og som de sier, "Nå vet du resten av historien ..."
Dette bringer meg til Josh og Branden. De hører den samme historien fra de menneskene de møter i sine reiser. Saken er, Josh var en gang i skoene sine, og det som skiller seg fra resten av pakken er at han mestrer grunnlaget for koden samtidig som han bringer sine fantastiske Fine Arts-talenter til sitt arbeid. Han gjorde det ikke alene.
Branden og Josh ble først dypt involvert med hverandre på FlashForward 2000 da de begge var relativt ukjente, og siden da har et dypt og dypt faglig forhold utviklet seg mellom dem. I løpet av årene har Josh kommet opp med ideer, Branden har kablet dem opp, og Josh omorganiserte ledningen for å ta jobben til nivåer som ikke var forventet for 10 år siden.
Det som alltid har slått meg, hvis du noen gang har sett dem på en konferanse eller presentasjon, er deres smittsomme følelse av "wonder" og "fun" når det gjelder samarbeid eller solo-anstrengelser.
Med introduksjonen av ActionScript 3 realisert både Josh og Branden raskt "wonder" og "fun" var to ord som forsvant fra Flash-fellesskapet. Annonser unngikk koden som et kreativt medium fordi språket ble oppfattet, blant denne gruppen, som for komplisert eller komplisert å mestre. Evnen til å spille det jeg kaller "What if ..." spill ble for risikabelt fordi oddsen for å bryte prosjektet var nesten 100% med mindre du hadde en dyp forståelse av OOP.
I mange henseender forklarer dette utviklingen av "utvikleren" i Flash-fellesskapet de siste årene. Jeg sier ikke dette er en dårlig ting eller "dissing" utviklerne. Det er bare at på grunn av språkets kompleksitet ble den kritiske balansen mellom Designer / Developer-partnerskapet vektet utvikleren. Branden og Josh, i stedet for å snakke om det, bestemte seg for å gjøre noe med det.
Det mange som ikke vet er opprinnelsen til HYPE var et annet prosjekt, Flow, som i hovedsak forsøkte å gjøre ting enklere for designere, men det falt flatt på ansiktet bare fordi det var for seg selv. Snarere enn å gi opp, Branden retooled Flow og med Joshs inngang utviklet den seg til HYPE.
Hva har jeg sagt om HYPE-prosjektet, er at ordene "wonder" og "fun" kommer tilbake hvis det kreative fellesskapet kommer bak det. Som du skal oppdage, trenger du virkelig ikke en grad i Rocket Science for å bli hekta av HYPE. Alt du trenger er å være unraid for å spille med tall og verdier.
Vær oppmerksom på at Branden og Josh foreslår at du har Flash Professional CS4 installert før du starter, selv om dette produktet vil fungere med CS3.
Unzip nedlastingen og dobbeltklikk på .mxp-filen for å starte Extension Manager. Extension Manager vil installere alt til deres endelige destinasjoner. Hvis du er nysgjerrig, kan du utforske HYPE-mappen - hype_01 - som du nettopp har pakket ut. Inne finner du:
Dobbeltklikk på Oppsett Classpath.jsfl å starte Flash. Alt dette trinnet gjør at Flash vet hvor alt ble plassert under installasjonen.
Det er det folkens. Nå er det på tide å spille.
Ideen til denne øvelsen oppstod faktisk i en tweet sendt av Branden en uke eller så før HYPE-utgivelsen. Han sa at Josh hadde for mye moro å leke med SoundAnalyzer i HYPE og postet denne linken.
Tweetet fikk oppmerksomheten min fordi en av tingene jeg elsker å vise er Audiovisualisering i Flash. Jeg bruker det som et eksempel på å være fryktløs rundt kode i stedet for en fullstendig drill ActionScript-leksjon ... Jeg bruker meg selv som plakatbarn for dette og viser hvordan ved å spille med tall og endre ting jeg kjenner, kan komplekset bli interessant. Jeg starter med en grunnleggende visualisering, og deretter går det videre til et fullboringslysprogram.
Selv om jeg gjør det interessant og morsomt, hvis jeg skulle komme inn i det nitty-gritty å jobbe med SoundMixer-klassen og Byte Arrays, kan jeg like godt kaste en wad av aluminiumsfolie over til den skinnende tingen publikum nå stirrer på . De vil ringe ut fordi jeg går langt, langt over hodet. Da jeg så Joshs eksempel, pawed jeg straks gjennom koden og lette etter det som ikke var der; kompleksiteten.
La oss ta moroa tilbake til å spille med lyd i Flash:
Åpne et nytt Flash ActionScript 3.0-dokument. For å få deg i gang, ta en mp3 lydfil. Dette eksemplet bruker "Busted Chump", et ActiveDen-demospor, men en lydfil fra samlingen din vil gjøre.
Tegn en liten fylt trekant på scenen og konverter den til en filmklipp med navnet "Triangle". Når du har trukket trekanten og konvertert den til en filmklipp, slett du filmklippet fra scenen.
Høyreklikk på symbolet i biblioteket og åpne symbolegenskapene. Velg Eksporter for Actionscript. Ditt symbolnavn vil vises som klassen. Klikk OK og se bort fra feilmeldingen som vises.
Som du kanskje har gjettet, kommer HYPE til å trekke symbolet ut av biblioteket og tillate deg å spille med det ved hjelp av ActionScript. For de som tilbakekaller fra dette, husk at HYPE er en lekeplass som gir kreative muligheter til å spille "What if ..." spill og se resultatene med svært liten innsats. I tilfelle av denne øvelsen skal jeg spille tre "Hva hvis ..." spill:
Skriv inn følgende ActionScript:
importer hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = ny GridLayout (30,30, 70, 50, 10); for (var jeg: uint = 1; jeg < numItems; ++i) var clip:Triangle = new Triangle(); gridLayout.applyLayout(clip); addChild(clip); ;
Det første "What if"-spillet innebærer å plassere filmklippet i et rutenett og, for å omskrive Apple, "det er en klasse for det". Faktisk er det i HYPE en klasse for praktisk talt alt du vil gjøre. Hvis det ikke er det, skriv en fordi HYPE er åpen kildekode.
Neste linje forteller Flash du vil sette 80 trekanter på scenen. Etter å ha gjort det, bestemmer du nå hvordan de skal vises på rutenettet ved å legge til parameterne i GridLayout-objektet. I dette tilfellet vil jeg at rutenettet skal starte 30 piksler inn fra venstre på scenen og 30 piksler fra toppen av scenen. Det skal også være 70 piksler mellomrom mellom trekanter på x-aksen og 50 piksler mellomrom mellom radene. Den endelige parameteren forteller HYPE at jeg vil se hva som skjer hvis det er 10 kolonner av trekanter.
"For" -sløyfen forteller HYPE hvordan du plasserer de 80 trekanter på scenen. Du tar filmklippet ut av biblioteket, gir det et forekomstnavn, og deretter bruker du methodLayout () -metoden i Gridlayout-klassen, legger objektene inn i rutenettet ved hjelp av parametrene til GridLayout-objektet.
Lagre og test filmen.
Det var lett, og hvis jeg vil forandre utseendet, er alt jeg trenger å gjøre med å spille med verdiene i numItem variabel og parametere i objektet GridLayout. Liker ikke trekanten? Deretter kaster du noe annet - et bilde, for eksempel - inn i filmklippet eller opprett en helt annen filmklipp og bruk det i stedet.
Trianglene er på et rutenett, og det er nå tid til vårt neste "What if ..." -spill. I dette tilfellet: Hva om alfa- og skalaverdiene for trianglene var bundet til et lydspor? På dette tidspunktet ville mange reklamer være, som jeg sa tidligere, å se på den "skinnende tingen" der borte. Bare vær oppmerksom på at HYPE har til hensikt å la deg spille, ikke bli en hard-core-koder. La oss ha det litt gøy:
Klikk på linje 2 i skriptet og legg til følgende kode:
importer hype.extended.behavior.FunctionTracker; importere hype.framework.sound.SoundAnalyzer;
Disse to klassene jobber sammen i HYPE. FunctionTracker, på svært enkle vilkår, styrer funksjonene som kjører, og sørger for at de er kartlagt til de spesifikke egenskapene til målobjektet. I vårt tilfelle skal vi leke med alfa- og skalegenskapene til trekanten som den reagerer på lydsporet.
SoundAnalyzer-klassen er hvor magien skjer. Hva det gjør, igjen på svært enkle vilkår, er å slå en lydfil til data som deretter kan spilles med. Det jeg absolutt elsker om denne klassen, er at jeg ikke trenger å skrive massevis av svært komplisert kode for å få umiddelbare resultater. Jeg trenger bare å vite hva parametrene gjør og deretter begynne å spille.
Legg til følgende to kodelinjer etter import-setningene:
var soundAnalyzer: SoundAnalyzer = ny SoundAnalyzer (); soundAnalyzer.start ();
Alt disse to linjene gjør er å lage SoundAnalyzer-objektet og slå på det ved å bruke start () -metoden (som er hvordan du slår disse klassene av og på i HYPE). Tenk på startmetoden () som ingenting annet enn en lysbryter.
Legg til følgende kode under "applyLayout" -metoden i "for" -løkken:
var ranNum: Nummer = int (Math.random () * 7); var alphaTracker: FunctionTracker = ny FunctionTracker (klipp, "alpha", soundAnalyzer.getOctave, [ranNum, 0.01, 1]); var scaleTracker: FunctionTracker = ny FunctionTracker (klipp, "skala", soundAnalyzer.getOctave, [ranNum, 0,5, 4]); alphaTracker.start (); scaleTracker.start ();
Nøkkelen til visualiseringen er de tre første linjene i kodeblokken.
SoundAnalyzer-klassen bruker lydsporets oktaver; Verdiene for oktaver spenner fra 0 til 7. Den første linjen oppretter derfor et tilfeldig tall basert på den maksimale oktavverdien som er tillatt. Vær oppmerksom på dette når du spiller med denne verdien. Tall større enn 7 vil bli avrundet til 7.
De neste to linjene bruker funksjonTracker-klassen til å spille med trekanter i rutenettet. Du målretter mot objektet, fortell FunctionTracker hvilken egenskap objektet du vil spille med, hvilken funksjon som skal kjøres (getOctave) og hvilke verdier som skal brukes.
I dette tilfellet skal vi spille med tilfeldige oktaverdier- ranNum - og kontroller at alfaverdiene varierer fra 1% til 100% alfa basert på "størrelsen" av oktaven i lydsporet. Små tall betyr lav alfa, store tall betyr full alfa. Vær også oppmerksom på at disse verdiene må sendes som et array og at egenskapene som endres, er strengverdier.
De to siste linjene slår på funksjonene.
Legg til følgende ActionScript i slutten av kodeblokken:
Accentsconagua
var lyd: Lyd = nytt lyd (); sound.load (ny URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play (); Lagre og test filmen.
Som du har oppdaget, er dette ikke vanskelig, og faktisk ved å bare spille med tall, kan du ha en masse moro som du "tweak up" hvordan disse trekanter pulserer og fader. Nå som vi har det som fungerer, la oss spille vårt siste "What if ..." spill og sette dem i gang. Dette er hvordan:
Klikk en gang på slutten av klasselisten og legg til en annen klasse:
importer hype.extended.behavior. oscillator;
Denne klassen er en absolutt blast å leke med fordi den setter en gjenstand på en oscillerende bølge. Her er den beste delen: Du trenger ikke en trigonometri bakgrunn for å gjøre det. Faktisk er det ingen matte involvert.
Legg til følgende ActionScript under import-setningene:
var myWidth = scene.stageWidth; var myHeight = scene.stageHeight; var freq: int = 20;
Alt denne koden gjør er å begrense den resulterende animasjonen til scenens grenser og å sette en verdi for bølgefrekvensen. Det er på tide å leke med rutenettet.
Legg til følgende kode etter "scaleTracker" -variabelen i "for" -sløyfen:
var ypositionOsc: Oscillator = ny oscillator (klipp, "y", Oscillator.sineWave, freq, clip.y, myHeight / 3, i / (freq / 2)); var scaleOsc: Oscillator = ny oscillator (klipp, "skalaY", oscillator.sineWave, freq, 5,50, i / (freq / 2)); var rotateOsc: Oscillator = ny oscillator (klipp, "rotasjon", Oscillator.sineWave, freq, 0,90, i / (freq / 2)); yOsc.start (); sOsc.start (); rOsc.start ();
Igjen, Oscillatorobjektet, som FunctionTracker-objektet, krever ikke en grad i partikkelfysikk. Parametrene er veldig enkle:
I dette tilfellet bruker vi en sineWave til tre egenskaper - y-posisjon, ySkala og rotasjon - av trekanten og deretter bruke de resterende tre parametrene for å sette ut bølgens bevegelse.
De resterende tre linjene slår på oscillatoren. Verdiene jeg brukte, kom ganske enkelt ut av "Jeg lurer på hvordan animasjonen ville se ut hvis jeg brukte disse tallene?" Ikke noe mer.
Lagre og test animasjonen.
Denne øvelsen ble designet for å introdusere deg til HYPE-rammen og gi deg sjansen til å sparke dekkene. Jeg viste deg hvordan du installerte den og brukte så tre "What if ..." scenarier som tok en enkel trekant og hevdet den på et pulserende og vifende grid som ble drevet av et lydspor. I vanlig ActionScript-koding vil disse oppgavene, for mange, være en grunn til å "Flee. Screaming. Into the Night".
I stedet oppdaget du at HYPE er rettet mot å ringe ned utviklerens side av Flash-ligningen mens du tar moroa tilbake til designsiden. Etter å ha fullført denne øvelsen kan det ikke være en dårlig idé å revidere koden med et annet synspunkt. Hva ville det være? I mange henseender bruker HYPE til å trene ideer meget etter den kreative prosessen. Det får deg ikke å legge deg ned i koden, men i stedet ved å spille med tall og verdier, får du det du gjør best: spill "Hva hvis ..." spill.
