Adicionar botões interativos aos projetos do Adobe Captivate e adicionar estados em botões.

Os botões são um dos modos mais comuns de adicionar um objeto padrão a seus slides do Captivate.

Aprimore a interatividade dos seus projetos do Adobe Captivate, adicionando botões. Para adicionar um botão, use o estilo de botão padrão (um retângulo simples e branco). Importe também imagens de botões personalizados. Dimensione e posicione botões em um slide. Dimensione e posicione botões em um slide.

Adicionar um botão interativo

No Captivate, é possível acrescentar interação a um botão e ter qualquer ação quando você clica no botão.

Para adicionar um botão interativo:

  1. No menu principal, clique em Interações > Botão. No slide, você verá que um botão é inserido.

    Button
  2. Com o botão inserido no slide, você poderá alterar as propriedades do botão no painel Inspetor de propriedades.

    Button properties

    Você pode alterar o estilo (transparente ou imagem) e a fonte do botão.

  3. Para adicionar uma ação ou uma interação ao botão, selecione o botão e clique na guia Ações, conforme mostrado a seguir:

    Button actions
  4. Mostre as legendas Sucesso, Falha e Dica, se necessário.

    Button sfh
    • Sucesso: Selecione essacaixa de seleçãopara incluir uma legenda a ser exibida quando o usuário clica no botão.
    • Falha: Selecione essacaixa de seleçãopara incluir uma legenda a ser exibida quando o usuário clicaforado botão.
    • Dica: Selecione essacaixa de seleçãopara especificar uma dica a ser exibida aos usuários. A dica será exibida quando o usuário passar o mouse sobre o botão.

    Você pode excluir um botão a qualquer momento selecionando-o e pressionando a tecla Delete. Quando você exclui um botão, todos os objetos associados (como legendas de sucesso ou de falhas) serão também excluídos.

  5. Visualize e/ou publique o projeto.

Comoexemplo, crie um projeto com um botão interativo que, ao ser clicado, oculta um objeto. Ao clicar no botão novamente, você pode ver o objeto.

Crie uma variável myVar e defina seu valor como zero. No sucesso do botão, no painel Ações Avançadas, escolha a ação condicional com uma instrução if.

A ação verifica se o valor de myVar é zero, depois oculta o objeto e incrementa o valor de myVar para um.

Acrescentar uma forma inteligente como botão

Formas inteligentes incluem várias categorias de formas disponíveis como setas, botões ou formas básicas. É possível inserir e modificar essas formas de maneira rápida e fácil nos projetos do Adobe Captivate.

Você pode converter uma forma inteligente em um botão e adicionar interatividade a ele.

  1. Abra o slide no qual deseja adicionar um botão.

  2. No menu principal, clique em Formas > e escolher qualquer Forma inteligente.

  3. Selecione o botão e modifique as propriedades do botão no painel Inspetor de propriedades.

    Button Smart Shape properties
  4. Selecione a caixa Usar como botão caixa de seleçãodefina a ação quando se clica no botão.

    Button Smart Shape Use as Button
  5. Visualize e/ou publique o projeto.

Adicionar imagem como botão

Em projetos de e-learning, havia situações nas quais você, como desenvolvedor de e-learning, queria importar a imagem e usá-la como um botão. Nas versões anteriores do Captivate, adicionar uma imagem como botão envolvia várias etapas. Você tinha de importar uma imagem, adicionar uma forma inteligente sobre ela, alterar a opacidade e, em seguida, usar a forma inteligente como botão. Era mais uma solução alternativa, e não um fluxo de trabalho preciso.

No Captivate (versão 2019) atualização 2, é possível adicionar uma imagem como botão e adicionar interatividade ao botão, algo que o Captivate já faz. O objeto pode ser usado como botão para acionar qualquer ação e atribuir estados.

Este fluxo de trabalho melhora não apenas a sua produtividade, mas também introduz uma maneira mais simples de criar botões.

