👵🏼 🤴 🔫 Um mês com o Animate CC 📐 🎱 🤛🏼

Uma descrição da minha experiência, passando do Flash para o Animate CC e criando banners no formato HTML5 onipotente. Muitas fotos sob o corte

Um pouco de excursão histórica e termos

Pessoalmente, eu mesmo conheço o Flash há mais de 10 anos e tenho uma pequena idéia de como essa tecnologia funciona "de dentro".

Por quase o mesmo número de anos, venho criando sites, inclusive na linguagem HTML5 "moderna", que, como eles dizem, pode fazer tudo. Não, na verdade, às vezes os designers obstinados enviavam interfaces que não existiam na natureza; elas precisavam ser inventadas, escondendo-se atrás da frase "você pode escrever tudo em HTML5!"

Não pretendo o valor artístico especial de minhas criações, mas o número de faixas que desenhei ultrapassou mil e continuo desenhando-as quase todos os dias.

Nos últimos 5 anos, o flash não chutou apenas os preguiçosos e, na verdade, não entendeu o problema. Pessoalmente, nunca vi freios ou buracos, e mesmo sobre a primeira declaração de Steve Jobs de que “o Flash não é afiado pelo dedo” - isso é completamente ridículo. A razão mais óbvia pela qual a Apple se opõe ao flash nos iPhones está na superfície, mas não é isso agora.

Estamos nos aproximando do desenlace da terminologia. HTML é uma linguagem de marcação para texto e o layout dos elementos em uma página. Ele não sabe como executar nenhuma ação por conta própria. Em vez de Flash, eles geralmente significam "inovações em HTML5": reprodução de vídeos sem Flash, animações sem Flash, arquivos de carregamento múltiplo sem Flash e outras coisas.

Apesar dos elogios soarem em todos os lugares, até agora nenhum editor de animação sensato apareceu no HTML5 "onipotente", enquanto a Adobe não converteu o Flash CC para o Animate CC, adicionando, de fato, apenas exportação para HTML5.

Interface

A interface do Animate CC em si não é diferente do Flash, ao contrário do Edge Animate, que era muito incomum. Não há muito mais a dizer e não notei a diferença com o CS6, que usei por um longo tempo. Para banners, o AS3 não é necessário e esta foi a versão mais recente que suporta o AS2. O conversor Swiffy que o Google fez era apenas amigo do AS2.

* AS2,3 é a linguagem de programação Action Script embutida no Flash que permite criar todo o componente não de animação do videoclipe - para que os botões sejam pressionados, o vídeo pause nos quadros corretos, para que as informações possam ser lidas, e scripts interativos para interagir com o vídeo. De fato, essa é uma linguagem bastante poderosa e uso apenas 0,000001% de sua funcionalidade.

Mecanismo de renderização

Naturalmente, os objetos em si não podem se mover dentro do rolo, para isso é necessário que algum motor os mova, mostre e oculte. O Animate CC usa projetos no estilo CreateJS para HTML5 Canvas, que acolhem todos os novos projetos com um aviso maravilhoso.É bom ser avisado. Aparentemente, essa é uma tarefa irrealista - pegar um por um do quadro para o qual você deseja ir.

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

Linha do tempo e espaço de trabalho

Porque a interface não sofreu nenhuma alteração para mim tudo aqui é absolutamente padrão. Não há diferença. Como o sistema está configurado em russo, a versão em russo do pacote foi baixada. Isso não me incomoda muito, porque eu uso teclas de atalho, embora às vezes eu segure no que preciso escolher no menu.

Agora vamos ao que eu constantemente uso:

Filtros padrão no Flash

Os filtros são um dos componentes mais frequentes de qualquer banner, pois permitem alcançar rapidamente o resultado desejado. Vou considerar três filtros que eu costumava usar com muita frequência. No flash, os filtros fazem parte do padrão e, no meu trabalho, eles não tiveram nenhum impacto no desempenho e, em princípio, não podiam. A seguir, usarei a exportação para GIF para entender a diferença

Sombra

