Share
I denne opplæringen skal vi bygge et 3D visittkort. Vi vil ikke bruke Away3D, Alternativa, Yogurt3D, Sandy3D, Papervision3D eller noen annen 3D-motor bygget for Flash. Vi bruker bare 3D-funksjonene til Flash Player 10.
La oss se på det endelige resultatet vi vil jobbe for:
Trykk på det!
Opprett en ny ActionScript 3.0-fil.
Før du redigerer, la oss lagre dokumentet vårt som "BusinessCard3D.fla" i hvilken som helst mappe du vil ha.
Etter å ha lagret dokumentet, skriv "BusinessCard3D" i klassefeltet for å sette en dokumentklasse. Hvis du ikke vet hvilken dokumentklasse er eller hvordan den brukes, kan du lære av denne raske tipsen.
Vi skrev inn navnet på dokumentklassen, men vi har ikke laget det ennå.
I Profil-delen klikker du på det lille pennikonet nær "BusinessCard3D".
I denne opplæringen bruker vi Flash Professional. Klikk på OK-knappen, og du vil se en ny ActionScript-fil foran deg. Du ser en enkel klasse:
pakke import flash.display.MovieClip; offentlig klasse BusinessCard3D utvider MovieClip offentlig funksjon BusinessCard3D () // constructor code
Fjern "// constructor code" -linjen og lagre dette som "BusinessCard3D.as" i samme mappe som inneholder "BusinessCard3D.fla".
Du må ha to visualer for å bygge et visittkort. En av dem er foran og den andre er på baksiden av kortet. Jeg laget noen minimale kort for denne opplæringen:
I utgangspunktet kopiere disse bildene og lim dem inn i Flash-dokumentet ditt. De vil bli lagt til scenen automatisk. Fjern dem nå og åpne Bibliotekspanelet:
Vi må sette opp deres koblingsnavn slik at vi kan bruke dem i løpetid. Dette betyr at vi eksporterer dem for actionscript. Det er en veldig rask måte å gjøre dette på.
Som standard er koblingsdelen av bildene tomme. Klikk på de tomme delene av Linkage-delen av CardBack.png:
Etter å ha gjort det, skriv inn "CardBack":
Gjør det samme for CardFront.png-bildet. Etter at du har skrevet inn koblingsnavnene, bør Bibliotekspanelet se slik ut:
Ja. Nå den morsomme delen. Vi er nå klar til å begynne koding :)
Først importerer vi noen andre klasser som vi skal bruke i følgende trinn:
importer flash.display.Bitmap; importer flash.display.DisplayObject; importer flash.display.Sprite; importere flash.events.Event; importer flash.geom.Point;
Sett inn disse linjene mellom pakke og offentlig klasse BusinessCard3D utvider Sprite linjer.
Etter å ha importert klasser, la oss sette opp våre variabler. Sett inn disse linjene like over offentlig funksjon BusinessCard3D () linje:
private var businessCard: Sprite private var frontHolder: Sprite private var backHolder: Sprite private var frontTexture: Bitmap private var backTexture: Bitmap privat var p1: Punkt privat var p2: Punkt privat var p3: Punkt privat var p1_: Punkt = nytt Punkt , 0) privat var p2_: Punkt = nytt punkt (100,0) privat var p3_: Punkt = nytt punkt (0,100)
Som du kan gjette visittkort holder våre andre to kort. Det er hovedholderen.
frontHolder holder frontTexture, backHolder holder backTexture.
frontTexture og backTexture er Bitmaps fra biblioteket.
Vi kunne bare bruke en hovedholder og legge til bilder i den. Men problemet med det er at det kan forvirre nybegynnere. Siden vi roterer baksiden av kortet med 180 grader, og siden registreringspunktet til Bitmap-klassen er øverst til venstre, må vi også endre dens x eiendom. Ved å legge til en annen holder må vi bare endre rotasjonen.
Etter å ha satt opp variablene, la oss skrive vår første funksjon. Det får i utgangspunktet bilder fra biblioteket som BitmapData-objekter, og skaper frontTexture og backTexture Bitmaps fra dem.
offentlig funksjon getTextures () frontTexture = ny Bitmap (new CardFront (0,0)) backTexture = ny Bitmap (new CardBack (0,0))
Først får vi CardFront-bildet ved å skrive: ny CardFront (0,0)
Dette er den eneste måten å få en BitmapData av et bilde fra Bibliotek. Vi kan ikke bruke bare BitmapData. Hvis vi hadde brukt en 3D-motor, ville det trolig være nok, men med innfødt Flash 3D må vi bruke et Bitmap-objekt, så vi vil opprette et Bitmap-objekt fra BitmapData.
ny CardFront (0,0) returnerer oss en BitmapData og at BitmapData brukes i Bitmap å opprette frontTexture. Vi gjør det samme for backTexture og våre teksturer er klare.
Nå skal vi skrive vår andre funksjon. Denne funksjonen bygger våre innehavere og legger til våre teksturer i holdere:
offentlig funksjon addIntoHolders () businessCard = new Sprite () frontHolder = new Sprite () backHolder = new Sprite () frontHolder.addChild (frontTexture) backHolder.addChild (backTexture) businessCard.addChild (frontHolder) businessCard.addChild (backHolder) addChild visittkort)
Som du ser, oppretter vi først nye Sprites som er det perfekte valget for holderens formål. Da legger vi til våre teksturer i teksturholdere. Deretter legger vi disse teksturholdere i hovedholderen.
Til slutt legger vi hovedholderen til scenen, på scenen. Vi bruker hovedholderen som visittkort.
Vi må endre rotasjonen og x, y koordinatene til kortene.
offentlig funksjon initCards () backHolder.rotationY = 180 frontTexture.x = -frontTexture.width / 2 frontTexture.y = -frontTexture.height / 2 backTexture.x = -backTexture.width / 2 backTexture.y = -backTexture.height / 2
Først roterer vi baksiden av kortet med 180 grader. Deretter setter vi posisjonene til begge kortene. Dette er faktisk et enkelt triks; Vi setter faktisk registreringsstedet til kortinnehaveren til sentrum. Dette er på grunn av perspektivet på standard 3D-scene i dokumentet vårt.
Dette er uten tvil det vanskeligste trinnet i vår veiledning. Vi bygger et visittkort, og når vi ser fremsiden av kortet, må ikke baksiden av kortet sees. Hvordan kan vi gjøre dette? Vi kan kanskje skrive noen hvis forhold ved å bruke rotasjon av hovedholderen ... men det er en enklere måte.
Tenk deg at vi har to røde punkter og ett blått punkt på overflaten. Forestill deg nå at vi har en uendelig linje som går gjennom de to røde punktene. Denne linjen deler overflatene i to sider. Sjekk ut bildet nedenfor:
Som du ser, har blå punkt to sjanser. Det kan være på siden av grønt eller på siden av gul. Hvis vi kan finne ut hvor det blå punktet er så kan vi løse problemet vårt.
La oss nå snakke om 3D.
På dette bildet har vi et 3D-plan. Tenk deg at det er rotert i Y-aksen litt (så kanten på venstre side er lenger unna deg enn kanten på høyre side). La oss sette røde punkter og et blått punkt på hjørnene av flyet.
Ser du den uendelige linjen? Sjekk ut bildet nedenfor:
Det er faktisk det samme som det første bildet. Hvis det blå punktet nå går til den andre siden av linjen, betyr det at den andre siden av flyet blir sett. Derfor kan vi ved hjelp av stillingene på bare tre punkter bestemme hvilket ansikt av flyet som er mot oss.
Denne metoden brukes i Away3D, PaperVision, Yogurt3D, Alternativa og andre motorer, og forbedrer i utgangspunktet ytelsen.
For denne metoden vil vi bruke en funksjon:
offentlig funksjon isFrontFacing (displayObject: DisplayObject): Boolsk p1 = displayObject.localToGlobal (p1_); p2 = displayObject.localToGlobal (p2_); p3 = displayObject.localToGlobal (p3_); returner boolsk ((p2.x-p1.x) * (p3.y-p1.y) - (p2.y-p1.y) * (p3.x-p1.x)> 0);
Denne funksjonen skaper tre punkter i kortet (vårt fly). Og så returnerer den oss plasseringen av det tredje punktet (blå i illustrasjoner). Hvis den returnerer ekte da betyr det at vi ser fremsiden av kortet (flyet). Hvis ikke, betyr det at vi ser baksiden av kortet (flyet).
Nå skriver vi endelig vår siste funksjon. Denne funksjonen roterer i utgangspunktet vårt visittkort og kontrollerer ansiktets synlighet.
offentlig funksjon gjengivelse (e: Event) businessCard.x = scene.stageWidth / 2 businessCard.y = scene.stageHeight / 2 businessCard.rotationY + = (mouseX - businessCard.rotationY) * 0.2 businessCard.rotationX + = (mouseY - businessCard .rotationX) * 0.2 frontHolder.visible = isFrontFacing (frontHolder); backHolder.visible = isFrontFacing (backHolder);
De to første linjene stiller hovedholderens posisjon til senter. Dette er på grunn av perspektivet på standard 3D-scene i dokumentet vårt. Da roterer vi vår hovedholder ved å bruke musekoordinater. Vi legger til en tradisjonell og enkel jevn effekt for den. De to siste linjene gjør kortene synlige når vi ser dem.
Vi er klare. La oss ringe våre funksjoner i rekkefølge:
offentlig funksjon BusinessCard3D () getTextures () addIntoHolders () initCards () addEventListener (Event.ENTER_FRAME, gjengi)
Vi legger også til en ENTER_FRAME hendelse for å utløse gjengivelsesfunksjonen hver ramme.
Til slutt er vi klare til å teste vår film.
Flytt musen og du vil se at visittkortet blir rotert også. Vi testet vårt kort. La oss nå gå litt lenger.
De fleste av dere, og jeg personlig, tror at musrotasjonene er kjøligere, men fra mine erfaringer med 3D, kan de forvirre brukere. Vi konverterer derfor dette til en enklere animasjon. Når vi klikker kortet vil det rotere seg selv.
For det første, for animasjonen bruker vi Tweener. Det er veldig enkelt.
Så last ned den nyeste Tweener-versjonen fra code.google.com. Jeg bruker versjon 1.33.74, ActionScript 3 (Flash 9+).
Trekk ut ZIP-filen og flytt mappen "caurina" til mappen som inneholder Flash-dokumentet.
Våre første linjer handlet om å importere klasser. Vi importerer Tweener og MouseEvent.
importer flash.display.Bitmap; importer flash.display.DisplayObject; importer flash.display.Sprite; importere flash.events.Event; importer flash.geom.Point; importere caurina.transitions.Tweener import flash.events.MouseEvent
I vår render () funksjonen, var kortets rotasjon direkte relatert til musekoordinatene. Men vi vil ikke ha det nå. Vi vil i utgangspunktet klikke på kortet, og det vil slå.
Så fjern de uthevede linjene:
offentlig funksjon gjengivelse (e: Event) businessCard.x = scene.stageWidth / 2 businessCard.y = scene.stageHeight / 2 businessCard.rotationY + = (mouseX - businessCard.rotationY) * 0.2 businessCard.rotationX + = (mouseY - businessCard .rotationX) * 0.2 frontHolder.visible = isFrontFacing (frontHolder); backHolder.visible = isFrontFacing (backHolder);
Vi legger til en ny variabel, frontFace. Dens type er boolsk. Når brukeren klikker kortet, roterer vi kortet til 180 eller til 0 avhengig av verdien av frontFace.
privat var frontFace: boolsk = sant
Nå skriver vi vår endelige funksjon. Når vi klikker kortet blir denne funksjonen utløst.
offentlig funksjon onDown (e: MouseEvent) if (frontFace) Tweener.addTween (businessCard, rotationY: 180, tid: 1) frontFace = false else Tweener.addTween (businessCard, rotationY: 0, tid: 1 ) frontFace = true
Vi ser først på frontFace variabel. Hvis det er ekte så betyr det at vi for tiden ser fremsiden av kortet. Hvis det er falsk så betyr det at vi ser baksiden av kortet.
Når vi ser på forsiden av kortet, sier vi i utgangspunktet "roter den til 180 grader", så vi kan se baksiden av kortet. Vi bruker den samme ideen når vi ser baksiden av kortet (i så fall roterer vi det til 0 grader).
Vår siste linje er å legge til en Mouseevent lytter til å utløse onDown () funksjonen vi nettopp skrev. Vi legger det til vårt visittkort. Du kan til og med legge den til scenen.
businessCard.addEventListener (MouseEvent.MOUSE_DOWN, onDown)
Test filmen og klikk på kortet. Kanskje du kan skrive en funky "Klikk for å rotere visittkortet mitt;)" setning på bildene dine :)
I denne leksjonen lærte vi å bygge et 3D-tosidig fly ved å bruke den innfødte Flash Player 10 3D API og ActionScript 3.0. Først styrte vi det ved å bruke musekoordinater. Så byttet vi til klikkbasert kontroll for ikke å forvirre brukere.
Som du ser egenskapene til 3D-funksjonen i Flash Player, er ikke perfekt, men vi kan alltid formulere løsninger og kan bygge enkle 3D-dynamiske animasjoner uten noen tredjeparts-motor.
Accentsconagua