Muitos botões podem deixar a página confusa rapidamente. Se você tiver mais opções para compartilhar com seu público, precisará criar um segundo menu. Aprenda como criar um menu expandido nas instruções abaixo.
Para facilitar o processo, vamos alterar o Layout da Campanha de uma para duas divisões Dessa forma, o menu permanece à direita, enquanto as caixas de texto no meio mudam conforme a interação.
Para corresponder a essa configuração, criaremos Montagens individuais para cada caixa de texto, bem como uma Montagem em branco como preenchimento inicial na nova segunda Região da Campanha, já que uma Linha do Tempo de uma Campanha não pode estar vazia.
Começando pelo mais fácil. Vamos começar com a Montagem em branco. A largura e a altura da Montagem devem corresponder à largura e à altura da segunda Região da Campanha. Em nosso exemplo, a região de texto ocupará uma janela de 1200 x 800 px. Crie uma nova Montagem. Uma nova Montagem já virá com uma tela transparente. Ajuste a largura e a altura para 1200 x 800 px. Consulte o passo 4 do tutorial das Montagens.
Em seguida, crie sua primeira Montagem de texto duplicando esta Montagem inicial para obter instantaneamente a largura e a altura correspondentes. Altere a cor de fundo para preto e adicione o primeiro texto.
Nosso menu oferece seis temas. Portanto, criaremos seis montagens de texto no total. Duplique a primeira Montagem de texto mais cinco vezes e altere o texto em cada uma delas.
No final, devemos ter seis Montagens. Para diferenciá-las, vamos nomeá-las de 1-1 para o primeiro texto do primeiro menu, 2-1 para o segundo texto do primeiro menu, e assim por diante, até 3-2 para o terceiro texto do segundo menu. Você pode deixar essas Montagens de lado por enquanto.
Altere o Layout da Campanha que criamos no tutorial anterior para incluir uma segunda divisão da tela. Veja como a largura e a altura dessa segunda divisão são iguais aos Montagens de texto 1200 x 800px.
Insira a Montagem inicial transparente nesta nova Linha do Tempo.
Vamos voltar à nossa Montagem do tutorial anterior, com o menu do lado direito. Para um menu expandido, adicione uma forma de triângulo no canto inferior direito que marcará onde o menu se expande. A aba de formas no menu das Montagens facilita adicionar esse triângulo. Para melhor distinção, nomeie esta Montagem como “primeiro menu”.
Duplique esta Montagem “primeiro menu”. A duplicata será o "segundo menu". Em seguida, gire o triângulo em 180°. Simples e fácil numa Montagem.
Acesse o menu Acionadores e Interatividade da sua Campanha interativa. A Montagem inicial do “primeiro menu”, com o novo triângulo, foi atualizada instantaneamente.
Precisamos ajustar os Acionadores do tutorial anterior. Devemos ter três Acionadores, um para cada tema do menu. Na configuração Ação, a Montagem de texto não será mais reproduzido no Loop Principal, mas sim na Região 2. Faça isso para os três Acionadores.
Duplique um dos três Acionadores existentes. Este quarto Acionador será para o botão de avançar.
Defina a área de toque para corresponder à localização do triângulo, ou seta para avançar.
Como Ação, este Acionador deve tocar o “segundo menu”, que será uma Campanha que ainda precisamos configurar. Por enquanto, use qualquer marcador neste Acionador e faça com que ele seja reproduzido no Loop Principal em vez da Região 2, como os Acionadores anteriores. Salve o Acionador de avançar.
Saia brevemente desta Campanha e duplique-a para criar a Campanha com o segundo menu e suas Montagens de texto correspondentes.
Troque a Linha do Tempo 1 pela Montagem com o segundo menu. A Linha do Tempo 2 permanece a mesma com a Montagem inicial transparente.
Vá para as configurações de Acionadores e Interatividade da Campanha do segundo menu e modifique cada Acionador, trocando a Montagem de texto que eles devem executar. O Acionador de retroceder executará a Campanha com o primeiro menu.
Volte para a Campanha do primeiro menu e troque o marcador no Acionador de avançar pela Campanha do segundo menu. Para a Campanha do primeiro menu, você terá estes quatro Acionadores:Para a Campanha do segundo menu, você terá estes quatro Acionadores quase idênticos:
Se a sua primeira Campanha de menu já foi publicada no tutorial anterior, está pronto. Pode conferir sua Campanha interativa com o menu expandido no Player. Se você ainda não publicou esta Campanha, publique apenas a Campanha do primeiro menu. A Campanha do segundo menu não precisa ser publicada. Ela tocará somente quando o botão de avançar for pressionado.
Menu interativo 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.
Siga as instruções abaixo para criar um segundo menu.
Aprenda a criar dois menus nas instruções abaixo.
Para um menu expandido, crie uma imagem de menu com um ícone de "próximo" na parte inferior (veja a imagem abaixo). Substitua a imagem do menu na sua Linha do Tempo por esta nova imagem de menu.
Adicione uma divisão de tela para o botão de avançar. Na Linha do Tempo, arraste novamente uma imagem PNG transparente para esta Linha do Tempo, como você fez para os outros três botões da Campanha no tutorial anterior.
Crie uma segunda imagem de menu. Ela deve ter botões diferentes e um ícone de retroceder na parte inferior (veja o exemplo abaixo). Por enquanto, carregue esta imagem apenas na sua conta da OnSign, não a coloque na Linha do Tempo.
"Salve" a Campanha.
Na página recém-carregada, clique em “Acionadores e Interatividade” no menu da barra lateral.
Clique no botão "Adicionar Interação". Agora, definiremos todas as interações restantes para nossos botões. Nosso primeiro objetivo é acionar o segundo menu ao clicar no ícone "próximo". Preencha as configurações conforme mostrado abaixo:
Qual: Região 6 (botão próximo).
Ação: Substituir.
Destino: Região 2, pois queremos que o menu mude.
Ao reproduzir: Como o próximo botão pertence ao menu 1, defina a ação para ser executada somente quando o “menu 1” estiver em reprodução.
Com mídia: Selecione “menu 2” e confirme com o ícone de verificação.
O próximo botão levará ao segundo menu. Agora, precisamos adicionar filtros a todas as ações já definidas para os botões do menu 1. Defina "menu 1 (com botão)" para o campo "Ao reproduzir". Isso evitará que qualquer conteúdo do menu 2 seja exibido ao clicar em um botão do menu 1.
Em seguida, precisamos configurar todas as ações para o segundo menu. Em vez de escolher "menu 1" para "Ao reproduzir", precisamos selecionar "menu 2". Escolha os arquivos que seus botões dos temas devem acionar no campo "com mídia".
Por fim, configure o botão "voltar" na parte inferior para alterar o menu novamente.
Dica: Ao substituir itens de mídia em uma divisão da tela, defina durações de exibição longas para permitir que o usuário navegue livremente pelo conteúdo. Se você mantiver uma duração mais curta, poderá ocorrer que o usuário seja interrompido durante a leitura do texto.
Clique em "Salvar" quando terminar. Aguarde o Player sincronizar as modificações e confira o resultado na tela!
