Blog Tecnológico

Publique animações para HTML5

Melissa Campuzano • 11 ago 2017

O Animate CC é a ferramenta de animação interativa com mais recursos de desenho inovador que permite publicar em várias plataformas como Flash/AIR, HTML5 Canvas, WebGL ou até plataformas personalizadas e alcance usuários em qualquer desktop ou dispositivo móvel.
Mas quais são as especificações que devem ser utilizadas em HTML5?
Siga aqui este tutorial, para publicar o conteúdo finalizado para HTML5, faça o seguinte:

Selecione Arquivo> Configurações de Publicação.



Na caixa de diálogo Configurações de Publicação, especifique as seguintes configurações: Configurações básicas

Nome de Saída Digite um nome ou ele sera salvo automaticamente com o mesmo nome com o que foi salvo na hora de criar o arquivo
O diretório tipo HTML será publicado por padrão no mesmo diretorio que o FLA, mas pode ser alterado clicando no icone da pastinha para mudar o local onde deseje salvar o arquivo HTML

Linha do tempo do loop
Para verificar os laços da linha de tempo, se não for interrompido quando tocar no final.

Incluir camadas ocultas
Se for deseleccionado, as camadas ocultas não são incluídas na saída.

Centro do palco
Permite que os usuários selecionem se o estágio deve ser centrado horizontalmente, verticalmente ou ambos. A tela / etapa HTML é exibida no centro da janela do navegador por padrão.




Permitir respostas

Permite que os usuários selecionem se a animação deve responder com referência à largura, altura ou ambos e redimensiona o resultado publicado com base em vários fatores de forma. O resultado é uma saída compatível, mais nítida e mais rápida compatível com HiDPI. A saída também se estende para cobrir toda a área da tela sem bordas, e ainda mantém a proporção de aspecto original, embora alguma parte da tela possa não caber na visualização.
A largura, a altura ou as duas opções garantem que todo o conteúdo seja reduzido ao tamanho da tela e seja visível mesmo quando você visualiza numa tela pequena (como dispositivos móveis ou tablets). Se o tamanho da tela for maior que o tamanho do estágio de autoria, a tela será exibida no tamanho original.




Dimensionar para preencher a área visível

Permite que os usuários selecionem se a animação deve caber para ver a saída no modo de tela cheia ou deve se estender para caber. Por padrão, esta opção está desabilitada. Ajustar na exibição: exibe a saída no modo de tela cheia com todo o espaço da tela e ainda mantém a relação de aspecto. Esticar para ajustar: estica o tamanho do palco de forma que não existam espaços de borda na saída.




Incluir Pré-carregador

Permite que os usuários selecionem se querem o pré-carregador padrão ou selecione um pré-carregador de sua escolha na biblioteca de documentos. Preloader é um indicador visual na forma de um GIF animado que é exibido quando os scripts e os recursos necessários para renderizar uma animação estão sendo carregados. Uma vez que os ativos são carregados, o pré-carregador está oculto e a animação atual é exibida. Por padrão, a opção Pré-carregador não está selecionada.
Opção Padrão para usar o preloader padrão ou Procurar para selecionar a opção para usar o GIF pré-carregador de sua escolha. O pré-carregador GIF é copiado para a pasta de imagens configurada nos recursos Exportar ativos de imagem.
Use a opção Pré-visualizar para visualizar o GIF selecionado.




Publicar ativos de tela na pasta raiz

Exportar ativos de imagem
A pasta na qual os recursos das imagens são colocados e referenciados. Combine em planilhas de identidades graficas: Selecione isso para combinar todos os recursos da imagem em uma spritesheet.

Exportar ativos de som
A pasta na qual os recursos de som em seu documento são colocados e referenciados.

Exportar ativos do CreateJS
A pasta na qual as bibliotecas CreateJS são colocadas e referenciadas.
A configuração padrão publica arquivos segregados em subpastas lógicas.




Planilha de identidades Graficas
Os URLs relativos para exportar imagens, sons e suporte para bibliotecas de JavaScript CreateJS são configurados aqui. Se a caixa de seleção à direita não estiver marcada, esses recursos não são exportados da FLA, mas o caminho especificado ainda é usado para montar seus URLs. Ele agiliza a publicação de um FLA com muitos recursos de mídia ou evita a substituição de bibliotecas de JavaScript modificadas. A opção Combinar ativos de imagem em planilhas de entidades gráficas permite que você empacote todos os bitmaps no documento de tela em uma planilha, o que reduz o número de solicitações do servidor e melhora o desempenho. Você pode especificar o tamanho máximo dasplanilhas de identidades gráficas, fornecendo os valores de altura e largura.

 

 

Avançado

Modelo para publicação de HTML
Usar Padrão: Publique sua saída HTML5 usando o modelo padrão.

Importar novo: Importe um novo modelo para o seu documento HTML5.

Exportar: Exporte seu documento HTML5 como um modelo.

 

Substituir o arquivo HTML ao publicar

Animate apresenta a capacidade de incluir o arquivo JS dentro do arquivo HTML durante a publicação da tela.
Selecione Incluir JavaScript em HTML.



Substitua o arquivo HTML na publicação e inclua JavaScript em HTML

Opções avançadas de Javascript

Bibliotecas hospedadas:
Se marcado, ele usa cópias das bibliotecas hospedadas no CreateJS CDN em code.createjs.com. Permite que as bibliotecas sejam armazenadas em cache e compartilhadas entre vários sites.

Formas compactas:
Se marcada, as instruções vetoriais são emitidas de forma compacta. Desmarque para exportar instruções legíveis e detalhadas (úteis para fins de aprendizagem).

Limites Multiquadro:
Se marcado, os símbolos da linha de tempo incluem uma propriedade frameBounds que contém uma matriz de retângulos correspondente aos limites de cada quadro na linha de tempo. Os limites de Multiframe aumentam significativamente o tempo de publicação.



Clique em OK para publicar seu conteúdo no local especificado.

Melissa Campuzano

Melissa Campuzano, graduada em Design Gráfico pela UCATEC, com grau de Record Acadêmico.

Trabalha na área de Design, desenvolvendo projetos variados de design, imagem corporativa e eventos no exterior.
Com suas peças gráficas conseguiu mudar a percepção do público sobre o que significa estudar numa universidade de empreendedores.
É instrutora e consultora das tecnologias Adobe, atuando na ENG DTP & Multimídia.

CONTATO