In diesem Quick Tip erstellen wir eine Diashow mit Flash im Vollbildmodus.
Erstellen Sie eine neue Flash-Datei und speichern Sie als Presentation.fla. Stellen Sie im Eigenschaftenbereich die Größe so ein, dass sie den Einstellungen Ihrer Bildschirmgröße entspricht. Ein Standard-WXGA-Bildschirm eines Laptops weist beispielsweise 1280 x 800 Pixel auf. Um eine Präsentationsdatei an jemanden zu übermitteln, auf dem der Flash Player nicht installiert ist, wählen Sie die Felder Windows und / oder Macintosh-Projektor im Bereich Veröffentlichungseinstellungen aus.
Erstellen Sie eine neue .as-Datei - "Presentation.as" - als Dokumentklasse (weitere Informationen zu Dokumentklassen finden Sie in diesem Quick Tip)..
package import flash.display.MovieClip; public class Presentation erweitert MovieClip öffentliche Funktion Presentation ()
Um in den Vollbildmodus zu wechseln, müssen Sie den Status der Bühne ändern. Neues hinzufügen einführen
Anweisung oberhalb der Klassendeklaration für StageDisplayState
.
import flash.display.StageDisplayState;
Unter normalen Umständen erfordert Flash, dass der Vollbildmodus von gestartet wird MouseEvent
, Bei der Anzeige einer SWF-Datei außerhalb eines Browsers (Projektormodus) ist dies jedoch kein Problem. Um sicherzugehen (und falls Sie Ihre Präsentation online stellen möchten), verwenden wir eine try / catch-Anweisung, um den Sicherheitsfehler zu enthalten, der ausgelöst wird.
öffentliche Funktion Presentation () öffentliche Funktion Presentation () try stage.displayState = StageDisplayState.FULL_SCREEN; catch (err: SecurityError) // Für die Vollbildanzeige muss der Projektormodus sein
Wenn Sie die SWF-Datei veröffentlichen und öffnen, werden Sie sehen, dass sie direkt im Vollbildmodus gestartet wird (drücken Sie zum Beenden ESC)..
Unsere Präsentation funktioniert, indem Sie die Zeitleiste vorwärts und rückwärts durchgehen. In Flash gibt es keine Methode, um die Timeline rückwärts abzuspielen. Daher müssen wir eine eigene Timeline erstellen, um den Abspielkopf durch die Frames auf der Timeline zu bewegen. Zuerst importieren wir die Timer
und TimerEvent
Klassen.
import flash.events.TimerEvent; import flash.utils.Timer;
Als Nächstes definieren wir die Klassenvars für den Timer und außerdem einen Booleschen Wert, um die Wiedergaberichtung zu verfolgen.
private var isPlayingForward: Boolean; private var timelineTimer: Timer;
Dann setzen wir im Klassenkonstruktor die Werte für diese Klassenvars. Wir geben dem Timer eine Verzögerung, die der in den Dokumenteigenschaften festgelegten Bildrate entspricht.
isPlayingForward = true; timelineTimer = neuer Timer (1000 / stage.frameRate); timelineTimer.addEventListener (TimerEvent.TIMER, timelineTimerHandler);
Zuletzt haben wir den Event-Handler für den Timer eingerichtet.
private Funktion timelineTimerHandler (te: TimerEvent): void if (isPlayingForward) this.nextFrame (); else this.prevFrame ();
In diesem Schritt erstellen wir drei einfache Methoden zur Steuerung der Bewegung entlang der Zeitleiste. Einer für Stopp, einer für Vorwärts und einer für Rückwärts.
öffentliche Funktion stopTimeline (): void stop (); timelineTimer.stop (); public function playForward (): void isPlayingForward = true; timelineTimer.start (); public function playReverse (): void isPlayingForward = false; timelineTimer.start ();
Die Tastatur wird zum Ändern der Folien in unserer Präsentation verwendet. Daher müssen die Tastaturereignisse und die Hörer eingerichtet werden. Wieder importieren wir einige Klassen.
import flash.events.KeyboardEvent; import flash.ui.Keyboard;
Fügen Sie als nächstes den KeyboardEvent-Listener der Bühne hinzu.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler);
Erstellen Sie zuletzt eine Methode, um das KeyboardEvent zu verarbeiten.
private Funktion keyboardHandler (Ereignis: KeyboardEvent): void if (event.keyCode == Keyboard.RIGHT) playForward (); if (event.keyCode == Keyboard.LEFT) playReverse ();
Nun fahren wir mit dem Erstellen der Zeitleiste fort. Erstellen Sie dazu einfach einige Folien und erstellen Sie Timeline-Animationen, um zwischen ihnen zu wechseln. Erstellen Sie eine Aktionsebene und fügen Sie für jede Folie hinzu stopTimeline ();
zu einem Keyframe. Ihr Zeitleistenfenster sollte ungefähr so aussehen:
Neben dem Erstellen von Folienübergängen auf der Timeline können Sie auch ActionScript verwenden. In diesem Beispiel verwenden wir TextAnimMaker und Greensocks TweenLite. Um diese ActionScript-Bibliotheken herunterzuladen, besuchen Sie Google Code für TextAnimMaker und GreenSock für TweenLite. Wenn Sie die Dateien heruntergeladen haben, greifen Sie beide Dateien auf Grünsocke und Flupie Verzeichnisse von ihrer individuellen com Verzeichnisse und kopieren Sie sie in eins com Verzeichnis in Ihrem Projektordner.
Als Nächstes importieren wir diese Codebibliotheken in unsere Hauptdokumentenklasse, sodass sie in der Timeline verwendet werden können.
import com.greensock.TweenLite; import com.greensock.easing. *; import com.flupie.textanim. *;
Erstellen Sie einen neuen MovieClip und fügen Sie ihn der Bühne hinzu. Geben Sie einen Instanznamen von slideTextAnimation. Erstellen Sie im MovieClip ein dynamisches TextField mit etwas Text und geben Sie ihm einen Instanznamen slideText. Fügen Sie nun in der Aktionsebene auf der Zeitleiste das folgende Skript hinzu.
stopTimeline (); var slideAnimateIn: TextAnim = new TextAnim (slideTextAnimation.slideText); slideAnimateIn.mode = TextAnimMode.RANDOM; slideAnimateIn.interval = 20; slideAnimateIn.blocksVisible = false; slideAnimateIn.effects = growEffect; slideAnimateIn.start (); function growEffect (block: TextAnimBlock): void TweenLite.from (Block, 1, scaleX: 0, scaleY: 0, ease: Elastic.easeOut);
Dadurch entsteht ein lustiger Effekt, bei dem jeder Buchstabe auf die Bühne animiert wird. Weitere Informationen zu TextAnimMaker finden Sie in diesem QuickTip.
Runden Sie die Präsentation ab, indem Sie das animieren slideTextAnimation MovieClip von der Bühne und fülle die Zeitleiste mit den restlichen Folien aus. Vielleicht möchten Sie 3D-Motion-Tweening oder mehr coole Übergänge mit TextAnimMaker und TweenLite ausprobieren.
Vielen Dank, dass Sie diesen kurzen Tipp gelesen haben. Ich hoffe, Ihre nächste Präsentation wird alle mit ihrer auffälligen Größe umhauen!