Você pode usar imagens jpg/bmp e vetoriais como botão. Os formatos de arquivo a seguir são os suportados para os arquivos de imagem:

·       Jpeg, jpg

·       Gif

·       Png

·       Bmp

·       Ico

·       Emf

·       Wmf

·       Pot, potx, pict

Para converter uma imagem e usar a imagem como botão,

 
Imagem como botão
  1. Abra um projeto no Captivate.

  2. Para inserir uma imagem, clique em Mídia > Imagem e selecione qualquer imagem.

  3. Na cena, selecione a imagem.

  4. No Inspetor de propriedades, selecione a opção Usar como botão.

  5. Na guia Ações, defina a ação depois de clicar no botão durante a visualização ou publicação do projeto.

Ativos

Os ativos do projeto de amostra são fornecidos no arquivo zip abaixo. Descompacte o arquivo e copie o   conteúdo no computador.

Download

Definir a cena

  1. Crie um projeto responsivo.

     
  2. Na barra de ferramentas do projeto, clique em Fluid Box e nas duas Fluid Boxes horizontais.

     
    Fluid Boxes
    Fluid Boxes
  3. Na Fluid Box da direita, adicione a imagem, conclusion_img_bottom.png.

     
    Inserir imagem
    Inserir imagem
  4. Adicione Dave e Angie à Fluid Box da esquerda.

     
    Dave e Angie
    Dave e Angie
  5. Na Fluid Box da direita, adicione uma forma inteligente com a pequena demonstração de Imagem como botão.

     
    Inserir forma inteligente
    Inserir forma inteligente
  6. Insira balões de diálogo para Dave e Angie. Também desbloqueie os dois objetos da Fluid Box.

     
    Inserir balões de diálogo
    Inserir balões de diálogo

Atribuir ações aos objetos

Depois que a cena está definida, as etapas a seguir criam ações variáveis avançadas e atribuem as ações avançadas ao botão.

 
  1. Crie uma variável _toggle. O estado inicial dessa variável é 0. Ao clicar em um botão, o status da variável torna-se 1. Para obter mais informações, consulte Variáveis no Captivate.

     
    Criar variável
    Criar variável
    1. A primeira ação avançada oculta os balões de diálogo quando o projeto é iniciado. Nomeie a ação de hide_bubbles.

       
      Ação Ocultar bolão
      Ação Ocultar bolão

      No Inspetor de propriedades, na guia Ações, escolha a ação hide_bubbles.

       
      Escolher ação
      Escolher ação
    2. A segunda ação avançada, toggle_Dave, quando chamada, revela o balão de diálogo do Dave, ao clicar em Dave. A variável _toggle altera seu valor para 1 ao clicar em Dave. Depois que o bolão de diálogo desaparece, o valor de _toggle se torna 0.

       
      Alternar
      Alternar

    3. A terceira ação avançada, toggle_Angie, quando chamada, revela o balão de diálogo da Angie, ao clicar em Angie. A variável _toggle altera seu valor para 1 ao clicar em Angie. Depois que o bolão de diálogo desaparece, o valor de _toggle se torna 0.

       
      Alternar para Angie
      Alternar para Angie
  2. Converter Dave e Angie em botões. Escolha a imagem e, no Inspetor de propriedades, marque a caixa de seleção Usar como botão.

     
    Usar como botão
    Usar como botão
  3. Atribua Dave e Angie às suas respectivas ações avançadas.

     
  4. Depois que terminar de criar o projeto, você precisará disponibilizá-lo para os usuários. Para isso, será necessário publicar seu projeto. O Adobe Captivate permite que você publique seu projeto em vários locais de resultado:

    ·       Seu computador

    ·       iOS ou Android

    ·       Adobe Connect

     
SVG como botão

Transformar SVG em botão

 

Nesta atualização, você também pode transformar um gráfico vetorial dimensionável (Scalable Vector Graphic, SVG) em botão. O processo é semelhante ao de transformar outros tipos de botões em imagem.

 
  1. Na barra de ferramentas, clique em Mídia > SVG e selecione qualquer SVG.

     
  2. No Inspetor de propriedades, selecione a opção Usar como botão.

     
  3. Na guia Ações, atribua qualquer ação ao botão na lista suspensa No êxito.

     

Preencher SVG

É possível aplicar uma cor de preenchimento à imagem. Para aplicar preenchimento na imagem,

 
  1. Selecione o SVG na cena.

     
  2. Na cena, clique duas vezes em SVG.

     
  3. No SVG, escolha qualquer caminho e aplique uma cor da paleta de cores. No SVG, você pode usar um caminho para criar linhas, curvas, arcos e muito mais. Um caminho também é uma combinação de várias formas, por exemplo, linhas retas ou curvas. Um caminho pode ser complexo como uma série de polilinhas; portanto, é importante saber o caminho correto para aplicar uma cor. Por exemplo, as capturas de tela abaixo mostram um caminho preenchido com cor. Na primeira imagem, o caminho é preenchido com vermelho. Na segunda imagem, o caminho é preenchido com verde.

    O limite azul no SVG mostra o caminho selecionado no SVG, e alterar a cor mudaria a cor somente desse caminho.

     
    vermelho
    verde

Adicionar estados aos botão

Para adicionar estados aos botão,

  1. Converta uma imagem em um botão.

  2. No Inspetor de propriedades, clique em Exibição de estado.

  3. Altere as propriedades dos estados Rolagem e Para baixo.

  4. Saia da exibição de estado e visualize/publique o projeto.

Os botões devem mudar de estado quando forem acionados. Você também pode adicionar estado visitado e estados personalizados à imagem como um botão.

Referência das propriedades do botão

Para exibir as propriedades de um botão, selecione-o no slide. O inspetor de propriedades exibe as propriedades do botão. Quando você altera as propriedades, as alterações serão aplicadas imediatamente à instância selecionada do botão.

Propriedades do botão interativo

Interactive button properties
ID Descrição
1 Escolha alguma destas opções: texto, transparente ou imagem.
2 O rótulo do botão.
3 Altere as propriedades da fonte do rótulo do botão.
4 Altere os efeitos do rótulo do botão.
5 Altere as propriedades de sombra e reflexo do botão.
6 Escolha aplicar as propriedades a todos os objetos do mesmo tipo.

Propriedades da forma inteligente como botão

Propriedade Descrição do rótulo

1. Altere a forma inteligente.

2. Altere a cor e a opacidade do plano de fundo da forma inteligente.

3. Modifique as propriedades de traçado do botão.

4. Altere as propriedades da fonte do rótulo do botão.

1. Insira o símbolo, a variável definida pelo usuário ou o hiperlink.

2. Modifique as propriedades da cor do rótulo do botão.

3. Modifique as margens do botão.

4. Modifique as propriedades da sombra do botão.

  1. Escolha a ação que será executada ao clicar no botão.
  2. Atribuir um atalho de teclado ao botão
  3. Exiba legenda de êxito/falha/dica ao clicar no botão.
  4. Escolha o tipo de cursor e ative/desative o som de clique.
  1. Escolha um arquivo/clipe de áudio que seja reproduzido ao clicar no botão.
  2. Modifique o tamanho e a posição do botão.
  3. Altere a posição angular do botão. Mantém a relação altura/largura do botão quando for redimensionado.

Usando os botões interativos projeto em uma interação de arrastar e soltar

Interações de arrastar e soltar oferecem uma maneira interessante e de acessar o conhecimento dos seus usuários. Essas interações permitem que o usuário responda perguntas arrastado e soltando objetos em áreas ou objetos designados.

