🆑 🉑 🦕 Un mes con Animate CC 👴🏿 👊🏿 👨🏻

Una descripción de mi experiencia al pasar de Flash a Animate CC y crear pancartas en el omnipotente formato HTML5. Muchas fotos debajo del corte

Un poco de excursión histórica y términos

Personalmente, yo mismo he estado familiarizado con Flash durante más de 10 años y tengo una pequeña idea de cómo funciona esta tecnología "desde adentro".

Durante casi el mismo número de años he estado creando sitios web, incluso en el lenguaje HTML5 "moderno", que, como dicen, puede hacer todo. No, realmente, a veces los diseñadores obstinados enviaron interfaces que no existían en la naturaleza, tuvieron que inventarse, escondiéndose detrás de la frase "¡puedes escribir todo en HTML5!"

No pretendo el valor artístico especial de mis creaciones, pero el número de pancartas que he dibujado ha superado las mil, y sigo dibujándolas casi todos los días.

En los últimos 5 años, flash no solo ha pateado a los perezosos, y realmente no ha entendido el problema. Personalmente, nunca he visto frenos ni agujeros, e incluso sobre la primera declaración de Steve Jobs de que "Flash no se afila con el dedo", esto es completamente ridículo. La razón más obvia por la que Apple se opone a flash en iPhones radica en la superficie, pero eso no se trata de eso ahora.

Nos estamos acercando al desenlace de la terminología. HTML es un lenguaje de marcado para texto y el diseño de elementos en una página. No sabe cómo realizar ninguna acción por su cuenta. En lugar de Flash, generalmente significan "innovaciones HTML5": reproducción de videos sin Flash, animaciones sin Flash, archivos de carga múltiple sin Flash y algunas otras cosas.

A pesar de los elogios que suenan en todas partes, todavía no apareció un solo editor de animación en el HTML5 "omnipotente", mientras que Adobe no convirtió Flash CC en Animate CC, agregando, de hecho, solo exportar a HTML5.

Interfaz

La interfaz de Animate CC en sí no es diferente de Flash, a diferencia de Edge Animate, que era muy inusual. No hay mucho más que decir, y no noté la diferencia con CS6, que usé durante mucho tiempo. Para los banners, AS3 no es necesario, y esta fue la última versión compatible con AS2. El convertidor Swiffy que hizo Google solo era amigo de AS2.

* AS2,3 es el lenguaje de programación Action Script integrado en Flash que le permite crear todo el componente que no sea de animación del clip de video, de modo que se presionen los botones, el video se detenga en los cuadros correctos, de modo que se pueda leer la información y se puedan iniciar scripts interactivos para interactuar con el video. De hecho, este es un lenguaje bastante poderoso, y uso solo el 0.000001% de su funcionalidad.

Motor de renderizado

Naturalmente, los objetos en sí no pueden moverse dentro del rodillo, para esto es necesario que algún motor los mueva, muestre y oculte. Animate CC utiliza CreateJS para proyectos HTML5 Canvas-style, que da la bienvenida a cada nuevo proyecto con una advertencia maravillosa. Es bueno ser advertido. Aparentemente, esta es una tarea poco realista: tomar uno por uno del marco al que desea ir.

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

Línea de tiempo y espacio de trabajo

Porque la interfaz no ha sufrido ningún cambio para mí, todo aquí es absolutamente estándar. No hay diferencia Como el sistema está configurado en ruso, se descargó la versión rusa del paquete. Esto no me molesta mucho, porque uso teclas de acceso rápido, aunque a veces me aferro a lo que necesito elegir del menú.

Ahora pasemos a lo que uso constantemente:

Filtros estándar en Flash

Los filtros son uno de los componentes muy frecuentes de cualquier pancarta, le permiten alcanzar rápidamente el resultado deseado. Consideraré 3 filtros que solía usar muy a menudo. En flash, los filtros son parte del estándar, y en mi trabajo no tuvieron ningún impacto en el rendimiento y, en principio, no pudieron. En adelante usaré exportar a GIF para entender la diferencia

Sombra

