Trabalhando com Símbolos no Edge Animate

Gunnar CorreaGunnar Correa05/07/2015 às 07:58:49 - 7.311 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.

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 http://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!


Símbolo Adobe Edge Animate HTML 5 CSS 3 Animações Pacote Palco Vetor 2D

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). 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.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários