Consejo rápido Presentación de línea de tiempo de pantalla completa

En este Consejo rápido, crearemos una presentación de diapositivas a pantalla completa con Flash..


Paso 1: Configurar el archivo Flash

Crea un nuevo archivo flash y guárdalo como Presentación.fla. En el Panel de propiedades, establezca el tamaño para que coincida con la configuración del tamaño de la pantalla. Por ejemplo, una pantalla WXGA de computadora portátil estándar es de 1280 x 800 píxeles. Para entregar un archivo de presentación a alguien que no tenga instalado Flash Player en su máquina, seleccione los cuadros de Proyector de Windows y / o Macintosh en el Panel de configuración de publicación.


Paso 2: configurar la clase de documento principal

Cree un nuevo archivo .as, "Presentation.as", que será la clase de documento (consulte este Consejo rápido para obtener más información sobre las clases de documentos).

 paquete import flash.display.MovieClip; Presentación de clase pública extiende MovieClip presentación de función pública () 

Paso 3: Ir a pantalla completa

Para cambiar al modo de pantalla completa, debemos cambiar el estado de visualización del escenario. Añadir un nuevo importar declaración por encima de la declaración de clase para StageDisplayState.

 importar flash.display.StageDisplayState;

En circunstancias normales, Flash requiere que el modo de pantalla completa sea iniciado por MouseEvent, pero cuando se visualiza un swf fuera de un navegador (modo proyector) esto no es un problema. Aún así, solo para estar seguro (y en caso de que quiera poner su presentación en línea), usamos una declaración try / catch para contener el error de seguridad que se generaría..

 Función pública Presentation () Función pública Presentation () try stage.displayState = StageDisplayState.FULL_SCREEN;  catch (err: SecurityError) // Debe estar en modo proyector para ver en pantalla completa

Si publica y abre el archivo swf, verá que se inicia directamente en el modo de pantalla completa (presione ESC para salir).


Paso 4: Crear temporizador Playhead

Nuestra presentación funcionará avanzando y retrocediendo a través de la línea de tiempo. Flash no tiene un método para reproducir la línea de tiempo a la inversa, por lo que tendremos que crear el nuestro utilizando un temporizador para mover la cabeza lectora a través de los cuadros en la línea de tiempo. Primero, importamos el Minutero y TimerEvent clases.

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

A continuación, declaramos los vars de clase para el temporizador y también un booleano para realizar un seguimiento de la dirección de reproducción.

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

Luego, en el constructor de la clase, establecemos los valores para estos vars de clase. Le damos al temporizador un retraso igual a la velocidad de cuadros establecida en las propiedades del documento.

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

Por último, configuramos el controlador de eventos para el temporizador..

 función privada timelineTimerHandler (te: TimerEvent): void if (isPlayingForward) this.nextFrame (); de lo contrario this.prevFrame (); 

Paso 5: Crear métodos de control de línea de tiempo

En este paso, crearemos tres métodos simples para controlar el movimiento a lo largo de la línea de tiempo. Uno para parar, uno para jugar adelante y otro para jugar en reversa..

 función pública stopTimeline (): void stop (); timelineTimer.stop ();  public function playForward (): void isPlayingForward = true; timelineTimer.start ();  función pública playReverse (): void isPlayingForward = false; timelineTimer.start (); 

Paso 6: Configurar los oyentes del teclado

El teclado se utilizará para cambiar las diapositivas de nuestra presentación, por lo que necesitamos configurar los eventos del teclado y los oyentes. Una vez más, importamos algunas clases..

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

A continuación, agregue el oyente KeyboardEvent al escenario.

 stage.addEventListener (KeyboardEvent.KEY_DOWN, keyboardHandler);

Por último, crea un método para manejar el evento KeyboardEvent..

 Función privada keyboardHandler (event: KeyboardEvent): void if (event.keyCode == Keyboard.RIGHT) playForward (); if (event.keyCode == Keyboard.LEFT) playReverse (); 

Paso 7: construir diapositivas

Ahora pasamos a construir la línea de tiempo. Para esto, simplemente cree algunas diapositivas y cree animaciones de línea de tiempo para hacer la transición entre ellas. Cree una capa de acciones y, para cada diapositiva, agregue stopTimeline (); a un fotograma clave. Su panel de línea de tiempo debe verse algo como esto:


Paso 8: Crear transiciones de diapositivas con código

Además de crear transiciones de diapositivas en la línea de tiempo, también podemos utilizar ActionScript. En este ejemplo, usaremos TextAnimMaker y Greensock's TweenLite. Para descargar estas bibliotecas de ActionScript, vaya a Google Code para TextAnimMaker y GreenSock para TweenLite. Una vez que haya descargado los archivos, tome ambos Greensock y flupie directorios de su individuo com directorios y copiarlos en uno com directorio en su carpeta de proyectos.

A continuación, importamos estas bibliotecas de códigos en nuestra clase de documento principal para que estén disponibles para que las utilicemos en la línea de tiempo..

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

Crea un nuevo clip de película y agrégalo al escenario. Dale un nombre de instancia de slideTextAnimation. Dentro del MovieClip, crea un TextField dinámico con algo de texto dentro y dale un nombre de instancia de slideText. Ahora, en la capa de acciones en la línea de tiempo, agregue la secuencia de comandos a continuación.

 stopTimeline (); var slideAnimateIn: TextAnim = new TextAnim (slideTextAnimation.slideText); slideAnimateIn.mode = TextAnimMode.RANDOM; slideAnimateIn.interval = 20; slideAnimateIn.blocksVisible = false; slideAnimateIn.effects = growEffect; slideAnimateIn.start (); función growEffect (bloque: TextAnimBlock): void TweenLite.from (bloque, 1, scaleX: 0, scaleY: 0, facilidad: Elastic.easeOut); 

Esto creará un efecto divertido donde cada letra se anima en el escenario. Para más información sobre TextAnimMaker, echa un vistazo a este QuickTip.


Paso 9: El gran final

Cierre la presentación animando el slideTextAnimation MovieClip fuera del escenario y completa la línea de tiempo con el resto de tus diapositivas. Quizás te interese probar algunas transiciones 3D Motion o más geniales con TextAnimMaker y TweenLite..

Gracias por leer este rápido consejo, y espero que su próxima presentación sea una que sorprenda a todos con su grandeza llamativa.!