Conhecendo Adobe Edge

Conheça cada parte desta magnifica ferramenta para animação em HTML 5.

Publicado em

Adobe Edge Animate é um software para animação, o resultado final é um arquivo no formato HTML, a ferramenta nos possibilita criar muitas animações, a criatividade é o seu limite.

Atualmente Adobe Edge é um software sem muito suporte nem mesmo foco para o Adobe, ele foi lançado quando o Flash havia sido descontinuado por questões do SWF para gerar animações em HTML 5, mas posteriormente a  Adobe voltou atrás e ressuscitou o Flash com exportação em HTML 5, dai em diante o Edge foi esquecido.

Neste artigo você conhecerá as principais partes da ferramenta em uma breve introdução, nos próximos artigos você desenvolverá animações usando todas as partes explicadas aqui, então se necessário, releia várias vezes este artigo.

Quando o Software é carregado pela primeira vez, você encontra organizado como a imagem abaixo, note apenas a organização das abas, já que não é possível ler os textos.

Imagem sem descrição.
Imagem sem descrição.

Aba Lessons

Imagem sem descrição.
Imagem sem descrição.

Nesta aba você pode conhecer a ferramenta através de exemplos prontos e explicação passo a passo de cada animação disponível, porém para entender é necessário ter domínio do idioma Inglês ou usar um tradutor, o que torna o aprendizado muito mais complicado.

Basta clicar em um tópico para abrir as instruções.

Aba Elements

Imagem sem descrição.
Imagem sem descrição.

Nesta aba é exibido todos os itens que estão em alguma parte da animação, note que existe uma imagem chamada cad01, na frente do nome há o símbolo de um olho e um circulo, se clicar no olho, a imagem é ocultada da tela, mas não excluída, já o circulo, se for clicado tranca a imagem, não será possível seleciona-lo, sendo assim o símbolo do circulo é alterado para um cadeado, para desfazer a alteração, basta clicar no símbolo novamente.

Aba Library

Imagem sem descrição.
Imagem sem descrição.

O Edge é um software muito organizado, nesta parte você pode conferir todos os “itens” para sua animação, estes itens estão na pasta do projeto, seja Imagem, Símbolo, Fonte, Áudio, vídeo ou Script, eles só são carregados se for chamado durante a animação, mas isto não significa que você pode encher de arquivos desnecessários, isto pesa a pasta do projeto.

Há um problema em alguns momentos, se você adicionar uma imagem direta na pasta Images que ele cria, a ferramenta vaia atualizar o projeto para exibir na Library, às vezes acontece de não atualizar apenas a Library, mas sim o projeto todo, então se você não salvou as alterações anteriores, poderá perder tudo.

Outro problema é quando for apagar uma imagem, sempre faça isto pela ferramenta, selecionando a imagem em seguida pressionando a tecla Delete, ou se preferir botão direito do mouse, Delete. Apagar direto da pasta, em alguns momentos a ferramenta não atualiza seu banco de informações e toda vez que for salvar o projeto, fica exibindo uma mensagem dizendo que a imagem apagada não pode ser encontrada.

Aba Properties

Imagem sem descrição.
Imagem sem descrição.

Esta é uma das abas mais importante e que você mais vai utilizar, ela exibe todas as configurações de um elemento selecionado, neste caso esta exibindo informações da imagem cad01.

Esta aba será explicada nos próximos artigos, por se tratar de algo muito complexo, note que na frente de cada rotulo, há o símbolo de um Losango (quadrado deitado), clicando nele é inserido um marcador na Timeline (veremos posteriormente) contendo o valor atual do rótulo, são através destes valores que é gerado as animações.

Aba Scene

Imagem sem descrição.
Imagem sem descrição.

Esta aba representa a cena principal, onde tudo será inserido, arrastado e manipulado, é neste espaço que você vai inserir seus objetos para a animação.

Este será o espaço que você vai trabalhar o tempo todo, sendo as demais abas apenas para ajustes e organizações.

Veremos detalhadamente mais sobre ela no próximo artigo, imagine que este palco seja a tela de desenho do Paint ou até mesmo uma fola Sulfite.

Imagem sem descrição.
Imagem sem descrição.

Esta linha do tempo controla todas as marcações e transações de uma animação, note que existe uma linha vermelha com um ponteiro em cima, isto é chamada de agulha, na ferramenta ela marca o ponto que esta sendo “lido” na animação.

No canto esquerdo temos alguns botões com certas funcionalidades e logo abaixo, são exibidos todos os elementos em cena, como é possível notar a imagem cad01, se houver outros elementos também serão exibidos.

No canto direto possui a linha do tempo, ela é controlada por segundos, podemos marcar um ponto X e outra no ponto Y, neste meio termo é criado uma transação, gerando uma animação.

Fechando janelas

Imagem sem descrição.
Imagem sem descrição.

Caso queria fechar uma janela, basta clicar no símbolo de uma lista ao lado de cada aba, em seguida clicar na opção Close Panel.

Aba Tool

Imagem sem descrição.
Imagem sem descrição.

Esta aba contém todas as ferramentas necessárias para manipular a cena, começando da esquerda para a direita, abaixo segue todas as informações sobre o que cada uma faz.

  1. seta – Permite selecionar um elemento.
  2. transform – possibilita fazer transações em objetos, como escala e rotação.
  3. clipping – permite alterar o ponto de origem de um elemento.
  4. rectangle – Permite desenhar um retângulo.
  5. rounded rectangle – Permite desenhar um retângulo arredondado.
  6. ellipse – Permite desenhar um circulo.
  7. text – Permite adicionar textos na tela.
  8. hand – Permite se movimentar na tela.
  9. zoom – permite aproximar/desaproximar a visão da tela.

Agora você esta apto a prosseguir com as próximas aulas, pois já conhece toda interface e as partes da ferramenta.

Até a próxima!!!

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção