Cómo crear y publicar documentos en HTML5 Canvas - Fácil y práctico

Quien soy
Marie-Ange Demory
@marie-angedemory
REFERENCIAS EXTERNAS:

vgr.com gamedesigning.org Reddit.com

Autor y referencias

Adobe ha dado mucho de qué hablar desde sus inicios. Los diferentes programas nacidos de esta organización han cambiado la forma de crear, diseñar y modificar elementos de contenido digital, principalmente para las redes sociales más populares.

Hay muchos programas de fama mundial que forman parte de Adobe Inc. En esta oportunidad aprenderá más sobre qué es Adobe Animate CC .


¿Qué es Adobe Animate CC?

È uno de los mas famosos de la compañia . Esta herramienta le permite crear y manipular gráficos vectoriales como Corel Photo Paint. Este programa es un estudio de animación ideal para proporcionar contenido digital interactivo.


Herramientas de diseño

Tiene un diverso arsenal de instrumentos lo que te permite ir un poco más allá en tus creaciones. Algunas de las características que puedes obtener en su interfaz son:

  • Gráficos vectoriales y de trama.
  • Sonar.
  • Código Panorámico.
  • Video en directo.
  • Audio bidireccional (solo cuando se usa junto con Macromedia Flash Communication Server).

Su uso en grandes empresas.

Los nombres de los principales canales de televisión han utilizado este programa para la creación y diseño de películas y series. Algunos de los más conocidos son:

  • Cartoon Network : El asombroso mundo de Gumball, Hora de aventuras, La mansión de Foster para amigos imaginarios.
  • Disney : Kick Buttowski, Gravity Falls, Ralph el Demoledor.
  • Nickelodeon : Danny Phantom, La casa ruidosa, Los padrinos mágicos.
  • Pixar : animación de los créditos de películas como Wall-E, Los Increíbles y Ratatouille.

aplicación HTML5

Este programa antes se conocía como Adobe Flash Professional , Macromedia flash e Animador FutureSplash . No fue hasta diciembre de 2015 que la empresa anunció que cambiaría su nombre a Adobe Animate, como una forma de desvincular los programas anteriores con Adoble Flash Player y la creación de HTML5.



Leer ¿Qué sistema de desbloqueo es más rápido entre Face ID y Touch ID?

A través de Canvas era posible generar gráficos o renderizado dinámico tanto para gráficos 2D mapa de bits .

Crear y publicar documentos en HTML5 Canvas

Si estás empezando a interesarte por este mundo de la creación y el diseño, en esta ocasión conocerás los primeros pasos a dar diseñar un documento y publicarlo en HTML5 Canvas .

Proceso de creación

Para crear un documento HTML5 Canvas, puede, desde la página de inicio de Adobe Animate, hacer clic en la opción HTML Canvas en la sección Crear nuevo.

Si por alguna razón no puede ver este cuadro, puede realizar el proceso de creación de la siguiente manera:

  1. Vaya a la pestaña Archivo.
  • Nuovo
  • Seleccione el tipo de lienzo HTML5.
  • Haga clic en aceptar.

Proceso de diseño

Una vez que tenga la escena en la que puede diseñar, es hora de usar el diferentes herramientas que te ofrece Adobe Animate . Si recién está comenzando a usar este programa, lo ideal es que sea paciente al explorar las opciones.

Empezando a diseñar

Idealmente, para comenzar a aprender Adobe Animate, debe comenzar a usar herramientas de lápiz , ya que son los más fáciles de manipular.


De esta función puedes empezar a dibujar y animar . Para agregar cuadros en blanco, presione F7 y continúe dibujando hasta que complete la animación que desea renderizar.

Guarda tu diseño

Una vez finalizado el proceso de creación y diseño, proceda a salvataggio . Para publicarlo más tarde. En este sentido, debe hacer clic en:


  • Pestaña de archivo.
  • Salvar.
  • Cree una nueva carpeta para su diseño.
  • Presione CTRL + ENTER para mostrarle la animación en su navegador.

Proceso de publicación

Vuelva a Adobe Animate para ver la opciones de configuración por publicar el diseño que creaste. Debido a esto:


  • Haga clic en el archivo.
  • Publica tu configuración.
  • Aparecerá un cuadro de diálogo en el que asignará un nuevo nombre a su diseño (si ha nombrado a su diseño, por ejemplo, animación, configúrelo como animación2).
  • Asegúrese de que todas las casillas de la sección Archivos de salida estén marcadas.
  • Haga clic en aceptar.
  • Vuelva a la pestaña Archivo y seleccione la opción Publicar.
Leer Red wifi pública: ¿Cuáles son los riesgos y peligros de conectarse a una red?

De esta forma, cuando vuelvas a la carpeta que creaste para tu dibujo, encontrarás 2 archivos nuevos: HTML y JavaScript con el nuevo nombre que le asignaste a tu animación.

Añade un comentario de Cómo crear y publicar documentos en HTML5 Canvas - Fácil y práctico
¡Comentario enviado con éxito! Lo revisaremos en las próximas horas.