Animações com Adobe Edge Animate

Os usuários na web esperam encontrar designs espetaculares e apreciar as animações que contribuem para esses designs, desde que não percam tempo ou influenciem negativamente a navegação na página.
Animações bem feitas focam a atenção em detalhes importantes, podem mostrar como um aplicativo funciona e ajudar a navegação se atenderem ao requisito anterior, onde muitas dessas animações foram feitas com Clarão e se tivessem a qualidade necessária, foram bem recebidos pelo usuário.
Mas os tempos mudaram e, assim como as tecnologias também evoluíram a forma de fazer animações, é aí que entra Adobe Edge Animate, uma ferramenta que nos permite criar animações com HTML5, CSS3 e JavaScript sem a necessidade de conhecimento de programação.
O acima pode parecer um pouco complicado, como é possível ter uma ferramenta que me ajude a criar animações nessas tecnologias, sem conhecimento de programação? Não é tão complicado como parece, mas primeiro temos que conhecer a ferramenta e que temos que trabalhar com ela, para isso vamos executá-la e seremos recebidos pela tela inicial que deve ficar assim:

PROLONGAR

Do lado direito podemos ver alguns links para aprender a fazer algumas animações com a ferramenta e do lado direito links para abrir um arquivo ou criá-lo. Vamos clicar no link Crie um novo e seremos levados para a área de trabalho da ferramenta, por enquanto não vamos nos preocupar com isso, mas vamos salvar nosso projeto para poder examinar a estrutura criada pela ferramenta, vamos ver como fica nossa estrutura:

PROLONGAR

Se estivermos familiarizados com o desenvolvimento de aplicações web, podemos ver alguns arquivos com extensões conhecidas, vamos ver a função de cada um deles dentro de um projeto de Edge Animate:
. Um arquivoEste arquivo é usado pela ferramenta para acompanhar nosso projeto.
Arquivo .HtmlEste arquivo descreve uma página da web que usa código HTML, bem como o resto das páginas da Internet.
Arquivo .JsEsses arquivos contêm código JavaScript para o nosso projeto, que define um palco em branco para a nossa animação e realiza outras tarefas necessárias nos projetos de Edge Animate.
Bem como esses arquivos, na pasta edge_includes temos dois arquivos JavaScript adicionais, que são bibliotecas para nosso projeto e são referenciadas em nosso HTML e sua função é realizar a ação do movimento como tal.
Depois de ver como nosso projeto está estruturado, é hora de conhecer as áreas de nosso espaço de trabalho, primeiro vamos ver como fica:

PROLONGAR

Cada painel é identificado por nome, onde o Elementos, Propriedades (editar) e a Linha do tempo Eles têm ferramentas e widgets para criar animações. O maior painel é conhecido como palco o Estágio e lá construímos a animação, vamos dar uma olhada mais de perto em cada um dos elementos em nosso espaço de trabalho:
EstágioÉ aqui que são apresentados e animados os gráficos e o texto do projeto, tem limites na sua disposição e permite ocultar elementos ou posicioná-los nele. Além disso, quando salvamos nosso projeto Animar cuida de salvar o texto e os gráficos como uma página HTML.
ElementosOs elementos são objetos que adicionamos ao nosso palco e como resultado aparecem na nossa página web final, onde esses elementos podem ser ilustrações, fotografias ou mesmo texto.
Propriedades (editar)Os elementos possuem propriedades que podem afetar sua posição e até mesmo a aparência no palco e podemos gerenciá-los usando o painel de Propriedades (editar).
Linha do tempoIsso nos permite manter um registro dos elementos e suas propriedades ao longo de nosso projeto.
BibliotecaAqui podemos manter um registro dos recursos que importamos para o projeto e fornecer acesso fácil aos símbolos em que acreditamos Animar.
FerramentasEles aparecem na parte superior da área de trabalho. Nós os usamos para criar, selecionar e modificar elementos no palco, não são muitos, mas ficaríamos surpresos em saber o quanto podemos fazer com eles.
Como sabemos como nossa ferramenta é distribuída e estamos familiarizados com seus conceitos, podemos nos aventurar a criar nossa primeira animação.
Para criar nossa primeira animação vamos experimentar um pouco com as transições em uma determinada imagem, vamos ver os passos a seguir:
1- Vamos criar um novo projeto com a opção novo arquivo no caso que fechamos no qual estamos trabalhando para entender a estrutura e os elementos dentro da ferramenta. Quando iniciamos um projeto, nosso palco está em branco, podemos mudar isso nas propriedades de estágio no lado esquerdo da tela, para isso pressionamos a caixa branca e escolhemos uma cor de nossa preferência ou no caso de termos uma cor em notação hexadecimal podemos incluí-la como vemos na imagem a seguir:

