Quick Tips: Ta et objekt, iPhone App Style

Quick Tips: Ta et objekt, iPhone App stil
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne hurtig Tip, vil jeg vise deg hvordan du oppretter en slette effekt inspirert av iPhone iOS-grensesnittet.




Final Resultatet Preview

La oss ta en titt på det endelige resultatet vi skal jobbe mot:


Trykk og hold "en" -ikonet, klikk på "x" når det ser ut ..



Trinn 1: Kort oversikt

På en pre-laget iPhone-grensesnittet vi vil gjøre bruk av Timer, Tween og mus hendelser for å skape en hyggelig ser effekt for grensesnitt



Trinn 2:. Sett opp din Flash File

Launch Flash og opprette en ny Flash dokument, sette scenen størrelse til 255x496px og bildefrekvensen til 24fps




Trinn 3: Interface


Dette er grensesnittet vi skal bruke, det inkluderer en iPhone 4 mal og noen grafiske elementer som du kan laste ned fra respektive forfatterens nettsted

Det er også et ikon som er et interaktivt element



Trinn 4:.. Action

Dette er den klassen som gjør alt arbeidet. Det viser bare selve arbeids koden, kan du lese kommentarene til fullt ut å forstå hva som skjer ..
privat Var timer: Timer = new Timer (1000); //Tid til å holde museknappen nede på ikonet for å vise slette buttonprivate Var tiltTimer: Timer = new Timer (80); //Tiden for rotasjonen endring, gjør shake effectprivate Var rotationValue: int = 2; //Rotasjonen er ønsket for shakeprivate Var tween: Tween; //En tween eksempel å animere varselet dialogpublic funksjonen main (): void {/* skjul elementer * /hideObjects (appIcon.deleteButton, deleteAlert, darkScreen); /* Legg necesary lyttere * /deleteAlert.cancelBtn.addEventListener (MouseEvent.MOUSE_UP, avbryt); deleteAlert.deleteBtn.addEventListener (MouseEvent.MOUSE_UP, deleteApp); appIcon.deleteButton.addEventListener (MouseEvent.MOUSE_UP, displayAlert); appIcon.addEventListener (MouseEvent.MOUSE_UP, stopTimer); appIcon.addEventListener (MouseEvent.MOUSE_DOWN, pressAndHold);} /* skjul objekter fungere * /private funksjons hideObjects (... objekter): void {for (var i: int = 0; i < objects.length; i ++) { objekter [i] .visible = false; }} /* Starter tidtakeren når musen er nede * /private funksjon pressAndHold (e: MouseEvent): void {timer.start (); timer.addEventListener (TimerEvent.TIMER, showDeleteButton);} /* Hvis musen opp, stopper timeren * /private funksjon stopTimer (e: MouseEvent): void {timer.stop ();} /* hvis hold timeren er ferdig, slette knappen vises, og ikonet rister * /private funksjon showDeleteButton (e: Timerevent): void {timer.stop (); appIcon.deleteButton.visible = true; tiltTimer.addEventListener (TimerEvent.TIMER, tilt); tiltTimer.start ();} /* The shake funksjon, endrer rotasjon hver gang tiltTimer full * /private funksjon tilt (e: Timerevent): void {appIcon.rotation = rotationValue; rotationValue * = 1;} /* hvis sletteknappen trykkes varselet er vist * /private funksjon displayAlert (e: MouseEvent): void {deleteAlert.visible = true; darkScreen.visible = true; tween = new Tween (deleteAlert, "scaleX", Back.easeOut, 0.3,1,0.5, true); tween = new Tween (deleteAlert, "Scaley", Back.easeOut, 0.3,1,0.5, true);} /* fjerner ikonet hvis sletteknappen i varselet er klikket * /private funksjon deleteApp (e: MouseEvent): void {hideObjects (appIcon, deleteAlert, darkScreen);} /* fjerner varsling, stopper tilt og fjerner ikke ikonet, kalt av avbryt-knapp * /private funksjon avbryte (e: MouseEvent): void {hideObjects (appIcon .deleteButton, deleteAlert, darkScreen); tiltTimer.stop (); appIcon.rotation = 0;}



Trinn 5: Dokument Class

Husk å legge klassenavnet til Class-feltet i Publish delen av panelet Egenskaper

<. br>



Konklusjon

Så det du har det! En fin effekt som du kan legge til dine applikasjoner, eksperimentere med sine bruksområder!

Jeg håper du likte denne opplæringen, takk for lesing :)



Previous:
Next Page: