Criando Menus Interativos

Crie menus interativos para exibir seu conteúdo separadamente e somente quando solicitado pelo leitor, com um clique. Divida textos longos em partes menores e deixe seu público explorar o conteúdo como quiser, quando quiser e na ordem que preferir.

Para este tutorial, criaremos a seguinte Campanha:

Dica: Ao criar sua campanha, faça um esboço em papel antes mesmo de abrir sua conta OnSign. Planeje com antecedência:

Como seu conteúdo será dividido. Defina o objetivo da sua campanha e divida seu conteúdo em diferentes seções de acordo. Experimente criar diferentes mapas de navegação e decida qual deles você acha que funcionaria melhor.
Quantos botões você precisará. Cada página requer um botão ou outra ação para acionar o próximo conteúdo na tela. Pense no design deles, onde serão posicionados na tela e se está claro que podem ser clicados!
Como ficará o layout da sua campanha. Dê unidade estrutural à sua campanha, mesmo que haja várias páginas diferentes. Use cores, fontes e layouts para dar coerência às diferentes páginas. Leia mais sobre design neste post no blog da OnSign.

Quando o esboço da sua campanha estiver pronto, prepare o conteúdo. Você pode criar todos os elementos de texto como arquivos de imagem ou escrevê-los diretamente em uma Montagem, que é o que faremos. Isso tem a vantagem de permitir que você altere facilmente o texto diretamente na plataforma.

Primeiro, crie todas as Montagens. Comece com o layout do menu. Em seguida, duplique a Montagem para adicionar as caixas de texto. Dessa forma, você mantém o layout coeso. O logotipo e o menu lateral estarão sempre no mesmo lugar.
Quando tiver todos os seus elementos de texto prontos, crie uma Campanha com uma linha do tempo. Nessa Linha do Tempo, insira a Montagem que contém apenas o menu lateral. Salve a Campanha.
Com a sua Campanha com a Montagem inicial criada, acesse o menu "Acionadores e Interatividade" da Campanha. Clique no botão "Adicionar Acionador" no canto superior direito.
Assim se vê a configuração do acionador. O primeiro acionador terá o nome de botão 1.
Será uma interação por toque em uma região da tela.
Uma janela pop-up permitirá que você selecione uma Região Específica. Como a Montagem é espelhada neste editor de região, você pode combinar exatamente à posição dos botões com os seus elementos de texto.
Em Ação, selecione Tocar a Montagem com a primeira página de texto. Ela substituirá a Montagem que está inicialmente na linha do tempo.
Defina por quanto tempo a Montagem deve ser tocada antes de retornar à Montagem inicial. O padrão é 10 segundos. Isso provavelmente é um pouco curto. A duração ideal depende do seu público e da extensão do texto a ser lido.
Observe também a opção “Propagar para outros acionadores” na parte inferior. Dependendo do seu caso de uso, pode ser interessante ativá-la, mas vamos mantê-la desativada por enquanto.
Salve o acionador clicando na marca de verificar verde à direita.
Vamos criar o próximo acionador. Economizamos bastante trabalho duplicando o acionador, pois assim só precisamos alterar o nome, a região de toque e o evento.
Ao selecionar o acionador, um botão azul “Ações” substitui o botão laranja “Adicionar Acionador”. No menu suspenso, há a opção “Duplicar acionador”.
Quando o acionador for duplicado, clique no ícone de lápis à direita. Altere o nome do acionador para botão 2.
Economizamos o maior tempo no editor de região. Apenas precisamos alterar a coordenada Y para obter uma região específica do mesmo tamanho, apenas em cima de um campo de texto diferente.
Altere a Ação para a Montagem com a segunda página de texto. Salve o acionador clicando na marca de verificar verde à direita.
Repita até criar todos os botões.
Por fim, publique sua Campanha.

Agora seu público pode navegar pelo seu conteúdo no seu próprio ritmo.

Para versões do aplicativo OnSign Player anteriores à 10.0.0, você precisará usar o editor de interatividade antigo.

Com este editor de interatividade antigo, são necessários muito mais passos incrementais para obter o mesmo efeito. Considere isso como uma dica para atualizar seu player para uma versão mais recente.

Baixe uma pasta zip preparada com arquivos para recriar a mesma Campanha.

Quando estiver pronto com o esboço da sua campanha, prepare o conteúdo. O editor de interatividade antigo não consegue reproduzir uma Montagem. Portanto, prepare seus textos e salve-os em formatos de imagem, como JPEG, PNG ou até mesmo PDF.
Crie uma imagem contendo todos os botões do menu (veja a imagem abaixo).
Carregue todos os arquivos para sua conta OnSign.
Crie uma nova Campanha. Crie o layout personalizado que você planejou. Para este tutorial, planejamos duas zonas: uma área de conteúdo principal (A) e um menu (B).
Arraste os arquivos para a Linha do Tempo.
Em seguida, edite ainda mais seu Layout criando divisões de tela onde ficarão os botões na área de menu.
Adicione uma imagem totalmente transparente a essas novas áreas da sua Linha do Tempo para salvar a Campanha. OnSign não permite salvar uma Campanha com Linhas do Tempo vazias. O texto do botão ficará legível abaixo da imagem transparente.
A imagem transparente deve estar no formato PNG (saiba mais sobre transparência).
"Salve" a Campanha quando terminar.
A janela mudará para um menu lateral com as opções de Editar, Publicar ou Acionadores e Interatividade. Clique em “Acionadores e Interatividade” no menu lateral.
Clique em “Adicionar interatividade” na direita do cabeçalho para adicionar uma ação a cada botão.
Este é o momento em que damos vida à sua Campanha! Vamos começar com a Região 3 (intitulada "O que é sinalização digital?") e transformá-la em uma área clicável. Sempre que o usuário clicar nela, o conteúdo da Região 1 será substituído pela imagem "O que é sinalização digital":
Ajuste as configurações para as áreas restantes:
Clique em “Salvar”.
Publique a Campanha para um Player, caso ainda não tenha feito isso, e confira o resultado!