Åpne opp Main.fla og redigere scenen for å gjøre det 500x440 med 30 bilder per sekund frame rate. Sett dokumentet klassen til Main:

Vi trenger bare to lag for denne opplæringen:

Kortet container som vil være befolket av vår papervision

Knappene lag som vil utløse en åpne /lukke-aksjon på kortet


---


Trinn 4: View Setup


I view lag lage en rektangulær form. Størrelsen det til størrelsen på scenen og flytte den til posisjon 0,0. Hit F8 for å konvertere formen til en MovieClip symbol. Kryss av i boksen for å eksportere for Actionscript og legge klassenavnet CardViewport. Det vil koble til klassen vi skal bygge senere


Nå kan du klikke på synsfeltet MovieClip og gi den en forekomst navnet "view"


---


Trinn 5:.. View Bakgrunn


Åpne viewfilmklipp symbol og lage hva bakgrunnen du liker. Dette er hva jeg gjorde. Et par gradient figurer, en for himmelen og en for bakken og ActiveTuts + logo sentrert på himmelen


---


Trinn 6: Button Setup


på knappen sjiktet skape en rektangulær form. Konvertere den til et filmklipp symbol og kaller det "open_mc"; sørg for at du gir det samme instans navn.


Inne open_mc lage en tekstfeltet. Sett den til å være dynamisk, gir det en forekomst navn label_txt og bygge inn skrifter ved å klikke på "Character Inkludering" og velge alfabetet du vil bruke.


La det se slik du vil. Jeg bygde min med en gradient og noen diagonale linjer på tvers:


MERK: Jeg eier ikke rettighetene til å distribuere standard 07_66
, skriften jeg bruker i dette prosjektet. Sorry for at


---


Trinn 7:. Eiendeler


Photoshop tid: Vi skal bygge våre kort med fire fly (flate rektangler) mot hverandre. Til det trenger vi fire forskjellige bildefiler for å kartlegge i disse flyene.





Våre flyene vil være 700x900 og våre fire bilder vil derfor også være av denne størrelsen. Grunnen til dette er at størrelsen flyene blir flytende på plass 3d noen avstand fra kameraet; de trenger å være stor, slik at vi kan se dem. Navngi bildene "page_1_front.jpg", "page_1_back.jpg", "page_2_front.jpg", "page_2_back.jpg" og sette dem i rotkatalogen på prosjektet


Her er bildene mine.


Disse bildene er tatt med i kildehovedglidelåsen, men du kan også laste dem direkte hvis du foretrekker ..


Gjør det samme for en lyd hvis du ønsker å legge til en. Scott Wills fra audiojungle var snill nok til å sette denne funky spor sammen for oss


---


Trinn 8:. CardViewport.as Importen


Åpne CardViewport.as. Jeg skal bruke FlashDevelop å kode, men du kan bruke Flash hvis du foretrekker


