👰 ♠️ 🚭 Un mois avec Animate CC 📒 🖖🏽 🎢

Une description de mon expérience en passant de Flash à Animate CC et en créant des bannières au format HTML5 omnipotent. Beaucoup de photos sous la coupe

Un peu d'excursion historique et de termes

Personnellement, je connais moi-même Flash depuis plus de 10 ans et j'ai une petite idée du fonctionnement de cette technologie «de l'intérieur».

Depuis à peu près le même nombre d'années, je crée des sites Web, y compris dans le langage HTML5 "moderne", qui, comme on dit, peut tout faire. Non, vraiment, des designers parfois têtus ont envoyé de telles interfaces qui n'existaient pas dans la nature, il fallait les inventer, se cachant derrière la phrase "on peut tout écrire en HTML5!"

Je ne prétends pas à la valeur artistique particulière de mes créations, mais le nombre de bannières que j'ai dessinées a dépassé le millier, et je continue de les dessiner presque tous les jours.

Au cours des 5 dernières années, le flash n'a pas seulement lancé les paresseux et n'a pas vraiment compris le problème. Personnellement, je n'ai jamais vu de freins ou de trous, et même au sujet de la toute première déclaration de Steve Jobs selon laquelle "Flash n'est pas aiguisé par le doigt" - c'est complètement ridicule. La raison la plus évidente pour laquelle Apple s'oppose au flash sur les iPhones réside à la surface, mais ce n'est pas le cas maintenant.

Nous approchons du dénouement de la terminologie. HTML est un langage de balisage pour le texte et la disposition des éléments sur une page. Il ne sait comment effectuer aucune action par lui-même. Au lieu de Flash, ils signifient généralement «innovations HTML5»: lecture de vidéos sans Flash, animations sans Flash, fichiers à chargement multiple sans Flash, et bien d'autres choses.

Malgré les louanges qui retentissent partout, toujours aucun éditeur d'animation sain d'esprit n'est apparu sur le HTML5 "omnipotent", tandis qu'Adobe n'a pas transformé Flash CC en Animate CC, ajoutant, en fait, uniquement l'exportation vers HTML5.

Interface

L'interface Animate CC elle-même n'est pas différente de Flash, contrairement à Edge Animate, qui était extrêmement inhabituel. Il n'y a rien de plus à dire, et je n'ai pas remarqué la différence avec CS6, que j'utilisais depuis longtemps. Pour les bannières, AS3 n'est pas nécessaire, et c'était la dernière version prenant en charge AS2. Le convertisseur Swiffy que Google a fait n'était que des amis avec AS2.

* AS2,3 est le langage de programmation Action Script intégré à Flash qui vous permet de créer l'intégralité du composant non animé du film - afin que les boutons soient enfoncés, le film s'arrête aux bonnes images, afin que les informations puissent être lues, et que des scripts interactifs pour interagir avec le film puissent être lancés. En fait, c'est un langage assez puissant, et j'utilise seulement 0.000001% de ses fonctionnalités.

Moteur de rendu

Naturellement, les objets eux-mêmes ne peuvent pas se déplacer à l'intérieur du rouleau, pour cela il est nécessaire qu'un moteur les déplace, les montre et les cache. Animate CC utilise CreateJS pour les projets de style HTML5 Canvas, qui accueille chaque nouveau projet avec un merveilleux avertissement. C'est agréable d'être averti. Apparemment, c'est une tâche irréaliste - de prendre un par un du cadre dans lequel vous voulez aller.

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

Chronologie et espace de travail

Parce que l'interface n'a subi aucune modification pour moi tout ici est absolument standard. Il n'y a aucune différence. Le système étant configuré en russe, la version russe du package a été téléchargée. Cela ne me dérange pas beaucoup, car j'utilise des raccourcis clavier, même si parfois je m'accroche à ce que je dois choisir dans le menu.

Passons maintenant à ce que j'utilise constamment:

Filtres standard dans Flash

Les filtres sont l'un des composants très fréquents de toutes les bannières, ils vous permettent d'obtenir rapidement le résultat souhaité. Je considérerai 3 filtres que j'utilisais très souvent. En flash, les filtres font partie de la norme, et dans mon travail, ils n’ont eu aucun impact sur les performances, et ils ne l’ont pas pu, en principe. Ci-après, j'utiliserai l'exportation vers GIF pour comprendre la différence

Ombre

L'ombre est l'une des options les plus simples pour agrandir des parties de la bannière et se concentrer sur les bons blocs. Bien sûr, je pris une ombre trop forte pour illustrer la différence par
rapport:

