Exclusive Freebie: The Piecemaker XML Gallery
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Det 1ste April! Mens jeg ikke vil foreslå at du tar alt For å sparke oss i stil, her er kjempebra Piecemaker galleriet opprettet av Björn fra Modularweb. Foruten freebie, vil du finne omfattende dokumentasjon og en tut forklarer de innfødte 3D funksjonene i Flash CS4. Over til deg, Björn .. Oppdatering: Nå kan du hente den nyeste versjonen: The Piecemaker 2 for å dra nytte av noen strålende tilføyelser, inkludert WordPress plugin Piecemaker, en 3D Flash image rotator galleri i reneste forstand av ordet. Det er Open Source, så gjerne laste den ned, bruke det i alle prosjekter du liker, lære av det, endre det og forbedre det hvis du kan. Vi vil gjerne se hva du gjør med det. Selvfølgelig det er ingen bindende tilstand, men vi vil gjerne vise frem arbeidet ditt på den offisielle Piecemaker hjemmeside. Ideen om galleriet ble trolig født da jeg først så CU3ER image rotator av den briljante Stefan Kovac gjennomført på en nettside. Jeg var spesielt fascinert av effekten av å ha klippet et bilde opp i biter, snu elementene og gjenskape et nytt bilde fra dem. Fra den dagen jeg tenkte på å lage et galleri med fokus på en slik effekt og spille med det. Med bare noen få variabler denne effekten blir ekstremt allsidig. Den Piecemaker bruker den mektige Tweener motor fra Caurina, som gjør det støtter mange tween typer for overgangene, som Cubic, Bounce eller Elastic. Det er massevis av muligheter for å tilpasse galleriet, så gå videre, laste det ned og begynne å spille! I denne opplæringen vil du lære hvordan du lager en vri kube med mors 3D motoren Flash CS4. En snu kuben, slik som dette, er en av de viktigste elementene i Piecemaker image rotator galleriet. Denne trinnvise opplæringen vil dekke noen av de grunnleggende problemer når du arbeider med de innfødte Flash 3D-motor, . med særlig fokus på forskjellen mellom dybden i forhold til z-aksen og dybde på visningslisten Dette er en forhåndsvisning av hva vi sikter til i denne rask tutorial: Vi starter med å lage en enkel kube med ingen bevegelse i det hele tatt I dette trinnet vi legge til en lytter å skape vendebevegelsen. Følgende kode legges under koden til forrige trinn: Dette er allerede ute ganske mye slik vi ønsker det. Imidlertid har avviket mellom dybde på z-aksen og dybde i forhold til rekkefølgen i listen displayet ikke blitt rørt ennå. For å visualisere dette problemet vi tildele forskjellige farger til de ulike sider av kuben. Å tildele forskjellige farger skaper vi en farge array og tildele farger basert på denne tabellen i for Det vi finner er at sidene holde orden på visningslisten. Den røde siden, som er på toppen av listen, aldri er skjult av noen annen side, selv om den er slått på baksiden av kuben. Den blå siden på bunnen av listen skjermen er alltid skjult av de andre sidene, selv når vende bevegelsen bringer det foran alle de andre. Selvfølgelig er det snakk om to forskjellige typer dybde her. Dybden skapt av native Flash 3D-motoren er mer av en pseudo 3D-effekt. Alle endringer av z eiendom eller rotationX, rotationY, rotationZ, etc. bare føre perspektiv deformasjon av objektet, men de skaper ikke en ekte 3D-rom. Tross alt, er programmet fortsatt 2D. Dette tvinger oss til å kontrollere visningslisten manuelt til utgangspunktet falsk 3D-plass. Vi trenger en automatisme å sjekke hvilken side som er foran på hvilket tidspunkt av bevegelsen For å bokstavelig dele problemet i to, vi kan skape et annet element av kuben -. En side, som alltid er foran de andre. I dette tilfellet ville dette være venstre side. Derfor holder vi kuben koden slik den er, og bare legge til følgende kode rett etter for Nå må vi kontrollere bare to sider på en gang i stedet for fire, som de to andre er alltid skjult av venstre side. Vi trenger fortsatt automatisme for disse to sidene skjønt. Følgende swf viser deg hvor vi er nå For å styre rekkefølgen på sidene på listen skjerm, må vi bytte dem rundt stadig. For å holde styr på sidene, vi gir hver side et navn som skal refereres, når indeksene er endret Det er det for nå. Her er resultatet: Her er hele koden for deg å sjekke ut: De innfødte Flash 3D-funksjonalitet gir oss noen ganske praktiske funksjoner for å skape grunnleggende 3D effekter med ingen innsats samtidig holde filstørrelsen til et minimum. Men når vi begynner å grave litt dypere og prøve å lage noen mer komplekse 3D-scener eller effekter, vi snart oppdage sine grenser. En snu kube kan gjøres med litt stresset, et mer komplekst miljø som den Piecemaker galleriet forårsaker noen alvorlige hodepine, som listen skjerm må overvåkes og oppdateres kontinuerlig. Det er mulig, selvsagt, men jeg ville tviler på at det er fornuftig å prøve å løse mer komplekse oppgaver på denne måten. Personlig elsker jeg 3D-programmer og de innfødte 3D er en flott måte å komme i gang i Flash 3D. Vi må være klar, men om hvor det er fornuftig å bruke det - og hvor det ikke. Det er genialt for å lage enkle effekter uten å øke filstørrelsen. For mer komplekse oppgaver vi må innrømme at det ikke er gjennomførbart, som det er, tross alt, bare en pseudo effekt. Dette er hvor "ekte" 3D-motorer som Papervision3D bør komme inn i bildet. Takk for lesing, jeg håper du likte tut og ha det gøy med Piecemaker galleriet! Anmeldelser
på Tuts + sider på alvor i dag, er dette innlegget ingen spøk. I dag ser begynnelsen av månedlige Eksklusive Freebies -! Høykvalitets filer (nettsted maler, gallerier, mediespillere, ikonsett ..) laget eksklusivt for Activetuts + lesere
Last Dette Eksklusiv Freebie Demo se det på nettet
Den Piecemaker
Ideen
Opprette en Turning Cube
< h2> Trinn 1: En enkel Cube
//Variabler å sette kubedimensjoner dynamicallyvar cubeWidth: int = 100; Var cubeHeight. int = 200; //Opprette og posisjonering kuben (den tomme beholder for sidene) Var kube: MovieClip = new MovieClip (); cube.x = 300; cube.y = 230; cube.rotationY = -30; //Slå den ved 30 grader for å se det fra sideaddChild (kube); //Starter en løkke for å lage de fire sidene av cubefor (var i: int = 0; i < 4; i ++) {var side: MovieClip = new MovieClip (); side.rotationX = -90 * i; //Legge flater til overflaten sider var: MovieClip = new MovieClip (); surface.x = cubeWidth /-2; surface.z = cubeHeight /-2; surface.graphics.beginFill (0xff0000, 0,6); surface.graphics.drawRect (cubeWidth /-2, cubeHeight /-2, cubeWidth, cubeHeight); surface.graphics.endFill (); side.addChild (overflate); cube.addChildAt (side, 0);}
Trinn 2: Legge Movement
//Økende rotationX av tre med hver ny frameaddEventListener (Event.ENTER_FRAME, turnCube), funksjon turnCube (e: Hendelses) {cube.rotationX + = 3;}
Trinn 3: Dybde Issue
sløyfe
//Variabler å sette kubedimensjoner dynamicallyvar cubeWidth: int = 100; Var cubeHeight. Int = 200; //Opprette en matrise med farger for å bli tildelt de sidesvar farger: Array = [0xff0000, 0xFFFF00, 0x00FF00, 0x0000FF]; //Opprette og posisjonering kuben (den tomme beholder for sidene) Var kube: MovieClip = new MovieClip (); cube.x = 300; cube.y = 230; cube.rotationY = -30; //Slå den ved 30 grader for å se det fra sideaddChild (kube); //Starter en løkke for å lage de fire sidene av cubefor (var i: int = 0; i < 4; i ++) {var side: MovieClip = new MovieClip (); side.rotationX = -90 * i; //Legge flater til overflaten sider var: MovieClip = new MovieClip (); surface.x = cubeWidth /-2; surface.z = cubeHeight /-2; //Fylling overflatene med utvalg farger i stedet for bare rød surface.graphics.beginFill (farger [i], 1); surface.graphics.drawRect (cubeWidth /-2, cubeHeight /-2, cubeWidth, cubeHeight); surface.graphics.endFill (); side.addChild (overflate); cube.addChildAt (side, 0);}
Trinn 4: Analysere Issue
sløyfe
//Opprette venstre side av cubevar igjen: MovieClip = new MovieClip (); venstre.. x = cubeWidth /-1; left.rotationY = 90; left.graphics.beginFill (0x000000, 1); left.graphics.drawRect (cubeHeight /-2, cubeHeight /-2, cubeHeight, cubeHeight); left.graphics.endFill (); cube.addChild (venstre);
Trinn 5: Veksle mellom sider rundt
//Et navn blir lagt til hver side i for loop ... for (var i.: Int = 0; i < 4; i ++) {var side: MovieClip = new MovieClip (); side.rotationX = -90 * i; side.name = "side" + i; ...} ... //Nå må vi forlenge svingfunksjon for å sjekke tilstanden rotation.var newFront: int = 1; //Det neste side for å være i frontvar checkRotation: int = 0; //Sjekker hver 45 grader av rotationvar rotationSpeed: int = 3; //Kontrollere rotasjonshastighet dynamisk addEventListener (Event.ENTER_FRAME, turnCube), funksjon turnCube (e: Hendelses) {//Økende selve rotasjonen og checkRotation variable cube.rotationX + = rotationSpeed; checkRotation + = rotationSpeed; //Bytte den nåværende og den neste side å være foran etter 45 grader. if (checkRotation == 45) {cube.swapChildrenAt (2, 3); } //Å få den neste i rekken etter 90 grader og tilbake checkRotation if (checkRotation == 90) {checkRotation = 0; newFront ++; if (newFront == 4) {newFront = 0; } Cube.swapChildren (cube.getChildAt (2), cube.getChildByName ("side" + (newFront))); }}
Trinn 6: Og til slutt
//variabler å sette kubedimensjoner dynamicallyvar cubeWidth: int = 100; Var cubeHeight: int = 200; //Rekken holde fargene på sidesvar farger: Array = [0xff0000, 0xFFFF00, 0x00FF00, 0x0000FF] //lage og plassere kube (den tomme beholderen for sider) Var kube: MovieClip = new MovieClip (); kube. x = 300; cube.y = 230; cube.rotationY = -30; //snu den ved 30 grader for å se det fra sideaddChild (kube); //Starter en løkke for å lage de fire sidene av cubefor (var i: int = 0; i < 4; i ++) {var side: MovieClip = new MovieClip (); side.rotationX = -90 * i; side.name = "side" + i; //Legge flater til overflaten sider var: MovieClip = new MovieClip (); surface.x = cubeWidth /-2; surface.z = cubeHeight /-2; surface.graphics.beginFill (farger [i], 1); surface.graphics.drawRect (cubeWidth /-2, cubeHeight /-2, cubeWidth, cubeHeight); surface.graphics.endFill (); side.addChild (overflate); cube.addChildAt (side, 0);} //skape venstre side av cubevar venstre: MovieClip = new MovieClip (); left.x = cubeWidth /-1; left.rotationY = 90; left.graphics.beginFill (0x000000 , 1); left.graphics.drawRect (cubeHeight /-2, cubeHeight /-2, cubeHeight, cubeHeight); left.graphics.endFill (); cube.addChild (venstre); //Slutt den utvidede rotasjon functionvar newFront: int = 1; //Det neste side for å være i frontvar checkRotation: int = 0; //Sjekker hver 45 grader av rotationvar rotationSpeed: int = 3; //Kontrollere rotasjonshastighet dynamisk addEventListener (Event.ENTER_FRAME, turnCube), funksjon turnCube (e: Hendelses) {//Økende selve rotasjonen og checkRotation variable cube.rotationX + = rotationSpeed; checkRotation + = rotationSpeed; //Bytte den nåværende og den neste side å være foran etter 45 grader. if (checkRotation == 45) {cube.swapChildrenAt (2, 3); } //Å få den neste i rekken etter 90 grader og tilbake checkRotation if (checkRotation == 90) {checkRotation = 0; newFront ++; if (newFront == 4) {newFront = 0; } Cube.swapChildren (cube.getChildAt (2), cube.getChildByName ("side" + (newFront))); }}
Konklusjon