Criar um projeto responsivo

Pesquisar
Captivate Guia do Usuário

Nesta página

Aplica-se a: Captivate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Crie designs responsivos no Adobe Captivate que funcionem perfeitamente em vários dispositivos e tamanhos telas. Use projetos responsivos para criar uma experiência de aprendizagem envolvente para seus alunos e tornar a aprendizagem interessante e interativa. Neste documento, você aprenderá a criar e personalizar projetos responsivos no Adobe Captivate.

Ativos e amostras

Os procedimentos neste documento exigem o uso de ativos como imagens e arquivos de projeto de amostra do Adobe Captivate. Você pode optar por usar seus próprios ativos e amostras. No entanto, é recomendável baixar e extrair o seguinte arquivo zip no computador:

create-responsive-projects.zip

Criar um projeto responsivo

Vamos começar criando um projeto responsivo no Adobe Captivate.

  1. Na guia Novo da tela de boas-vindas do Adobe Captivate, escolha Projeto responsivo e clique em Criar.

    welcome-screen-responsive

    O Adobe Captivate cria um projeto responsivo com um slide único.

    Em um projeto responsivo no Adobe Captivate, a barra Visualização acima do slide fornece opções para ver rapidamente o projeto em diferentes tamanhos de tela ou dispositivos.

    responsive-slide

  2. Para visualizar o projeto em dispositivos diferentes, selecione a opção desejada de Visualização na lista suspensa.

  3. O Controle deslizante de visualização no lado direito da barra de Visualização permite que você redimensione o slide atual e visualize dinamicamente o conteúdo.

    À medida que você move o controle deslizante para a esquerda ou direita, o conteúdo do slide se ajusta à tela.

    responsive-slide-smaller

 

Para saber mais sobre este tópico, consulte Design de projeto responsivo com o Adobe Captivate.

Adicionar Fluid Boxes aos slides

Você também pode criar projetos responsivos no Adobe Captivate usando o layout Fluid Boxes.Ele 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 adaptá-los de acordo com o tamanho do dispositivo de exibição.

Um contêiner de Fluid Box expande os objetos para preencher o espaço livredisponí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.

Vamos adicionar um slide em branco ao projeto e usar as Fluid Boxes para auxiliar na capacidade de resposta do slide. No final deste procedimento, o slide terá a seguinte aparência:

responsive-slide-withboxes

O slide acima usa duas Fluid Boxes horizontais.

  1. Na pasta de arquivos baixada, navegue para a subpasta amostras e abra:

    create-responsive-projects.cptx

    Observação:

    Não é obrigatório baixar o arquivo de projeto fornecido com este tutorial. Você pode acompanhar as etapas neste procedimento. No entanto, certifique-se de criar um projeto responsivo no Adobe Captivate.

  2. Com o primeiro slide na Filmstrip selecionado, na barra de ferramentas, clique em Slides e escolha Slide em branco.

    Primeiro, vamos adicionar duas Fluid Boxes horizontais ao slide atual. 

  3. Na barra de ferramentas, clique em Fluid Box e escolha Horizontal.

  4. No submenu, escolha a segunda caixa para adicionar duas Fluid Boxes horizontais.

    horizontal_fluidboxsubmenu

    Ao colocar as Fluid Boxes em um slide, as caixas são separadas uniformemente no slide. O controle deslizante entre eles permite redimensionar a caixa.

    responsive-slide-fluidbox-horizontal

  5. Mova o controle deslizante para a esquerda para redimensionar as caixas horizontais.

    Em seguida, posicione duas Fluid Boxes na caixa horizontal da direita.

  6. Para posicionar o objeto dentro da caixa horizontal da direita, selecione a caixa.

  7. Na barra de ferramentas, clique em Fluid Box e escolha Vertical.

  8. No submenu, escolha a segunda caixa para adicionar duas Fluid Boxes verticais.

    vertical_fluid_boxsubmenu

  9. Mova o controle deslizante para redimensionar as caixas verticais.

  10. Teste a capacidade de resposta deste slide movendo o Controle deslizante de visualização para a esquerda e para a direita.

    Como alternativa, escolha dispositivos diferentes de Visualização na lista suspensa.

Adicionar objeto às Fluid Boxes

Na seção anterior, você aprendeu como adicionar Fluid Boxes horizontais e verticais a um slide.

Vamos adicionar objetos às Fluid Boxes no slide.

Observação:

Não é possível adicionar objetos de rolagem às Fluid Boxes porque esses objetos não funcionam em dispositivos móveis.

No final deste procedimento, o slide terá a seguinte aparência:

lunasphere-studios-team

  1. Na pasta de arquivos baixada, navegue para a subpasta amostras e abra:

    create-responsive-projects-with-fluid.cptx

    Observação:

    Não é obrigatório baixar o arquivo de projeto fornecido com este tutorial. Você pode acompanhar as etapas neste procedimento. No entanto, é recomendável que você crie um slide semelhante ao slide exibido no início da seção Adicionar FluidBoxes a slides acima.

  2. Navegue para o slide que contém as Fluid Boxes horizontal e vertical.

  3. Para adicionar a legenda na caixa horizontal esquerda, selecione a caixa no slide.

  4. Na barra de ferramentas, clique em Texto e, em seguida, escolha Legenda.

    Digite o texto a seguir na caixa da legenda:

    LUNARSPHERE STUDIOS

    Você pode fazer alterações na formatação do texto usando o Inspetor de propriedades. Para abrir o Inspetor de propriedades, clique em Propriedades no canto direito da barra de ferramentas.

  5. Para adicionar uma legenda na caixa vertical horizontal direita, selecione a caixa no slide.

  6. Na barra de ferramentas,clique em Texto e, em seguida, escolha Legenda.

    Copie e cole o seguinte texto na legenda:

    Madison e Robert fazem parte da Equipe de aprendizagem na Lunarsphere Studios. Como você, a cada dia eles recebem novos desafios e oportunidades para testar suas habilidades e os limites do que é possível. Hoje, você vai embarcar em uma dessas jornadas desafiadoras, como Madison e Robert, e vai usar o Adobe Captivate pela primeira vez.

  7. Para adicionar uma imagem na caixa vertical direita, selecione a caixa no slide.

  8. Clique em Mídia na barra de ferramentas e, em seguida, escolha Imagem.

    É exibida uma caixa de diálogo que lhe permite selecionar o arquivo de imagem no seu computador.

  9. Na pasta de arquivos baixada, navegue para a subpasta ativos.

  10. Escolha arquivo lunasphere- studios-team.png e abra-o.

    A imagem é inserida na Fluid Box vertical superior direita.

    Observe como as escalas de imagem se ajustam à Fluid Box em que está posicionada.

  11. Teste a capacidade de resposta deste slide movendo o Controle deslizante de visualização para a esquerda e para a direita.

    Como alternativa, escolha dispositivos diferentes de Visualização na lista suspensa.

Agora que há um slide com conteúdo, vamosvisualizarcomo esses objetos aparecem em vários dispositivos.

Na barra de ferramentas, clique em Visualização e, em seguida, escolha Projeto.

 

Para saber mais sobre Fluid Boxes, consulte Fluid Boxes no Adobe Captivate.

Adicionar simulações responsivas aos projetos

Você pode capturar etapas de simulação em um projeto responsivo nos seguintes modos:

  • Demonstração.
  • Avaliação.
  • Treinamento.

Para gravar as etapas a fim de criar uma apresentação do PowerPoint, insira uma simulação de software curta no modo Demonstração.

  1. Na pasta de arquivos baixada, navegue para a subpasta amostras e abra:

    create-responsive-projects.cptx

    Observação:

    Não é obrigatório baixar o arquivo de projeto fornecido com este tutorial. Você pode acompanhar as etapas neste procedimento.  No entanto, certifique-se de criar um projeto responsivo no Adobe Captivate.

  2. Na barra de ferramentas, clique em Slides e escolha Simulação de software.

  3. Na caixa de diálogo Gravar slides adicionais, selecione o slide após o qual você deseja inserir a simulação de software e clique em OK.

  4. A caixa de diálogo fornece opções para gravar a demonstração. Escolha entre as seguintes opções:

    • Na lista suspensa, escolha PowerPoint.
    • Na lista suspensa Modo, certifique-se de que Modo demonstração esteja selecionado.
    software_simulationinsertstartup

  5. Clique em Gravar.

    Depois que o contador chegar a 1, o aplicativo do PowerPoint aparece em primeiro plano.

  6. Realize as seguintes etapas no PowerPoint:

    1. Selecione o menu Arquivo.
    2. Escolha Novo.
    3. Escolha um tema.
    4. Na caixa de diálogo, clique em Criar.

  7. Para concluir sua simulação:

    • No Windows, pressione a tecla End no teclado.
    • No MAC, clique no ícone do Adobe Captivate na barra superior.

    Ao terminar a simulação, o Adobe Captivate aparece em primeiro plano novamente.

    Os slides de Demonstração são inseridos no seu projeto.

  8. Os slides gravados são adicionados ao projeto do Captivate. Observe que há um retângulo azul em cada slide desimulação. O retângulo azul é a área de foco da simulação. É visível somente na área de ediçãoedesaparece quando você visualiza ou publica o projeto. Observe que o tamanho desse retângulo azul é o tamanho mínimo suportado do dispositivo para projetos responsivos do Captivate.

    responsive-simulation-slide

    Cada slide de simulação também contém uma caixa delimitadora azul. Essa área do slide é exibida para o dispositivo de tamanho mínimo. Você pode mover essa caixa em torno do slide se desejar exibir uma área diferente da que o Adobe Captivate selecionou por padrão.

