Slider com Adobe Edge

Criando um Slider de imagem com Adobe Edge, além de conhecer mais a ferramenta.

Publicado em

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.

Imagem sem descrição.
Imagem sem descriçã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.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descrição.

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

Imagem sem descrição.
Imagem sem descrição.

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 PositionandSize, define X 0 e Y 0, isto com a imagem ainda selecionada.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descriçã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.

Imagem sem descrição.
Imagem sem descrição.

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.

Imagem sem descrição.
Imagem sem descrição.

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!

Imagem sem descrição.
Imagem sem descrição.

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

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção