Animacin de grficos

COLISIONES EN ADOBE ANIMATE

Objetivo:

El estudiante comprende y aplica los conceptos fundamentales de colisiones para la

construccin de videojuegos.

Recuerde

Adobe Animate te permite crear juegos, infografas y banners interactivos combinando la

potencia de la lnea de tiempo con la flexibilidad de la programacin JavaScript apoyada
en CreateJS.

Colisiones

Las colisiones consisten bsicamente en la sobre posicin de un objeto grafico sobre otro. La
deteccin de estas colisiones ha hecho posible prcticamente la totalidad de juegos que hoy
en da existe y que seguirn existiendo, ya que la deteccin de estas colisiones son la base
para la creacin de muchos tipos y estilos de juegos. Existe varios mtodos para detectar las
colisiones entre objetos la diferencia est en la precisin. En el curso para detectar colisin
entre dos o ms objetos de tipo movieclip usaremos el mtodo HitTest.

Iniciamos con la prctica de laboratorio

En esta prctica vamos hacer que dos objetos se colisionen.

Creamos un nuevo documento

Hacer clic en
HTML5 Canvas

ING. JOS EDUARDO QUISPE TAIPE PG. 1

 Animacin de grficos

Ahora activamos la regla horizontal y vertical del escenario:

Procedemos a crear la capa objetivo1:

En la capa objetivo1, dibujar un pentgono es decir una figura geomtrica de 5 lados.

Convertir el pentgono a smbolo de tipo clip de pelcula.

ING. JOS EDUARDO QUISPE TAIPE PG. 2

 Animacin de grficos

Registrar con nombre de instancia al smbolo mc_objeto1.

Ahora hacer doble clic en el smbolo mc_objeto1, crear fotograma clave en el frame5 de la
Capa1 y dibujar una estrella.

En el mismo smbolo, crear Capa2 y dibujar un aspa con la herramienta lpiz.

Convertir el aspa en smbolo con nombre mc_punto.

Ingresamos el nombre de instancia al smbolo mc_punto.

ING. JOS EDUARDO QUISPE TAIPE PG. 3

 Animacin de grficos

En la Capa4, crear un fotograma clave en el frame5 con su etiqueta estrella.

En la Capa4 y fotograma10 agregar el siguiente cdigo.

En la Capa3 y fotograma1 agregar el siguiente cdigo.

Salimos del smbolo mc_objeto1 y procedemos a crear la capa objeto2.

En la capa objeto2 dibuje un circulo.

Ahora convertir el circulo en smbolo.

ING. JOS EDUARDO QUISPE TAIPE PG. 4

 Animacin de grficos

Colocar un nombre de instancia al smbolo mc_objeto2.

Ingresar con doble clic al smbolo mc_objeto2 para preparar el rea de colisin.

Convertir en smbolo.

Registrar su nombre de instancia.

ING. JOS EDUARDO QUISPE TAIPE PG. 5

 Animacin de grficos

Hacer algunos cambios con mc_area como posicionar y cambiar estilo Alfa.

Salir de mc_objeto2 y crear la capa Actions para empezar a programar.

Luego aadimos el cdigo:

Nota: recuerda que agregamos el cdigo en la capa Actions dentro de fotograma1.

ING. JOS EDUARDO QUISPE TAIPE PG. 6

 Animacin de grficos

Guardamos el trabajo en formato nativo, publicamos en Canvas y visualizamos el resultado en

un navegador como .

Ficheros generados a la
hora de exportar el
trabajo en HTML Canvas

Captura de pantallas en el momento de que dos objetos se colisionen en tiempo real.

Empieza a moverse el objeto1.

Se colisiona con el objeto2, en ese instante se cambia de pentgono a estrellla.

ING. JOS EDUARDO QUISPE TAIPE PG. 7

 Animacin de grficos

Continua su recorrido el objeto1 como estrella hasta el final del escenario.

Actividad Propuesta:

La actividad consiste en crear un videojuego en donde bsicamente exista alguna colisin entre
dos objetos, agregar fondo musical. Recuerda que solo el trabajo bien elaborado y que logre
impactarme obtendr una calificacin aprobatoria.

ING. JOS EDUARDO QUISPE TAIPE PG. 8