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.
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.
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.
Uma janela deverá aparecer, insira o nome do símbolo e clique em OK.
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.
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.
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.
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!
