DISEÑO MULTIMEDIA Y WEB

SEMANA 7

FACULTAD CIENCIAS DE LA COMUNICACION

 PROGRAMACION DE
BOTONES CON HTML5 -
CANVAS
Curso : DISEÑO MULTIMEDIA Y WEB
Docente: Mg. Carlos Salcedo Caballero
NORMAS DE CONVIVENCIA

1. Puntualidad al ingreso de la clase-laboratorio

Presencial
2. Respeto al docente y compañeros
3. No uso de celulares dentro del laboratorio
4. Para no saturar la conectividad, estar solo en la
plataforma y software indicado., evitar uso de redes
sociales.

Datos/Observaciones
DISEÑO MULTIMEDIA Y WEB

SEGUNDA UNIDAD:
ANIMACION BASICA Y AVANZADA

Contenido Semana 7

1.Programacion con HTML 5

Datos/Observaciones
LOGRO DE LA SESIÓN

Al termino de la sesión, el estudiante reconoce las

herramientas básicas de Adobe Animate, en la

programación dentro de las animaciones básicas,

empleando las líneas de tiempo.

Datos/Observaciones
IMPORTANCIA DE LA SESIÓN

Permite crear entornos animados básicos para una

producción multimedia utilizando programación en los

botones de interacción.

Datos/Observaciones
 SABERES PREVIOS

• ¿Qué entiende por programación

dentro de una animacion?
• ¿Qué tipos de software interviene en la
programación de las animaciones en
animate?

Datos/Observaciones
INTRODUCCION A LA PROGRAMACION

Introducción:

Animate CC tuvo que ir realizando aplicaciones en

programacion para que sus animaciones tengan interacciones
con botones en cada acción que esta realice
Desarrollaremos paso a paso una interacción en anime con
programación javascrip y html.

Datos/Observaciones
 INICIANDO
PROGRAMACION
ENHTML5 EN ANIMATE
CON BOTONES

Datos/Observaciones
 PASOS :
1. CREAR UN OBJETO , (CIRCULO) CONVERTIRLO A
SIMBOLO/BOTON
2. Vamos a la línea de tiempo 2 segundo, y pulsamos f6.
3. Desplazamos el objeto a.(frame 60), y creamos interpolación clásica
4. Creamos una nueva capa ,y nos desplazamos al frame 60,
pulsamos (F7)
5. Vamos a la librería y extraemos de la biblioteca el circulo
y lo trasladamos al escenario, luego nos desplazamos al frame90 y
pulsamos f6, para finalmente trasladarnos
al frame 120, y retornamos al frame 90, cambiamos la acción –
tamaño-y creamos en ambos
interpolación clásica hasta el frame 120)

Datos/Observaciones
 PROGRAMACION

1. Agregamos una nueva capa llamada ACCIONES, y retornamos

al frame 1(circulo debe encontrarse en este frame)—
menú/ventana/acciones
digitamos en el cuadro : this.stop();

2. Vamos al frame 60 , pulsamos f7, y nuevamente

menú/ventana/acciones
Digitamos en el cuadro : this.stop();
3. Vamos al frame 120 , pulsamos f7, y nuevamente
menú/ventana/acciones
Digitamos en el cuadro : this.stop();

Datos/Observaciones
4. Luego vamos al final(120) e insertamos F7(clave en
blanco)….menú/ventana/acciones
digitamos en el cuadro : this.stop();

5. Insertamos una nueva capa debajo de acciones (dibujamos un botón

llamado Play,
6. Luego se selecciona ambos y se convierte a botón.
7. Ahora vamos a propiedades y le damos nombre a la instancia play_bnt
( nombre de la acción)
8. Luego vamos a la ventana de programación(acciones) y terminamos la
acción.
9. Goto frame label and play
10. This time line en la siguiente sección se cambia el nombre por click
11. This.gotoAndPlay(‘click’);
12. En el evento desencadenante
13. On mouse click
14. Objeto para el evento
15.Datos/Observaciones
Play _btn
 Programación de botones
en varias paginas/escenas

Datos/Observaciones
7/04/2023 Mg. CARLOS SALCEDO CABALLERO 14
 DISEÑO FINAL

Datos/Observaciones
 COMPARTIMOS UN VÍDEO

https://www.youtube.com/wat
ch?v=0aIAIK3_GkA

¿Cómo armar tu portafolio

creativo?

Datos/Observaciones
 RECORDEMOS

Permite generar gráficos estáticos y

animaciones.
Puede ser accedido a través de Java Scrip
permitiendo genera gráficos 2D, juegos
animaciones y composición de imágenes

Datos/Observaciones
 CONCLUSIONES

1. Las herramientas son interesantes, pero no rigen al

en todos los procesos de forma identica.
2. Las herramientas de ayuda no te indica que siempre
va a suplir tu programación con la ejecución de las
sintaxis y ordenes del software

Datos/Observaciones
 EVALUACIÓN:

Defina o mencione :

• Identifica las ventajas de crear objetos

programados.
• El software que se utilizan dentro de las
programación de anímate son:

Datos/Observaciones
 REFERENCIAS
✓ BARRANGOU, CÉSAR (2013) 12 principios de la Animación ,
https://prezi.com/82uiynbjyckr/12-principios-de-la-animacion- 2d/
✓ ADOBE (2017) Animación e Interactividad ,
https://helpx.adobe.com/es/animate/topics/animation.html
✓ ADOBE SYSTEMS (2017) Create a 2D character animation ,
https://helpx.adobe.com/animate/how-to/create-2d- animation.html
✓ ADOBE SYSTEMS (2017) Información y Asistencia de Adobe Animate ,
https://helpx.adobe.com/la/support/animate.html ADOBE SYSTEMS
(2017) Resumen de las Nuevas Funciones de
Adobe Animate , https://helpx.adobe.com/la/animate/using/whats-
new.html#main-pars_header_1632332856
✓ ADOBE SYSTEMS Tutoriales de Adobe Animate ,
https://helpx.adobe.com/animate/tutorials.html
 PRACTICA DIRIGIDA
PROGRAMACION

Datos/Observaciones