Suggerimento rapido presentazione della timeline a schermo intero

In questo suggerimento rapido creeremo una presentazione a tutto schermo con Flash.


Passaggio 1: impostare il file Flash

Crea un nuovo file Flash e salva come Presentation.fla. Nel pannello Proprietà, imposta le dimensioni in modo che corrispondano alle impostazioni delle dimensioni dello schermo. Ad esempio, uno schermo WXGA per laptop standard è 1280 x 800 pixel. Per consegnare un file di presentazione a qualcuno che non ha il flash player installato sul proprio computer, selezionare le finestre Proiettore Windows e / o Macintosh nel pannello delle impostazioni di pubblicazione.


Passaggio 2: impostare la classe del documento principale

Creare un nuovo file .as - "Presentation.as" - per essere la classe del documento (fare riferimento a questo suggerimento rapido per ulteriori informazioni sulle classi di documenti).

 package import flash.display.MovieClip; Presentazione della classe pubblica estende MovieClip public function Presentation () 

Passaggio 3: vai a schermo intero

Per passare alla modalità a schermo intero, dobbiamo cambiare lo stato di visualizzazione dello stage. Aggiungi un nuovo importare dichiarazione sopra la dichiarazione di classe per StageDisplayState.

 import flash.display.StageDisplayState;

In circostanze normali, Flash richiede la modalità a schermo intero per essere avviata da MouseEvent, ma quando si guarda un swf all'esterno di un browser (modalità proiettore) questo non è un problema. Tuttavia, solo per essere sicuri (e nel caso in cui desideri mettere la tua presentazione online), utilizziamo una dichiarazione try / catch per contenere l'errore di sicurezza che verrebbe generato.

 public function Presentation () public function Presentation () try stage.displayState = StageDisplayState.FULL_SCREEN;  catch (err: SecurityError) // Deve essere in modalità proiettore per la visualizzazione a schermo intero

Se pubblichi e apri lo swf, vedrai che si avvia direttamente nella modalità a schermo intero (premi ESC per uscire).


Passaggio 4: Crea timer Playhead

La nostra presentazione funzionerà andando avanti e indietro nella timeline. Flash non ha un metodo per riprodurre la timeline al contrario, quindi dovremo creare il nostro usando un timer per spostare la testina attraverso i fotogrammi sulla timeline. Innanzitutto, importiamo il Timer e TimerEvent classi.

 import flash.events.TimerEvent; import flash.utils.Timer;

Successivamente, dichiariamo le classi vars per il timer e anche un booleano per tenere traccia della direzione di riproduzione.

 private var isPlayingForward: Boolean; private var timelineTimer: Timer;

Quindi, nel costruttore della classe, impostiamo i valori per queste classi vars. Diamo al timer un ritardo pari al frame rate impostato nelle proprietà del documento.

 isPlayingForward = true; timelineTimer = new Timer (1000 / stage.frameRate); timelineTimer.addEventListener (TimerEvent.TIMER, timelineTimerHandler);

Infine, impostiamo il gestore di eventi per il timer.

 private function timelineTimerHandler (te: TimerEvent): void if (isPlayingForward) this.nextFrame (); else this.prevFrame (); 

Passaggio 5: creare i metodi di controllo della sequenza temporale

In questa fase, creeremo tre semplici metodi per controllare il movimento lungo la timeline. Uno per fermare, uno per giocare avanti e un altro per giocare al contrario.

 public function stopTimeline (): void stop (); timelineTimer.stop ();  public function playForward (): void isPlayingForward = true; timelineTimer.start ();  public function playReverse (): void isPlayingForward = false; timelineTimer.start (); 

Passaggio 6: configura gli ascoltatori di tastiera

La tastiera verrà utilizzata per cambiare le diapositive nella nostra presentazione, quindi è necessario impostare gli eventi e gli ascoltatori della tastiera. Ancora una volta, importiamo alcune classi.

 import flash.events.KeyboardEvent; import flash.ui.Keyboard;

Successivamente, aggiungi il listener KeyboardEvent allo stage.

 stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler);

Infine, crea un metodo per gestire KeyboardEvent.

 private function keyboardHandler (event: KeyboardEvent): void if (event.keyCode == Keyboard.RIGHT) playForward (); if (event.keyCode == Keyboard.LEFT) playReverse (); 

Passaggio 7: crea diapositive

Ora passiamo alla costruzione della timeline. Per fare ciò, è sufficiente creare alcune diapositive e creare animazioni della timeline per la transizione tra di esse. Creare un livello azioni e, per ogni diapositiva, aggiungere stopTimeline (); a un fotogramma chiave. Il tuo pannello Timeline dovrebbe essere simile a questo:


Passaggio 8: creare transizioni di diapositive con codice

Oltre a creare transizioni di diapositive sulla timeline, possiamo anche utilizzare ActionScript. In questo esempio, utilizzeremo TextAnimMaker e Greensock's TweenLite. Per scaricare queste librerie di ActionScript, vai su Google Code per TextAnimMaker e GreenSock per TweenLite. Una volta che hai scaricato i file, prendi entrambi Greensock e flupie directory dal loro individuo com directory e copiarli in uno solo com directory nella cartella del progetto.

Successivamente, importiamo queste librerie di codici nella nostra classe di documento principale in modo che siano disponibili per noi da utilizzare sulla timeline.

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

Crea una nuova MovieClip e aggiungila al palco. Dagli un nome di istanza di slideTextAnimation. All'interno del MovieClip, crea un campo di testo dinamico con del testo all'interno e dagli un nome di istanza slideText. Ora, nel livello delle azioni sulla timeline, aggiungi lo script di seguito.

 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 (blocco, 1, scaleX: 0, scaleY: 0, facilità: Elastic.easeOut); 

Questo creerà un effetto divertente in cui ogni lettera è animata sul palco. Per ulteriori informazioni su TextAnimMaker, controlla questa QuickTip.


Step 9: The Big Finish

Termina la presentazione animando il file slideTextAnimation MovieClip scende dal palco e riempi la timeline con il resto delle diapositive. Forse ti piacerebbe provare qualche interpolazione 3D Motion o transizioni più interessanti con TextAnimMaker e TweenLite.

Grazie per aver letto questo suggerimento, e spero che la tua prossima presentazione sia quella che farà esplodere tutti con la sua vistosa grandezza!