Create en iPhone-lignende Flip Effect i Flash Bruke Actionscript 3.0
Del
Del
en
Del
Dette Cyber Mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi gjenskape Flip Effect brukt i iPhones brukergrensesnitt ved hjelp av Flash CS4 og Actionscript 3.0.
Endelig resultat Preview
La oss ta en titt på det endelige resultatet vi skal jobbe mot (klikk på "i" -knappen):
Trinn 1 - Kort oversikt
Her er innerst inne hva vi skal gjøre. Vi trenger to skjerm Objects å vende, en i front som vil være på scenen og synlig i begynnelsen, og en som vi kommer til å avsløre når effekten er ferdig; Dette objektet vil være i biblioteket. I dette eksempelet bruker jeg movieclips, men du kan bruke noen av skjerm Objekter (Button, Component, Bitmap, Sprite, Shape, etc.).
Vi vil opprette en ActionsScript 3 Klasse for effekten Da noen kode i FLA å tilpasse effekten som vi ønsker
Trinn 2
Opprett en ny Actionscript 3.0 dokument. (Fil > New ...). Det kan være nødvendig å bruke Flash CS4-versjonen; vi kommer til å eksportere til Flash Player 10 på grunn av rotationY Sett Stage størrelse til 320 x 480px (som er det iPhone oppløsning, men du kan bruke en hvilken som helst størrelse du ønsker), og deretter sette en bakgrunnsfarge. . Jeg bruker # 111111 Gi nytt navn det første laget til å UI Begynne å lage din første visning. Dette er utsikten som vil bli sett som standard, kan du bruke og tegne hva du vil. Konverter den til en MovieClip (F8) og sette forekomst navn til firstView. Lag den andre visningen. Dette er utsikten som vil være synlig når effekten er ferdig. Konverter den til en MovieClip, name it SecondView Hotell og sjekk Export for Action Nå må vi lage et objekt som aktiverer virkningen; en knapp vil gjøre jobben. Lag en knapp, setter sin posisjon og gi den navnet infoButton I Second View, opprette en annen knapp og gi den navnet < em> doneButton Lagre arbeidet og la oss komme inn i koden! Jeg antar du allerede har en grunnleggende forståelse av Action 3.0. . Hvis du har et søkeord bestemt tvil kan du se Flash Hjelp Opprett en ny Actionscript-fil (Fil > New ...) Nå som du har din som fil klar, begynner å skrive: De tre første klassene håndtere all animasjonen vi skal bruke på effekten. I dette tilfellet, jeg bruker en Strong lettelser for å få en mer iPhone-lignende flip, men du kan endre dette for å få en annen effekt. De andre tre klasser håndtere skjermelementer, Timer objekt som vi skal bruke for å sjekke fremdriften av animasjon og den siste som håndterer eventuelle hendelser som vi kan bruke Utvide Sprite klassen vil gjøre vår klasse arver alle metoder, egenskaper og funksjoner Sprite har. I dette tilfellet bruker vi den til å få tilgang til addChild () -metoden Erklærer variabler å bruke utenfor hovedfunksjonen (flip), de får sine verdier fra "konstruktør funksjon" og har selvforklarende navn Konstruktøren funksjonen representerer klassen inneholder malen som nye objekt tilfeller er opprettet. Dette er funksjonen vi trenger å bruke for å ringe klassen. Twitter /* Flip startfunksjon, med noen parametre slik at du kan tilpasse din Flip som du ønsker, må du huske disse er den samme som den variable * /public funksjon Flip (frontObject : Displayobject, backObject: Displayobject, TimeInSeconds: int, flipFromSide: String, secondViewIsInLibrary: Boolean): void {firstView = frontObject; secondView = backObject; varighet = TimeInSeconds; initFromSide = flipFromSide; addSecondView = secondViewIsInLibrary; animateFirstView (); //Denne funksjonen animerer den første delen av flip.timer.addEventListener (TimerEvent.TIMER, checkFlip); //Vi sjekker om det er på tide å animere Second Vis} Denne funksjonen er i ansvaret for å animere den første visningen. Det reduserer størrelsen på den første visningen og sjekker siden Denne funksjonen vil sjekke rotationY eiendom for å kontrollere animasjon av Second Vis Denne funksjonen animerer Second View. . Det er nesten det samme som den første animasjonsfunksjonen Lagre Actionscript-fil som "Flip.as ' I din Flash-fil, åpne Handlinger panelet og skrive: Lagre arbeidet og sjekke at alt er i orden. Ta en titt på forekomstnavn, teste koden din, søke etter feil, eller kanskje til og med endre grafikken. Test din film å se denne kul effekt i aksjon! Pass på at alt fungerer som forventet; hvis ikke komme tilbake til koden eller FLA å ta en titt. Hvis du ikke finner feilen, kan du feilsøke filmen ved å trykke Shift + Command + Return, eller gå til Debug > Debug Movie Husk:. Du har mange alternativer for å gjøre effekten akkurat som du vil. Spill med parametrene, skjerm Objekter og hvis det er noe du synes mangler, kan du alltid redigere klasse! Jeg håper du likte denne opplæringen, takk for lesing!
eiendommen blir utilgjengelig i eldre versjoner. Det finnes noen triks for å få Flash CS3 til å eksportere Player 10 innhold, kan du søke på nettet om du gjør det hvis du ikke har CS4.
Trinn 3
Trinn 4
, deretter opprette en annen og name it Kode
. Blokkere Kode
lag for å unngå å plassere uønskede gjenstander på den.
Trinn 5
Trinn 6
Trinn 7
Trinn 8
avkrysnings (husk at dette synet ikke vil være på scenen, vi kaller det fra prosedyrepanelet).
Trinn 9
. Denne knappen vil være i den første visningen. I mitt eksempel har jeg laget på knappen inne
FirstView MovieClip. Du kan sette den hvor du vil, bare husk hvor det er slik at du ikke blir forvirret i koden.
Trinn 10
. Denne knappen vil snu visningen tilbake.
Trinn 11
Trinn 12 - Importere Obligatoriske Classes
.
pakke Classes {/* Import kreves klasser for animasjon * /import fl.transitions.Tween, import fl.transitions.TweenEvent; import fl.transitions.easing .Strong; /* Import nødvendig klasser * /import flash.display. *; import flash.utils.Timer;. import flash.events *;
Trinn 13 -. Utvide Class
//Vi trenger å utvide klassen slik at vi kan bruke den addChild () method.public klasse Flip strekker Sprite {
Step 14 - Erklærte Variabler
privat Var firstView: Displayobject; private Var secondView. Displayobject; privat Var initFromSide: String; privat Div varighet: int; private Var flipTween: Tween; private Var addSecondView: Boolean; //Dette brukes når den andre visningen er allerede på scenen og ikke i biblioteket, bare i case.private Var lagt: Boolean = false; privat Var timer: Timer = new Timer (1);
Trinn 15 -. The Constructor Funksjon
Trinn 16 - The Animate Function
privat funksjon animateFirstView (): void {flipTween = new Tween (firstView, "scaleX", Strong.easeIn, 1, 0,5, varighet /2, true); //This linjene er ansvarlig for skalaen animasjon, flipTween = new Tween (firstView, "Scaley", Strong.easeIn, 1,0.5, varighet /2, true); //De reduserer utsikten til halvparten av sin størrelse if (initFromSide == "venstre") //Hvis animasjonen starter fra venstre, vi animere fra venstre! {flipTween = new Tween (firstView, "rotationY", Strong.easeIn, 0 90, varighet /2, true); //Dette er en viktig linje, endrer det rotationY eiendommen for å gjøre den fliptimer.start (); //Vi starter tidtakeren for å sjekke når vi kan endre movieclips} else if ( initFromSide == "riktig") {flipTween = new Tween (firstView, "rotationY", Strong.easeIn, 0, -90, varighet /2, true); timer.start ();}}
parameter for å starte animasjonen
Trinn 17 -. Kontroll til rett plass
privat funksjon checkFlip (e: Timerevent): void {if (initFromSide == "left" & & firstView.rotationY > = 90) //Hvis animasjonen var. startet fra venstre og den første visningen er klar til å slå {timer.stop (); //Vi stopper sjekke når du skal bytte visninger firstView.visible = false; //Skjuler First View if (addSecondView & &! Tilføyd) //Hvis Second Vis må legges fra bibliotek og har ikke blitt lagt {secondView.x = firstView.x; //Setter Second Vis positionsecondView.y = firstView.y; addChild (secondView); //Legg Second Viewadded = true; //Set lagt til sann å unngå å legge mye av Second Views} else {/* Hvis Second View er i stadium * /secondView.x = firstView.x; secondView.y = firstView.y;} animateSecondView (); //besjeler Second View, på samme måte som den første er animert, skjuler den andre Se og unhides den første visningen når du er ferdig } else if (initFromSide == "riktig" & & firstView.rotationY < = -90) {timer.stop (); firstView.visible = false; if (addSecondView & &! tilsatt) {secondView.x = firstView.x; secondView.y = firstView.y; addChild (secondView), lagt = true;} else {/* Hvis Second View er i fase * /secondView.x = firstView.x; secondView.y = firstView.y;} animateSecondView ();}}
Trinn 18 - Animere Second Vis
privat funksjon animateSecondView (): void {flipTween = new Tween (secondView, "scaleX", Strong.easeOut, 0.5,1, varighet /2, true); flipTween = new Tween (secondView, "Scaley", Strong.easeOut, 0.5,1, varighet /2, true); if (initFromSide == "venstre") {flipTween = new Tween (secondView, "rotationY", Strong.easeOut, -90 , 0, varighet /2, true); firstView.visible = true;} else if (initFromSide == "riktig") {flipTween = new Tween (secondView, "rotationY", Strong.easeOut, 90,0, varighet /2 , true); firstView.visible = true;.}}}}
Step 19
Trinn 20 - Bruke Class
import Classes.Flip; //Importerer klassen, må du endre 'klasser' med dine egne klasser folder.var snudd: Boolean = false; //Vi bruker denne variabelen for å vite om den første visningen var allerede flipped.var secondView: SecondView = new SecondView (); //Oppretter en SecondView Object, den ene i Libraryvar flip: Flip; //Dette er et eksempel på vår Flip classfunction callFlip (e: MouseEvent): (! Snudd) void {if //Hvis FirstView ikke allerede snudd {firstView.infoButton.visible = false; //Skjuler knappen slik at brukeren ikke kan gjenta effekten når det flipping.flip = new Flip (firstView, secondView, 2, "venstre", true); //Dette er hovedlinjen, kaller det klasse indikerer wich movieclips vende, tiden effekten vil ta, wich side å starte fra, og hvis den andre MovieClip er i Library.addChild (flip); //Vi må legge til klassen for å få addChild () metode for å arbeide, dette er et svært vanlig problem når du bruker addChild () inne i en klasse, nå vet du!;) venda = true; //Set snudd til sann for å vite at den første visningen var allerede animatedsecondView.doneButton.visible = true; //Skjul på knappene slik at vi kan bruke dem againsecondView.buttonBar.visible = true; //Dette er bare den øverste linjen i Second Vis} else if (snudd) //Hvis venda er sant det er på tide å vende secondView, kan du sette nye parametere for å få en helt diferent animasjon! {SecondView.doneButton.visible = false; flip = new Flip (secondView, firstView, 2, "riktig", true); addChild (flip); tuppet = false; firstView.infoButton.visible = true; secondView.buttonBar.visible = false;}} firstView.infoButton .addEventListener (MouseEvent.MOUSE_DOWN, callFlip); //Legger lytterne til buttonssecondView.doneButton.addEventListener (MouseEvent.MOUSE_DOWN, callFlip);
Step 21
Konklusjon