Guia do Usuário Cancelar

Design de projeto responsivo com o Adobe Captivate

  1. Guia do usuário do Captivate
  2. Introdução ao Captivate
    1. Novidades do Adobe Captivate
    2. Requisitos de sistema do Adobe Captivate
    3. Download do Adobe Captivate
    4. Novidades do Adobe Captivate, atualização 5 (versão 2019)
    5. Novidades do Adobe Captivate, atualização 2 (versão 2019)
    6. Notas de versão do Adobe Captivate 11.8
    7. Notas de versão do Adobe Captivate
    8. Requisitos do sistema e instruções de download para o Adobe Captivate Draft
    9. Design de projeto responsivo com o Adobe Captivate
  3. Criar projetos
    1. Criar diferentes tipos de projetos no Adobe Captivate
    2. Personalizar o tamanho de um projeto do Adobe Captivate
    3. Design de projeto responsivo com o Adobe Captivate
    4. Crie projetos de Realidade virtual (RV)
    5. Trabalhe com texto responsivo no Adobe Captivate
    6. Trabalhar com temas no Adobe Captivate
    7. Como aplicar propriedades específicas de exibição em projetos adaptáveis
    8. Como criar arquivos de backup para projetos do Adobe Captivate
    9. Painel de ativos
    10. Criar ramificações e navegação forçada no Captivate
    11. Substituir imagem na cena
  4. Adicionar e gerenciar objetos
    1. Trabalhar com os objetos de multiestado no Adobe Captivate
    2. Efeitos do objeto
    3. Inserir objetos da Web nos projetos do Adobe Captivate
    4. Trabalhe com estilos de objeto no Adobe Captivate
    5. Como girar objetos no Adobe captivate
    6. Redimensionar e reposicionar objetos por pixels
    7. Como gerenciar objetos com a barra de ferramentas Opções Principais
    8. Como mesclar objetos em um slide
    9. Como gerenciar objetos na biblioteca
    10. Como agrupar objetos no Adobe Captivate
    11. Editar informações de objetos usando o painel Interações avançadas
    12. Como copiar, colar e duplicar objetos no Adobe Captivate
    13. Controle a visibilidade dos objetos
    14. Como alterar a ordem de exibição dos objetos no Adobe Captivate
    15. Aplicar sombras a objetos
    16. Como alinhar objetos no Adobe Captivate
    17. Como adicionar reflexo aos objetos no Adobe Captivate
    18. Importe ativos para um projeto do Captivate
  5. Slides
    1. Adicione de slides a um projeto do Adobe Captivate
    2. Edição de slides em um projeto do Adobe Captivate
    3. Excluir slides do projeto do Adobe Captivate
    4. Alterar a ordem dos slides no Adobe Captivate
    5. Definir de propriedades do slide no Adobe Captivate
    6. Adicionar e converter notas do slide em arquivos de áudio com o Adobe Captivate
    7. Configure slides de verificação de conhecimento no Adobe Captivate
    8. Como adicionar transições do slide no Adobe Captivate
    9. Como trabalhar com slides mestres no Adobe Captivate
    10. Como bloquear slides do Adobe Captivate
    11. Como ocultar ou excluir slides em um projeto do Adobe Captivate
    12. Como agrupar e desagrupar slides no Adobe Captivate
  6. Linha do tempo e grades
    1. Use réguas e guias
    2. Trabalhe com grades no Adobe Captivate
    3. Trabalhe com a linha do tempo
    4. Teclas de atalho no Adobe Captivate
    5. Trabalhando com a tira de filmes
    6. Como personalizar a área de trabalho do Adobe Captivate
    7. Como usar a biblioteca do Adobe Captivate
    8. Como usar o painel Ramificação no Adobe Captivate
  7. Criar questionários
    1. Inserir slides de pergunta em projetos do Adobe Captivate
    2. Definir as preferências do quiz para o Adobe Captivate
    3. Como permitir que os alunos enviem simultaneamente todas as respostas do questionário
    4. Como configurar slides de pergunta com o Adobe Captivate
    5. Inserir slides de pergunta aleatórios em projetos do Adobe Captivate
    6. Como permitir que os usuários retornem ao questionário
    7. Importar perguntas de arquivos em formato CSV
    8. Importar perguntas de arquivos em formato GIFT
    9. Como inserir pré-testes no Adobe Captivate
  8. Áudio
    1. Como inserir áudio em um projeto do Adobe Captivate
    2. Como visualizar o áudio no Adobe Captivate
    3. Como editar arquivos de áudio com o Adobe Captivate
    4. Visualizar detalhes do áudio no Adobe Captivate
    5. Definir preferências de gravação de áudio e gravação de áudio
    6. Como exportar o áudio do Adobe Captivate
  9. Vídeo
    1. Vídeos de slides
    2. Trabalhe com vídeos de evento no Adobe Captivate
    3. Diferenças entre eventos e vídeos sincronizados no Adobe Captivate
  10. Objetos interativos
    1. Adicionar botões interativos aos seus projetos do Captivate
    2. Crie caixas de clique no Adobe Captivate
    3. Adicionar caixas de entrada de texto com o Adobe Captivate
    4. Como adicionar áudio às caixas e botões
    5. Como adicionar JavaScript às caixas e botões no Adobe Captivate.
  11. Interações
    1. Criar interações de aprendizagem no Adobe Captivate
    2. Criar interações de arrastar e soltar no Adobe Captivate
    3. Como configurar widgets e interações no Adobe Captivate
    4. Use variáveis do Adobe Captivate nos widgets
    5. Defina as propriedades dos widgets com o Adobe Captivate
    6. Como criar widgets estáticos, interativos e de perguntas no Adobe Captivate
    7. Como adicionar widgets ao seu projeto do Adobe Captivate
  12. Objetos não interativos
    1. Criar e editar formas inteligentes
    2. Editar e criar legendas com o Captivate
    3. Como usar imagens e imagens de rolagem com Captivate
    4. Como personalizar formas inteligentes no Adobe Captivate
    5. Como criar área de zoom no Adobe Captivate
    6. Como definir áudio para objetos não interativos
    7. Como criar slidelets de rolagem no Adobe Captivate
    8. Como criar legendas de rolagem no Adobe Captivate
    9. Altere as propriedades do mouse no Adobe Captivate
    10. Use caixas de realce no Captivate
    11. Trabalhe com amostras no Adobe Captivate
    12. Fixar o tamanho e a posição de objetos não interativos
    13. Adicione animações a um projeto do Adobe Captivate
  13. Edição avançada e revisões de projeto
    1. Como vincular projetos do Adobe Captivate
    2. Importar, exportar e excluir conteúdo
    3. Capas
    4. Criar projetos acessíveis no Adobe Captivate
    5. Crie um sumário com o Adobe Captivate
    6. Redimensione projetos do Adobe Captivate
    7. Projetos e preferências do projeto
    8. Como visualizar projetos no Adobe Captivate
  14. Variáveis e ações avançadas
    1. Variáveis do Adobe Captivate
    2. Como criar variáveis definidas pelo usuário no Adobe Captivate
    3. Ações avançadas no Adobe Captivate
    4. Ações compartilhadas nos projetos do Adobe Captivate
    5. Editar ou excluir as variáveis definidas pelo usuário no Adobe Captivate
    6. Como atribuir uma ação avançada a um evento
  15. Gravar projetos
    1. Criar vídeos interativos
    2. Gravação automática e manual com o Captivate
    3. Definir preferências de gravação no Adobe Captivate
    4. Gravar demonstrações em vídeo com o Adobe Captivate
    5. Como gravar simulações de software no Adobe Captivate
    6. Como pausar a gravação
  16. Publicar projetos
    1. Visualizar e publicar projetos responsivos
    2. Publique projeto no Adobe Captivate Prime
    3. Publicar projetos como arquivos HTML5 com o Adobe Captivate
    4. Publicar projetos como arquivos executáveis
    5. Publicar projetos como arquivos MP4 com o Adobe Captivate
    6. Definir preferências de publicação no Adobe Captivate
    7. Use fontes da Web do Adobe Fonts no Adobe Captivate
    8. Relatar resultados do quiz em um servidor interno
  17. Use o Adobe Captivate com outros aplicativos
    1. Importar e editar apresentações do PowerPoint no Captivate
    2. Carregar projetos do Adobe Captivate em um Sistema de Gerenciamento de Aprendizagem
    3. Conheça a interface Common JavaScript para Adobe Captivate
    4. Como publicar projetos do Captivate em Microsoft Word
    5. Uso do Adobe Bridge com o Captivate
    6. Como adicionar projetos do Captivate a um sistema de ajuda on-line RoboHelp
    7. Como compactar vários SCOs usando o Adobe Multi-SCORM Packager
  18. Solucionar problemas do Adobe Captivate
    1. Resolva problemas conhecidos e limitações nas versões mais recentes do Adobe Captivate, Adobe FrameMaker e Adobe RoboHelp.
    2. Versão anterior para Captivate (versão 2019) no macOS Big Sur (macOS 11)
    3. Hotfix para conteúdo de VR não reproduzido nos dispositivos
    4. Configure o SSL para visualização ao vivo nos dispositivos
    5. Problemas de ativação do Captivate (versão de 2019) no macOS Catalina
    6. Os cursos responsivos do Captivate não serão reproduzidos automaticamente nos navegadores
    7. Problemas com o painel ativos no Adobe Captivate (versão 2019)
    8. Erro 103 ao instalar o Adobe Captivate
    9. Problemas ao visualizar um projeto do Captivate

 

