Trabalhando com Símbolos no Edge Animate

Gunnar CorreaGunnar Correa05/07/2015 às 07:58:49 - 8.265 acessos

Saiba como agrupar e reproduzir animações dentro de um Símbolo.


Quando necessitamos criar animações extensas, é inviável deixar tudo solto, pois dificulta a manutenção e a quantidade de elementos acaba atrapalhando.

Com EdgeAnimate, é possível agrupar um conjunto de elementos, ou seja, convertemos um elemento em Símbolo e dentro dele colocamos e fazemos toda animação correspondente àquela parte separada.

Imagine uma animação de uma cidade, onde teremos cidadãos, carro e outros elementos,  podemos agrupar cada parte em um símbolo, os carros, cidadão entre os demais elementos em seus respectivos grupos, desta forma as animações ficam independentes e separadas.

Para este exemplo será utilizado a imagem de uma cidade com um carro, o link é http://br.freepik.com/vetores-gratis/modelo-de-artigo-de-estrada_785871.htm, esta separado cada imagem que será animada,  o carro, cidade e o pin.

Trabalhando com Símbolos no Edge Animate

Crie um projeto no EdgeAnimate com a resolução na qual deseja, para este exemplo foi utilizado 500X500, lembrando que será necessário ter o Adobe Illustrator instalado para poder editar e separar as imagens, você pode conferir artigos sobre Illustrator em https://satellasoft.com/categoria/illustrator.

Insira todas as imagens na cena, conforme mostrado na imagem abaixo.

Trabalhando com Símbolos no Edge Animate

Para ajustar o tamanho de uma imagem, basta clicar na imagem desejada, segurar a tecla Shift e em uma das bordas há um quadradinho, apenas clique e arraste ainda segurando a tecla  Shift.

Agora vamos definitivamente criar um Símbolo, para isto selecione uma imagem, clique com o botão direito do mouse sobre a mesma em seguida clique em ConverttoSymbol.

Trabalhando com Símbolos no Edge Animate

Uma janela deverá aparecer, insira o nome do símbolo e clique em OK.

Trabalhando com Símbolos no Edge Animate

Após ter convertido uma imagem em Símbolo, de um duplo clique no Símbolo que ele será aberto.

Com base no conteúdo apresentado no artigo anterior, crie uma animação da imagem pin, como você preferir, use o Label (rótulo) e também o Trigger que chama a Label criada.

Trabalhando com Símbolos no Edge Animate

Agora crie Símbolo para o carro Azul e Vermelho, faça a animação deles andando na ponte, o caminhão será explicado posteriormente.

Na aba Properties, contém um módulo chamado de Transform, nele contém uma opção para rotacionar um elemento, até mesmo pode ser usado para fazer animações, bastando inserir o valor a Timeline. Use a opção de rotacionar para criar sua animação do carro andando e fazendo as curvas.

Trabalhando com Símbolos no Edge Animate

Para um dos carros a animação deverá ocorrer de forma diferente, primeiro deverá ser inserido um Trigger com o código sym.stop(); em seguida um rótulo na mesma posição desta Trigger, que deverá ser no frame 0, com este código, ao iniciar a animação não ira ficar parado no Trigger stop. No frame 1 você pode iniciar sua animação.

Trabalhando com Símbolos no Edge Animate

Se você reproduzir sua animação, verá que o carro escolhido não apresenta na animação.

Voltando ao palco, escolha um ponto na qual deseja que o carro comece, neste caso foi optado no frame 5, então no frame 5 insira um Trigger com o código sym.getSymbol("carBlueAnimate").play("inicio");, sendo que carBlueAnimate é o nome do símbolo. Teste e veja o carro reproduzindo sua animação no frame especificado.

Faça o mesmo processo com o caminhão, porém insira uma Trigger após a do carro, se você colocar ao mesmo tempo, possivelmente uma imagem irá passar por cima da outra.

Execute sua animação e veja o resultado final.

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


adobe edge simbolo no edge adobe edge usar simbolos introdução adobe edge aprenda adobe

Compartilhe nas redes sociais



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. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.