Share
Este prima zi de naștere a lui ActiveTuts +! Să sărbătorim făcând o carte muzicală de ziua de naștere 3D utilizând Papervision3D și TweenMax.
Începeți prin a crea un nou dosar (acesta va fi directorul rădăcină al proiectului dvs.) și creați un nou FLA AS3 în interiorul acelui director, numit Main.fla. Aceasta va conține toate interfețele UI de care avem nevoie pentru a crea cardul.
Pentru acest tutorial vom avea nevoie de două biblioteci populare Flash: Papervision3D și TweenMax. Descărcați Papervision (folosesc versiunea 2.1.932) și extrageți com și nochump folderele din zip în directorul rădăcină al proiectului. Descărcați TweenMax (folosesc versiunea 11) și extrageți și zipul în dosarul rădăcină al proiectului.
Acum, creați un fișier AS golit; salvați-l ca "CardViewport.as" în dosarul rădăcină al proiectului. Acesta va fi punctul nostru de vedere papervision3d care conține cardul. Creați un alt fișier AS golit, în același director, denumit "Main.as." Aceasta va fi clasa dvs. de documente. (Nu sunteți sigur cum să utilizați o clasă de documente? Citiți această introducere rapidă.)
Structura dosarului dvs. ar trebui să arate astfel:
Deschideți Main.fla și editați scena pentru ao face 500x440 cu o rată a cadrelor de 30 fps. Setați clasa de documente la Main:
Avem nevoie doar de două straturi pentru acest tutorial:
În stratul de vizualizare creați o formă dreptunghiulară. Împărțiți-l la dimensiunea treptei și deplasați-o în poziția 0,0. Apăsați F8 pentru a transforma forma într-un simbol MovieClip. Bifați caseta pentru a exporta pentru ActionScript și adăugați numele de clasă CardViewport. Se va conecta la clasa pe care o vom construi mai târziu.
Acum, faceți clic pe filmul din fereastra de vizualizareClip și dați-i un nume de instanță pentru "viewport".
Deschideți simbolul clipului video din fereastra de vizualizare și creați fundalul dorit. Asta am făcut: o pereche de forme de gradient, una pentru cer și una pentru pământ și logo-ul ActiveTuts + centrat pe cer.
Pe stratul butonului creați o formă dreptunghiulară. Conversați-l într-un simbol de film și numiți-l "open_mc"; asigurați-vă că îi dați același nume de instanță.
În interiorul open_mc faceți un câmp de text. Setați-l să fie dinamic, dați-i un nume de instanță a label_txt și încorporați fonturile dând clic pe "Embedding caracter" și selectând alfabetul pe care doriți să-l utilizați.
Fă-o să arate așa cum vrei tu. Mi-am construit mina cu un gradient si cateva linii diagonale care traverseaza:
NOTĂ: Nu dețin dreptul de a distribui standard 07_66, fontul pe care îl folosesc în acest proiect. Imi pare rau pentru asta.
Timpul Photoshop: Vom construi cardul cu patru avioane (dreptunghiuri plate) îndreptate unul spre celălalt. Pentru asta avem nevoie de patru fișiere de imagini diferite pentru a le cartona în acele avioane.
Avioanele noastre vor avea dimensiunile de 700x900, iar cele patru imagini vor fi de asemenea de aceeași dimensiune. Motivul pentru această dimensiune se datorează faptului că avioanele vor pluti în spațiu 3d la o distanță distanță de cameră; ele trebuie să fie mari, astfel încât să le putem vedea. Denumiți imaginile "page_1_front.jpg", "page_1_back.jpg", "page_2_front.jpg", "page_2_back.jpg" și puneți-le în directorul rădăcină al proiectului dvs..
Iată imaginile mele:
Aceste imagini sunt incluse în zipul principal sursă, dar le puteți descărca direct dacă preferați ...
Faceți același lucru pentru un sunet dacă doriți să adăugați unul. Scott Wills de la audiojungle a fost destul de amabil să pună această piesă funky împreună pentru noi.
Deschideți CardViewport.as. Voi folosi FlashDevelop pentru a codifica, dar puteți folosi Flash dacă preferați.
Creați un pachet și importați clasele de care avem nevoie:
pachet // clase de bază import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; // papervision clase de import 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; // importul motorului de import com.greensock.TweenMax;
Configurați variabilele private de care avem nevoie pentru CardViewport:
clasa publică CardViewport extinde BasicView // BasicView este o clasă care include o configurație de vizualizare de bază pentru scena noastră // // creează 4 avioane private var front_cover: plan; private var front_inside: plan; private var back_cover: plan; private var back_inside: plan; // Creează 4 materiale private var front_cover_img: BitmapFileMaterial; private var front_inside_img: BitmapFileMaterial; privat var back_cover_img: BitmapFileMaterial; private var back_inside_img: BitmapFileMaterial; // Crează containerul din prima pagină, care va cuibări 2 avioane private var front_container: DisplayObject3D; // Crează containerul din partea din spate, care va asambla celelalte 2 avioane private var back_container: DisplayObject3D; // Creează un container de card care va cuișa containerul din față și containerul din spate privat var card_container: DisplayObject3D;
Iată funcția care va fi rulată la crearea CardViewport:
funcția publică CardViewport () super (); // pentru a scăpa de câteva erori despre modul în care z-adâncimea este calculată în scena noastră // trebuie să schimbăm tipul de randare la unul care poate corecta setRenderType (); // Instanțează materialele și își stabilește proprietățile setMateriale (); // Instanțează avioanele, adaugă materialele la avioane, adaugă avioanele la ambalajele (containerele) setPlanes (); // conferă camerei fiecare scenă cadre.addEventListener (Event.ENTER_FRAME, render); // repoziționează avioanele bazate pe poziția mouse-ului stage.addEventListener (MouseEvent.MOUSE_MOVE, positionPlanes);
Pentru a scăpa de câteva erori cu privire la modul în care se calculează adâncimea de zgomot în scena noastră, trebuie să modificăm tipul de randare la unul care poate corecta. QuadrantRenderEngine acceptă un parametru: tipul de corecție. Vom corecta filtrul z de data aceasta, folosiți acest lucru cu înțelepciune, deoarece vă poate ajuta la procesarea procesorului în situații complexe.
funcția privată setRenderType () this.renderer = QuadrantRenderEngine (QuadrantRenderEngine.CORRECT_Z_FILTER)
Chiar dacă nu vedem cel de-al patrulea plan (partea din spate a cărții), am decis să o adaug în orice caz doar dacă vrei să joci cu scena.
Vom folosi un BitmapFileMaterial, setând "exact" la adevărat Îmbunătățesc calitatea generală, in orice caz De asemenea, folosesc mai multă putere CPU.
Accentsconagua
funcția privată setMateriale (): void // Front Cover Page front_cover_img = nou BitmapFileMaterial ("page_1_front.jpg", true); front_cover_img.doubleSided = false; front_cover_img.fillAlpha = 1.0; // Front Inside Page front_inside_img = BitmapFileMaterial nou ("page_1_back.jpg", true); front_inside_img.doubleSided = false; front_inside_img.fillAlpha = 1.0; // Înapoi Pagina interioară back_inside_img = nou BitmapFileMaterial ("page_2_front.jpg", true); back_inside_img.doubleSided = false; back_inside_img.fillAlpha = 1.0; // Back cover Page back_cover_img = nou BitmapFileMaterial ("page_2_back.jpg"); back_cover_img.doubleSided = false; back_cover_img.fillAlpha = 1.0; Aici creem cele patru avioane care alcătuiesc cartea noastră, aranjându-le într-o pereche de containere, astfel încât să apară ca două pagini.
funcția privată setPlanes (): void // Creează capacul planului frontal front_cover = planul nou (front_cover_img, 700, 900, 3, 3); front_cover.z = 0; front_cover.x = 350 // acest offset va fi folosit mai târziu pentru a putea deschide cardul // Crează interiorul planei frontale front_inside = planul nou (front_inside_img, 700, 900, 3, 3); front_inside.z = 0; front_inside.rotationY = 180; // rotit 180 de grade, astfel încât îl putem vedea din interior front_inside.x = 350 // exact jumătate din lățimea planului // creează un obiect înfășurat astfel încât să putem roti prima pagină dintr-un alt axa // a paginilor. Este mai simplu în acest fel, deoarece nu trebuie să vă confruntați cu coordonatele de creare // și putem să o compensăm. front_container = nou DisplayObject3D (); front_container.addChild (front_cover); front_container.addChild (front_inside); front_container.x- = 350 // aici îl compensăm // Repetați procesul pentru a doua pagină back_inside = planul nou (back_inside_img, 700, 900, 3, 3); back_inside.z = 0,1; back_inside.x = 350 back_cover = planul nou (back_cover_img, 700, 900, 3, 3); back_cover.z = 0,1; back_cover.rotationY = 180; back_cover.x = 350 back_container = nou DisplayObject3D (); back_container.addChild (back_inside); back_container.addChild (back_cover); back_container.x - = 350 // După ce tot adăugați containerele din față și din spate în ambalajul principal și adăugați ambalajul în scenă. card_container = nou DisplayObject3D (); card_container.addChild (front_container) card_container.addChild (back_container) scene.addChild (card_container);
Observați că aceasta este o funcție publică, astfel încât să putem accesa aceasta prin clasa de documente principale când faceți clic pe buton:
funcția publică openCard () // Când deschidem cardul, trebuie să scoatem ascultătorii din stadiu pentru că // când ne mișcăm mouse-ul, rotesc lucrurile, câteodată ambele containere cu avioanele, // deci nu putem roti ambele simultan ca vom termina cu erori de animație stage.removeEventListener (MouseEvent.MOUSE_MOVE, positionPlanes); // trebuie să resetăm pozițiile planurilor în interiorul containerelor resetPlanesPosition (); // rotim containerul din față la 180 de grade și setăm x la 0, // pentru că am compensat planurile mai devreme acum se rotește în consecință. TweenMax.to (front_container, 1.4, rotationY: 180, x: 0, peComplete: function () stage.addEventListener (MouseEvent.MOUSE_MOVE, positionContainer);); TweenMax.to (back_container, 1.4, x: 0); // după rotație adăugăm un nou ascultător mouse-ului. de data aceasta pentru a repoziționa containerul principal.
Același lucru pentru închiderea cărții:
funcția publică closeCard () // când închidem cardul pașii sunt foarte asemănătoare cu atunci când ne deschidem. stage.removeEventListener (MouseEvent.MOUSE_MOVE, positionContainer); // diferenta este locul in care resetam rotatia principala a containerului card_container.rotationY = card_container.rotationX = 0 // resetam containerele fata si spate 'x si rotatieY TweenMax.to (front_container, 1.4, rotationY: 0, x: - 350, onComplete: funcția () stage.addEventListener (MouseEvent.MOUSE_MOVE, positionPlanes);); TweenMax.to (back_container, 1.4, x: -350); // și după animație adăugăm acțiunea anterioară de mișcare a mouse-ului pentru a poziționa planurile
Acest lucru se numește ori de câte ori mouse-ul este mutat în timp ce cardul este închis:
Poziția funcției privatePlanes (eveniment: Event): void // se rotește între -25º și 25º în funcție de poziția mouse-ului 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 // trebuie doar să adăugăm 180 la fețele care ar trebui să fie împotriva noastră front_inside.rotationY = back_cover.rotationY = ((stadium.mouseX / stage.stageWidth * 50) - 25) + 180
Aceasta se numește ori de câte ori mouse-ul este mutat în timp ce cardul este deschis:
funcția privată de pozițieContainer (eveniment: Eveniment): void // la fel ca avioanele. se rotește între -25 ° și 25 ° în funcție de poziția mouse-ului card_container.rotationY = (stage.mouseX / stage.stageWidth * 50) -25 card_container.rotationX = (stadium.mouseY / stage.stageHeight * 50) - 25
Aceasta se numește atunci când se face clic pe cartela pentru a se deschide:
funcția privată resetPlanesPosition () // numele funcției sais it all, rotește avioanele înapoi la poziția inițială creată 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
Ultimul pas este în mod evident redarea ferestrei de vizualizare, după care trecem la clasa de documente.
funcția privată render (eveniment: Eveniment): void // singleRender este o funcție BasicView care activează renderul în acel moment dat. singleRender ();
Acesta este sfârșitul clasei. Nu uitați să adăugați brațele de încheiere curl.
Nu vom schimba nimic altceva în clasa CardViewport, deci nu ezitați să obțineți sursa din fișierul zip și să o comparați cu propria dvs..
Acest pas este destul de simplu, trebuie doar să asociăm cardul deschis și să închidem acțiunile cărții la buton. Înainte de aceasta, să importăm următoarele clase în pachetul nostru:
pachet import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; import flash.media.Sound; // reamintește ziua de naștere.mp3? acesta va fi adăugat aici import flash.net.URLRequest;
Din nou, nimic fantezist, extinde MovieClip și creează un obiect de sunet:
public class Main extinde MovieClip private var birthday_song: Sound
Iată un sfat pentru voi: pentru a preveni erorile nula inițializa comenzile dvs. numai după ce clasa a fost adăugată la scenă. În acest fel, sunteți sigur că tot ceea ce încercați să accesați este prezent.
funcția publică Main (): void addEventListener (Event.ADDED_TO_STAGE, init)
... și aceasta este funcția care va fi rulată când clasa de documente a fost adăugată la scenă:
funcția privată init (eveniment: Event): void removeEventListener (Event.ADDED_TO_STAGE, init) // nu mai avem nevoie de aceasta open_mc.label_txt.text = "_! OPEN CARD! _" // Etichetează butonul open_mc.buttonMode = adevărat; // Setează butonul pentru a acționa ca un buton open_mc.mouseChildren = false; // Dezactivează evenimentele mouse-ului de pe copiii open_mc open_mc.addEventListener (MouseEvent.CLICK, openCard) // Adaugă un ascultător de evenimente la clicul mouse-ului
Această funcție se va executa atunci când se face clic pe cartela dacă este închisă:
funcția privată openCard (eveniment: MouseEvent): void open_mc.removeEventListener (MouseEvent.CLICK, openCard); // elimină deschiderea ascultătorului viewport.openCard (); // accesați portul de vizualizare pentru a deschide cardul (amintiți-vă că l-am setat publicului mai devreme?) open_mc.label_txt.text = "_! CLOSE CARD! _" // modifică eticheta open_mc.addEventListener (MouseEvent.CLICK, closeCard) // adaugă un ascultător pentru a închide cardul cu mouse-ul pe click birthday_song = sunet nou (new URLRequest ("birthday.mp3")); // incarca melodia ziua de nastere birthday_song.play (); // redă melodia zilei de naștere Acest lucru este, în esență, același ca openCard (), dar în sens invers. ;)
funcția privată closeCard (eveniment: MouseEvent): void open_mc.removeEventListener (MouseEvent.CLICK, closeCard) viewport.closeCard (); open_mc.label_txt.text = "_! OPEN CARD! _" deschide_mc.addEventListener (MouseEvent.CLICK, openCard)
Terminat. Nu există secrete în această clasă de documente, este destul de drept înainte. Nu uitați să adăugați brațele de încheiere curl.
Aș dori să văd că evoluezi din acest tutorial luând câteva dintre sfaturile pe care ți le-am dat, de la ADDED_TO_STAGE la wrapperul displayObject3d, folosind o clasă de tweening pentru a roti și a muta un obiect 3d. Luați această carte și faceți-o singură.
La mulți ani Activetuts +! Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