Design de projeto adaptável

Criar um projeto responsivo com o Adobe Captivate lhe oferece a tão necessária vantagem sobre os concorrentes.  Utilize os recursos de autoria apenas uma vez e o conteúdo se reorganizará para ser visto no tablet e em dispositivos móveis. Comece com uma tela em branco, grave um dispositivo iOS ou até mesmo importe um storyboard usando o Adobe Captivate Draft. Forneça experiências de aprendizado multiscreen, específicas ao local e de acordo com o dispositivo, sem precisar de programação.

Crie uma experiência de aprendizado envolvente para os alunos e deixe o aprendizado interessante e interativo.

Fluid Boxes no Adobe Captivate

O que é uma Fluid Box

Uma Fluid Box é um modo de layout que fornece a organização dos objetos em um slide de forma que eles se comportem de maneira previsível quando o slide se ajusta aos diferentes tamanhos de tela e dispositivos. Uma Fluid Box é um modelo de layout fácil de usar para designers de e-learning. Você pode dispor objetos secundários em qualquer direção e ter a flexibilidade de adaptar-se ao espaço de exibição.

Um contêiner de Fluid Box expande os objetos para preencher o espaço livre disponível, ou contrai os objetos para impedir que excedam os limites. Os elementos de uma Fluid Box não dependem da direção. Os objetos podem se adaptar ao espaço disponível.

Usar Fluid Box no Captivate

No Captivate, você pode inserir um layout de Fluid Box vertical ou horizontalmente em um projeto responsivo. Dependendo do tamanho da tela, os objetos em um contêiner de Fluid Box aumentam ou diminuem sem comprometer a largura da tela.

Você pode adicionar Fluid Boxes na grande barra de botões.

  1. Layout horizontal da Fluid Box
  2. Layout vertical da Fluid Box

Layout horizontal da Fluid Box

Neste exemplo, você cria um layout com uma Fluid Box com quatro bolas de bilhar. A exibição muda conforme você visualiza o projeto em um dispositivo diferente.

  1. Crie um único layout horizontal. Este layout se torna uma Fluid Box principal.

  2. Coloque as bolas de bilhar na Fluid Box uma de cada vez a partir da biblioteca.

  3. No painel Inspetor de propriedades, as seguintes propriedades da Fluid Box estão ativadas:

    1. Estático: se selecionar essa caixa de seleção , os objetos dentro da Fluid Box se sobrepõem e podem ser movidos para qualquer lugar dentro da Fluid Box.

      Opcional: se selecionar essa caixa de seleção , um objeto desaparece sempre que sua largura é atingida. Opcional funciona somente com um tipo de quebra, Encaixar em uma linha ou Encaixar em uma coluna.

    2. Fluxo: indica a direção em que os objetos são colocados em uma Fluid Box. Em um fluxo horizontal, os objetos são apresentados horizontalmente. Da mesma forma, em um fluxo vertical, os objetos são dispostos verticalmente.

      1. Horizontal: selecione as opções de alinhamento horizontal dos objetos ao longo do eixo principal. As opções são:

      2. Alinhar à esquerda: os objetos são alinhados à esquerda. O primeiro objeto está no início do eixo.

      3. Centralizar: os objetos ficam centralizados ao longo do eixo

      4. Alinhar à direita: os objetos são alinhados à direita. O último objeto está no final do eixo.

      5. Espaço no meio: os objetos são distribuídos uniformemente ao longo do eixo; o primeiro objeto está no início do eixo e o último objeto está no final do eixo.

      6. Espaço ao redor: os objetos são distribuídos uniformemente ao longo do eixo com espaço igual em torno deles.

    3. Preenchimento: adiciona espaço em todos os lados de um objeto. Para adicionar preenchimento horizontal aos objetos, digite o valor do preenchimento em pixels. Valores negativos não são permitidos.

      Distribuir objetos igualmente: clique no botão para garantir que todos os objetos em uma Fluid Box sejam equidistantes e sejam do mesmo tamanho. Por exemplo,

      Objetos antes da distribuição
      Objetos antes da distribuição

      Objetos após a distribuição
      Objetos após a distribuição

    4. Ponto de quebra: um ponto de quebra é um ponto que, quando atingido, quebra ou reorganiza os objetos com uma alteração na largura do dispositivo. Por exemplo, quando o ponto de quebra estiver em 80%, um objeto será reorganizado na Fluid Box em 80% da largura do dispositivo de acordo com as propriedades definidas nas opções de Quebra automática.

      Por exemplo, quando a área de visualização tiver 1024 pixels de largura e o ponto de quebra estiver definido em 50% e quando a largura do dispositivo estiver definida como 512 pixels de largura, os objetos serão reorganizados.

    5. Quebra automática: define quando e como os objetos de uma Fluid Box são quebrados ou reorganizados quando um limite predefinido for atingido. As seguintes opções estão disponíveis:

      1. Quebra para a próxima linha: quando o ponto de quebra atingir o limite, um objeto passa para a próxima linha.

      2. Encaixar em uma linha: quando o ponto de quebra atingir o limite, os objetos não alteram suas posições. Os objetos ajustam seus tamanhos de acordo com as dimensões do dispositivo.

      3. Uma linha/coluna: quando o ponto de quebra atingir o limite, os objetos se alinham em uma coluna.

      4. Simétrico: quando o ponto de quebra atingir o limite, os objetos se reorganizam de acordo com o número de objetos na Fluid Box.

Layout vertical da Fluid Box

Neste exemplo, você cria um layout com uma Fluid Box com quatro bolas de bilhar. A exibição muda conforme você visualiza o projeto em um dispositivo diferente.

No painel Inspetor de propriedades, selecione o fluxo de objetos e o tipo de quebra de objetos.

Opções de fluxo e quebra
Opções de fluxo e quebra

Escolha o alinhamento horizontal dos objetos: centro, à esquerda ou à direita.

Opções de alinhamento horizontal
Opções de alinhamento horizontal

Escolha o alinhamento vertical dos objetos.

Opções de alinhamento vertical
Opções de alinhamento vertical

Alinhamento superior

Alinhamento no meio

Alinhamento inferior

Espaço no meio

Espaço ao redor

Criar um projeto de Fluid Box com vários contêineres

  1. Crie um projeto responsivo (Arquivo > Novo projeto > Projeto responsivo ou pressione Ctrl+H).

  2. Em um slide em branco, insira um layout de Fluid Box, conforme mostrado a seguir:

    Layout da Fluid Box
    Layout da Fluid Box

  3. Após inserir o layout vertical, clique em qualquer parte do layout. FB_5 é o contêiner principal que representa todo o contêiner do slide. No painel Inspetor de propriedades, você pode ver toda a hierarquia dos contêineres individuais da Fluid Box.

    Conforme você destaca uma Fluid Box no palco, a Fluid Box apropriada na hierarquia acima é destacada também, para que você saiba com qual Fluid Box está trabalhando.

    Fluid Box principal
    Fluid Box principal

    Para modificar os objetos, escolha o contêiner apropriado.

  4. Nos contêineres da Fluid Box, arraste as alças azuis para ajustar o tamanho dos contêineres secundários.

    Se você clicar em qualquer outro lugar, as alças azuis desaparecem. Para fazê-las reaparecer, execute um destes procedimentos:

    • Clique em qualquer lugar fora da área de estágio e arraste o mouse até lá.
    • Clique em qualquer lugar na área de estágio e marque a caixa fluida principal na seção Seletor de caixa fluida. É possível ver que as alças retornam.
  5. Insira os objetos nos contêineres conforme mostrado abaixo:

    A imagem acima representa um layout de áreas de trabalho (1024x627). Para verificar como este layout se comporta em outros dispositivos, mova o controle deslizante na parte superior para ver as alterações no layout.

    Se visualizar o projeto em dispositivos diferentes, você poderá ver que os contêineres da Fluid Box se alinham de forma inteligente à largura do dispositivo.

    No caso de um dispositivo com largura menor:

    Se o texto especificado em uma caixa de texto ultrapassa o limite da caixa para se adaptar à alteração na largura do dispositivo, é exibido um botão na parte inferior do contêiner de texto. Clique nesse botão para ver o texto completo. Por exemplo, neste caso, o texto é exibido como:

Observação:

Não é possível copiar um slide com objetos em uma Fluid Box e colá-lo em um projeto em branco ou responsivo. Como alternativa, clique com o botão direito do mouse na Fluid Box, escolhaSelecionar tudo e cole os objetos em um slide em branco ou responsivo.

Observação:

Se houver um único objeto em uma Caixa fluida, não é possível redimensionar o objeto. É possível exibir as alças vermelhas ao redor do objeto, o que significa que o objeto não pode ser redimensionado.

Modificar a largura de uma Fluid Box

Você pode modificar a largura de uma Fluid Box alterando os valores no painel Posição no Inspetor de propriedades.

Por exemplo, se a largura de uma Fluid Box secundária for 33,3% da Fluid Box principal ou 341 px, você pode alterá-la para os valores que você deseja e as alterações serão, portanto, refletidas na cena.

Antes de alterar a largura
Antes de alterar a largura

Depois de alterar a largura
Depois de alterar a largura

Observação:

No painel Posição, se digitar um valor maior que o valor máximo permitido, o valor é restaurado para o valor original.

Visualização automática do dispositivo

Toque no botão de reprodução para ver seu conteúdo alterar a forma e o fator de forma automaticamente através do espectro total dos tamanhos do dispositivo. Veja quão responsivo é seu conteúdo em cada tamanho de tela.

Clique no botão Visualização do layout para ver seu conteúdo quebrar, ajustar-se e alinhar-se automaticamente em todos os tamanhos de dispositivo.

Visualização ao vivo nos dispositivos
Visualização ao vivo nos dispositivos

