Petit conseil Présentation de la chronologie en plein écran

Dans cette astuce, nous allons créer une présentation de diaporama en plein écran avec Flash.


Étape 1: Configurer le fichier Flash

Créer un nouveau fichier Flash et enregistrer sous Presentation.fla. Dans le panneau Propriétés, définissez la taille pour qu'elle corresponde aux paramètres de la taille de votre écran. Par exemple, un écran WXGA pour ordinateur portable standard mesure 1 280 x 800 pixels. Pour remettre un fichier de présentation à une personne sur laquelle le lecteur flash n'est pas installé, cochez les cases Projecteur Windows et / ou Macintosh dans le panneau des paramètres de publication..


Étape 2: Configuration de la classe de document principale

Créez un nouveau fichier .as - «Presentation.as» - qui deviendra la classe de document (reportez-vous à cette astuce pour en savoir plus sur les classes de document).

 package import flash.display.MovieClip; Classe publique Presentation étend MovieClip fonction publique Presentation () 

Étape 3: aller en plein écran

Pour passer en mode plein écran, il faut changer l'état d'affichage de la scène. Ajouter un nouveau importation déclaration au-dessus de la déclaration de classe pour StageDisplayState.

 import flash.display.StageDisplayState;

Dans des circonstances normales, Flash nécessite que le mode plein écran soit activé par MouseEvent, mais lorsque vous visualisez un fichier swf en dehors d'un navigateur (mode projecteur), ce n'est pas un problème. Néanmoins, juste pour être sûr (et au cas où vous voudriez mettre votre présentation en ligne), nous utilisons une instruction try / catch pour contenir l'erreur de sécurité à générer..

 fonction publique Presentation () fonction publique Presentation () try stage.displayState = StageDisplayState.FULL_SCREEN;  catch (err: SecurityError) // Doit être en mode projecteur pour un affichage plein écran

Si vous publiez et ouvrez le fichier swf, vous verrez qu'il se lance directement en mode plein écran (appuyez sur ECHAP pour quitter)..


Étape 4: Créer un minuteur de tête de lecture

Notre présentation fonctionnera d'avant en arrière dans la chronologie. Flash ne dispose pas de méthode pour lire la timeline en sens inverse. Nous devrons donc créer notre propre programmation en utilisant une minuterie pour déplacer la tête de lecture dans les images de la timeline. Tout d'abord, nous importons le Minuteur et TimerEvent Des classes.

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

Ensuite, nous déclarons les classes de classe pour le minuteur et également un booléen pour garder une trace de la direction de lecture.

 private var isPlayingForward: Boolean; private var timelineTimer: Minuterie;

Ensuite, dans le constructeur de classe, nous définissons les valeurs de ces vars de classe. Nous donnons à la minuterie un délai égal à la cadence définie dans les propriétés du document..

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

Enfin, nous avons configuré le gestionnaire d’événements pour le timer.

 fonction privée timelineTimerHandler (te: TimerEvent): void if (isPlayingForward) this.nextFrame (); sinon this.prevFrame (); 

Étape 5: Créer des méthodes de contrôle de la timeline

Dans cette étape, nous allons créer trois méthodes simples pour contrôler les mouvements le long de la timeline. Un pour arrêter, un pour jouer en avant et un autre pour jouer en arrière.

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

Étape 6: Configurer les écouteurs du clavier

Le clavier sera utilisé pour modifier les diapositives de notre présentation, nous devons donc configurer les événements de clavier et les écouteurs. Encore une fois, nous importons des classes.

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

Ensuite, ajoutez l'auditeur KeyboardEvent à la scène..

 stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler);

Enfin, créez une méthode pour gérer KeyboardEvent.

 fonction privée keyboardHandler (event: KeyboardEvent): void if (event.keyCode == Keyboard.RIGHT) playForward (); if (event.keyCode == Keyboard.LEFT) playReverse (); 

Étape 7: Construire des diapositives

Nous passons maintenant à la construction de la chronologie. Pour cela, créez simplement des diapositives et créez des animations de montage pour les faire basculer. Créez un calque d’actions et, pour chaque diapositive, ajoutez stopTimeline (); à une image clé. Votre panneau de montage devrait ressembler à ceci:


Étape 8: Créer des transitions de diapositives avec du code

Outre la création de transitions de diapositives sur le scénario, nous pouvons également utiliser ActionScript. Dans cet exemple, nous allons utiliser TextAnimMaker et TweenLite de Greensock. Pour télécharger ces bibliothèques ActionScript, accédez à Google Code pour TextAnimMaker et GreenSock pour TweenLite. Une fois que vous avez téléchargé les fichiers, récupérez le greensock et Flupie répertoires de leur individu com répertoires et les copier dans un com répertoire dans votre dossier de projet.

Ensuite, nous importons ces bibliothèques de code dans notre classe de documents principale afin qu'elles soient disponibles pour utilisation sur la timeline.

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

Créez un nouveau MovieClip et ajoutez-le à la scène. Donnez-lui un nom d'instance de slideTextAnimation. À l'intérieur du MovieClip, créez un TextField dynamique contenant du texte et attribuez-lui un nom d'occurrence. slideText. Maintenant, dans le calque actions du scénario, ajoutez le script ci-dessous.

 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, facilité: Elastic.easeOut); 

Cela créera un effet amusant où chaque lettre est animée sur la scène. Pour plus d'informations sur TextAnimMaker, consultez cette astuce..


Étape 9: La grande finition

Terminez la présentation en animant le slideTextAnimation MovieClip hors de la scène et de remplir la chronologie avec le reste de vos diapositives. Vous voudrez peut-être essayer quelques interpolations 3D Motion ou des transitions plus cool avec TextAnimMaker et TweenLite.

Merci d'avoir lu ce conseil, et j'espère que votre prochaine présentation en étonnera tout le monde par sa splendeur éclatante.!