Com a reformulação da web, principalmente os designers têm passado por dificuldades para a migração para o HTML5, já que não existe nenhuma ferramenta visual que realmente facilite o trabalho, e neste caso alinhamentos são necessários conhecimentos básicos de CSS.

Essa nova ferramenta da Adobe veio para facilitar o desenvolvimento e a produtividade em especial de designers e animadores, que estavam com dificuldade em criar trabalhos criativos complexos ou mesmo animações refinadas.

Edge Animate é a nova ferramenta da Adobe, baseada nos novos padrões da web e utilizada em browsers modernos, utilizando HTML5, CSS3 e JavaScript (principalmente a biblioteca jQuery). A principal novidade é que não é preciso utilizar qualquer plugin para rodar animações, vídeos ou sons.

Animações que rodam em qualquer plataforma, seja Desktop, Smatphones ou tablets, incluindo os dispositivos Apple, como o iPad, um dos principais motivos para o desuso do Flash para dispositivos móveis e mesmo para a Web convencional.

Usuários do Flash normalmente pensam que perderam tudo o que aprenderam com o software nos últimos anos, já que o mesmo é praticamente sem uso e desenvolvedores focados nos novos padrões da web aprendem muito mais rápido que um desenvolvedor ActionScript 3.

Mas nem tudo está perdido! O novo software Edge Animate é quase que, como, um Flash renovado, utilizando de painel de propriedades, timeline, layers, biblioteca e até mesmo símbolos. O Adobe Edge Animate é a ferramenta visual mais eficiente criada para animações HTML5 dos últimos tempos, vamos conferir algumas comparações abaixo:

Conforme as imagens, é possível observar que não temos com o que nos preocuparmos.

Um outro detalhe interessante em relação a biblioteca (library) é que quando temos uma pasta chamada “images”, ele automaticamente a exibe no painel, tornando mais fácil a importação de imagens.

Obs: O Adobe Edge Animate não acessa pastas em níveis superiores para importação, assim, caso o faça, o software cria uma cópia da imagem em sua própria pasta.

Agora, falando um pouco de código, também temos um painel de Actions, a diferença fica em não programarmos em ActionScript, mas sim em jQuery, além da própria API (Application Programming Interface) do Adobe Edge Animate, baseada em JavaScript, um exemplo da API nativa para um simples play() e playReverse().

//play
sym.play();
//play reverse
sym.playReverse();

Usando JavaScript puro:

window.open("http://www.adobe.com", "_self");
 alert("Hello World");

Usando jQuery:

sym.$("xmlOutput").animate({ scrollTop: "+=266" }, 500, "easeOutExpo");

Exemplo com jQuery:  XML – Ajax:

$.ajax({ 
 type: "GET",
 url: "images.xml",
 dataType: "xml",
 success: function(xml) {
 $.each($(xml).find('img'), function(index, value) {
 var html = '<div style="margin-bottom:-5px;">';
 html += '<img src="' + value.textContent + '" />';
 html += '</div>';
 sym.$('xmlOutput').append(html);
 });
 }
});

Criando uma simples animação

Criaremos agora uma simples animação no Adobe Edge Animate, um efeito de fade, seguido de um deslocamento, apenas para entender o conceito e praticidade do novo software da Adobe.

Crie um arquivo novo, na barra de propriedades, onde está Untitled, digite Hello World (frase comum entre programadores, quando efetuamos o primeiro teste), este é o título da página HTML5, abaixo em W (width – largura), insira 300, em H (height – altura), insira 200, esses valores serão o tamanho de nosso palco, para desenvolvedores Flash, podem observar a palavra Stage.

Agora vamos criar um simples retângulo no palco.

Na parte esquerda superior do software (barra de ferramentas, pequena, porém, poderosa) encontraremos um objeto retangular (atalho M).

Desenhem um retângulo no palco, minhas configurações são as seguintes:

No campo onde está Rectangle, digite objeto, este é o nome da div, não pode começar com números, não pode conter caracteres especiais e deve ser único nesta tela.

O restante das propriedades:

X   – 20px – posição horizontal
Y   – 75px – posição vertical
W – 70px – largura
H  – 50px – altura

Agora, clique sobre o terceiro item (Pin) na barra timeline, um marcador azul aparecerá acima do playhead (marcador amarelo).

Arraste o marcador azul até 1 segundo, conforme imagem:

Em seguida, na barra de propriedades, marque opacidade em 0%:

O que fizemos?

O marcador amarelo indica que nesta posição estamos alterando suas propriedades, no caso, no tempo 0, nosso objeto está com 0% de transparência, em 1 segundo, temos 100% de transparência, ou seja, totalmente visível.

Desmarque o pin (marcador azul, atalho P), clique na barra de espaço para testar.

Obs: Se quiser testar no browser, de preferência no Google Chrome, CRTL + ENTER (isso que é Flash renovado).

Prosseguindo…

Com o marcador amarelo em um segundo, acione novamente o Pin (P), porém, desta vez, arraste o marcador amarelo ao invés do azul, até 2 segundos.

Em seguida, desloque o objeto para a direita.

Desmarque o Pin (P) e podemos testar novamente, barra de espaço para testar no próprio Adobe Edge Animate, CTRL + ENTER para testar no browser.

Refinando a animação

A animação já está finalizada, mas vamos dar um retoque final.

As interpolações de movimento por padrão sempre vem como lineares, ou seja, velocidade padrão do seu inicio ao fim. Com CSS3 ou jQuery podemos alterar esse tipo de interpolação, mas exigiria algum código… mas não para nós! Com o Adobe Edge Animate podemos mudar isso com alguns cliques, acompanhem:

Existe um quarto botão (depois do Pin), ele é responsável pelo tipo de interpolação de movimento, então faremos os seguintes passos:

1. Selecione a animação de Left;
2. Clique no quarto botão (Easing);
3. Selecione a animação que desejar, minha configuração segue na imagem:

Finalizado pessoal, agora é só testar e praticar!

Espero que tenham gostado e até a próxima!

Clique para baixar as fontes