Quick Tips: Full Screen Tidslinje Presentasjon
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. . Ikke gå glipp av
I denne hurtig Tips vi vil opprette en full skjerm lysbildepresentasjon med Flash
Trinn 1:. Sett opp Flash Fil
Opprett en ny Flash-fil og lagre som Presentation.fla Opprett en ny .as fil - "Presentation.as" - for å være dokumentet klassen (se denne Quick Tips for mer om dokument klasser) Hvis du vil bytte til fullskjermmodus, må vi endre scenen skjermen staten. Legg til en ny import uttalelse ovenfor klassen erklæring for StageDisplayState Under normale omstendigheter, Flash krever fullskjermmodus for å være initiert av MouseEvent, men når du ser en swf utenfor en nettleser ( projektormodusen) dette er ikke et problem. Likevel, bare for å være sikker (og i tilfelle du ønsker å sette presentasjonen på nettet), bruker vi en prøve /fangst statement å inneholde Security Feil som ville bli kastet. Hvis du publiserer og åpne swf, vil du se at det lanseres direkte i fullskjermmodus (trykk ESC for å avslutte) . Vår presentasjon vil jobbe med fremover og bakover gjennom tidslinjen. Flash har ikke en metode for å spille tidslinjen i revers, slik at vi blir nødt til å lage vår egen ved hjelp av en timer for å flytte spillehodet gjennom rammene på tidslinjen. Først importerer vi tidtakeren og Timerevent klasser Deretter erklærer vi klassen vars for tidtakeren og også en boolsk for å holde orden på avspillingen . retning Så, i klassen konstruktør, setter vi verdiene for disse klasse vars. Vi gir timeren en forsinkelse lik bildefrekvens satt i dokumentegenskapene Sist, setter vi opp hendelsesbehandling for timer I dette trinnet, vil vi lage tre enkle metoder for å kontrollere bevegelsen langs tidslinjen. Ett for stopp, en for spill frem og en annen til å spille i revers Tastaturet vil bli brukt til å endre lysbilder i presentasjonen vår, så vi må sette opp tastaturet hendelser og lyttere. Igjen, importerer vi noen klasser Deretter legger KeyboardEvent lytteren til scenen Sist, lage en metode for å håndtere KeyboardEvent Nå kan vi gå videre til å bygge tidslinjen. For dette, rett og slett bygge noen lysbilder, og lage tidslinje animasjoner til overgangen mellom dem. Opprett en handlinger lag, og for hvert lysbilde, legge stopTimeline (); til en keyframe. Tidslinjen panel skal se omtrent slik ut: I tillegg til å bygge lysbildeoverganger på tidslinjen, kan vi også bruke Actionscript. I dette eksempelet vil vi bruke TextAnimMaker og Greensock er TweenLite. For å laste ned disse Actionscript-biblioteker, gå til Google Code for TextAnimMaker og GreenSock for TweenLite. Når du har lastet ned filene, fange både greensock Hotell og flupie Deretter importerer vi disse kode biblioteker inn i hoveddokumentet klasse slik at de vil være tilgjengelig for oss å bruke på tidslinjen Opprett en ny MovieClip og legge den til på scenen. Gi den en forekomst navn slideTextAnimation Dette vil skape en morsom effekt der hver bokstav er animert på scenen. For mer om TextAnimMaker, sjekk ut denne QuickTip Pakk opp presentasjonen ved å animere slideTextAnimation Takk for at du leser dette rask spiss, og jeg håper din neste presentasjon er en som vil blåse alle bort med sin prangende storhet!
. I Properties Panel, angi størrelsen å matche innstillingene til skjermen størrelse. For eksempel, er en standard laptop WXGA-skjerm 1280 x 800 piksler. Å levere en presentasjon fil til noen som ikke har Flash Player installert på maskinen sin, velg Windows og /eller Macintosh Projector boksene i Publish Settings Panel
Trinn 2:. Sett opp Hoveddokument Class
pakke {import flash.display.. MovieClip; public class Presentasjon strekker MovieClip {offentlig funksjon Presentasjon () {}}}
Trinn 3: Gå Full Screen
import flash.display.StageDisplayState;.
Offentlig funksjon Presentasjon () {offentlig funksjon Presentasjon ( ) {try {stage.displayState = StageDisplayState.FULL_SCREEN; } Catch (err: Security) {//Må være i projektormodusen for fullskjerm visning}}}
Trinn 4: Lag spillehodet Timer
import flash.events.TimerEvent;. Import flash.utils.Timer;
privat Var isPlayingForward: Boolean, private Var timelineTimer: Timer;
isPlayingForward = true;. TimelineTimer = new Timer (1000 /stage.frameRate); timelineTimer.addEventListener (TimerEvent.TIMER, timelineTimerHandler);
privat funksjon timelineTimerHandler (te: Timerevent):. void {if (isPlayingForward) this.nextFrame (); annet this.prevFrame ();}
Trinn 5: Lag Tidslinje kontrollmetoder
offentlig funksjon stopTimeline (): void {stop ();. timelineTimer.stop ();} offentlig funksjon playForward (): void {isPlayingForward = true; timelineTimer.start ();} offentlig funksjon playReverse (): void {isPlayingForward = false; timelineTimer.start ();}
Trinn 6: Konfigurer Tastatur Lyttere
import flash.events.KeyboardEvent;. Import flash.ui.Keyboard;.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler );
privat funksjon keyboardHandler (event: KeyboardEvent): void {if (event.keyCode == Keyboard.RIGHT) playForward ();. if (event.keyCode == Keyboard.LEFT) playReverse ();}
Trinn 7: Bygge Slides
Trinn 8: Lag lysbildeoverganger med KODE
kataloger fra deres individuelle com
kataloger og kopiere dem inn i en com Anmeldelser katalog i prosjektmappen
import com.greensock.TweenLite;.. import com. greensock.easing. *; import com.flupie.textanim. *;
. Inne i MovieClip, skape en dynamisk Textfield med litt tekst inni og gi den en forekomst navn slideText
. Nå, i handlinger lag på tidslinjen, legge manuset under
stopTimeline (); Var slideAnimateIn. TextAnim = new TextAnim (slideTextAnimation.slideText); slideAnimateIn.mode = TextAnimMode.RANDOM; slideAnimateIn.interval = 20; slideAnimateIn .blocksVisible = false; slideAnimateIn.effects = growEffect; slideAnimateIn.start (); funksjon growEffect (blokk: TextAnimBlock): void {TweenLite.from (blokk, en, {scaleX: 0, Scaley: 0, letthet: Elastic.easeOut} );}
Trinn 9:. The Big Finish
MovieClip av scenen og fylle ut tidslinjen med resten av lysbildene. Kanskje du kanskje har lyst til å prøve noen 3D Motion tweening eller flere kule overganger med TextAnimMaker og TweenLite.