Você também pode usar a mesma opção nas propriedades Quebra. Altere a propriedade de quebra da Fluid Box e clique no botão Visualização do layout para verificar o novo comportamento de quebra.

Ativar o ponto de quebra de Fluid Boxes

Como discutido na seção anterior, um ponto de quebra é um ponto de quebra é um ponto que, quando atingido, quebra ou reorganiza os objetos com uma alteração na largura do dispositivo.

Por exemplo, quando o ponto de quebra estiver em 80%, a 80% da largura do objeto, um objeto será reorganizado na Fluid Box de acordo com as propriedades definidas nas opções de quebra.

Geralmente, em projetos de e-learning visualizados em dispositivos, é desejável que os objetos sejam quebrados em mais de uma Fluid Box. Embora você possa facilmente definir um ponto de quebra em uma Fluid Box, a capacidade de definir pontos de quebra em várias caixas fluidas oferece mais flexibilidade ao desenvolver projetos de e-learning.

Para configurar um ponto de quebra nas Fluid Boxes, clique em Editar > Preferências, ou pressione Shift + F8 para abrir a caixa de diálogo Preferências.

Ativar ponto de quebra
Ativar ponto de quebra

Selecione Ativar ponto de quebra caixa de seleção e clique em OK. Reinicie o Captivate.

No projeto, ao adicionar várias Fluid Boxes e objetos dentro de cada Fluid Box, você verá que os pontos de quebra podem ser ativados em cada Fluid Box.

Ao mover os controles deslizantes, os objetos quebram-se no ponto exato do limite especificado.

Quebra de objetos em cada Fluid Box
Quebra de objetos em cada Fluid Box

Captura responsiva

Barra de reprodução responsiva

Torne os controles da barra de reprodução responsivos. Em Windows>Editor de capa, você pode criar uma capa personalizada alterando os controles da barra de reprodução e salvando as alterações como um tema. Agora, você pode fazer com que os controles da barra de reprodução sejam exibidos de forma diferente nas vistas Principal, Tablet e Dispositivos móveis.

Para ver diferentes controles da barra de reprodução em cada uma das saídas das vistas Principal, Tablet e Dispositivo móvel, personalize a variável cpMobilePlaybar.

 

  1. Vá até a localização da barra de reprodução:

    C:\Program Files\Adobe\Adobe Captivate 8 x64\pt_BR\Gallery\Playbars\HTML\cpPlaybarMobileStep text

    Observação:

    A localização varia de acordo com o diretório de instalação em seu computador. 

  2.  Crie um backup da barra de reprodução que deseja alterar.

  3. Abra o arquivo playbarScript.js

    cp.responsiveButtons = { //"ButtonName" : [Primary,Tablet,Mobile], "Rewind" : [true,true,false], "Backward" : [true,true,true], "Play" : [true,true,true], "Slider" : [true,true,false], "Forward" : [true,true,true], "CC" : [true,true,true], "AudioOn" : [true,false,false], "Exit" : [true,true,true], "FastForward" : [true,true,false], "TOC" : [true,true,false]
    };
  4. Caso você deseje que cada um dos botões de controle da barra de reprodução apareçam nas vistas Principal, Tablet e Dispositivos móveis, altere o código acima para [true,true,true] para todos os botões. Salve e feche o arquivo. 

    Por exemplo, se você desejar que o “Controle deslizante” somente apareça em vistas do Tablet e Dispositivos móveis, então edite o código como segue:

    "Slider" : [false, true, true] 

    Observação:

    Caso você deseje que uma barra de reprodução diferente seja responsiva, siga o mesmo procedimento acima mencionado, mas primeiro copie a função responsiva no arquivo js.

    A primeira preferência é fornecida para as caixas de seleção no Editor de fundo de tela. Se eles não estiverem selecionados, então a despeito do valor de verdadeiro ou falso, aquele botão não aparece na barra de reprodução.

  5. Reinicie o Captivate e a barra de reprodução será atualizada. 

Captura responsiva (simulação responsiva)

Crie uma única captura de tela que possa ser usada em todas as telas e dispositivos. O Adobe Captivate permite escolher a parte da captura de tela que você desejar exibir em telas menores.

  1. Abrir um projeto adaptável do Captivate

  2. Clique em Slides > Simulação do software

    A janela Gravar slides adicionais é exibida. 

  3. Selecione o slide após o qual o slide gravado será inserido e clique em OK. 

    A tela Captura de tela é exibida. 

  4. Selecione o tipo de gravação como Automático, Demonstração de vídeo ou Manual e clique em Gravar para capturar as telas. 

    Observação:

    Use gravação manual quando quiser selecionar alguns instantâneos durante o processo de gravação. 

    Ao usar a gravação automática, o Adobe Captivate faz a captura de tela automaticamente e as insere em slides separados. A gravação automática é o método de gravação mais usado no Adobe Captivate.

  5. Em Projeto adaptável, clique na exibição Móvel.

    A captura de tela se realinha a si própria e aparece como mostrado aqui: 

  6. É possível observar que o plano de fundo está distorcido. 

    Você pode usar uma parte da imagem do plano de fundo na exibição para dispositivo móvel. 

  7. No Inspetor de propriedade, clique em Usar parte da imagem do segundo plano. Você pode mover a captura do slide para a parte do plano de fundo que preferir. 

    Agora é possível notar a diferença da exibição anterior. 

Conversão de um projeto em branco em um projeto responsivo

  1. Crie um projeto em branco com alguns objetos, conforme mostrado abaixo.

    Novo projeto em branco
    Novo projeto em branco

  2. Para converter o projeto em responsivo, clique em Arquivo > Salvar como responsivo. Você pode ver uma mensagem de aviso sobre os objetos que não têm suporte em um projeto responsivo. Para obter mais informações, consulte Objetos sem suporte em HTML5.

    Clique em Salvar e salve o projeto como um projeto responsivo. Você tem um projeto responsivo novo, conforme mostrado abaixo:

    Novo projeto responsivo
    Novo projeto responsivo

    Arraste o controle deslizante para ver seu projeto em várias exibições.

  3. Se o texto especificado em uma caixa de texto ultrapassa o limite da caixa para se adaptar à alteração na largura do dispositivo, um botão Expandir aparece na parte inferior do contêiner de texto. Clique nesse botão para ver o texto completo. 

    Botão Expandir
    Botão Expandir

  4. No slide responsivo, você pode inserir seu próprio layout de FluidBox (FluidBox > Vertical ou Horizontal) ou clicar em Sugerir FluidBoxes para colocar automaticamente os objetos em contêineres adaptáveis. Se clicar em Sugerir FluidBox, você pode ver que o layout do projeto muda, conforme mostrado abaixo:

    Layout de FluidBox
    Layout de FluidBox

  5. Mova os objetos, coloque-os como quiser e visualize ou publique seu projeto responsivo.

Criar o dispositivo de visualização personalizado

Em qualquer projeto responsivo, o Captivate permite visualizar o projeto nos vários dispositivos, como Desktop, iPhone, iPad e assim por diante.

Você pode criar dispositivos personalizados para visualização além daqueles já fornecidos por padrão.

Para criar um modo de visualização personalizado:

  1. Primeiro, inicie o Captivate como administrador.

    Digite as dimensões necessárias, conforme mostrado abaixo: 

    Dimensões personalizadas de visualização
    Dimensões personalizadas de visualização

  2. Para adicionar a visualização na lista de modos de visualização, clique em + ao lado dos campos de dimensão. Você pode ver a seguinte caixa de diálogo:

    Novo dispositivo de visualização personalizado
    Novo dispositivo de visualização personalizado

    Digite um nome, por exemplo, Galaxy S8, e o dispositivo de visualização personalizado agora se torna parte da lista de dispositivos de visualização.

    Para excluir uma visualização personalizada, selecione a visualização e clique em - ao lado dos campos de dimensão.

  3. <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
    <devicelist>
       <device name=&quot;Desktop&quot; width=&quot;1024&quot; height=&quot;627&quot; candelete=&quot;0&quot;/>
       <device name=&quot;iPhone6&quot; width=&quot;375&quot; height=&quot;667&quot; candelete=&quot;0&quot;/>
       <device name=&quot;iPad&quot; width=&quot;768&quot; height=&quot;1024&quot; candelete=&quot;0&quot;/>
       <device name=&quot;Galaxy S7&quot; width=&quot;360&quot; height=&quot;640&quot; candelete=&quot;0&quot;/>
       <device name=&quot;Nexus 5x&quot; width=&quot;412&quot; height=&quot;732&quot; candelete=&quot;0&quot;/>
       <device name=&quot;Galaxy S8&quot; width=&quot;1000&quot; height=&quot;1000&quot; candelete=&quot;1&quot;/>
    </devicelist>
    
  4. Adicione ou exclua uma visualização personalizada usando os atributos de nome, largura e altura.

  5. Reinicie o Captivate e você poderá ver as alterações refletidas na lista suspensa Visualizar em ,  que é um menu suspenso.

    Lista suspensa Visualizar
    Lista suspensa Visualizar

Pontos de interrupção no projeto responsivo

Crie conteúdo com cinco pontos de interrupção: 

  • Desktop com viewport de 1024x627,
  • Orientação paisagem no tablet com uma viewport de 896 x 627
  • Orientação retrato no tablet com uma viewport de 768 x 627
  • Orientação paisagem no dispositivo móvel com uma viewport de 667 x 410, e
  • Orientação retrato no dispositivo móvel com uma viewport de 360 x 460

Visualize a saída usando Reproduzir slide nos respectivos layouts de dispositivo. Publique conteúdo como HTML5.

O Adobe Captivate permite arrastar e soltar objetos com uma experiência perfeita em todas as três exibições de ponto de interrupção em projetos adaptáveis. 

Para obter informações sobre as propriedades específicas de visualização do projeto  Responsivo , consulte Propriedades específicas de visualização.

Você pode exibir o painel Alinhar ao clicar em Janela > Alinhar.

Como criar um Projeto adaptável

  1. Após iniciar o Adobe Captivate, clique na primeira miniatura na tela inicial, Projeto responsivo e clique em Criar. 

    Como alternativa, você pode escolher Arquivo > Novo projeto > Projeto responsivo.

  2. Para navegar através dos diferentes pontos de interrupção, clique nos ícones de Desktop, Tablet e Dispositivo móvel no layout Projeto responsivo.

    Você pode exibir a área do projeto responsivo dividida em seis pontos de interrupção exclusivos, como mostrado na captura de tela abaixo. Cada área de ponto de interrupção é um espaço de criação único.

    Pontos de interrupção disponíveis

Design adaptável (posicionamento inteligente)

Há controles deslizantes disponíveis no início e no fim de cada ponto de interrupção.

Por padrão, cinco pontos de interrupção estão disponíveis para você criar conteúdo.

Você pode criar conteúdo para qualquer dispositivos maior do que o tamanho da viewport do layout do dispositivo móvel ao aumentar o tamanho bastando arrastar o controle deslizante.

Observação:

Qualquer tamanho superior ao do visor padrão terá o layout do próximo visor de maior tamanho.
Por exemplo: considere que você deseja usar o visor de dispositivo móvel 450 x 450, em vez dos valores padrão. Nesse caso, como valor é superior ao tamanho para Móvel e inferior ao Tablet, a visualização adotará o layout do Tablet.

O posicionamento inteligente é permitido entre pontos de interrupção. O Adobe Captivate permite visualizar os projetos com uma experiência perfeita entre os pontos de interrupção. Em outras palavras, os usuário não observam qualquer atraso de tempo na visualização da saída ao passar de uma vista para a outra entre os pontos de interrupção.

Personalizar cores do tema

É possível escolher as cores de tema predefinidas ou personalizar cores de tema para criar seu próprio esquema de cores.

  1. Na barra de ferramentas, clique em Temas > Cores do tema

  2. Escolha uma das cores de tema predefinidas no menu Selecionar cor do tema e clique em Personalizar. A janela Personalizar cores do tema será exibida, conforme mostrado abaixo:

  3. Escolha o componente do qual se deseja alterar as cores.
    É possível alterar as cores de cada componente do slide, como o título, a capa, o subtítulo, o fundo do slide.

  4. Você pode escolher a cor com a ajuda das ferramentas Sombras, ou Amostras, Seletor de cor ou Conta gotas.

  5. Clique no título do tema predefinido e escolha um nome para o título.

  6. Clique em Salvar.
    Agora, a cor de tema personalizada será exibida na lista suspensa.

    É possível usar o ícone circular de configurações para gerenciar as cores de tema: excluir, renomear.

Altura do dispositivo

Defina vários planos de fundo em diversos visores através da inclusão/exclusão de objetos.

Você também pode definir a altura do dispositivo para cada layout ao selecionar a caixa de seleção Altura do dispositivo no Inspetor de propriedade. Se Altura do dispositivo estiver selecionado, você poderá ver a borda amarela para cada layout, coo mostrado nas capturas de tela abaixo para o layout Dispositivos móveis.

Definir a altura do dispositivo

A altura do slide pode ser vinculada à altura do dispositivo clicando no ícone de vinculação próximo à altura do dispositivo na janela Propriedades, conforme mostrado na tela abaixo. Altere a altura do slide para vista específica ou todas as vistas. 

Altura do slide

O Adobe Captivate também permite que você personalize a altura da viewport conforme a altura do dispositivo.

A altura do visor é a altura do layout da página para as opções Principal (Desktop), Tablet e Dispositivos móveis. É possível ajustar essa altura de acordo com a altura de qualquer dispositivo com a ajuda da opção Altura do Slide nas propriedades.

Observação:

Desvincule a altura do slide da altura do dispositivo para alterá-la.

Personalização da altura do slide

Vamos supor que a altura do visor e a altura do dispositivo para o layout dispositivo móvel seja 415. Considere um caso em que a altura do dispositivo é 500. Você poderá ajustar a altura da viewport ao mover o controle deslizante de altura do dispositivo na vertical até alcançar 500. Por padrão, a altura do dispositivo é vinculada à altura do slide. Você pode desvincular a mesma ao clicar no ícone de link junto ao valor Altura do slide no Inspetor de propriedades. 

Nesse caso, todo o conteúdo dentro da altura do visor ficará visível no dispositivo móvel por padrão. Portanto, essa alternativa permite desenvolver conteúdo de maneira precisa no layout, acompanhando a altura do dispositivo.

