Aplicar efeitos para uma experiência de usuário mais rica

Pesquisar
Captivate Guia do Usuário

Nesta página

Aplica-se a: Captivate

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

Os efeitos do objeto ajudam a atrair rapidamente a atenção dos usuários para áreas ou objetos específicos em um slide. Nesta seção, aplicaremos efeitos a objetos em nosso projeto.

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:

apply-effects.zip

Aplicar efeitos a objetos

Os efeitos no Captivate começam a partir do triângulo verde, como mostrado abaixo, e terminam no quadrado vermelho. O efeito termina no centro do objeto.

No projeto de amostra que vem com este tutorial, usaremos o seguinte slide para aplicar efeitos nas setas para a esquerda e para a direita:

  • A seta para a direita deve estar dentro do lado direito do slide.
  • A seta para a esquerda deve estar dentro do lado esquerdo do slide.
summary_slide_applyeffects

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

    apply-effects.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, você precisará criar um novo projeto no Captivate com um slide semelhante ao slide mostrado acima.

  2. Na Filmstrip, navegue para o slide intitulado Resumo.

  3. Para aplicar efeitos à seta para a esquerda, clique com o botão direito na seta no slide e escolha Aplicar efeito.

  4. Na seção Efeitos, escolha categoria Entrada na terceira lista suspensa.

    Os efeitos disponíveis para a entrada são exibidos no painel abaixo.

    entrance_effects

    Para ver o efeito em um objeto em um slide, passe o ponteiro do mouse sobre o efeito.

  5. Escolha o efeito AproximarPelaDireita.

  6. Para a seta para a direita, defina o efeito AproximarPelaEsquerda.

    Ao trabalhar com efeitos, é uma boa ideia visualizar seu progresso em intervalos curtos. Dessa forma, você tem uma boa ideia de qual será a aparência dos efeitos no slide à medida que trabalha.

  7. Clique em Visualização na barra de ferramentas e, em seguida, escolha Reproduzir slide.

Vamos visualizar o procedimento que concluímos.

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

Aplicar efeito baseado em evento

Você pode aplicar efeitos em objetos que as ações do usuário (evento) acionem. Você pode aplicar um efeito a um objeto que é acionado somente ao realizar qualquer ação no objeto.

Em seu projeto de amostra, aplicaremos um efeito para dar ênfase à mesa de Samantha na planta. O slide no fim deste procedimento será o seguinte:

apply-effects-sam-slide

Se o usuário clicar no botão com a legenda Onde está a mesa da Sam, um efeito é acionado no destaque azul sobre a mesa de Sam na planta.

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

    apply-effects.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, você precisará criar um novo projeto no Captivate com um slide semelhante ao slide mostrado acima.

  2. Na Filmstrip, navegue para o slide intitulado Samantha.

    No slide, vamos primeiro colocar um destaque azul em torno da mesa de Sam na planta.

  3. Na barra de ferramentas, clique em Slides e escolha a forma retangular.

  4. Desenhe a forma retangular sobre a mesa de Sam na planta.

  5. No Inspetor de propriedades, insira as seguintes propriedades para o retângulo:

    Nome: sams_desk (Usaremos o nome depois, quando aplicarmos um efeito neste objeto)

    Opacidade: 0% (Torna a imagem da mesa de Sam visível abaixo deste objeto)

    Se o Inspetor de propriedades não estiver visível à direita da sua área de trabalho, clique em Propriedades no canto direito da barra de ferramentas.

  6. Na barra de ferramentas, clique em Interações e escolha Botão.

    O objeto botão é colocado no slide.

  7. No Inspetor de propriedades, insira as seguintes propriedades para o botão:

    Onde está a mesa da Sam

  8. Navegue para a guia Ações.

  9. Na lista suspensa No êxito, selecione Aplicar efeito.

  10. Na lista suspensa Nome do objeto, escolha sams_desk e em seguida clique em.

  11. Na seção Efeitos, escolha a categoria Ênfase na terceira lista suspensa.

  12. Na lista de efeitos, selecione Aumentar o giro.