Shadow es una de las opciones más fáciles para agrandar partes del banner y enfocarse en los bloques correctos. Naturalmente, Tomé un excesivamente fuerte sombra para ilustrar la diferencia
en comparación:

Flash	Createjs

Sí, la animación de sombras no es posible. Además, si el video es más largo de lo que presenté para la prueba, la sombra se convierte en algo desconocido.
También vale la pena mencionar aquí que en el editor y el html5 terminado, las sombras (y de hecho todos los efectos) se ven muy diferentes.

El editor	Resultado

Al exportar en un rastro, puede ver la siguiente inscripción:
, , . (4)
Bueno, gracias al menos por advertencia ... El

rendimiento del banner con sombras deja mucho que desear, pero advirtieron. Borrando las sombras de estos sustratos, reduje la carga al 40%. Flash pintó todo esto con el 23% de la carga junto con las sombras, por supuesto.

Resplandor

Una de las formas más fáciles de resaltar el texto en un fondo multicolor es agregarle un trazo, esto se hace simplemente usando un brillo con un alto porcentaje de intensidad.

Flash	Createjs

Al mismo tiempo, el editor sigue siendo el mismo, "La visibilidad es cero, estoy caminando en los dispositivos":

hay una posible solución a este problema, si es necesario, lo compartiré, los sustratos de letras se usan muy a menudo y simplemente no puedes vivir sin ellos.

Además, el brillo no es solo un trazo de letras, sino que el resultado insinúa que no será

Flash	Createjs	En el editor

Desenfoque

No hay comentarios El desenfoque solo está disponible para objetos estáticos, por lo que es imposible usar este filtro para la aparición de textos.

Flash	Createjs

No puedo imaginar cómo pueden existir los problemas técnicos anteriores con la penetración generalizada de los mismos filtros SVG y filtros en CSS.

Problemas de exportación y empaque

Todos están acostumbrados al hecho de que el clip en el flash es un archivo autónomo. La exportación HTML5 genera un montón de archivos, en lugar de uno. El proyecto Swiffy, creado por Google para convertir SWF a HTML, empaquetó todo dentro de un archivo HTML. Aparentemente, esta tarea fue una carga abrumadora para los creadores de Animate CC. Puede leer un artículo detallado sobre cómo rellenar "todo" dentro de un solo archivo para Doubleclick aquí . Hice mi convertidor sobre la marcha, bloqueando la construcción de un par de funciones en php, pero está lejos de ser ideal, incluso un borrador. Resuelve mis tareas, y está bien.

Banners de goma

De manera predeterminada, Animate parece admitir la "gomosa" de las pancartas, pero generalmente las pancartas de goma significan aquellas que se extienden horizontalmente y no proporcionalmente a lo largo de ambos ejes. Esto se llama escalamiento receptivo en la plantilla de exportación, y en el caso de pancartas que se extienden solo a lo largo del eje X, esto provocó fallas divertidas hasta que lo corté de la plantilla

En general, puede abandonar por completo la idea de estirar el banner, simplemente tome el tamaño máximo del lugar del banner y especifique el ancho del clip igual al tamaño mínimo del lugar del banner y la parte de recorte usando overflow: oculto, luego centre el elemento CANVAS (que indica su ancho igual al tamaño máximo del lugar del banner) La línea horizontal dentro del enlace, que ocupa el 100% del ancho, es incluso un poco más simple aquí que en FLASH y no requiere ningún script adicional dentro del video, solo CSS.

Total

Puedes vivir, puedes usar, no puedes soportar los frenos. Se introdujo una restricción para mi cliente principal mediante la subcontratación: no más de 5 escenas por pancarta, de lo contrario, todo comienza a ralentizarse enormemente en un gran sitio de noticias con un montón de anuncios. Flash ha sido dibujado muy rápido y extremadamente rápido por una tarjeta de video de cualquier tipo, y el Santo Grial en forma de abreviaturas mágicas HTML5 y CSS3 hasta ahora ha sido hecho de papel maché en términos de animación y elementos interactivos. Incluso, en dispositivos móviles para los que supuestamente Flash está enterrado, el rendimiento de tales videos plantea serias dudas. No se romperá un solo estándar hasta que el flash finalmente esté enterrado.

Un mes con Animate CC