Hurtig Tips Fullskjerm Tidslinje Presentasjon

I denne Quick Tip oppretter vi en fullskjerm presentasjon med Flash.


Trinn 1: Konfigurer Flash-filen

Opprett en ny Flash-fil og lagre som Presentation.fla. I Egenskapspanelet angir du størrelsen som samsvarer med innstillingene på skjermstørrelsen. For eksempel er en vanlig laptop WXGA-skjerm 1280 x 800 piksler. Hvis du vil levere en presentasjonsfil til noen som ikke har flash-spilleren installert på maskinen, velger du Windows og / eller Macintosh Projector-boksene i publiseringspanelet.


Trinn 2: Konfigurer hoveddokumentklassen

Opprett en ny .as-fil - "Presentation.as" - for å være dokumentklassen (se denne Quick Tip for mer om dokumentklasser).

 pakke import flash.display.MovieClip; offentlig klasse Presentasjon utvider MovieClip offentlig funksjon Presentasjon () 

Trinn 3: Gå på fullskjerm

For å bytte til fullskjermmodus må vi endre scenevisningstilstanden. Legg til en ny importere uttalelse over klassedeklarasjonen for StageDisplayState.

 importer flash.display.StageDisplayState;

Under normale omstendigheter krever Flash at fullskjermmodus skal initieres av Mouseevent, men når du ser en swf utenfor en nettleser (projektormodus) er dette ikke et problem. Likevel, for å være trygg (og hvis du vil presentere presentasjonen din online), bruker vi en prøve / catch-setning for å inneholde sikkerhetsfeilen som ville bli kastet.

 offentlig funksjon Presentasjon () offentlig funksjon Presentasjon () prøv stage.displayState = StageDisplayState.FULL_SCREEN;  fangst (feil: SecurityError) // Må være i projektormodus for fullskjermvisning

Hvis du publiserer og åpner swf, vil du se at den starter opp i fullskjermmodus (trykk ESC for å avslutte).


Trinn 4: Lag Playhead Timer

Vår presentasjon vil fungere ved å gå frem og tilbake gjennom tidslinjen. Flash har ikke en metode for å spille tidslinjen i omvendt, så vi må lage vår egen ved hjelp av en tidtaker for å flytte spillehodet gjennom rammene på tidslinjen. Først importerer vi Timer og Timerevent klasser.

 importer flash.events.TimerEvent; importere flash.utils.Timer;

Deretter erklærer vi klassen vars for timeren og også en boolsk for å holde oversikt over avspillingsretningen.

 privat var isPlayingForward: Boolean; privat var tidslinjeTimer: Timer;

Så, i klassekonstruktøren, setter vi verdiene for denne klassen vars. Vi gir timeren en forsinkelse lik rammeprisen som er angitt i dokumentegenskapene.

 isPlayingForward = true; timelineTimer = ny Timer (1000 / stage.frameRate); tidslinjeTimer.addEventListener (TimerEvent.TIMER, tidslinjeTimerHandler);

Sist, vi satt opp hendelseshandleren for timeren.

 privat funksjon timelineTimerHandler (te: TimerEvent): void if (isPlayingForward) this.nextFrame (); annet this.prevFrame (); 

Trinn 5: Lag tidslinjekontrollmetoder

I dette trinnet vil vi opprette tre enkle metoder for å kontrollere bevegelsen langs tidslinjen. En for stopp, en for spill fremover og en annen til å spille i omvendt.

 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 tastaturlyttere

Tastaturet vil bli brukt til å bytte lysbilder i presentasjonen, så vi må sette opp tastaturhendelsene og lytterne. Igjen importerer vi noen klasser.

 importer flash.events.KeyboardEvent; importere flash.ui.Keyboard;

Deretter legger du KeyboardEvent-lytteren til scenen.

 stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardhandler);

Sist, lag en metode for å håndtere KeyboardEvent.

 privat funksjon keyboardHandler (event: KeyboardEvent): void if (event.keyCode == Keyboard.RIGHT) playForward (); hvis (event.keyCode == Keyboard.LEFT) playReverse (); 

Trinn 7: Bygg lysbilder

Nå går vi videre til å bygge tidslinjen. For dette, bare bygge noen lysbilder, og lag tidslinje animasjoner til overgang mellom dem. Lag et handlingslag, og legg til for hvert lysbilde stopTimeline (); til en keyframe. Tidslinjepanelet ditt bør se slik ut:


Trinn 8: Lag slideoverganger med kode

I tillegg til å bygge lysbildeoverganger på tidslinjen, kan vi også bruke ActionScript. I dette eksemplet bruker vi TextAnimMaker og Greensocks TweenLite. For å laste ned disse ActionScript-bibliotekene, gå til Google Code for TextAnimMaker og GreenSock for TweenLite. Når du har lastet ned filene, ta tak i begge greensock og flupie kataloger fra deres individuelle com kataloger og kopier dem til en com katalog i prosjektmappen din.

Deretter importerer vi disse kodebibliotekene i hoveddokumentklassen, slik at de vil være tilgjengelige for oss å bruke på tidslinjen.

 importer com.greensock.TweenLite; importer com.greensock.easing. *; importer com.flupie.textanim. *;

Lag en ny MovieClip og legg den til scenen. Gi det et forekomstnavn på slideTextAnimation. Inne i MovieClip, lag en dynamisk TextField med litt tekst inni og gi den et forekomstnavn på slideText. Nå, i handlingslaget på tidslinjen, legg til skriptet nedenfor.

 stopTimeline (); var slideAnimateIn: TextAnim = ny 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, 1, scaleX: 0, scaleY: 0, ease: Elastic.easeOut); 

Dette vil skape en morsom effekt der hvert brev er animert på scenen. For mer om TextAnimMaker, sjekk ut denne QuickTip.


Trinn 9: The Big Finish

Slå opp presentasjonen ved å animere slideTextAnimation MovieClip av scenen og fyll ut tidslinjen med resten av lysbilder. Kanskje du kanskje liker å prøve litt 3D Motion-tweening eller flere kule overganger med TextAnimMaker og TweenLite.

Takk for at du leser dette raske tipset, og jeg håper at neste presentasjon er en som vil blåse alle sammen med sin prangende storhet!