Snabbtips Fullskärms tidslinjepresentation

I den här Snabba Tipsen skapar vi en presentationspresentation med fullständig bildskärm med Flash.


Steg 1: Ställ in Flash-filen

Skapa en ny Flash-fil och spara som Presentation.fla. I egenskapspanelen anger du storleken som matchar inställningarna för din bildskärmsstorlek. Till exempel är en vanlig laptop WXGA-skärm 1280 x 800 pixlar. Om du vill leverera en presentationsfil till någon som inte har flashspelaren installerad på sin maskin, markerar du rutorna Windows och / eller Macintosh Projector i panelen Publicera inställningar.


Steg 2: Ställ in huvuddokumentklassen

Skapa en ny .as-fil - "Presentation.as" - för att vara dokumentklassen (se denna snabba tips för mer om dokumentklasser).

 paket import flash.display.MovieClip; public class Presentation utökar MovieClip Public Function Presentation () 

Steg 3: Gå på helskärm

För att växla till helskärmsläge måste vi ändra scenens visningsläge. Lägg till en ny importera uttalande ovanför klassdeklarationen för Stage.

 importera flash.display.StageDisplayState;

Under normala förhållanden kräver Flash att helskärmsläge initieras av Mouseevent, men när du tittar på en swf utanför en webbläsare (projektorns läge) är detta inte ett problem. Fortfarande, för att vara säker (och om du skulle vilja lägga presentationen online) använder vi ett försök / fångstutdrag för att innehålla säkerhetsfelet som skulle kastas.

 public function Presentation () public function Presentation () försök stage.displayState = StageDisplayState.FULL_SCREEN;  fånga (err: SecurityError) // Måste vara i projektorns läge för helskärmsvisning

Om du publicerar och öppnar swf-filen ser du att den startas direkt i helskärmsläge (tryck på ESC för att avsluta).


Steg 4: Skapa Playhead Timer

Vår presentation kommer att fungera genom att gå framåt och bakåt genom tidslinjen. Flash har ingen metod för att spela tidslinjen i omvända, så vi måste skapa vår egen med en timer för att flytta spelläget genom ramarna på tidslinjen. Först importerar vi Timer och Timerevent klasser.

 importera flash.events.TimerEvent; importera flash.utils.Timer;

Därefter förklarar vi klassen vars för timer och även en booleska för att hålla reda på uppspelningsriktningen.

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

Sedan ställer vi i klasskonstruktören värdena för dessa klasser vars. Vi ger timern en fördröjning som motsvarar den bildhastighet som anges i dokumentegenskaperna.

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

Sist satt vi upp händelsehanteraren för timern.

 privat funktionstidslinjeTimerHandler (te: TimerEvent): void if (isPlayingForward) this.nextFrame (); annars this.prevFrame (); 

Steg 5: Skapa tidslinjekontrollmetoder

I det här steget kommer vi att skapa tre enkla metoder för att styra rörelsen längs tidslinjen. En för stopp, en för spel fram och en annan att spela i omvänd.

 allmän funktion stopTimeline (): void stop (); timelineTimer.stop ();  allmän funktion playForward (): void isPlayingForward = true; timelineTimer.start ();  allmän funktion playReverse (): void isPlayingForward = false; timelineTimer.start (); 

Steg 6: Konfigurera Keyboard-lyssnare

Tangentbordet kommer att användas för att ändra bilder i vår presentation, så vi måste ställa in tangentbordshändelserna och lyssnarna. Återigen importerar vi några klasser.

 importera flash.events.KeyboardEvent; importera flash.ui.Keyboard;

Lägg sedan till KeyboardEvent-lyssnaren på scenen.

 stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler);

Sist, skapa en metod för att hantera KeyboardEvent.

 privat funktion keyboardHandler (händelse: KeyboardEvent): void if (event.keyCode == Keyboard.RIGHT) playForward (); om (event.keyCode == Keyboard.LEFT) playReverse (); 

Steg 7: Bygg bildspel

Nu går vi vidare till att bygga tidslinjen. För detta, bygg helt enkelt några bilder, och skapa tidslinjeanimeringar för övergång mellan dem. Skapa ett åtgärdslayer och, för varje bild, lägg till stopTimeline (); till en keyframe. Din tidslinjepanel ska se ut så här:


Steg 8: Skapa bildövergångar med kod

Förutom att bygga bildövergångar på tidslinjen kan vi också använda ActionScript. I det här exemplet använder vi TextAnimMaker och Greensocks TweenLite. För att ladda ner dessa ActionScript-bibliotek, gå till Google Code för TextAnimMaker och GreenSock för TweenLite. När du har laddat ner filerna, ta tag i båda greensock och flupie kataloger från deras individ com kataloger och kopiera dem till en com katalog i din projektmapp.

Därefter importerar vi dessa kodbibliotek i vår huvuddokumentklass så att de kommer att finnas tillgängliga för oss att använda på tidslinjen.

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

Skapa en ny MovieClip och lägg till den på scenen. Ge det ett förekomstnamn på slideTextAnimation. Inne i MovieClip, skapa en dynamisk TextField med lite text inuti och ge det ett förekomstnamn på slideText. Nu lägger du till skriptet nedan i åtgärdslaget på tidslinjen.

 stopTimeline (); var slideAnimateIn: TextAnim = ny TextAnim (slideTextAnimation.slideText); slideAnimateIn.mode = TextAnimMode.RANDOM; slideAnimateIn.interval = 20; slideAnimateIn.blocksVisible = false; slideAnimateIn.effects = growEffect; slideAnimateIn.start (); funktion growEffect (block: TextAnimBlock): void TweenLite.from (block, 1, scaleX: 0, scaleY: 0, lätthet: Elastic.easeOut); 

Detta kommer att skapa en rolig effekt där varje bokstav är animerad på scenen. För mer information om TextAnimMaker, kolla in denna QuickTip.


Steg 9: The Big Finish

Vik upp presentationen genom att animera slideTextAnimation MovieClip av scenen och fyll i tidslinjen med resten av dina bilder. Kanske kanske du gillar att prova lite 3D Motion-tweening eller fler coola övergångar med TextAnimMaker och TweenLite.

Tack för att du läste detta snabba tips, och jag hoppas att din nästa presentation är en som kommer att blåsa alla bort med sin prickiga storhet!