Flash	Createjs

Oui, l'animation d'ombres n'est pas possible. De plus, si la vidéo est plus longue que ce que j'ai soumis pour le test, l'ombre devient une chose inconnue.
Il convient également de mentionner ici que dans l'éditeur et le html5 terminé, les ombres (et en fait tous les effets) sont très différentes.

L'éditeur	Résultat

Lors de l'exportation dans une trace, vous pouvez voir l'inscription suivante:
, , . (4)
Eh bien, merci pour au moins l'avertissement ... La

performance de la bannière avec des ombres laisse beaucoup à désirer, mais ils ont prévenu. En effaçant les ombres de ces substrats, j'ai réduit la charge à 40%. Flash a peint tout cela avec 23% de la charge avec les ombres, bien sûr

Lueur

L'une des façons les plus simples de mettre en surbrillance du texte sur un arrière-plan hétéroclite est d'y ajouter un trait, cela se fait simplement en utilisant une lueur avec un pourcentage élevé d'intensité.

Flash	Createjs

Dans le même temps, l'éditeur est toujours le même, "La visibilité est nulle, je marche sur des appareils":

Il y a une solution possible à ce problème, si nécessaire, je vais la partager, les substrats de lettres sont utilisés très souvent et il n'est tout simplement pas possible de vivre sans eux.

De plus, la lueur n'est pas seulement un coup de lettres, mais le résultat laisse entendre qu'elle ne sera pas

Flash	Createjs	Dans l'éditeur

Flou

Pas de commentaire. Le flou n'est disponible que pour les objets statiques, il est donc impossible d'utiliser ce filtre pour l'apparence des textes.

Flash	Createjs

Comment les problèmes ci-dessus peuvent exister avec la pénétration généralisée des mêmes filtres SVG et filtres en CSS - je ne peux pas imaginer.

Problèmes d'exportation et d'emballage

Tout le monde est habitué au fait que le clip dans le flash est un fichier autonome. L'exportation HTML5 génère un tas de fichiers, au lieu d'un. Le projet Swiffy, inventé par Google pour convertir SWF en HTML, a tout emballé dans un fichier HTML. Apparemment, cette tâche était un fardeau écrasant pour les créateurs d'Animate CC. Vous pouvez lire un article détaillé sur le remplissage de «tout» dans un seul fichier pour DoubleClick ici . J'ai fait mon convertisseur à la volée, bloquant la construction d'une paire de fonctions en php, mais il est loin d'être idéal, même un brouillon. Résout mes tâches - et bien.

Bannières en caoutchouc

Par défaut, Animate semble prendre en charge le caractère «caoutchouteux» des bannières, mais généralement les bannières en caoutchouc désignent celles qui s'étendent horizontalement et non proportionnellement le long des deux axes. Dans le modèle d'exportation, cela s'appelle une mise à l'échelle réactive, et dans le cas des bannières qui ne s'étendent que le long de l'axe X, cela a conduit à des problèmes drôles jusqu'à ce que je le coupe du modèle

En général, vous pouvez complètement abandonner l'idée d'étirer la bannière, prenez simplement la taille maximale de la bannière et spécifiez la largeur du clip égale à la taille minimale de la bannière et de la partie recadrée en utilisant le débordement: masqué, puis centrez l'élément CANVAS (en indiquant sa largeur égale à la taille maximale de la bannière) en la ligne horizontale à l'intérieur du lien, qui occupe 100% de la largeur, est encore plus simple ici qu'elle ne l'était dans FLASH et ne nécessite aucun script supplémentaire à l'intérieur de la vidéo, seulement css.

Total

Vous pouvez vivre, vous pouvez utiliser, vous ne pouvez pas supporter les freins. Une restriction a été introduite pour mon client principal par la sous-traitance - pas plus de 5 scènes par bannière, sinon tout commence à ralentir sauvagement sur un grand site de nouvelles avec un tas de spots de bannière. Flash a été dessiné depuis très longtemps et extrêmement rapidement par une carte vidéo de tout type, et le Saint Graal sous forme d'abréviations magiques HTML5 et CSS3 a jusqu'à présent été réalisé en papier mâché en termes d'animation et d'éléments interactifs. Y compris, sur les appareils mobiles pour lesquels Flash est censé être enterré, les performances de ces vidéos soulèvent de sérieux doutes. Pas un seul standard ne sera déchiré jusqu'à ce que le flash soit finalement enterré.

Un mois avec Animate CC