Embora o Aplicativo de Fotos seja uma maneira prática de alternar entre diversas imagens, existem casos que, em vez de reproduzir um loop contínuo, o seu público deve ficar a vontade de decidir quando passar para a imagem seguinte ou anterior.
Neste tutorial, criaremos um carrossel simples de quatro fotos utilizando o recurso de Interatividade. Se você não sabe como utilizar a Interatividade, confira os tutoriais a seguir para compreender melhor a funcionalidade:
Ao final, esta é a funcionalidade que queremos atingir:
Comece criando uma Montagem com dois triângulos, servindo como setas de avançar e retroceder para o plano de fundo:
Crie uma Campanha com duas regiões de tela. Uma para a Montagem de plano de fundo e outra para as imagens.
Insira a Montagem de plano de fundo na Linha do Tempo 1 e a primeira imagem na Linha do Tempo 2. Usaremos a amostra “Aquarium.jpg”. As demais imagens não devem ser inseridas na Linha do Tempo; elas serão inseridas posteriormente, em seus respectivos Acionadores.
Após salvar a Campanha, abra o menu de Acionadores e Interatividade.
Adicione o primeiro Acionador para avançar para a próxima imagem ao clicar na seta à direita. Utilizaremos as seguintes configurações:
Nome: next 1
Quando: Toque > Região Específica > configure uma região que cubra generosamente a seta à direita.
Ação: Tocar “Bales of Hay.jpg” em Região 2 por 30 segundos
Ícone de Engrenagem: Proporção > Manter Proporção Sem Redimensionar
Restrições: Executar somente quando Player está Tocando “Aquarium.jpg” em Região 2
Salve o Acionador clicando na marca de verificar verde à direita.
Duplique este Acionador três vezes, totalizando quatro Acionadores. A Ação de cada Acionador reproduz a próxima imagem do carrossel. A Restrição de cada Acionador é quando a imagem está tocando na tela antes de avançar para a próxima imagem. Este é o esquema:
Acionador
Ação
Restrição
avançar 1
Bales of Hay.jpg
Aquarium.jpg
avançar 2
City lights.jpg
Bales of Hay.jpg
avançar 3
Misty mountain.jpg
City lights.jpg
avançar 4
Aquarium.jpg
Misty mountain.jpg
Duplique o primeiro Acionador uma vez, desta vez, para retroceder. A Região de Toque, que permaneceu inalterada nos Acionadores anteriores, agora muda para uma área que cubra amplamente a seta esquerda. A Ação deste Acionador reproduz a imagem anterior do carrossel, neste caso, “Misty mountain.jpg”. A Restrição deste Acionador é quando a imagem atual, “Aquarium.jpg”, está tocando.
Para utilizar a Região de Toque referente à seta esquerda, duplique o último Acionador mais três vezes, totalizando assim quatro Acionadores para retroceder. A Ação de cada um desses Acionadores reproduz a imagem anterior do carrossel. A Restrição de cada Acionador é quando a imagem está tocando na tela antes de retroceder para a imagem anterior. Este é o esquema:
Acionador
Ação
Restrição
retroceder 1
Misty mountain.jpg
Aquarium.jpg
retroceder 2
City lights.jpg
Misty mountain.jpg
retroceder 3
Bales of Hay.jpg
City lights.jpg
retroceder 4
Aquarium.jpg
Bales of Hay.jpg
Com oito Triggers para quatro imagens, nosso carrossel está pronto para ser publicado.
Interatividade para versões anteriores à 10.0.0
Para versões do aplicativo OnSign Player anteriores à 10.0.0, você precisará usar o editor de interatividade antigo.
Obtenha as imagens usadas para a campanha mostrada acima neste arquivo zip ou use suas próprias imagens.
Crie uma Campanha.
Um carrossel consiste em três elementos básicos: uma moldura central para a foto e dois botões para avançar e retroceder nas imagens. Clique em “Adicionar Layout Personalizado” na sua Campanha e crie uma região para cada um desses três elementos, bem como uma região para a imagem de fundo.
Carregue as imagens que você usará nesta campanha para sua conta OnSign. Na sua Linha do Tempo, posicione as imagens dos botões, a imagem de fundo e a primeira foto do carrossel em suas respectivas regiões da tela.
Não coloque mais de uma foto na região do carrossel; caso contrário, o carrossel não obedecerá aos comandos dos botões que configuraremos mais tarde e, em vez disso, rodará em um loop contínuo.
Salve a Campanha. Abra o menu Acionadores e Interatividade, abaixo da miniatura da Campanha.
Agora, vamos adicionar Interatividade ao nosso carrossel! Antes de configurar qualquer ação, defina a sequência das fotos do carrossel. Usamos a seguinte sequência para as imagens disponíveis no arquivo zip: IAdea.png > J22.png > minix x5.png > minix x7.png > IAdea > J22 (...) etc.
Para essa sequência, configuramos uma ação para ambos os botões posicionados ao lado de cada foto. É importante que cada ação se aplique apenas a uma foto específica; portanto, precisamos aplicar filtros a cada ação. Vamos, primeiramente, configurar a ação para o botão de avançar quando a foto IAdea.png toca. Preencha os campos da seguinte forma:
Nome: um nome que indica para você o que vai acontecer
O que: Toque
Qual: Região 4, que é o botão de avançar
Ação: Substituir
Destino: Região 2, que é o carrossel
Na linha abaixo, definimos um filtro para que a foto mude para a próxima foto da sequência apenas quando uma foto específica está tocando na tela. Neste caso, somente quando “IAdea.png” está tocando, o botão “Avançar” alterará a imagem para “J22.png”.
Quando reproducindo: IAdea.png
Com Mídia: J22.png
Aplique ações a todos os botões a seguir com os filtros corretos. Vai dar um pouco de trabalho, mas vale a pena. Não se esqueça do botão de retroceder!
Clique em “Salvar” e, ao terminar, publique a Campanha no seu Player e faça um teste!