Vamos visualizar o procedimento que concluímos.

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

Utilização dos objetos de rolagem

Os objetos de rolagem no Captivate permitem que você exiba condicionalmente o conteúdo quando um usuário passa o ponteiro do mouse sobre uma área de rolagem em um slide. Os objetos de rolagem são semelhantes às dicas de ferramenta na maioria dos aplicativos de desktop. No entanto, além de texto, você pode exibir as imagens e até mesmo os slides (chamados slidelets) que usam Objetos de rolagem no Captivate.

Adicionar legendas de rolagem

Observação:

O resultado HTML5 para o procedimento descrito nesta seção está disponível aqui [OBSERVAÇÃO INTERNA: hospedagem pendente]. Você pode usá-lo como referência à medida que percorre as etapas no procedimento a seguir:

Vamos adicionar uma legenda de rolagem que é exibida se um usuário passar o ponteiro sobre a imagem da planta no seguinte slide:

samantha_wlison_sliderollovercaption

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

    apply-effects.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, você precisará criar um novo projeto no Captivate com um slide semelhante ao slide mostrado acima.

  2. Abra o projeto e, na Filmstrip, navegue para o slide intitulado Samantha.

  3. Na barra de ferramentas, clique em Objetos e escolha Legenda de rolagem.

    Quando você adiciona uma legenda de rolagem a um slide, o objeto fica com duas partes:

    Legenda de rolagem: legenda exibida condicionalmente (como uma dica de ferramenta)

    Área de rolagem: área redimensionável sobre a qual o usuário precisa passar o ponteiro para exibir a legenda.

    empty_text_captionwithhandles

  4. Na legenda, insira o seguinte texto:

    LUNARSPHERE STUDIOS, Nível 4, Planta

  5. Use as alças para reposicionar e redimensionar a área de rolagem para que cubra a imagem da planta no lado direito do slide.

  6. Reposicione a legenda no lado inferior esquerdo da imagem conforme mostrado no início desse procedimento.

  7. Vamos visualizar como a legenda de rolagem é exibida.

    Clique em Visualização na barra de ferramentas e, em seguida, escolha Projeto para visualizar o projeto inteiro.

Vamos visualizar o procedimento que concluímos.

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

Adicionar imagens de rolagem

Observação:

O resultado HTML5 para o procedimento descrito nesta seção está disponível aqui [OBSERVAÇÃO INTERNA: hospedagem pendente]. Você pode usá-lo como referência à medida que percorre as etapas no procedimento a seguir:

O objeto de imagem de rolagem exibe uma imagem quando o usuário passa o ponteiro sobre a área de rolagem em um slide.

Vamos adicionar uma forma retangular ao próximo slide. Em seguida, adicionaremos uma Imagem de rolagem de modo que, quando um usuário passe o ponteiro sobre a forma, uma imagem da equipe de Samantha seja exibida:

samantha_wlison_sliderolloverimage

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

    apply-effects.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, você precisará criar um novo projeto no Captivate com um slide semelhante ao slide mostrado acima.

  2. Na Filmstrip, navegue para o slide intitulado Samantha.

  3. Na barra de ferramentas, clique em Formas e escolha a forma retangular.

  4. Desenhe a forma retangular conforme mostrado acima.

  5. Faça clique duplo na forma e insira o seguinte texto:

    Passe o ponteiro aqui para ver a equipe de Samantha

    Em seguida, adicionaremos uma imagem de rolagem sobre esta forma.

  6. Clique em Objetos e escolha Imagem de rolagem.

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

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

  8. Escolha o arquivo sams_team e clique em Abrir.

    Ao adicionar uma imagem de rolagem a um slide, o objeto fica com duas partes:

    Imagem de rolagem: imagem que é exibida condicionalmente.

    Área de rolagem: área redimensionável sobre a qual o usuário precisa passar o ponteiro para exibir a imagem.

    empty_rollover_imagewithhandles

  9. Use as alças para reposicionar e redimensionar a área de rolagem para que cubra a forma que adicionamos na etapa 3 acima.

  10. Reposicione a imagem de rolagem conforme mostrado no início desse procedimento.