Se a altura da viewport for maior do que a altura do dispositivo, então o conteúdo além da altura do dispositivo será visível para o usuário final com a ajuda de uma barra de rolagem no dispositivo.

Agora, é possível alinhar qualquer objeto no centro do slide em todos os pontos de interrupção de projetos responsivos. As opções de alinhamento central horizontal e vertical são inseridas no Captivate 9.

  1. Inserir qualquer formato inteligente no slide principal do ponto de interrupção. 
  2. Clique na guia de posição de exibição e formato inteligente no Inspetor de propriedades. 
  3. Clique em Avançado. É possível exibir as opções de alinhamento central horizontal e vertical, conforme mostrado na captura instantânea. 

Alinhar objetos

Agora, é possível alinhar qualquer objeto no centro do slide em todos os pontos de interrupção de projetos responsivos usando as opções de alinhamento central horizontal e vertical do Captivate.

  1. Insira qualquer forma ou objeto no slide principal do ponto de interrupção.

  2. Selecione-o e visualize o painel Posição no Inspetor de propriedade. Clique em Avançado.

  3. Clique em Avançado. 

    Opções de alinhamento vertical e horizontal da imagem

    É possível exibir as opções de alinhamento central horizontal e vertical, conforme mostrado na captura instantânea. 

    Opções de alinhamento

  4. Você pode escolher opções de alinhamento do centro horizontal e vertical ao clicar com o botão direito do mouse no objeto e selecionando Alinhar como aqui mostrado.

  5. Como alternativa, você pode usar os ícones no painel Alinhar janela como aqui mostrado. 

    Observação:

    Ative o painel Exibir Alinhar ao clicar em Janela > Alinhar.

    Alinhamento central horizontal - Caso este alinhamento seja aplicado, é possível mover o objeto somente na direção vertical no slide. Seu movimento horizontal é restrito. 

    Alinhamento central vertical - Caso este alinhamento seja aplicado, é possível mover o formato somente na direção horizontal no slide. Seu movimento vertical é restrito. 

    Alinhamento central horizontal e vertical - se você aplica ambos os alinhamentos, então o movimento fica restrito nas duas direções. 

    A codificação por cores das opções de alinhamento central e vertical é suportada. A cor da borda de duas opções de caixa de seleção acessa o esquema de cores do ponto de interrupção em que as opções de alinhamento são escolhidas. 

Observação:

Se você tiver múltiplas formas, poderá alinhar um único objeto no centro do slide e vincular o restante dos objetos ao objeto centralizado para obter o slide centralizado com fluxogramas em todos os pontos de interrupção.

Se você desalinhar a opção de centralização horizontal ou vertical, o objeto não se move de volta à sua posição original. 

Definir cores de legenda padrão

Você pode definir diferentes cores padrão para o texto da legenda para as vistas dos pontos de interrupção.

  1. Selecione Editar > Gerenciador de estilo do objeto

  2. Selecione Estilo de legenda padrão

  3. Em Formato do texto, clique na caixa suspensa junto a Pontos de interrupção e escolha Desktop, Orientação retrato no tablet ou Orientação retrato no dispositivo móvel.

  4. Escolha a cor para cada ponto de interrupção.

Capturar suporte a interações

É possível capturar interações em todas as vistas e definir o foco automático para uma área de interação específica em todas as vistas. Defina uma forma inteligente como imagem de fundo no projeto adaptável. É possível definir a área de corte da imagem de fundo em várias vistas.

Slides de Perguntas e Resultados, junto com os Slides mestres, são perfeitamente compatíveis com todas as exibições do Projeto adaptável.

As propriedades responsivas e os Temas são permitidos em slides de Perguntas.

Um símbolo da estrela indica um estilo substituído na área Texto de amostra do Inspetor de propriedades.

Interação de arrastar e soltar

O Adobe Captivate suporta as interações de arrastar e soltar para projetos responsivos.

Interações de arrastar e soltar oferecem uma maneira interessante e de acessar o conhecimento dos seus usuários. Esta interação permite que o usuário responda a perguntas arrastando e soltando objetos nas á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.

No projeto responsivo, você pode executar o Assistente de Interação de Arrastar e Soltar ao escolher Inserir > Iniciar o Assistente de Interação de Arrastar e Soltar. Você também "pode" escolher Interações > Arrastar e soltar, conforme mostrado na captura instantânea abaixo: 

Todos os recursos da interação de arrastar e soltar em projetos adaptáveis são semelhantes aos projetos em branco. Para obter mais informações sobre como criar uma interação de arrastar e soltar, além de conhecer vários recursos de interação e as melhores práticas, consulte Interações de arrastar e soltar. 

Palavra de especialista: Interação responsiva de arrastar e soltar

Allen Partridge

Baixar projetos de amostra

Para saber mais sobre o Captivate e como você pode criar conteúdo de aprendizado interessante, baixe os projetos a seguir:

Logotipo da Adobe

Fazer logon em sua conta