Nå skal vi skrive våre andre funksjonen. Denne funksjonen bygger våre holdere og legger våre teksturer inn holdere:
offentlig funksjon addIntoHolders () {Visittkort = 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, vi først opprette nye Sprites som er det perfekte valget for innehaveren formål. Så vi legger våre teksturer i tekstur holdere. Så vi legger disse strukturholdere inn i hovedholderen.

Til slutt legger vi hoved holder til scenen, på scenen. Vi vil bruke hovedholderen som et visittkort

Vi trenger å endre rotasjonen og x, y koordinatene 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 roter vi baksiden av kortet 180 grader. Deretter setter stillingene til begge kortene. Dette er faktisk et enkelt triks; vi faktisk satt registreringspunkt innehaveren av kortene til sitt senter. Dette er på grunn av perspektivet til standard 3D scene i vårt dokument

Dette er uten tvil det vanskeligste skrittet i vår veiledning. Vi bygger et visittkort, og når vi ser på forsiden av kortet, bør baksiden av kortet ikke bli sett. Hvordan kan vi gjøre dette? Vi kan kanskje skrive litt om forholdene ved å bruke rotasjoner av hoved holder ... men det er en enklere måte.

Tenk deg at vi har to røde punkter og ett blått punkt på en flate. Nå forestille seg at vi har en uendelig linje som går gjennom de to røde punkter. Denne linjen deler overflatene til to sider. Sjekk ut bildet under:

Som du ser, har blå punkt to sjanser. Det kan være på den side av grønn eller på siden av gult. Hvis vi kan finne ut hvor det blå punktet er så kan vi løse vårt problem

Nå la oss snakke om 3D

I dette bildet har vi en 3D-plan. Tenk deg at det er rotert i Y-aksen litt (slik at kanten på venstre side er lenger vekk fra deg enn kanten på høyre side). La oss sette røde punkter og en blå punkt på hjørnene av flyet.

Ser du uendelig linje? Sjekk ut bildet under:

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 planet blir sett. Derfor bruker posisjonene til bare tre poeng, kan vi finne ut hvilke ansiktet av flyet er mot oss.

Denne metoden brukes i Away3D, PaperVision, Yogurt3D, Alternativa og andre motorer og i utgangspunktet forbedrer ytelsen.

For denne metoden vil vi bruke en funksjon:
offentlig funksjon isFrontFacing (Displayobject: Displayobject): Boolean {p1 = displayObject.localToGlobal (p1_); p2 = displayObject.localToGlobal (p2_); p3 = displayObject.localToGlobal (p3_); returnere boolsk ((p2.x-p1.x) * (p3.y-p1.y) - (p2.y-p1.y) * (p3.x-p1.x) > 0);}

Denne funksjonen lager tre poeng i kortet (vår planet). Og deretter returnerer oss plasseringen av det tredje punktet (blå en på tegninger). Hvis den returnerer sant så det betyr at vi ser forsiden av kortet (fly). Hvis ikke, betyr det at vi ser baksiden av kortet (fly)

Nå kan vi endelig skrive vår siste funksjonen. Denne funksjonen utgangspunktet roterer vårt visittkort og sjekker synligheten av ansiktene
offentlig funksjon render (e: Hendelses). {BusinessCard.x = stage.stageWidth /2 businessCard.y = stage.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 angi posisjonen for hoved holderen til sentrum. Dette er på grunn av et perspektiv av standard 3D scene i vår dokumentet. Så vi roter vår hovedholderen ved hjelp av muse koordinater. Vi legger en tradisjonell og enkel glatt effekt for det. De to siste linjene lage kort synlig når vi shoud se dem

Vi er klare. La oss kalle våre funksjoner i rekkefølge:
offentlig funksjon BusinessCard3D () {getTextures () addIntoHolders () initCards () addEventListener (Event.ENTER_FRAME, render)}

Vi legger også til en ENTER_FRAME hendelse for å utløse gjengi funksjon hver ramme .

Endelig er vi klare til å teste vår film

Beveg musen, og du vil se at visittkortet vil bli rotert også. Vi testet våre kort. Nå la oss gå litt lenger.

De fleste av dere, og jeg personlig, mener at muse rotasjoner er kjøligere, men fra mine erfaringer med 3D, kan de forvirre brukerne. Vi vil derfor konvertere dette til en enklere animasjon. Når vi klikker på kortet vil det dreie seg

Først, for vår animasjon vi skal bruke Tweener. Det er veldig enkelt.

Så, laste ned den nyeste Tweener versjonen fra code.google.com. Jeg bruker versjon 1.33.74, Actionscript 3 (Flash 9+).

Pakk ut ZIP-filen og flytte "caurina" -mappen til mappen som inneholder vår Flash dokument.

Våre første linjene var i ferd med å importere klasser. Vi vil importere Tweener og også MouseEvent.
import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; import caurina.transitions.Tweenerimport flash.events.MouseEvent

I vår render () -funksjonen, kortets rotasjon var direkte relatert til muse koordinater. Men vi ønsker ikke dette nå. Vi vil i utgangspunktet klikk på kortet, og det vil snu.

Så, fjerne de markerte linjene:
offentlig funksjon render (e: Hendelses) {businessCard.x = stage.stageWidth /2 businessCard.y = stage.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 vil legge til en ny variabel, frontFace. Denne typen er boolsk. Når brukeren klikker på kortet vil vi rotere våre kort til 180 eller 0 avhengig av verdien av frontFace
private Var frontFace. Boolean = true

Nå skriver vi vår endelige funksjon. Når vi klikker på kortet denne funksjonen vil bli utløst
offentlig funksjon onDown (e: MouseEvent). {If (frontFace) {Tweener.addTween (Visittkort, {rotationY: 180, tid: 1}) frontFace = false} else { Tweener.addTween (Visittkort, {rotationY: 0, tid: 1}) frontFace = true}}

Vi først se på frontFace variabel. Hvis det er sant så betyr det at vi nå ser forsiden av kortet. Hvis det er falsk så betyr det vi ser baksiden av kortet.

Når vi ser på forsiden av kortet, i utgangspunktet sier vi "roter det til 180 grader", slik at vi kan se baksiden av kortet. Vi bruker den samme ideen når vi ser baksiden av kortet (i så fall, vi roter det til 0 grader)

Vårt endelige linjen er å legge en MouseEvent lytteren til å utløse onDown () -funksjonen vi nettopp skrev. Vi legger det til vårt visittkort. Du kan selv 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å visuelle :)

I denne leksjonen lærte vi hvordan å bygge en 3D-to- ensidig plan ved hjelp av native Flash Player 10 3D API og Actionscript 3.0. Først vi kontrollerte det ved hjelp av muse koordinater. Så byttet vi å klikke basert kontroll for ikke å forvirre brukerne.

Som du ser mulighetene til 3D-funksjonen i Flash Player er ikke perfekt, men vi kan alltid formulere løsninger og kan bygge enkle 3D dynamiske animasjoner uten tredjeparts motor. Anmeldelser