Hotspots

Um Hotspot é um objeto interativo dedicado ao qual você pode adicionar uma Interação de Página ou de Objeto.

Embora os Hotspots se comportem como outros objetos para fins de movimentação, redimensionamento, agrupamento e bloqueio, eles são projetados para serem invisíveis em um Protótipo interativo. Assim, funcionam de maneira diferente dos outros objetos tanto no modo Editar quanto no modo Visualização:

• No Modo de Edição, eles aparecem como uma sobreposição verde translúcida para que você possa trabalhar com eles e ver onde foram aplicados. Mas você também pode optar por ocultá-los para que não interfiram no seu trabalho em andamento.
• No Modo Visualização, os Hotspots estão ativos e responderão às ações do usuário (chamadas de 'gatilhos'). No modo Visualização, os Hotspots são invisíveis por padrão – embora você possa torná-los temporariamente visíveis mantendo pressionada a tecla Shift.

A vantagem de usar um Hotspot – em vez de aplicar uma Interação de Página ou de Objeto a um objeto existente – é que você pode ajustar seu tamanho e forma, independentemente dos objetos na página. Isso significa que você pode adicionar interatividade sobre uma área específica de uma página ou grupo de objetos.

Aqui estão alguns casos de uso para Hotspots:

• Aplicar múltiplas áreas de interatividade a uma imagem única maior, como um design finalizado
• Definir áreas específicas de interatividade a stencils compostos de múltiplos elementos, como menus

Adicionar hotspots

Você pode adicionar um hotspot na localização do seu cursor ou sobre um objeto específico. Ou pode desenhar o hotspot você mesmo usando o kit de ferramentas de Desenho Rápido.

Assim como todos os outros objetos – stencils, imagens, ícones e modelos – os Hotspots são listados no Painel de Camadas. Quando os Hotspots são adicionados à página, eles aparecem no topo da Árvore de Camadas. Por padrão, eles são nomeados por número, de acordo com a ordem em que foram adicionados à página. Para alterar o nome de um Hotspot, basta clicar duas vezes no título atual na Árvore de Camadas.

Adicionar um Hotspot à página

Para adicionar um Hotspot na localização do seu cursor:

1. Sem nenhum objeto selecionado, clique com o botão direito na página e clique em Adicionar hotspot

   ou

   Clique no botão Adicionar hotspot no Painel de Interações

Para criar um Hotspot sobre um objeto específico:

1. Clique com o botão direito na página e clique em Adicionar hotspot

   ou

   Clique no botão Adicionar hotspot no Painel de Interações

2. Um hotspot aparecerá sobre o quadro do objeto e corresponderá às suas dimensões

Desenhar um Hotspot na página

Para desenhar um Hotspot pelo kit de ferramentas de Desenho Rápido ou atalho de teclado:

1. Clique no botão Hotspot no dropdown, ou pressione a tecla H.
2. Clique e arraste o cursor em forma de mira para criar um ou mais hotspots.
3. Adicione interações usando o painel de Interações

Comportamento fixo para hotspots

Os hotspots fixos são muito úteis se você estiver adicionando um hotspot a um elemento dentro de um grupo de objetos, ou a uma área específica dentro de um único objeto. Por exemplo, você pode fazer isso para criar um ponto ou botão clicável dentro dessa área maior. Então, à medida que você reorganiza o design, o hotspot se moverá junto com ele.

No entanto, se o hotspot tiver exatamente o mesmo tamanho que um objeto ou grupo, você precisará movê-lo de lado para poder segurar o objeto e movê-lo. Portanto, nessas circunstâncias, é melhor aplicar uma interação de objeto em vez de um hotspot.

Por padrão, o comportamento fixo está ativado para todos os Hotspots, mas você pode desativá-lo no Painel de Formato.

Para ativar ou desativar o comportamento fixo de um hotspot:

1. Selecione um Hotspot
2. Vá para a Barra Lateral Direita e clique na Aba Formato para abrir o Painel de Formato
3. Navegue até a seção Comportamento Fixo.
4. Clique no botão Fixo ou Normal para aplicar esse comportamento
5. Arraste o hotspot sobre o objeto ou grupo ao qual você deseja que ele fique fixo

Formatar hotspots

Depois de criar um Hotspot, você pode ajustar seu tamanho, posição ou arredondar seus cantos. Você também pode optar por ocultar os Hotspots tornando-os invisíveis.

Tamanho

Na página, use as alças de redimensionamento para alterar o tamanho do Hotspot.

No Painel de Formato, use as entradas de Largura e Altura para valores precisos e ajustes finos, e use as teclas de seta do teclado se quiser alterar esses valores de forma incremental.

Bloqueie as proporções de um Hotspot com o botão Bloquear Proporção. Depois que um Hotspot é bloqueado, você precisará desbloquear a proporção se quiser redimensioná-lo no eixo horizontal ou vertical.

Posição

Na página, selecione um Hotspot e arraste-o para a posição desejada.

No Painel de Formato, defina a posição do Hotspot inserindo as coordenadas exatas nos campos de entrada. A posição do seu Hotspot é medida em pixels a partir das margens esquerda e superior. Você pode usar as teclas de seta do teclado para alterar esses valores de forma incremental.

Cantos Arredondados

Você pode arredondar os cantos de um hotspot para combiná-lo com seus gráficos ou botões:

Para arredondar os cantos de um Hotspot:

1. Selecione um Hotspot
2. Vá para a Barra Lateral Direita e clique na Aba Formato para abrir o Painel de Formato
3. Navegue até a seção Cantos Arredondados.
4. Por padrão, o arredondamento em pixels se aplica a todos os cantos, mas você pode clicar no botão Dessincronizar cantos para ajustar cada um separadamente.
5. A opção Escalar Raio ajusta o tamanho em pixels para manter as proporções do arredondamento à medida que você torna um objeto maior ou menor.

Visibilidade

No Modo de Edição, todos os Hotspots em uma página ficam visíveis com uma sobreposição verde translúcida.

Se você quiser tornar todos os Hotspots invisíveis enquanto trabalha no projeto:

1. Clique na Aba Interações para abrir o Painel de Interações
2. Vá para a seção Opções e desmarque Mostrar hotspots

Adicionar interações a hotspots

Cada interação é composta de três partes: um Gatilho, uma Ação e um Destino.

• Um Gatilho é o evento que coloca uma interação em movimento.
• Uma Ação é uma instrução executada após um gatilho ser acionado.
• Um Destino é o resultado final visível ao final de uma interação.

O processo de adicionar uma interação a um Hotspot é exatamente o mesmo que adicionar uma a qualquer outro objeto. No entanto, neste caso, o 'objeto' é um Hotspot invisível representando uma área interativa na página.

Você pode adicionar Interações de Página ou Interações de Objeto a um Hotspot.

Confira nosso artigo sobre Interações de Página e o artigo sobre Interações de Objeto para obter mais informações sobre essas interações, bem como instruções detalhadas sobre como aplicá-las a todos os objetos, incluindo Hotspots.

Mas se você quiser começar a trabalhar imediatamente, aqui estão algumas instruções breves:

Para adicionar uma Interação a um Hotspot:

1. Selecione o Hotspot ao qual deseja adicionar a interação
2. Clique na Aba Interações para abrir o painel
3. Escolha um Gatilho no dropdown superior
4. No segundo dropdown, selecione uma Ação da lista de Interações de Página ou Interações de Objeto
5. Defina um Destino, usando o dropdown ou o botão de mira, para selecionar um objeto ou uma página como o destino final da interação.
6. Clique em Concluído para aplicar a interação

Editar, duplicar ou excluir interações

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:

1. Selecione o objeto ou grupo de objetos cuja interação você deseja editar
2. Clique na Aba Interações para abrir o Painel de Interações
3. No topo do painel, localize a interação que deseja editar
4. Clique no botão Editar para ativar o modo de edição
5. Altere a interação e clique em Concluído para salvar suas alterações
6. 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:

1. Selecione o objeto ou grupo de objetos do qual deseja duplicar uma interação
2. Clique na Aba Interações para abrir o painel de Interações
3. No topo do painel, localize a interação que deseja duplicar
4. Clique no ícone Duplicar e uma interação idêntica aparecerá na Lista de Interações no topo do painel
5. 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:

1. Selecione o objeto ou grupo de objetos do qual deseja excluir uma interação
2. Clique na Aba Interações para abrir o painel de Interações
3. No topo do painel, localize a interação que deseja excluir
4. Clique no botão Excluir