Slider com Adobe Edge

Reproduzir animações com Adobe Edge é algo muito simples, o que torna trabalhos árduos feitos por linha de código muito mais simples.

Mão na massa!

Abra o adobe Edge, caso já não esteja aberto, crie um novo projeto em File (arquivo) -> New (novo).

Na aba Properties, há dois rótulos que indicam a largura e altura, contendo alguns valores numéricos logo à frente, clique nos valores numéricos e a ferramenta possibilitará editar o valor, neste caso vamos trabalhar com a unidade de medida em PX.

Adicione em W (width) a largura, em H (height) a altura, neste exemplo será usada imagens de 700X400, então foram configuradas o palco para esta resolução.

A Timeline trabalha com unidade de segundos, então repouse o mouse sobre ela e pressiona as teclas + ou – do seu teclado para ajustar o Zoom, deixe de forma que seja perceptível cada segundo, se preferir, no canto inferior direito da tela há uma barra de rolagem, que pode ser ajustado para controlar o Zoom.

Com o palco e Timeline ajustado, agora selecione em seu computador as imagens que deseja utilizar e arraste para dentro do palco do Edge.

Dica: Quando você estiver selecionando uma imagem em seu computador, automaticamente o Adobe Edge desaparecerá da tela, então basta selecionar todas as imagens arrastar para o ícone do Software na barra de ferramentas que o Edge aparece em seguida soltar no palco.

Quando as imagens forem adicionadas ao palco, você deve selecionar todas e apaga-las, isto vai fazer com que elas saiam do palco, mas ainda continue no projeto, é possível visualizar as imagens na aba Library.

Clique na imagem que deseja iniciar as animações e arraste para o palco.

Perceba que a imagem não esta alinhada corretamente, há várias formas de ajustar, mas para uma melhor precisão, na aba Properties em Position and Size, define X 0 e Y 0, isto com a imagem ainda selecionada.

Com a imagem ajustada em cena, coloque a agulha da Timeline na posição 0, em seguida ainda na aba Properties e com a imagem selecionada, clique no símbolo de um losango referente ao ponto X, isto fará com que a ferramenta adicione este valor a Timeline.

Coloque a agulha da Timeline na posição 1, clique na imagem segurando a tecla Shift e assaste totalmente para esquerda, de forma a sair da tela até acabar toda  a imagem.

Dica: Segurando a tecla Shift, você consegue um alinhamento preciso no eixo de modificação, ou seja, a imagem vai andar apenas no eixo X não alterando o Y.

Feito isto seria gerado uma transação de animação, se você andar com a linha do tempo, poderá notar a transação da imagem saindo da tela.

Antes de prosseguir, vamos salvar nosso projeto, para isto vá ao menu File (arquivo) -> Save As (salvar como), escolha uma pasta e clique em Salvar.

Após ter salvo o projeto, vamos dar continuidade ao Slider. O Edge permite três modos de visualização, onde estes módulos também poderão ser inseridos na linha do tempo, que são eles:
• Aways On – Elemento é visível em toda linha do tempo.
• Off – Não é exibido na linha do tempo.
• On – Exibe daquele ponto em diante na linha do tempo.

Estas opções ficam disponível na aba Properties quando algum elemento estiver selecionado.

Agora que sabemos como é possível controlar a visibilidade de um elemento na tela, volte a agulha na linha do tempo para a posição 0, selecione a imagem e mude a visibilidade para On, em seguida, coloque a agulha na posição 1 e troque a visibilidade para Off, lembrando que é necessário clicar no ícone do Losango logo a frente para adicionar a marcação a linha do tempo.

Você verá que quando adicionar Off, a imagem irá sumir da tela, pois a partir daquele ponto ela não será mais apresentada na animação.

Bom, agora você já sabe como adicionar elementos na cena, controlar a Timeline e alterar a visibilidade, faça o mesmo processo executado anteriormente para as demais imagens.

Para este exemplo, foi usado quatro imagens, na Timeline ficou da seguinte forma:
• Imagem 1 – 0 a 1 segundo.
• Imagem 2 – 1 a 2 segundos.
• Imagem 3 – 2 a 3 segundos.
• Imagem 4 – 3 a 4 segundos.
Cada início de imagem é alterado a visibilidade para On e no término para Off.

Para testar sua animação, pressione as teclas CTRL + Enter, em alguns casos não ira funcionar, mas não se desespere, basta salvar o projeto, acessar a página e executar o arquivo index.html.

Você verá que a animação esta um pouco rápida, afinal, foi projetada para ter este proposito, mas quando acaba, deveria voltar a imagem 1, porém isto não corre, já que não existe nenhuma instrução para isto.

Podemos trabalhar com rótulos na Timeline e em determinado ponto, colocar uma marcação que faz a agulha voltar para o rótulo especificado.

Para adicionar o rótulo ou Label, coloque a agulha na posição 0 e pressione a tecla CTRL + L, assim que adicionar, o nome estará aberto a edição, coloque o nome, begin, caso não esteja em modo de edição, basta dar um duplo clique na Label, se quiser, poderá modela na Timeline.

Agora vá a última posição da Timeline, que é onde acaba a animação, vamos inserir uma Trigger, a Trigger será responsável em mandar a execução de volta para o rótulo begin.

Pressione CTRL + T, abrirá uma caixa de código, insira o código, sym.play("begin");, agora você já pode fechar a Janela de código ou de Trigger.

Agora execute sua animação e verá que ela voltará a partir do rótulo que criamos quando chegar na Trigger.

Salve seu projeto e divirta-se com seu Slider.

Como você pode notar, é algo muito simples, aqui foi apresentado de forma simples e não repetida em algumas partes, oque fará você se esforçar mais para conseguir aprender e chegar no resultado final.

Se houver dúvidas, deixem nos comentários, até a próxima!