PROLONGAR

2- No caso deste tutorial escolhemos uma cor escura para que a imagem que iremos incluir no estágio destaque. Agora, para incluir uma imagem, vamos Arquivo e nós selecionamos importar, o explorador de arquivos será exibido e selecionamos a imagem a ser incluída:

PROLONGAR

É importante que nas propriedades do nosso cenário tenhamos o overflow u transbordar em escondido Uma vez que nossa estágio ele apresenta uma pequena parte de todo o nosso HTML, portanto, se não quisermos ver elementos fora do palco, é importante ter esse valor para essa propriedade. Também podemos alterar o nome de nossos elementos na seção de Propriedades (editar), desta forma podemos identificá-los melhor em nosso projeto.
3- Agora vamos ao nosso Linha do tempo e verificamos se o contador de reprodução está em 0:00 para começar com nossa animação. É aqui que entra a parte interessante e é aqui que devemos prestar a máxima atenção, primeiro devemos verificar se o modo de quadro-chave é urgente, bem como o modo de transição automática, que podemos ver na imagem a seguir:

Para fazer nossas animações, devemos usar a funcionalidade de Alternar pino que é ativado no botão próximo ao modo de transição automáticaAo ativar este botão ativamos os frames ou a transição e deve ser acompanhado do contador amarelo, pois desta forma podemos fazer uma transição de tantos segundos até que movamos nosso Pin ao mesmo nível do segundo contador.
4- Para realizar o nosso primeira transição vamos apertar o botão Alternar pino e vamos pegar o segundo contador e vamos movê-lo 200 segundos, depois disso, movemos nossa imagem para a parte inferior da tela, vamos ver como fica:

PROLONGAR

Como podemos ver a parte destacada em azul no Linha do tempo representa a transição que podemos visualizar se pressionarmos a tecla de espaço. Vemos então que é muito fácil fazer uma transição, mas e se quisermos fazer uma segunda transição ou mais delas? Para isso, devemos mover nosso PIN em direção ao segundo contador, desta forma, indicamos para Animar que estamos encerrando o processo da primeira transição e podemos iniciar uma nova.
5- Vamos fazer um segunda transição onde desta vez vamos diminuir a opacidade de nossa imagem, para isso selecionamos nossa imagem diminuindo sua opacidade para 46% e como mencionamos movemos o PIN no segundo contador e repita os passos do ponto 4, vejamos:

PROLONGAR

6- Finalmente vamos fazer um terceira transição para completar nossa animação. Como já sabemos, movemos nosso segundo contador por alguns segundos, arrastamos nossa imagem diagonalmente para a esquerda e fechamos a transição movendo o PIN sobre o segundo contador:

PROLONGAR

7- Salvamos nosso trabalho e pressionamos a tecla de espaço para ver nossa animação, se ainda não estivermos satisfeitos podemos nos mover pelas transições que são representadas pela cor azul em nosso Linha do tempo e modificamos os valores ou se desejamos o tipo de transição.
Uma vez que estamos satisfeitos com nosso trabalho, é hora de darmos o passo final, que é exibi-lo para visualização em um navegador, que é o objetivo para o qual estamos trabalhando.
Existem duas formas de visualizar o nosso trabalho, a primeira e a mais simples pode ser feita a partir da ferramenta, para isso vamos à aba Arquivo e nós selecionamos Pré-visualizar no navegador, que abrirá imediatamente a animação em nosso navegador da web padrão:

O segundo é um pouco mais complicado se não tivermos experiência em desenvolvimento web, que é pegar os arquivos e fazer uma integração com nosso aplicativo web. É importante ter muito cuidado ao fazer isso e incluir todos os arquivos gerados por Animar caso contrário, a animação não funcionará.
Com isso finalizamos este tutorial, onde pudemos saber como funciona Adobe Edge Animate, vendo suas características mais importantes e fazendo nossa primeira animação em questão de minutos sem a necessidade de uma única linha de código, gerando-a com HTML5 Y JavaScript para implementação em qualquer aplicativo da web.