Crie carrossel de imagens

Diferente da sequência de imagens na linha do tempo, esse recurso permite que o usuário decida quando trocar o conteúdo na tela.

*DISPONÍVEL APENAS PARA PLANOS ESPECIAIS!

Organize sequências de fotos em carrossel com a ferramenta de interatividade. Confira o resultado abaixo:

gif_image_carousel

Neste tutorial, vamos criar um carrossel de quatro imagens com os seguintes arquivos disponíveis em zip. Você pode utilizar imagens próprias também. Só lembre-se de criar os ícones para os botões voltar e avançar.

Como grande parte desse passo a passo se trata de inserir interatividade às diferentes regiões da tela, recomendamos primeiro conferir campanhas que tratam da interatividade com mais detalhes:

  1. Crie uma nova campanha na sua conta do OnSign TV. Preencha as informações básicas, como nome e categoria.
  2. O carrossel de imagens precisa de três elementos: o espaço onde fica a foto (B), e botões para voltar (C) e avançar (D). Também adicionamos uma área de plano de fundo(A). Crie um layout personalizado com todas as regiões.
  3. Screen layout for carousel
  4. Carregue todas as fotos que você vai usar para o site. Coloque-as na linha do tempo. Na região que vai exibir a sequência de fotos, arraste somente uma das imagens da sequência.
  5. timeline

    Não insira toda a sequência de fotos na linha do tempo, senão as imagens não vão obedecer aos comandos dos botões de avançar e voltar que serão configurados nos próximos passos.

  6. Publique a campanha. Na página que exibe a lista de players onde a campanha foi publicada, clique em “Interatividade” no menu à esquerda.
  7. Click on interactivity
  8. A partir desse passo vamos começar a inserir a interatividade na campanha! Antes, estabeleça a ordem em que as imagens devem aparecer. Para essa campanha, utilizamos a seguinte sequência para as imagens da pasta zip: IAdea.png > j22.png > minix x5.png > minix x7.png > IAdea.png e assim por diante.
  9. Agora precisamos estabelecer ações para os botões ao redor de cada foto.

    Set interactivity to all buttons, in all situations

    Vamos configurar o botão avançar para quando a imagem IAdea está sendo exibida. Preencha as lacunas da seguinte forma:

    • O que: Toque.
    • Qual: Região 4, que contém o botão “avançar”.
    • Ação: Substituir.
    • Destino: Região 2, onde fica a sequência de fotos.

    Na linha abaixo, vamos configurar filtros para que a foto “j22” seja exibida ao clicar o botão avançar. Um detalhe importante é que essa imagem só pode ser exibida quando a foto “IAdea” estiver na tela. Caso não prenchermos esse campo, toda a vez que alguém apertar o botão avançar, a foto j22 vai ser exibida, independente da foto que está sendo mostrada.

    • Quando reproduzindo: IAdea
    • Com mídia: j22
  10. Aplique os passos acima para o botão avançar de cada foto da sequência. Assim que terminar, faça o mesmo com o botão voltar. Na linha de cima, as informações sempre permanecem permanecem as mesmas. A única mudança é para o campo “qual” dependendo do botão que você estiver configurando, que pode ser o voltar ou avançar. Só altere a segunda linha de acordo com a foto principal, obedecendo a sequência delimitada.
  11. Clique em “Salvar alterações” quando estiver pronto e teste a campanha no seu player!