Animación 2D y programación
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Animación 2D con Animate y programación.
Mientras que el 2D solo tiene alto y ancho, el 3D tiene alto, ancho y profundidad.
00:00:00
Cuando creamos animaciones en 2D que simulan 3D, tenemos que intentar simular esa profundidad.
00:00:05
En este caso, recurriremos a un truco que es que la capa luna esté por debajo de la capa tierra.
00:00:12
Y la capa guía también tendrá que estar por debajo de la capa tierra.
00:00:20
Ahora la luna está por debajo de la tierra.
00:00:23
Para crear la guía dentro de la capa guía utilizaremos la herramienta óvalo.
00:00:26
Las propiedades de las herramientas están aquí, en la ventana propiedad.
00:00:32
Vamos a decirle que queremos un trazo negro o con el que sea, no se va a ver, da igual, y no queremos relleno.
00:00:36
Y dentro de la capa guía en el fotograma primero creamos una elipse.
00:00:44
Esta elipse ahora mismo, si ocultamos la capa tierra, empieza y acaba en el mismo sitio.
00:00:48
Necesitamos que empiece y acabe en diferente sitio para que el recorrido que sigue la luna tenga un principio y un fin.
00:00:53
Con la herramienta borrador borraremos un trocito y ahora moveremos la luna justo al inicio.
00:01:00
Haremos coincidir el centro del objeto de luna, en la capa luna, con el centro de este objeto, con el inicio de este objeto.
00:01:07
Para ello tenemos que reubicar el centro del objeto.
00:01:14
Con la herramienta de transformación podemos mover el centro del objeto y ahora haremos coincidir el centro del objeto con el inicio.
00:01:17
Necesitamos un fotograma clave al final de la luna. Botón derecho, insertar fotograma clave y ahora crearemos una interpolación de movimiento.
00:01:25
Botón derecho sobre el primer fotograma de la capa luna, crear interpolación clásica.
00:01:35
Ahora en el último fotograma le diremos que la luna tiene que estar al final de la luna.
00:01:41
Ahí vemos como en el primer fotograma está el inicio y en el último fotograma está el final.
00:01:46
Ahora solo tenemos que decirle que la capa guía, botón derecho, funcione como guía.
00:01:52
Ahora solo tenemos que decirle que la capa luna entre dentro de la capa guía y ahora nos cambia el pico por una guía, un caminito.
00:01:58
Y la luna está dentro de la capa guía.
00:02:08
Ya podemos comprobar que funciona.
00:02:10
Vemos la tierra y comprobamos que funciona.
00:02:15
Para probar que todo este movimiento funciona perfectamente nos vamos a control, probar película en navegador y comprobamos que funciona perfectamente.
00:02:17
Para publicar este objeto recordamos archivo, configuración de publicación y le decimos que nos exporte a la carpeta que queremos, el javascript y le decimos que exporte javascript y html, que exporte todos los documentos que tenemos en la biblioteca, sean los que sean, en este caso los mapas que hemos utilizado, que compacte las formas y aquí le decimos en qué carpetas tiene que guardar cada cosa.
00:02:37
que reproduzca la animación en bucle, en este caso voy a quitarle capas ocultas
00:03:06
porque no me interesa que se expocen aquellas capas que yo he ocultado y aceptar
00:03:11
y ahora archivo publicar, aquí tendríamos el html, aquí el javascript
00:03:15
y aquí la carpeta imágenes con el fondo, la textura de la luna y la textura de la tierra
00:03:24
Probamos y en un navegador abre el documento perfectamente
00:03:31
Si yo quisiera llevarme esta animación a una web, necesitaría llevarme los tres archivos
00:03:36
La carpeta con todas las imágenes, la tierra en HTML y la tierra en Javascript
00:03:44
Yo puedo abrir el Javascript, botón derecho, con un blog de notas
00:03:50
Aquí tengo todo el lenguaje Javascript que he utilizado para crear mi animación
00:03:57
En este caso el giro de la Tierra alrededor de la Luna. Si abro el HTML y doy a F12, tengo toda la programación HTML que necesito para este documento y que ha generado automáticamente Animate.
00:04:03
Dentro del head encontramos la referencia al javascript, sin él no podría existir esta animación
00:04:23
Recordemos que html solo es un lenguaje de marcado, es decir, presenta la información
00:04:32
Mientras que javascript es un lenguaje de animación, sirve en este caso para aportar movimiento a los objetos que tenemos dentro de un html
00:04:39
- Subido por:
- Ivan S.
- Licencia:
- Reconocimiento
- Visualizaciones:
- 5
- Fecha:
- 16 de octubre de 2023 - 23:12
- Visibilidad:
- Clave
- Centro:
- IES LUIS BUÑUEL
- Duración:
- 04′ 51″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 126.41 MBytes