Vamos visualizar o procedimento que concluímos.

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

Adicionar slidelets de rolagem

Observação:

O resultado HTML5 para o procedimento descrito nesta seção está disponível aqui [OBSERVAÇÃO INTERNA: hospedagem pendente]. Você pode usá-lo como referência à medida que percorre as etapas no procedimento a seguir:

O slidelets de rolagem permitem que você adicione objetos do Captivate a um objeto de rolagem. Dessa forma, quando um usuário passa o ponteiro do mouse sobre a área de rolagem, o conteúdo inteiro do slidelet é exibido. Esse recurso é útil se você deseja exibir condicionalmente mais do que apenas texto ou imagens.

Vamos adicionar um slidelet de rolagem para exibir mais detalhes sobre Samantha quando os usuários passarem o mouse sobre sua imagem no seguinte slide:

samantha_wlison_sliderolloverslidelet

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

    apply-effects.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, você precisará criar um novo projeto no Captivate com um slide semelhante ao slide mostrado acima.

  2. Abra o projeto e, na Filmstrip, navegue para o slide intitulado Samantha.

  3. Na barra de ferramentas, clique em Objetos e escolha Slidelet de rolagem.

    Ao adicionar uma slidelet de rolagem a um slide, o objeto fica com duas partes:

    Slidelet: objeto do Captivate que é exibido condicionalmente.

    Área de rolagem: área redimensionável sobre a qual o usuário precisa passar o ponteiro para exibir o conteúdo do slidelet.

    empty_rollover_slideletwithhandles

    Vamos adicionar uma forma retangular ao próximo slidelet.

    Observação:

    Você pode adicionar outros objetos a um slidelet. Para facilitar, estamos adicionando somente uma forma retangular.

  4. Selecione o slidelet e clique em Formas, em seguida, escolha a forma retangular.

  5. Desenhe a forma retangular dentro do slidelet.

  6. Copie e cole o seguinte texto na forma retangular:

    Sobre mim: eu estou na Lunarsphere Studios desde o começo. Não gosto de ouvir “não”. Quero que me apresentem as soluções, não somente os problemas.

    Meu filme favorito: Casablanca

    Minhas melhores férias: Cairo para visitar as pirâmides de Gizé

    Um item na lista de coisas para fazer antes de morrer: conseguir uma aula de culinária de Gordon Ramsay

  7. Use o Inspetor de propriedades para alterar a cor do texto para branco e a cor da forma para vermelho.

  8. Use as alças para reposicionar e redimensionar a área de rolagem para que cubra a imagem de Samantha à esquerda do slide.

Vamos visualizar o procedimento que concluímos.

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

Visualizar e publicar

Esta seção fala bastante sobre os efeitos no Captivate.

Aplicamos efeitos a objetos. Criamos efeitos baseados em eventos e adicionamos objetos de rolagem para exibir condicionalmente o conteúdo em um slide.

Vamos visualizar nosso progresso.

Clique em Visualização na barra de ferramentas e, em seguida, escolha Projeto para visualizar o projeto inteiro.

Se perceber que falta algo, você pode ir para a seção adequada neste artigo e fazer as atualizações necessárias no seu projeto.

Se estiver tudo bem, vamos publicar o projeto.

  1. Na barra de ferramentas, clique em Publicar e, em seguida,escolhaPublicar no computador.

    A caixa de diálogo Publicar em meu computador será exibida.

  2. Na lista suspensa Publicar como, certifique-se de que HTML5/SWF esteja selecionado.

  3. Na opção Formato de saída, certifique-se de que HTML5 esteja selecionado.

  4. Clique em Publicar.

Para obter mais informações sobre a utilização de efeitos, consulte Efeitos do objeto.