Neste artigo:
As Interações de Objeto são usadas principalmente para criar protótipos interativos.
Este tipo de Interação altera o estado de um objeto na página e pode ser aplicado a um único objeto, a um grupo de objetos ou a um Hotspot.
As Interações de Objeto podem ser usadas para simular:
- Menus dropdown
- Abrir e fechar uma janela ou diálogo modal em resposta ao clique em um botão
- Revelar um menu de contexto ao clicar com o botão direito
- Rolar para uma área ou elemento específico ao clicar em um link de navegação
- Um controle de rádio, caixa de seleção ou alternância que pode ser ativado/desativado
Neste artigo, explicaremos cada parte de uma Interação de Objeto. Você também aprenderá como aplicar Interações de Objeto e como editá-las, duplicá-las e excluí-las.
Painel de Interações
O Painel de Interações está localizado na Barra Lateral Direita e a partir deste Painel você poderá:
-
Ver todas as Interações que foram aplicadas a um objeto
-
Criar uma Interação
-
Adicionar um Hotspot
-
Controlar como as interações são exibidas na seção Opções:
- Mostrar hotspots: Exibe os hotspots clicáveis no modo de edição.
- Mostrar indicadores de interação: Adiciona um emblema de iluminação a objetos com interações – na página e no Painel de Camadas – no modo de edição.
- Revelar destino da interação: No modo Visualização, exibe um tooltip com a ação e o destino quando você passa o cursor sobre um objeto.
Gatilho, ação e destino
Uma Interação de Objeto é composta de três partes: um Gatilho, uma Ação e um Destino.
Gatilho
Um Gatilho é o evento que coloca uma interação em movimento. Usando o dropdown superior, você pode escolher entre vários gatilhos: Ao Clicar ou Tocar, Ao Clicar com o Botão Direito, Ao Clicar Duas Vezes, Entrada do Mouse, Saída do Mouse.
Ação
Uma Ação é a instrução que será executada após um gatilho ser acionado. O segundo dropdown permite escolher Ações que se aplicam a Interações de Página ou Interações de Objeto.
Para Interações de Objeto, você pode escolher: Alternar Visibilidade, Mostrar Objeto, Ocultar Objeto ou Rolar para o Objeto.
Destino
Um Destino é o resultado final visível ao final de uma interação. No caso das Interações de Objeto, a seção de destino exibe um botão de destino verde. Após clicar nesse botão, você pode usar o cursor em forma de mira para escolher um objeto de destino na página ou no Painel de Camadas.
Adicionar interações de objeto
Para adicionar uma Interação de Objeto:
- Selecione o objeto ou grupo ao qual deseja adicionar a interação
- Clique na Aba Interações para abrir o painel
- Escolha um Gatilho no dropdown superior
- No segundo dropdown, selecione uma Ação da lista de Interações de Objeto
- Clique no botão Destino para ativar o Modo de Seleção de Destino
- Para selecionar seu destino, clique em qualquer objeto ou grupo, na Página ou no Painel de Camadas
- Clique em Concluído para aplicar a interação
Definir estado invisível
Quando você está criando uma interação, frequentemente vai querer ocultar o objeto de destino para que ele fique invisível no estado inicial e apareça somente após um evento de gatilho – por exemplo, um menu dropdown que se revela somente quando a seta do dropdown é clicada.
Existem duas formas de definir o estado de um objeto como invisível:
Pelo Painel de Camadas
- Selecione o objeto que deseja tornar invisível
- Navegue até a Barra Lateral Esquerda e clique na Aba Camadas para abrir o painel
- Na Árvore de Camadas, o nome do objeto ficará destacado em azul
- Passe o cursor sobre o nome do objeto e, logo à direita, clique no botão Mostrar/Ocultar para tornar o objeto invisível
Pelo Painel de Formato
- Selecione o objeto que deseja tornar invisível
- Navegue até a Barra Lateral Direita e clique na Aba Formato
- A aba ficará azul e abrirá o Painel de Formato
- No topo do Painel de Formato, você verá o nome do objeto em azul
- Clique no Ícone de Olho logo à direita do nome do seu objeto para torná-lo invisível
Editar, Duplicar ou Excluir Interações de Objeto
Quando você aplica uma interação a um objeto, ela aparece imediatamente na Lista de Interações no topo do Painel de Interações. À medida que você adiciona mais interações ao mesmo objeto, verá que elas também aparecem lá. Você pode facilmente editar ou excluir qualquer interação da lista – ou duplicar uma interação para reutilização rápida.
Editar Interação
Editar uma interação é útil quando você deseja alterar partes de uma interação já existente. Usando a função de edição, você pode atualizar o Gatilho, a Ação ou o Destino individualmente – sem afetar as outras partes da interação.
Para editar uma interação:
- Selecione o objeto ou grupo de objetos cuja interação você deseja editar
- Clique na Aba Interações para abrir o Painel de Interações
- No topo do painel, localize a interação que deseja editar
- Clique no botão Editar para ativar o modo de edição
- Altere a interação e clique em Concluído para salvar suas alterações
- Sua interação atualizada piscará em verde na lista por alguns segundos
Duplicar Interação
Muitas vezes, você pode querer aplicar diferentes variações de uma interação ao mesmo objeto. A função Duplicar permite duplicar uma interação existente e, em seguida, editar seu Gatilho, Ação e Destino conforme necessário.
Para duplicar uma interação:
- Selecione o objeto ou grupo do qual deseja duplicar uma interação
- Clique na Aba Interações para abrir o painel de Interações
- No topo do painel, localize a interação que deseja duplicar
- Clique no ícone Duplicar e uma interação idêntica aparecerá na Lista de Interações no topo do painel
- Para editar a nova interação, clique no botão Editar e siga as etapas da seção Editar Interações deste artigo
Excluir Interação
Para excluir uma interação:
- Selecione o objeto ou grupo de objetos do qual deseja excluir uma interação
- Clique na Aba Interações para abrir o painel de Interações
- No topo do painel, localize a interação que deseja excluir
- Clique no botão Excluir
Perguntas e respostas
Quais interações funcionam em um PDF exportado?
Todas as Interações de Página funcionam normalmente, com exceção do Voltar, que depende do histórico do seu navegador para a direção. As Interações de Objeto não funcionam em PDFs.
Se você quiser fornecer às partes interessadas um protótipo totalmente funcional, convide-as como convidados do projeto ou compartilhe um link do projeto. Saiba como fazer ambos em Compartilhamento. Você também pode exportar um visualizador HTML offline interativo.