Toda interação de arrastar e soltar envolve uma fonte de arrastar e um destino de soltar. Os usuários arrastam as fontes de arrastar e soltam em destinos de soltar.

  1. Crie um projeto da interação de arrastar e soltar especificando de onde se arrasta e onde se solta, e os mapeamentos, como mostrado abaixo.

    Para obter mais informações sobre a criação da interação de arrastar e soltar, exiba Interações de arrastar e soltar no Adobe Captivate.

    Drag and Drop design
  2. Adicione legendas apropriadas de sucesso e falha.

  3. Para adicionar os botões Desfazer e Redefinir ao projeto, navegue até o painel Arrastar e soltar, e ative as opções Desfazer e Redefinir.

    DnD Undo Reset 1
  4. Para adicionar estados aos botões, selecione um botão, clique no Inspetor de propriedades e adicione propriedades de botões para os estados Rolagem e Para baixo.

    DnD button states
  5. Visualize e/ou publique o projeto.

Usando os botões interativos projeto em um projeto de questionário

No Captivate, você pode adicionar estados a botões de questionário. Você pode adicionar um estado de rolagem e/ou um estado para baixo aos botões.

  1. Crie um projeto do questionário com os botões, conforme mostrado a seguir:

    Quiz buttons
  2. Adicione os estados aos seguintes botões:

    • Enviar
    • Voltar
    • Ignorar
    • Revisão para frente
    • Revisão para trás
    • Limpar
  3. Visualize e/ou publique o projeto.

Usar botões interativos em um slide mestre em um modo responsivo

Você pode adicionar estados a botões em um slide mestre no modo responsivo e usar o slide mestre em seu projeto.

  1. Crie um projeto responsivo (Ctrl+H) e insira um slide mestre (Inserir > Slide mestre de conteúdo) no projeto.

  2. Adicione o título, o subtítulo e os espaços reservados de conteúdo. Adicione três formas inteligentes no projeto e converta-as em botões.

    Layout responsivo do slide mestre
    Layout responsivo do slide mestre

  3. Adicione estados aos botões. Escolha um botão e, no painel Inspetor de propriedades, adicione as propriedades de botões para os estados Rolagem e Para baixo.

    Estados de botão
    Estados de botão

  4. Saia da visualização do slide mestre. Insira um slide de conteúdo e escolha o slide mestre que você tinha criado da lista de slides mestres. Insira um título, um subtítulo e conteúdo ao slide.

    Visualize/publique o projeto.

  5. Para inserir as Fluid Boxes no projeto, clique em Sugerir Fluid Boxes no inspetor de propriedades. A Fluid Box cria automaticamente contêineres de acordo com o layout dos objetos.

    Alinhe os objetos vertical ou horizontalmente.

    Para obter mais informações sobre as Fluid Boxes, consulte Fluid Boxes no Adobe Captivate.

    Layout da Fluid Box no slide mestre
    Layout da Fluid Box no slide mestre

Redimensionar botões automaticamente

Você pode configurar o Adobe Captivate para redimensionar automaticamente um botão ou uma legenda, de acordo com o volume de texto do botão. Se o texto for editado, o tamanho do botão será alterado para acomodar o novo texto.

  1. Em um projeto aberto, selecione Editar > Preferências (no Windows) ou Adobe Captivate > Preferências (no Mac OS).

  2. Na caixa de diálogo Preferências, selecione Padrões no menu Global.

  3. Selecione Redimensionar os botões no painel Geral à direita.

Observação:

A melhor opção é redimensionar os botões antes de redimensionar o projeto. O redimensionamento de um projeto não redimensiona os botões automaticamente.

Modificar botões em slides de pergunta

É possível alterar algumas propriedades dos botões nos slides de pergunta. Os botões padrão são Limpar, Voltar, Enviar e Ignorar.

  1. Selecione o botão da pergunta que você deseja modificar.

  2. No painel Propriedades do quiz, ajuste os valores para as várias opções.

Observação:

Redimensione todos os botões antes de redimensionar o projeto. O redimensionamento de um projeto não redimensiona os botões automaticamente.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online