You are on page 1of 7

ANIMACIN DE GRFICOS

TALLER DE SNIPPETS
Objetivo:

El estudiante aplica a travs de un ejemplo prctico los conceptos fundamentales de Snippets.

Snippets

Recordemos que los Snippets son pequeos fragmentos de cdigo fuente ya prediseados que
podemos reutilizar en actividades como animaciones, banners, publicidades, juegos y
publicaciones digitales.

Iniciamos con el taller de laboratorio


En este taller vamos a controlar la reproduccin de un video con botones aplicando Snippets,
para ello realizamos los siguientes pasos:

Empezamos creando un nuevo documento HTML5 Canvas

Hacer clic en
HTML5 Canvas

ING. JOS EDUARDO QUISPE TAIPE PG. 1


ANIMACIN DE GRFICOS

Una vez que tenemos creado el documento en blanco, la primera cuestin que debemos realizar
es anclar la opcin componentes desde el men Ventana a la zona de paneles como se
muestra en la imagen de abajo.

Panel de
Acciones

Panel de
Componentes

Aadir componente video al escenario

3. Y listo ya
tenemos el
componente Video
en el escenario
1. Clic en
Componentes

2. Doble clic en
Video

ING. JOS EDUARDO QUISPE TAIPE PG. 2


ANIMACIN DE GRFICOS

Procedemos a insertar nuestro video favorito.

Propiedades de
componente video Haga clic para
insertar un video

Ubica tu video
favorito.

Al final queda
as

Nuevamente desde componentes aadimos los botones para el control de nuestro video

Etiqueta: Etiqueta:
Play Pause

Nombre instancia:
Nombre instancia:
btnPlay
btnPause

ING. JOS EDUARDO QUISPE TAIPE PG. 3


ANIMACIN DE GRFICOS

Ingresar un nombre de instancia al video.

Sin nombre de Con nombre de


instancia instancia

Ahora que ya tenemos todos los elementos preparados toca aadir fragmentos de cdigo
(snippets). Para ello nos dirigimos a men Ventana>Fragmentos de cdigo.

Estando en esta ventana Fragmentos de cdigo dirigirse al apartado HTML5


Canvas>Componentes>Interfaz de usuario>Evento de clic en el botn.

ING. JOS EDUARDO QUISPE TAIPE PG. 4


ANIMACIN DE GRFICOS

Para aadir cdigo debemos seleccionar primero botn Play y luego hacer doble clic.

1. Seleccione

2. Doble clic

Completamos para el botn Pause.

1. Seleccione

2. Doble clic

Al observar la lnea de tiempo, notamos que se ha creado una capa llamada Actions.

Cdigo generado
para ambos botones

ING. JOS EDUARDO QUISPE TAIPE PG. 5


ANIMACIN DE GRFICOS

Ahora seleccionamos el video y generamos sus cdigos.

Hacer doble clic


en Reproducir
video
Hacer doble clic
en Pausar un
video

El cdigo para el botn Play y Pausa debe estar como se muestra a continuacin.

Aadir este
cdigo generado
por el video

Aadir este
cdigo generado
por el video

ING. JOS EDUARDO QUISPE TAIPE PG. 6


ANIMACIN DE GRFICOS

Finalmente publicamos el trabajo en HTML5 Canvas y visualizamos el resultado en un

navegador como .

Imagen para el poster.

Y ah el resultado en nuestro navegador.

ING. JOS EDUARDO QUISPE TAIPE PG. 7