Para obter mais informações sobre as simulações de software no Adobe Captivate, consulte Criar simulações de software.

Vamos visualizar a simulaçãoresponsiva.

Na barra de ferramentas, clique em Visualização e, em seguida, escolha Projeto.

Adicionar quizzes responsivos aos projetos

Ao adicionar um slide de quiz a um projeto responsivo, o Adobe Captivate adiciona as Fluid Boxes para garantir a capacidade de resposta do conteúdonoslide.

Para provar esse comportamento, vamos criar um quiz simples com uma única pergunta de verdadeiro/falso.

  1. Na pasta de arquivos baixada, navegue para a subpasta amostras e abra:

    create-responsive-projects.cptx

    Observação:

    Não é obrigatório baixar o arquivo de projeto fornecido com este tutorial. Você pode acompanhar as etapas neste procedimento. No entanto, certifique-se de criar um projeto responsivo no Adobe Captivate.

  2. Na barra de ferramentas, clique em Slides e escolha Slide de pergunta.

  3. Na caixa de diálogo Inserir perguntas, marque a caixa de seleção Verdadeiro/Falsoeclique em OK.

    Um slide de pergunta é inserido após o título do slide Resumo.

    Além disso, após o slide de pergunta, o Adobe Captivate insere um slide Resultados do quiz.

    Ao adicionar um slide de pergunta a um projeto responsivo, o Adobe Captivate coloca todos os objetos da pergunta em Fluid Boxes para garantir a capacidade de resposta:

    responsive-question-slide

    Observe também as opções de Controle deslizante que permitem verificar rapidamente a capacidade de resposta do slide.

  4. No slide de pergunta, digite a seguinte pergunta na área de texto (substituindo o texto do espaço reservado):

    Não é possível criar projetos responsivos com o Adobe Captivate.

  5. Nas opções, selecione Falso.

Para obter mais informações sobre quizzes no Adobe Captivate, consulte Criar quizzes.

Vamos visualizar e testar a pergunta do quiz.

Na barra de ferramentas, clique em Visualizar e, em seguida, escolha Projeto.

Converter projetos não responsivos em responsivos

Se tiver um projeto do Adobe Captivate que não seja responsivo, o Adobe Captivate fornecerá um método simples para converter seu projeto em um projeto responsivo.

Vamos pegar um projeto não responsivo e convertê-lo em um projeto responsivo.

Antes de converter o projeto, vamos visualizar com que esse projeto se parece.

Na barra de ferramentas, abra Visualizar e, em seguida, escolha Projeto.

  1. Na pasta de arquivos baixada, navegue para a subpasta amostras e abra:

    non-responsive-project.cptx

    Observação:

    Não é obrigatório baixar o arquivo de projeto fornecido com este tutorial. Você pode acompanhar as etapas neste procedimento. No entanto, certifique-se de criar um projeto responsivo no Adobe Captivate.

    Observe que o Controle deslizante que é exibido acima dos slides em um projeto responsivo não será exibido acima dos slides em um projeto não responsivo. Essa é uma pista visual útil para verificar se um projeto é responsivo ou não.

  2. No menu Arquivo, escolha Salvar como responsivo.

    Visto que nem todos os objetos do Adobe Captivate são suportados em projetos responsivos, a seguinte caixa de diálogo é exibida:

    responsive-project-unsupported-objectes

  3. Clique em Mostrar itens não compatíveis.

    responsive-project-unsupported-objects-list

    O painel Controlador HTML5 exibe a lista de objetos e slides não compatíveis.

  4. Clique para abrir o objeto não compatível no painel.

    Você é levado até o slide que contém o objeto. Além disso, o objeto é selecionado no slide.

    Por exemplo, se um usuário visualizar a saída em dispositivos móveis, seu projeto não deve incluir objetos de rolagem.

  5. Exclua a legenda de rolagem selecionada do slide.

    Observe que o objeto não é exibido no painel Controlador HTML5.

  6. Depois de ter removido os objetos não compatíveis, escolha Salvar como responsivo no menu Arquivo.

  7. Na caixa de diálogo, clique em Salvar.

  8. Na caixa de diálogo Salvar como, escolha um local do arquivo em seu computador e o nome de arquivo para o design responsivo convertido recentemente.

    Observe que o Controle deslizante agora é exibido acima dos slides em um projeto convertido.

Após converter o projeto, vamos visualizar com o que esse projeto recém-convertido se parece.

Na barra de ferramentas, clique em Visualizar e, em seguida, escolha Projeto.