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 para versões de OnSign TV App Android 4.2.0+ e Windows 9.1.1+
Organize sequências de fotos em carrossel com a ferramenta de interatividade. Confira o resultado abaixo:
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:
- Crie uma nova campanha na sua conta do OnSign TV. Preencha as informações básicas, como nome e categoria.
- 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.
- 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.
- Publique a campanha. Na página que exibe a lista de players onde a campanha foi publicada, clique em “Interatividade” no menu à esquerda.
- 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.
- 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.
- Quando reproduzindo: IAdea
- Com mídia: j22
- 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.
- Clique em “Salvar alterações” quando estiver pronto e teste a campanha no seu player!
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.
Agora precisamos estabelecer ações para os botões ao redor de cada foto.
Vamos configurar o botão avançar para quando a imagem IAdea está sendo exibida. Preencha as lacunas da seguinte forma:
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.