ActionScript kan være et godt verktøy for å forbedre animasjonene dine. I denne opplæringen ser vi grunnleggende om ActionScript animasjon. Vi tar en titt på hvordan du faktisk flytter et filmklipp med ActionScript, ulike former for kollisjonssensor og hvordan du bruker disse teknikkene for å legge til noe samspill med Flash-filmene dine. La oss komme i gang!
Trinn 1 - Sette opp vår fil
La oss begynne med å lage en ny Flash-film (ActionScript 3.0). Bruk egenskapspanelet til å angi dimensjonene til 600px X 350px, med en frekvens på 30fps. Vi skal skrive vår kode i hovedlinjen for å holde ting enkelt. Hvis du allerede vet hvordan du organiserer koden i klasser, bør det ikke være vanskelig å bruke den kunnskapen til denne opplæringen.
Trinn 2 - Tegning Vår Bakgrunn
Før vi begynner å skrive vår ActionScript trenger vi noen grafikk for å jobbe med. Vi holder dem ganske grunnleggende siden vi er mest interessert i ActionScript i dag.
Start med å gi nytt navn til laget vårt; dobbeltklikk på layername og endre navn på det til "bakgrunn".
Vi skal bruke rektangelverktøyet (r) for å tegne et rektangel. Ikke bekymre deg om størrelsen eller fargen ennå.
Trinn 3 - Endre størrelse på bakgrunnen vår
Dobbeltklikk på rektangelet for å velge fyll og grense. Åpne egenskapsruten slik at du kan justere dimensjonene til rektangelet.
Endre bredden og høyden til de samme verdiene som bredden og høyden på scenen, og sørg for at x- og y-stillingen er satt til 0. Nå stemmer rektangelet perfekt med vår scene.
Trinn 4 - Justere vår bakgrunnsfarge
Velg fyllfarge på rektangelet ved å klikke det en gang. Vi skal få det til å se litt mer interessant ved å legge en gradient til den.
Med valgt rektangel åpner du fargepanelet og endrer fyllfarge fra "solid" til "radial". Rektangulets fyll er nå endret til en radial gradient. Du kan endre fargene på gradienten ved å klikke på de små fargene i gradientlinjen i fargepanelet. Dobbeltklikk på den venstre svinekanten for å bytte den til en blå farge. Gjør det samme for den riktige swatchen for å bytte den til en lignende, men mørkere blå.
For å gjøre gradienten litt mer subtil, vil vi justere gradienten litt ved hjelp av gradienttransformeringsverktøyet. Velg gradienttransformeringsverktøyet (f) og klikk på gradienten for å velge det.
Gradertransformeringsverktøyet viser flere håndtak. En i midten for å flytte hele gradienten, og tre på kanten. En for å rotere gradienten, en for å skalere gradienten og en for å komprimere gradienten.
Først roterer du gradienten slik at aksen er vertikal. Komprimer deretter gradienten til en oval slik at den bedre samsvarer med rektangelets form.
For å fullføre den, skal du gradvis gradere oppover til kun hjørnene av rektangelet ser mørkere ut enn midten (dette trinnet er lettere hvis du zoomer ut fra scenen litt). Du bør ende opp med noe som ligner på bildet nedenfor:
Trinn 5 - The Ball
Den neste grafikken vi trenger er filmklippet vi skal animere. Vi bruker en sirkel.
Lag et nytt lag for filmklippet og tegne en sirkel. Velg sirkelen og trykk F8 for å få opp "Konverter til symbol" -menyen.
Navngitt filmklippet "ball_mc", kontroller at registreringspunktet er satt til midten, og kryssruten for "Export for ActionScript" er merket.
Når du klikker ok, vil Flash gi deg advarselen sett nedenfor. Dette er ikke noe problem. Flash leter etter en tilpasset klasse kalt "ball_mc". Men siden vi ikke har skrevet noen slik klasse, kan Flash ikke finne den og advarer oss om at det automatisk genererer en når vi eksporterer filen. Dette er bra, vi markerte bare avkrysningsruten "Export for ActionScript", slik at vi kan dynamisk plassere vår filmklipp med ActionScript.
Slett filmklippet fra scenen, vi vil plassere det ved hjelp av ActionScript senere.
Trinn 6 - Plassere en filmklipp med ActionScript
Endelig, tid til å begynne å skrive noen kode! Vi vil arbeide mot vårt endelige resultat i en rekke trinn for å forklare noen grunnleggende begreper. Vi vil fortsette å legge til noen få linjer til vi når det endelige resultatet.
La oss begynne med å se på hvordan du bruker ActionScript til å ta et filmklipp ut av biblioteket vårt og plassere det på scenen.
Hvis du ser på koden under, vil du legge merke til tre separate trinn. Vi lager en variabel kalt "ball" for å holde en referanse til den nylig opprettede forekomsten av vår filmklipp. Deretter bruker vi "addChild" metoden for å legge til vår ball i displaylisten. Hvis du skulle glemme det siste trinnet, ville du opprette en forekomst av ball_mc Movie Clip, men du ville ikke kunne se det.
var ball: MovieClip; ball = ny ball_mc (); addChild (ball);
Hvis vi eksporterer Flash-filmen nå, ser vi at ballen har blitt plassert øverst til venstre i Flash-filmen. Vi har ikke spesifisert en posisjon slik at den er plassert på standard x, y-posisjonen 0, 0.
Trinn 7 - Egenskaper for filmklipp
Det øverste venstre hjørnet av skjermen er en ganske dum posisjon for vår ball, vi kan bare se et fjerdedel av filmklippet! Heldigvis for oss har en filmklipp en rekke egenskaper vi kan endre.
Egenskapene vi vil endre akkurat nå, er x-og y-posisjonen til filmklippet. Se koden nedenfor for å se hvordan vi kan kontrollere plasseringen av vår filmklipp:
(Tilleggslinjer: 5,6)
var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150;
Hvis du eksporterer filmen din nå, ser du at filmklippet ikke lenger er oppe i venstre hjørne av skjermen, men på x, y-koordinatene vi angav. Filmklipp har mange andre interessante egenskaper som du kan sette. Du kan sjekke hjelpefilene for en liste over disse egenskapene.
Ved å endre filmklippets x- og y-egenskaper gjentatte ganger over en periode, kan vi få det til å bevege seg! La oss ta en titt på hvordan du gjør det.
Trinn 8 - Flytter Vår Filmklipp
For å flytte vår MovieClip vil vi sette opp en "eventListener" som utfører en funksjon hver gang "ENTER_FRAME" -hendelsen brenner. I vårt tilfelle, omtrent 30 ganger i sekundet.
Hver gang "ENTER_FRAME" -hendelsen brenner, vil vår "eventListener" utføre vår mover-funksjon som vil trekke 3 fra våre MovieClips x- og y-egenskaper, slik at den beveger seg.
Hvis du eksporterer filmen nå, vil du se at filmklippet beveger seg vekk mot kanten av Flash-filmen med kontinuerlig hastighet. Siden vi ikke gjør noe for å stoppe det eller forandre dets retning, vil det fortsette å bevege seg i den retningen på ubestemt tid. Jeg vil si det er tid vi legger til noen grenser.
Trinn 9 - Finne våre grenser
Hvis vi vil stoppe vår filmklipp fra å flytte til den forsvinner, må vi sette noen grenser for den. Kanten av vår Flash-film virker perfekt for jobben, så la oss sette opp noen variabler for våre grenser.
Vi vet allerede at y-posisjonen til toppen av scenen er 0, og x-posisjonen til høyre for scenen er også 0. Variablene for disse grensene er derfor enkle å sette. Vi vet at scenen vår er 600 piksler bred, men i stedet for å bare sette vår høyre grense til 600 piksler, skal vi bruke ActionScript for å avgjøre hvor bredt scenen er. Vi stiller nederste grense på samme måte ved å be om høyde på scenen ved hjelp av ActionScript.
(Tilleggslinjer: 1-4)
var topp: tall = 0; var høyre: tall = scene.stagewidth; var bunn: tall = scene.stagehight; Var igjen: Nummer = 0; var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, mover); funksjon mover (e: Event): void ball.x - = 3; ball.y- = 3;
Akkurat nå bruker vi kantene på scenen som grenser. I dine egne prosjekter kan du sette grensene dine annerledes, du kan for eksempel lage et nytt rektangelfilmklipp og bruke sin x, y-posisjon, bredde og høyde til å beregne dine grenser.
Trinn 10 - Kollisjonsdeteksjon
Vi har bestemt hva våre grenser er og lagret den informasjonen i fire variabler. Vi håper allikevel at den kan hjelpe deg å planlegge reisen.
Siden vår filmklipp er perfekt rund, kan vi enkelt bestemme når det krysser en grense. For eksempel når det er x-posisjon (det er midtpunkt) pluss halvparten av bredden er lik eller overstiger x-posisjonen til den høyre grensen, vet vi at den krysser den grensen, og vi bør slå den rundt.
For å gjøre det, skal vi lagre modifikatorene til sine x- og y-egenskaper i et sett med variabler, slik at vi enkelt kan endre dem. Vi vil også legge til et sett med "if" -klæringer til mover-funksjonen for å sjekke om grensekollisjoner.
(Tilleggslinjer: 6,7 + 20-36)
var topp: tall = 0; var høyre: tall = scene.stagewidth; var bunn: tall = scene.stagehight; Var igjen: Nummer = 0; var vx: tall = 3; var vy: tall = 3; var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, mover); funksjon mover (e: Event): void ball.x- = vx; ball.y- = vy; hvis (ball.x høyre - ball.width / 2) ball.x = right-ball.width / 2; vx * = - 1; hvis (ball.y bunn - ball.height / 2) ball.y = bottom-ball.height / 2; vy * = - 1;
Hvis du eksporterer Flash-filmen nå, vil du se at mover-funksjonen kontrollerer kontinuerlig for å se om ballen kolliderer med noen av grensene vi har satt. Hvis en kollisjon oppstår, blir ballen forskjøvet litt for å sikre at den forblir innenfor grensene vi har satt og retningen er reversert:
Trinn 11 - Friksjon
Selv om vi har satt opp noen grenser for å forsikre seg om at ballen ikke går fra scenen, slutter ballen aldri å bevege seg.
Hvis du tar tak i noe objekt fra skrivebordet ditt, for eksempel datamaskinens mus og gir det en knipa, kommer den til å slutte å bevege seg ganske fort etter at du slutter å bruke kraft. Friksjon mellom skrivebordet og musen din reduserer hastigheten til musen er stasjonær igjen. Vi kan etterligne denne effekten i ActionScript ganske enkelt.
Vi lager en ny variabel kalt "friksjon", og tilordner den en verdi litt mindre enn 1, en verdi på 0,98 fungerer ganske bra. Nå hver gang vi kjører mover-funksjonen, vil vi multiplisere våre vx og vy-variabler med vår friksjonsvariabel, redusere dem litt.
(Tilleggslinjer: 8 + 21,22)
var topp: tall = 0; var høyre: tall = scene.stagewidth; var bunn: tall = scene.stagehight; Var igjen: Nummer = 0; var vx: tall = 3; var vy: tall = 3; var friksjon: tall = 0,98; var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, mover); funksjon mover (e: Event): void vx * = friksjon; vy * = friksjon; ball.x- = vx; ball.y- = vy; hvis (ball.x høyre - ball.width / 2) ball.x = right-ball.width / 2; vx * = - 1; hvis (ball.y bunn - ball.height / 2) ball.y = bottom-ball.height / 2; vy * = - 1;
Hvis du eksporterer filen nå, ser du at friksjon raskt slår ned ballens hastighet til den kommer til stillstand. Friksjon bidrar til å gjøre animasjonen din mer følsom. Super Mario for eksempel kommer ikke til en stopper umiddelbart når du slipper kontrollene. I stedet glir han på et øyeblikk til friksjonen bringer ham til stillstand.
Friksjon er bare en av måtene du kan påvirke animasjonen ved å legge til en modifier til objektets x- og y-hastighet. Du kan simulere tyngdekraften ved å legge til y-hastigheten eller vinden ved å legge til eller subtrahere til eller fra x- og y-hastigheten avhengig av ønsket vindretning.
Trinn 12 - Pilen
Nå som vi har sett hvordan du plasserer og flytter en filmklipp med ActionScript, er det på tide for noe samspill.
Tegn en pil ved hjelp av en kombinasjon av rektangelet, transformer og linjeværktøy:
Trinn 13 - Still inn pilens filmklipp
Vi skal skru pilen inn i en filmklipp med litt forskjellige innstillinger enn vår kule filmklipp.
Velg pilen, trykk F8 for å hente vinduet "Convert to symbol" og navnet på pilen "Clip_clip" arrow_mc ". Kontroller at avkrysningsruten "Export for ActionScript" er merket som før, men denne gangen angis registreringspunktet til venstre midtstilling som i skjermbildet.
En filmklipp roterer rundt registreringspunktet, og vi vil sørge for at pilen vår roterer rundt sin spiss.
Slett pilen Filmklipp fra scenen, vi plasserer den med ActionScript, akkurat som ballen.
Trinn 14 - Plasser og flytt pilen
Vi legger pilen på scenen på samme måte som vår kulefilmklipp. Vi kaller det pekeren.
Siden vi bare vil sørge for at pekeren vår alltid er i samme posisjon som musemarkøren, trenger vi bare to linjer med kode. Hver gang vår mover-funksjon kjører, oppdaterer vi poengets x, y-posisjon til x, y-posisjonen til musemarkøren vår.
Trinn 16 - Finne vinkelen mellom pekeren og ballen
Vi har nå en peker som følger musen rundt, la oss sørge for at det faktisk peker på vår ball. For å gjøre dette må vi finne vinkelen mellom pekeren og ballen.
Vi kan bruke trigonometri til å beregne vår nødvendige vinkel, men først må vi finne avstanden mellom pekeren og ballen langs x- og y-aksen. Enkelt nok vurderer vi begge sine stillinger. La oss se på hvordan du beregner det først, så legger vi det til vår kode.
dx = mouseX - ball.x; dy = mouseY - ball.y;
Nå som vi har de nødvendige avstander, kan vi beregne vinkelen i radianer. Radianer er standardenheten for vinkelmålingen i matematikk. En perfekt sirkel er 360 grader eller PI * 2 radianer.
dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx);
Mens radianer er standard måleenhet for vinkler i matematikk, hvis vi ønsker å sette filmklippets rotasjonsegenskap, må vi konvertere vinkelen til grader i stedet.
Trinn 17 - Konvertering av radianer til grader
Konvertere radianer til grader eller omvendt er ganske enkelt. I ActionScript ser det slik ut:
Grader = Radianer * 180 / Math.PI;
Radianer = Grader * Math.PI / 180;
Trinn 18 - Setter alt sammen
Siden vi må rotere pekeren hver gang enten ballen eller musen beveger seg, plasserer vi rotasjonskoden i vår mover-funksjon.
(Tilleggslinjer: 27-29 + 34-38)
var topp: tall = 0; var høyre: tall = scene.stagewidth; var bunn: tall = scene.stagehight; Var igjen: Nummer = 0; var vx: tall = 3; var vy: tall = 3; var friksjon: tall = 0,98; var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150; varpeker: MovieClip = ny arrow_mc (); addChild (pekeren); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, mover); funksjon mover (e: Event): void var dx: Number; var dy: nummer; var ar: Nummer pointer.x = mouseX; pointer.y = mouseY; dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx); var a: Nummer = ar * 180 / Math.PI; pointer.rotation = a; vx * = friksjon; vy * = friksjon; ball.x- = vx; ball.y- = vy; hvis (ball.x høyre - ball.width / 2) ball.x = right-ball.width / 2; vx * = - 1; hvis (ball.y bunn - ball.height / 2) ball.y = bottom-ball.height / 2; vy * = - 1;
Trinn 19 - Pokker ballen
Ok, så vi fikk vår ball i bevegelse, vi fikk pekeren til å flytte, vi fikk til og med pekeren til å peke på ballen. Jeg tror det er på tide at vi fikk noe til å skje når vi berører ballen.
Vi har allerede tatt en titt på avstandsbasert kollisjonsdeteksjon. Når avstanden mellom ballens midtpunkt og en grense er mindre enn halvparten av bredden på vår ball, vet vi at det oppstår en kollisjon. Dette fungerer ganske bra for perfekte sirkler, siden avstanden mellom midtpunktet og omkretsen endrer seg aldri. Dette virker imidlertid ikke så bra for uregelmessige former.
La oss se på en annen metode for kollisjonsdeteksjon, denne gangen bruker vi hitTest-metoden. HitTest er en standard ActionScript-funksjon som kommer i to smaker. Den første, "hitTestObject" kontrollerer om to objekter kolliderer ved å sjekke om grenseboksene (de tynne blå rektanglene du ser rundt Movie Clips når du velger dem) overlapper.
Denne metoden fungerer perfekt for rektangulære MovieClips, men siden grenseboksen er alltid rektangulær, er den ikke veldig nøyaktig for uregelmessige former eller ovaler.
Den andre metoden kontrollerer et punkt (x, y) posisjon mot en form. Mye mer nøyaktig for uregelmessige former, selv om det ikke er noen enkel måte å kontrollere en uregelmessig form mot en annen. Det er perfekt for oss selv, vi har en ingen rektangulær form (vår ball) og ett punkt (spissen av pilen) som vi vil kontrollere mot hverandre. Så kjører vi "hitTestPoint ()" metoden i vår mover-funksjon mens du leverer vår kulefilmklipp og x, y-posisjonen til pilen vår som input. Metoden vil returnere en boolsk (sann eller falsk) verdi avhengig av om en kollisjon oppstår eller ikke.
(Tilleggslinjer: 45-47)
var topp: tall = 0; var høyre: tall = scene.stagewidth; var bunn: tall = scene.stagehight; Var igjen: Nummer = 0; var vx: tall = 3; var vy: tall = 3; var friksjon: tall = 0,98; var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150; varpeker: MovieClip = ny arrow_mc (); addChild (pekeren); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, mover); funksjon mover (e: Event): void var dx: Number; var dy: nummer; var ar: Nummer pointer.x = mouseX; pointer.y = mouseY; dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx); var a: Nummer = ar * 180 / Math.PI; pointer.rotation = a; vx * = friksjon; vy * = friksjon; ball.x- = vx; ball.y- = vy; hvis (ball.hitTestPoint (pointer.x, pointer.y, true)) trace ('poke'); hvis (ball.x høyre - ball.width / 2) ball.x = right-ball.width / 2; vx * = - 1; hvis (ball.y bunn - ball.height / 2) ball.y = bottom-ball.height / 2; vy * = - 1;
Hvis vi kjører vår Flash-film nå, ser vi at så snart spissen av pilen berører ballen, begynner Flash-filmen å spore ut i "poke".
Trinn 20 - Flytter ballen med pekeren
Vi vet allerede vinkelen mellom ballen og pekeren, og vi vet allerede når pekeren pokker ballen. Det er derfor et ganske lite skritt herfra for å faktisk skyve ballen rett bort fra pekeren.
Husk de vx og vy-variablene vi bruker til å angi hastigheten for vår ball? Ved å bruke sinus og cosinus kan vi forandre disse to variablene til en verdi som får ballen til å fly vekk fra pekeren i retningen du pokker. Vi tar cosinus av vinkelen og multipliserer den med et tall for å angi hastigheten langs x-aksen, vi gjør det samme med vinkelen sinus for å sette hastighet langs y-aksen. Jo større tallet du bruker til å multiplisere cosinus eller sinusresultatet, desto raskere vil ballen gå.
(Tilleggslinjer: 47,48)
var topp: tall = 0; var høyre: tall = scene.stagewidth; var bunn: tall = scene.stagehight; Var igjen: Nummer = 0; var vx: tall = 3; var vy: tall = 3; var friksjon: tall = 0,98; var ball: MovieClip; ball = ny ball_mc (); addChild (ball); ball.x = 325; ball.y = 150; varpeker: MovieClip = ny arrow_mc (); addChild (pekeren); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, mover); funksjon mover (e: Event): void var dx: Number; var dy: nummer; var ar: Nummer pointer.x = mouseX; pointer.y = mouseY; dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx); var a: Nummer = ar * 180 / Math.PI; pointer.rotation = a; vx * = friksjon; vy * = friksjon; ball.x- = vx; ball.y- = vy; hvis (ball.hitTestPoint (pointer.x, pointer.y, true)) vx = Math.cos (ar) * 10; vy = tak i Math.sin (ar) * 10; hvis (ball.x høyre - ball.width / 2) ball.x = right-ball.width / 2; vx * = - 1; hvis (ball.y bunn - ball.height / 2) ball.y = bottom-ball.height / 2; vy * = - 1;
Konklusjon
Dette er bare grunnleggende for ActionScript animasjon, men jeg håper de har gitt deg noen ideer om hvordan du bruker denne kunnskapen i dine egne prosjekter. Ved å utvide på disse teknikkene kan du lage mange interessante og nyttige effekter for dine Flash-prosjekter. Takk for at du leste!
Share
Accentsconagua