Shadow é uma das opções mais fáceis para aumentar partes do banner e focar nos blocos certos. Naturalmente, eu levei uma sombra excessivamente forte para ilustrar a diferença
em comparação:

Flash	Createjs

Sim, animação de sombra não é possível. Além disso, se o vídeo for mais longo do que o que enviei para o teste, a sombra se tornará algo desconhecido.
Também vale a pena mencionar aqui que no editor e no html5 finalizado, as sombras (e de fato todos os efeitos) parecem muito diferentes.

O editor	Resultado

Ao exportar em um rastreamento, é possível ver a seguinte inscrição:
, , . (4)
Bem, obrigado pelo menos pelo aviso ... O

desempenho do banner com sombras deixa muito a desejar, mas eles avisaram. Apagando as sombras desses substratos, reduzi a carga para 40%. O Flash pintou tudo isso com 23% da carga junto com as sombras, é claro

Brilho

Uma das maneiras mais fáceis de destacar o texto em um plano de fundo heterogêneo é adicionar um traço, basta fazer um brilho com uma alta porcentagem de intensidade.

Flash	Createjs

Ao mesmo tempo, o editor continua o mesmo: "A visibilidade é zero, estou andando em dispositivos":

existe uma solução possível para esse problema; se necessário, compartilharei, os substratos de letras são usados com muita frequência e simplesmente não é possível viver sem eles.

Além disso, o brilho não é apenas um traço de letras, mas o resultado sugere que não será

Flash	Createjs	No editor

Desfocar

Nenhum comentário. O desfoque está disponível apenas para objetos estáticos, portanto, é impossível usar esse filtro para a aparência de textos.

Flash	Createjs

Como as falhas acima podem existir com a penetração generalizada dos mesmos filtros SVG e filtros em CSS - não consigo imaginar.

Problemas de exportação e embalagem

Todo mundo está acostumado ao fato de que o clipe no flash é um arquivo independente. A exportação HTML5 gera um monte de arquivos, em vez de um. O projeto Swiffy, criado pelo Google para converter SWF em HTML, compilou tudo dentro de um arquivo HTML. Aparentemente, essa tarefa foi um fardo esmagador para os criadores do Animate CC. Você pode ler um artigo detalhado sobre como colocar tudo em um único arquivo do Doubleclick aqui . Eu fiz o meu conversor em tempo real, bloqueando a construção de um par de funções no php, mas está longe de ser o ideal, mesmo um rascunho. Resolve minhas tarefas - e tudo bem.

Banners de borracha

Por padrão, o Animate parece suportar a "elasticidade" dos banners, mas geralmente os banners de borracha significam aqueles que se estendem horizontalmente e não proporcionalmente ao longo dos dois eixos. No modelo de exportação, isso é chamado de escala responsiva e, no caso de banners que se estendem apenas ao longo do eixo X, isso levou a falhas engraçadas até eu cortá-lo do modelo

Em geral, você pode abandonar completamente a ideia de esticar o banner, apenas pegar o tamanho máximo do local do banner e especificar a largura do clipe igual ao tamanho mínimo do local do banner e parte da colheita usando overflow: hidden, então centralize o elemento CANVAS (indicando sua largura igual ao tamanho máximo do local do banner) por a linha horizontal dentro do link, que ocupa 100% da largura, é um pouco mais simples aqui do que no FLASH e não requer scripts adicionais dentro do vídeo, apenas css.

Total

Você pode viver, pode usar, não suporta os freios. Uma restrição foi introduzida para o meu cliente principal por subcontratação - não mais que 5 cenas por banner, caso contrário, tudo começa a desacelerar descontroladamente em um site de notícias grande com vários pontos de banner. O Flash foi desenhado por um tempo muito longo e extremamente rápido por qualquer placa de vídeo, e o Santo Graal, na forma de abreviaturas mágicas HTML5 e CSS3, até agora foi feito de papel machê em termos de animação e elementos interativos. Inclusive, em dispositivos móveis para os quais o Flash supostamente está sendo enterrado, o desempenho desses vídeos gera sérias dúvidas. Nenhum padrão será rasgado até que o flash seja finalmente enterrado.

Um mês com o Animate CC