Lag en pakke og importere de klassene vi trenger:
pakken {//grunnleggende klasser importere flash.display.Sprite;. import flash.events.Event; import flash.events.MouseEvent; //papervision klasser importere org.papervision3d.objects.primitives.Plane; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.view.BasicView; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.render.QuadrantRenderEngine; //tweening motor import com.greensock.TweenMax;

---


Trinn 9: CardViewport.as Private Variabler


Sett opp de private variabler vi trenger for CardViewport:
public class CardViewport strekker BasicView //BasicView sin en klasse som inneholder en grunnleggende view oppsett for vår scene {//Oppretter 4 flyene privat Var front_cover: Plane; private Var front_inside: Plane; private Var back_cover: Plane; private Var back_inside: Plane; //Oppretter 4 materialer privat Var front_cover_img: BitmapFileMaterial; private Var front_inside_img: BitmapFileMaterial; private Var back_cover_img: BitmapFileMaterial; private Var back_inside_img: BitmapFileMaterial; //Oppretter forsiden container, som vil hekker 2 flyene privat Var front_container: DisplayObject3D; //Oppretter tilbake siden container, som vil hekker den andre 2 flyene privat Var back_container: DisplayObject3D; //Oppretter et kort container som vil hekker foran container og tilbake container private Var card_container: DisplayObject3D; }

---


Trinn 10: CardViewport.as Constructor


Her er den funksjonen som skal kjøres når CardViewport opprettes:
offentlig funksjon CardViewport () {super (); //for å bli kvitt noen feil om hvordan z-depth beregnes i vår scene //vi må endre gjengi typen til en som kan rette det setRenderType (); //Instantiates materialene og setter sine egenskaper setMaterials (); //Instantiates flyene, legger materialene til flyene, legger flyene til pakkemaskiner (containere) setPlanes (); //gjør kameraet hver ramme stage.addEventListener (Event.ENTER_FRAME, render); //pinnen flyene basert på musens posisjon stage.addEventListener (MouseEvent.MOUSE_MOVE, positionPlanes); }

---


Trinn 11: CardViewport.as Render Type


For å bli kvitt noen feil om hvordan z-depth beregnes i vår scene må vi endre gjengi typen til en som kan rette . Den QuadrantRenderEngine aksepterer en parameter: korreksjon type. Vi skal korrigere z filter denne gangen, bruk denne klokt som det kan hog din CPU i komplekse situasjoner.
Privat funksjon setRenderType () {this.renderer = new QuadrantRenderEngine (QuadrantRenderEngine.CORRECT_Z_FILTER)}

---


Trinn 12: CardViewport.as Materialer Setup


Selv om vi ikke ser det fjerde flyet (baksiden av kortet) bestemte jeg meg for å legge det allikevel bare i tilfelle du ønsker å leke seg med scene <. br> Vi skal bruke en BitmapFileMaterial, ved å sette "presis" til sann jeg forbedre den generelle kvaliteten, men
jeg også bruker mer CPU kraft
privat funksjons setMaterials (). void {//forside front_cover_img = new BitmapFileMaterial ("page_1_front.jpg", true); front_cover_img.doubleSided = false; front_cover_img.fillAlpha = 1,0; //Front Inside Page front_inside_img = new BitmapFileMaterial ("page_1_back.jpg", true); front_inside_img.doubleSided = false; front_inside_img.fillAlpha = 1,0; //Tilbake Inside Page back_inside_img = new BitmapFileMaterial ("page_2_front.jpg", true); back_inside_img.doubleSided = false; back_inside_img.fillAlpha = 1,0; //Back Cover Page back_cover_img = new BitmapFileMaterial ("page_2_back.jpg"); back_cover_img.doubleSided = false; back_cover_img.fillAlpha = 1,0; }

---


Trinn 13:. CardViewport.as Planes Setup


Her skaper vi de fire flyene som utgjør våre kort, arrangere dem i et par beholdere slik at de fremstår som to sider Anmeldelser private funksjons setPlanes (): void {//Oppretter forsiden Plane Cover front_cover = new Plane (front_cover_img, 700, 900, 3, 3); front_cover.z = 0; front_cover.x = 350 //dette utlignet vil bli brukt senere, slik at vi kan åpne kortet //Oppretter innsiden av front Plane front_inside = new Plane (front_inside_img, 700, 900, 3, 3); front_inside.z = 0; front_inside.rotationY = 180; //roteres 180 grader, slik at vi kan se det fra innsiden front_inside.x = 350 //dens nøyaktig halve bredden av flyet //Oppretter en wrapper objekt, slik at vi kan rotere forsiden fra en annen aksen //at av sidene. Det er enklere på denne måten som du ikke trenger å rote med etableringen //koordinater, og vi kan bare oppveie det. front_container = new DisplayObject3D (); front_container.addChild (front_cover); front_container.addChild (front_inside); front_container.x- = 350 //her er vi utligner den //Gjenta prosessen for den andre siden back_inside = new Plane (back_inside_img, 700, 900, 3 3,); back_inside.z = 0,1; back_inside.x = 350 back_cover = new Plane (back_cover_img, 700, 900, 3, 3); back_cover.z = 0,1; back_cover.rotationY = 180; back_cover.x = 350 back_container = new DisplayObject3D (); back_container.addChild (back_inside); back_container.addChild (back_cover); back_container.x - = 350 //Og etter alt tilsett foran og bak containere til hoved wrapper og tilsett wrapper til scenen. card_container = new DisplayObject3D (); card_container.addChild (front_container) card_container.addChild (back_container) scene.addChild (card_container); }

---


Trinn 14: CardViewport.as openCard ()


Legg merke til at dette er en offentlig funksjon, slik at vi kan få tilgang til det gjennom hoveddokumentet klassen når vi klikker på knappen:
offentlig funksjon openCard () {//Når vi åpner kortet må vi fjerne muse lyttere fra scenen fordi //når vi mus flytte vi roter ting, noen ganger beholderne noen ganger flyene selv, //derfor vi ikke kan rotere begge samtidig som vi vil ende opp med animasjons feil stage.removeEventListener (MouseEvent.MOUSE_MOVE, positionPlanes); //vi trenger å tilbakestille fly posisjoner inne i containere resetPlanesPosition (); //vi roter foran containeren 180 grader og setter x til 0, //fordi vi utlignet flyene tidligere det nå roterer deretter. TweenMax.to (front_container, 1.4, {rotationY: 180, x: 0, onComplete: function () {stage.addEventListener (MouseEvent.MOUSE_MOVE, positionContainer);}}); TweenMax.to (back_container, 1.4, {x: 0}); //etter rotasjonen vi legge til en ny lytter til musen. denne gang flytte hovedbeholderen. }

---


Trinn 15: CardViewport.as closeCard ()


Samme for lukking av kortet:
offentlig funksjon closeCard () {//når vi lukker kort trinnene er svært ligner på når vi åpner. stage.removeEventListener (MouseEvent.MOUSE_MOVE, positionContainer); //forskjellen er der vi nullstille hovedbeholderen rotasjon card_container.rotationY = card_container.rotationX = 0 //vi nullstille foran og bak containere 'x og rotationY egenskaper TweenMax.to (front_container, 1.4, {rotationY: 0, x: - 350, onComplete: function () {stage.addEventListener (MouseEvent.MOUSE_MOVE, positionPlanes);}}); TweenMax.to (back_container, 1.4, {x: -350}); //og etter animasjonen vi legger den forrige musen flytte arrangementet tiltak for å posisjonere flyene}

---


Trinn 16: CardViewport.as Posisjons Planes


Dette kalles når musen beveges mens kortet er stengt:
private funksjons positionPlanes (event: Aktivitet): void {//den roterer mellom -25º og 25º avhengig av musen posisjon front_cover.rotationY = back_inside.rotationY = (stage.mouseX /stage.stageWidth * 50) -25 front_cover.rotationX = front_inside.rotationX = back_cover.rotationX = back_inside.rotationX = (stage.mouseY /stage.stageHeight * 50) - 25 //vi trenger bare å legge 180 til ansiktene som er ment å være mot oss front_inside .rotationY = back_cover.rotationY = ((stage.mouseX /stage.stageWidth * 50) - 25) + 180}

---


Trinn 17: CardViewport.as Posisjon Container


Dette kalles når musen beveges mens kortet er åpent:
privat funksjon positionContainer (hendelse: Hendelse): void {//akkurat som flyene. den roterer mellom -25º og 25º avhengig museposisjonen card_container.rotationY = (stage.mouseX /stage.stageWidth * 50) -25 card_container.rotationX = (stage.mouseY /stage.stageHeight * 50) - 25.}

---


Trinn 18: CardViewport.as Tilbakestill Planes


Dette kalles når kortet blir klikket for å åpne:
privat funksjon resetPlanesPosition () {//funksjonsnavnet sais det hele, roterer den flyene tilbake til sin opprinnelige opprettet stilling front_inside.rotationY = back_cover.rotationY = 180 front_cover.rotationY = back_inside.rotationY = front_cover.rotationX = front_inside.rotationX = back_cover.rotationX = back_inside.rotationX = 0}

---


Trinn 19: CardViewport.as Render


Det siste trinnet er åpenbart rende ut synsfeltet, etter at vi går videre til dokumentet klassen
privat funksjon render (hendelse: Hendelse):. void {//singleRender er en BasicView funksjon som aktiverer render i den gitte tid. singleRender (); }

Det er slutten av klassen. Ikke glem å legge til avsluttende klammeparentes


---


Trinn 20:. CardViewport.as Full Kode


Vi vil ikke endre noe annet i CardViewport klassen, så gjerne få kilde fra zip-filen og sammenligne den med din egen


---


Trinn 21:. Main.as Importen


Dette trinnet er ganske enkel, vi trenger bare å knytte det åpne kortet og nære kort handlinger til knappen. Før det, la oss importere følgende klasser i vår pakke:
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.media.Sound; //husker birthday.mp3? det vil bli lagt her import flash.net.URLRequest;

---


Trinn 22: Main.as Constructor


Igjen, ikke noe fancy, strekker det MovieClip og skaper en Sound objekt:
public class Hoved strekker MovieClip {private Var birthday_song: Sound}

---


Trinn 23: Main.as viktigste funksjon


Her er et lite tips for dere: å hindre null feil initial dine kommandoer bare etter at klassen har vært lagt til scenen. Denne måten er du sikker på at alt du prøver å få tilgang til stede
offentlig funksjon main (). Void {addEventListener (Event.ADDED_TO_STAGE, init)}

---


Trinn 24: Main.as Init funksjon


... og dette er den funksjonen som skal kjøres når dokumentet klassen har blitt lagt til scenen:
privat funksjon init (hendelse: Hendelse): void {removeEventListener (Event.ADDED_TO_STAGE, init) //vi trenger ikke dette lenger open_mc.label_txt.text = //etiketter på knappen open_mc.buttonMode = true "_ OPEN CARD _!"; //Setter knappen for å opptre som en knapp open_mc.mouseChildren = false; //Deaktiverer mus hendelser på open_mc barn open_mc.addEventListener (MouseEvent.CLICK, openCard) //Legger en hendelse lytteren til museklikk}

---


Trinn 25: Main.as Klikk for å åpne Handler


Denne funksjonen vil bli kjørt når kortet blir klikket hvis det er stengt:
privat funksjon openCard (event: MouseEvent): void {open_mc.removeEventListener (MouseEvent.CLICK, openCard); //fjerner den åpne lytteren viewport.openCard (); //tilgangsvisningsfeltet for å åpne kortet (husker vi satt den til offentligheten tidligere?) open_mc.label_txt.text = "_! CLOSE CARD! _" //endrer etiketten open_mc.addEventListener (MouseEvent.CLICK, closeCard) //legger en lytter å lukke kortet på museklikk birthday_song = new Sound (ny URLRequest ("birthday.mp3")); //laster bursdag sang birthday_song.play (); //spiller bursdagssangen}

---


Trinn 26: Main.as Klikk for å lukke Handler


Dette er i utgangspunktet den samme som openCard (), men i revers.;)
Privat funksjon closeCard (event: MouseEvent): void {open_mc.removeEventListener (MouseEvent.CLICK, closeCard) viewport.closeCard (); "! _ OPEN CARD _" open_mc.label_txt.text = open_mc.addEventListener (MouseEvent.CLICK, openCard)}

---


Trinn 27: Main.as fullbyrde


Ferdig. Ingen hemmeligheter i dette dokumentet klassen, det er ganske rett frem. Ikke glem å legge til avsluttende klammeparentes.


---


Konklusjon


Jeg vil gjerne se deg utvikle seg fra denne opplæringen tar opp noen av de små tipsene jeg ga deg, fra ADDED_TO_STAGE til displayObject3d wrapper, for å bruke en tweening klasse til å rotere og flytte en 3d objekt. Ta dette kortet, og gjøre den til din egen.


Happy birthday Activetuts +! Jeg håper du likte denne opplæringen, takk for lesing!





Previous:Tenker på kommandoer: del 2 av 2
Next Page:GRATULERER MED DAGEN Activetuts +!