Introduction til HYPE Actionscript 3.0 Framework
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen jeg skal introdusere deg til HYPE, en Actionscript 3 rammeverk utgitt av Joshua Davis og Branden Hall den 31. oktober 2009.
Formålet av denne introduksjonen er ikke å komme inn i detaljene av rammeverket, men å gå gjennom en ganske enkel øvelse for å demonstrere noen av mulighetene dette Open Source Project tilbyr deg.
< .no>
Oversikt:.
Som mange av dere kanskje har gjettet jeg er ikke en hard kjerne koder
Grunnen, som jeg vil fortelle noen som lytter, er at "koding ikke er hardt kablet inn mine gener". Gi meg en blank Action panel i Flash og jeg skal stirre på det i flere timer. Hva gjør dette merkelig er at jeg kan lese koden når den blir gitt til meg. Tenk på meg som den typen som vil sitte på 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å at selv om jeg har kjent Josh og Branden for ganske mange år, jeg er ikke engang i nærheten av å være i sin liga eller deler av sin "hype-maskin". Jeg er bare en fyr, som deg, som snublet over noe som har gjort livet mitt lettere. Som lærer har jeg fått overlevert et verktøy som lar meg lære AS3 grunnleggende på en måte som gir "Visual Learners" umiddelbar tilbakemelding.
Saken er, jeg får Dette bringer meg til Josh og Branden. De hører den samme historien fra folk de møter i sine reiser. Saken er, Josh var en gang i deres sko og hva som skiller ham fra resten av flokken er at han mestrer det grunnleggende kode stund, på samme tid, og bringer hans utro Fine Arts talenter til sitt arbeid. Han ville ikke gjøre det alene. Branden og Josh ble først dypt involvert med hverandre på Flashforward 2000 da de begge var relativt ukjent, og siden da har en dyp og dyp profesjonelt forhold utviklet seg mellom dem. Gjennom årene har Josh komme opp med ideer, har Branden kablet dem opp og deretter Josh omorganisert ledningene til å ta arbeid til nivåer verken forventet for 10 år siden. Hva har alltid slått meg, hvis du har noen gang sett dem på en konferanse eller presentasjon, er deres smittende sans for "rart" og "moro" når det kommer til deres samarbeid eller solo innsats. Med introduksjonen av Actionscript 3, både Josh og Branden skjønte raskt "rart" og "moro" var to ord som ble forsvinner fra Flash samfunnet. Reklamer unngått kode som en kreativ medium fordi språket ble oppfattet blant denne gruppen, som for komplisert eller komplisert å mestre. Muligheten til å spille det jeg kaller "Hva hvis ..." spill ble for risikabelt fordi oddsen for å bryte prosjektet var nesten 100% med mindre du hadde en dyp forståelse av OOP. På mange måter, forklarer denne økningen av "Utvikler" i Flash samfunnet i løpet av de siste årene. Jeg sier ikke dette er en dårlig ting eller "dissing" utviklerne. Det er bare det at på grunn av kompleksiteten i språket kritisk balanse av Designer /Utvikler partnerskapet ble mer vektet mot utbygger. Branden og Josh, heller enn å snakke om det, bestemte seg for å gjøre noe med det. Det mange ikke vet er opprinnelsen for HYPE var et annet prosjekt, Flow, som i hovedsak forsøkt å gjøre ting enklere for designere, men det falt ned på sitt ansikt rett og slett fordi det var for foran seg. Snarere enn å gi opp, Branden retooled Flow og med Josh innspill det utviklet seg til HYPE. Hva har meg Jacked om HYPE prosjektet er at ordene "rart" og "morsomme" vil komme tilbake hvis det kreative fellesskapet blir bak den. Som du er i ferd med å oppdage, du virkelig trenger ikke en grad i Rocket Science å bli hektet av HYPE. Alt du trenger er å være redd for å leke 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 Pakk nedlastingen og dobbeltklikk på .mxp filen for å starte Extension Manager. Extension Manager vil installere alt i deres endelige reisemål. Hvis du er nysgjerrig, utforske HYPE Mapper hype_01 - som du nettopp har pakket. Inne finner du: Dobbeltklikk på Oppsett Classpath.jsfl Det er det folk. Nå er det tid for å spille. Ideen til denne øvelsen faktisk dukket opp i en tweet sendt av Branden en uke eller så før HYPE utgivelsen. Han sa Josh hadde for mye moro å spille med SoundAnalyzer i HYPE og lagt ut denne linken. tweet fanget min oppmerksomhet fordi en av de tingene jeg elsker å vise er Audio Visualisering i Flash. Jeg bruker det som et eksempel på å være fryktløs rundt kode i stedet for en full bar Action lekse .. Jeg bruker meg selv som plakaten barnet for dette, og vise hvordan, ved å leke med tall og endre ting jeg vet, kan det komplekse bli interessant. Jeg starter med en grunnleggende visualisering og deretter videre til en full bar lysshow. Selv om jeg gjør det interessant og morsomt, hvis jeg skulle komme inn i kjedelige av å jobbe med SoundMixer klasse og Byte Arrays , kan jeg like godt kaste en klump av aluminiumsfolie over til den blanke tingen publikum er nå stirrer på. De vil ha ringt ut fordi jeg kommer langt langt over hodet. Da jeg så Josh eksempel jeg umiddelbart pawed gjennom koden på jakt etter hva som ikke var der; . kompleksiteten La oss ta det artig å spille med lyd i Flash: Åpne en ny Flash Actionscript 3.0 dokument. For å komme deg i gang hente en mp3 lydfil. Dette eksemplet bruker "Busted tosk", en ActiveDen demo spor, men noen lydfil fra samlingen vil gjøre Tegn en liten fylt trekant på scenen og konvertere den til en MovieClip heter "Triangle". Når du har tegnet trekanten og konvertert den til en MovieClip, slette MovieClip fra scenen Høyreklikk på symbolet i biblioteket og åpne Symbol Properties. Velg Eksporter for Actionscript. Din symbol navn vil dukke opp i klassen. Klikk OK, og se bort fra feilmeldingen som vises. Som du kanskje har gjettet, er HYPE kommer til å trekke symbolet ut av biblioteket og lar deg leke med den ved hjelp av Actionscript. For de av dere recoiling fra dette, husk at på sitt hjerte HYPE er en lekeplass som gir reklamene de muligheter til å spille "hva om ..." 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 Action: Den første "Hva om" game innebærer å plassere den MovieClip i et rutenett og, for å omskrive Apple, "det er en klasse for det". Faktisk, i HYPE er det en klasse for nesten alt du ønsker å gjøre. Hvis det ikke er det, skrive en fordi HYPE er Open Source. Den neste linjen forteller Flash du ønsker å sette 80 trekanter på scenen. Etter å ha gjort det, har du nå finne ut hvordan de skal vises på nettet ved å legge parametrene inn i Gridlayout objekt. I dette tilfellet vil jeg nettet for å starte 30 piksler fra venstre av scenen og 30 piksler fra toppen av scenen. Også er det å være 70 piksler plass mellom trekantene på x-aksen og 50 piksler plass mellom radene. Den endelige parameter forteller HYPE at jeg ønsker å se hva som skjer hvis det er 10 kolonner av trekanter. "for" loop forteller HYPE hvordan du plasserer de 80 trekantene på scenen. Du ta tak i MovieClip ut av biblioteket, gi den en forekomst navn, deretter ved hjelp av applyLayout () metoden i Gridlayout klassen, lå objektene inn i nettet ved hjelp av parametrene av Gridlayout objektet. Lagre og teste filmen Det var lett, og hvis jeg ønsker å endre opp utseendet alt jeg trenger å gjøre er å spille med verdiene i numItem De trekanter er på et rutenett, og det er nå tid for vår neste "Hva hvis ..." spill. I dette tilfellet: Hva om alfa og skalaverdiene av trekantene var knyttet til et lydspor? På dette punktet, ville mange reklamer være, som jeg sa tidligere, ser på "blanke ting" over there. Bare husk at hele hensikten med HYPE er å la deg spille, ikke bli en hard-core koder. La oss ha det litt gøy: Klikk på linje 2 av Script og legge til følgende kode: Disse to klasser arbeide sammen i HYPE. FunctionTracker, i 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 har vi tenkt å spille med alfa og skalaegenskaper i trekanten som den reagerer på lydsporet. SoundAnalyzer klassen er der magien skjer. Hva den gjør, igjen i veldig enkel måte, er å slå en lydfil i data som deretter kan spilles med. Hva jeg absolutt elsker om denne klassen er at jeg ikke trenger å skrive massevis av svært kompleks kode for å få umiddelbare resultater. Jeg trenger bare å vite hva parametrene gjør og deretter begynne å spille Legg til følgende to linjer med kode etter import uttalelser: Alle disse to linjene gjøre er å opprette SoundAnalyzer objekt og slå den på ved hjelp av start () metode (som er hvordan du slår disse klassene og på i HYPE) . Tenk på start () -metoden som noe mer enn en lysbryter Legg til følgende kode under "applyLayout" metoden i "for" loop: Nøkkelen til visualisering er de tre første linjene i koden blokk SoundAnalyzer klassen bruker lydsporet er oktaver.; verdiene for oktaver variere fra 0 til 7. Den første linjen, og derfor skaper et tilfeldig tall på grunnlag av den maksimale verdi oktav tillatt. Ha dette i bakhodet når du spiller med denne verdien. Tall større enn 7 vil bli rundet ned til 7. De neste to linjene bruke functionTracker klasse å spille med trekanter i nettet. Du målrette objektet, forteller FunctionTracker som eies av objektet du vil spille med, hvilken funksjon det skal kjøres ( getOctave I dette tilfellet vi ' re kommer til å spille med tilfeldige oktav verdi- ranNum Anmeldelser - og sørge for at de alfaverdiene varierer fra 1% til 100% alfa basert på "size" av oktaven i lydsporet. Små tall betyr lav alpha, store tall mener full alpha. Vær også oppmerksom på at disse verdier må sendes som en matrise og at egenskapene blir endret er Strengverdier De siste to linjene slå på funksjonene Lagre og teste filmen Som du har oppdaget, er dette ting ikke vanskelig og, faktisk, bare ved å leke med tall, kan du ha en enorm mengde moro som du "justere opp" hvordan disse trekantene pulsere og visne. Nå som vi har som fungerer, la oss spille vår endelige "Hva hvis ..." spill og sette dem i bevegelse. Slik gjør du: Klikk en gang på slutten av klassen listen og legge til én klasse: Denne klassen er en fantastisk morsomt å leke med, fordi det setter et objekt på en oscillerende bølge. Her er den beste delen: Du trenger ikke en trigonometri bakgrunn for å gjøre det. Faktisk er det ingen matematikk involvert. Legg til følgende Action under import uttalelser: Alt dette Koden er begrense den resulterende animasjon til grensene av scenen og å sette en verdi for bølgefrekvens. Det er på tide å leke med rutenettet Legg til følgende kode etter "scaleTracker" variable i "for" loop: Igjen, Oscillator gjenstand, som FunctionTracker objektet, krever ikke en grad i partikkel fysikk. Parametrene er egentlig enkel: I dette tilfellet vi søker en sinusbølge til tre eiendommer -? y posisjon, ySkala og rotation- av trekanten og deretter bruke de rester tre parametere å velge utseende på bølgen bevegelse. De resterende tre linjer slå Oscillator på. Verdiene jeg brukte bare poppet ut av "Jeg lurer på hva animasjonen ville se ut hvis jeg brukte disse tallene?" Ingenting mer Lagre og teste animasjonen Denne øvelsen er designet for å introdusere deg til The Hype rammer og gi deg en sjanse til å sparke i dekk. Jeg viste deg hvordan du installerer den, og deretter brukt tre "Hva hvis ..." scenarier som tok en enkel trekant og hev den på en pulserende og vinker rutenett som ble drevet av et lydspor. I vanlig Action koding disse oppgavene, for mange, ville være en grunn til å "flykte. Screaming. Into the night". I stedet oppdaget du at HYPE er rettet mot å ringe ned utvikleren siden av Flash ligningen mens bringe moroa tilbake til designeren side. Etter å ha fullført denne øvelsen kan det ikke være en dårlig idé å revidere koden med en annen synsvinkel. Hva ville det være? På mange måter, ved hjelp HYPE å jobbe ut ideer veldig mye følger den kreative prosessen. Det blir ikke du overbelastes ned i kode, men i stedet, ved å leke med tall og verdier, få deg til å gjøre det du gjør best: spille "Hva om ... 'spill
den koden, som Flash IDE er en "kreativ medium". Ting som skjer når kunstnere og designere får tak i koden er fantastisk å se på. Likevel snakke med folk som kommer inn i Flash eller har oppdaget de trenger å vite AS3 å utvide sine kreative muligheter, og du vil høre, "Man, er dette ting hard". På dette tidspunktet tar frustrasjon hold, og som de sier: "Nå vet du resten av historien ..."
Trinn 1:.. Last ned HYPE
Trinn 2:. Extension Manager
Alle hjelpefilene inne i doc
mappe
Eksempler på de ulike hype klasser, inkludert deres tilsvarende kilde FLA-filer i. eksempler
mappe.
hypen klasser, som finnes i src
mappe.
Trinn 3. Start Flash
å lansere Flash. Alt dette trinnet ikke er utleid Flash vet hvor alt ble plassert under installasjonen.
Komme Fanget i HYPE
Trinn 4: Nytt dokument
Trinn 5:. Triangle
Trinn 6:. Symbol Properties
Hva hvis jeg setter trekanter på et rutenett
Hva om disse trekantene på rutenettet pulsated til musikken
Hva om de pulserende trekanter ble satt i bevegelse
Trinn 7:? Action
import hype.extended.layout.GridLayout; Var numItems: int = 80; Var Gridlayout: Gridlayout = new Gridlayout (30,30, 70, 50, 10); for (var i: UINT = 1, jeg < numItems, ++ i) {var klippet: Triangle = new Triangle (); gridLayout.applyLayout (klipp); addChild (klipp); };
Trinn 8 .: Test
variabel og parametere
i Gridlayout objektet. Ikke liker trekant? Deretter kaste noe annet - et bilde, for eksempel - inn i MovieClip eller opprette en helt annen MovieClip og bruk det i stedet
Hva om trekantene var knyttet til et lydspor
Trinn 9: Import Classes
import hype.extended.behavior.FunctionTracker, import hype. framework.sound.SoundAnalyzer;
Trinn 10:. SoundAnalyzer Object
Var soundAnalyzer: SoundAnalyzer = new SoundAnalyzer (); soundAnalyzer.start ();
Trinn 11:. Oktaver
Var ranNum: Number = int (Math.random () * 7); Var alphaTracker: FunctionTracker = new FunctionTracker (klipp, "alpha", soundAnalyzer.getOctave, [ranNum, 0,01, 1]); Var scaleTracker: FunctionTracker = new FunctionTracker (klipp, "scale", soundAnalyzer.getOctave, [ranNum, 0,5, 4]); alphaTracker.start (); scaleTracker.start ();
) og hvilke verdier som skal brukes.
Trinn 12:.. Lyd
< p> Legg til følgende Action til slutten av koden blokken:
Var lyd: Sound = new Sound (); sound.load (ny URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play ();
Trinn 13: Test
Hva om de pulserende trekanter ble satt i bevegelse.?
Trinn 14: One More Class
import hype.extended.behavior. Oscillator;
Trinn 15: Definer grenser
Var myWidth = stage.stageWidth; Var myHeight = stage.stageHeight; Var freq: int = 20;
Trinn 16:. Oscillator Object
Var ypositionOsc: Oscillator = new Oscillator (klipp, "y", Oscillator.sineWave, freq, clip.y, myHeight /3, i /(freq /2)); Var scaleOsc: Oscillator = new Oscillator (klipp, "Scaley", Oscillator.sineWave, freq, 5,50, i /(freq /2)); Var rotateOsc: Oscillator = new Oscillator (klipp, "rotasjon", Oscillator.sineWave, freq, 0,90, i /(freq /2)); yOsc.start (); sOsc.start (); rOsc.start ();
Hvilket objekt kommer til å svinge?
Hvilke eiendom-en STRING av objektet kommer til å bli påvirket?
Hvilke bølge som skal brukes? Dine valg er sinuskurve, sawWave, firkant og triangleWave.
Hva bølge verdi bruker vi til å starte
Trinn 17:.. Test
Konklusjon:
.