Quick Tips: Full Screen Tidslinje Presentation

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
. 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

Opprett en ny .as fil - "Presentation.as" - for å være dokumentet klassen (se denne Quick Tips for mer om dokument klasser)
pakke {import flash.display.. MovieClip; public class Presentasjon strekker MovieClip {offentlig funksjon Presentasjon () {}}}



Trinn 3: Gå Full Screen

Hvis du vil bytte til fullskjermmodus, må vi endre scenen skjermen staten. Legg til en ny import uttalelse ovenfor klassen erklæring for StageDisplayState
import flash.display.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.
Offentlig funksjon Presentasjon () {offentlig funksjon Presentasjon ( ) {try {stage.displayState = StageDisplayState.FULL_SCREEN; } Catch (err: Security) {//Må være i projektormodusen for fullskjerm visning}}}

Hvis du publiserer og åpne swf, vil du se at det lanseres direkte i fullskjermmodus (trykk ESC for å avslutte) .



Trinn 4: Lag spillehodet Timer

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
import flash.events.TimerEvent;. Import flash.utils.Timer;

Deretter erklærer vi klassen vars for tidtakeren og også en boolsk for å holde orden på avspillingen . retning
privat Var isPlayingForward: Boolean, private Var timelineTimer: Timer;

Så, i klassen konstruktør, setter vi verdiene for disse klasse vars. Vi gir timeren en forsinkelse lik bildefrekvens satt i dokumentegenskapene
isPlayingForward = true;. TimelineTimer = new Timer (1000 /stage.frameRate); timelineTimer.addEventListener (TimerEvent.TIMER, timelineTimerHandler);

Sist, setter vi opp hendelsesbehandling for timer
privat funksjon timelineTimerHandler (te: Timerevent):. void {if (isPlayingForward) this.nextFrame (); annet this.prevFrame ();}



Trinn 5: Lag Tidslinje kontrollmetoder

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
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

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
import flash.events.KeyboardEvent;. Import flash.ui.Keyboard;.

Deretter legger KeyboardEvent lytteren til scenen
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler );

Sist, lage en metode for å håndtere KeyboardEvent
privat funksjon keyboardHandler (event: KeyboardEvent): void {if (event.keyCode == Keyboard.RIGHT) playForward ();. if (event.keyCode == Keyboard.LEFT) playReverse ();}



Trinn 7: Bygge Slides

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:



Trinn 8: Lag lysbildeoverganger med KODE

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
kataloger fra deres individuelle com
kataloger og kopiere dem inn i en com Anmeldelser katalog i prosjektmappen

Deretter importerer vi disse kode biblioteker inn i hoveddokumentet klasse slik at de vil være tilgjengelig for oss å bruke på tidslinjen
import com.greensock.TweenLite;.. import com. greensock.easing. *; import com.flupie.textanim. *;

Opprett en ny MovieClip og legge den til på scenen. Gi den en forekomst navn slideTextAnimation
. 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} );}

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



Trinn 9:. The Big Finish

Pakk opp presentasjonen ved å animere slideTextAnimation
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.

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!