Capturando uma demonstração interativa no editor avançado WYSIWYG

O recurso de demonstração interativa permite que os usuários participem de uma simulação de produto ou walkthrough, em vez de assistir a um vídeo estático ou ler instruções em texto. Ele oferece uma experiência prática onde os usuários podem clicar, digitar, passar o mouse e explorar a interface em um ambiente guiado.

O Document360 oferece demonstrações interativas integradas e opções de formatação. Você pode capturar sua tela, clicar o mouse e aprimorar a demonstração interativa diretamente dentro dos seus artigos, sem nenhuma ferramenta externa.

Por exemplo, se você está escrevendo um artigo prático sobre como configurar papéis de usuário, pode gravar uma demonstração interativa que mostra cada etapa em ação. Isso ajuda os leitores a acompanhar visualmente e entender o processo sem precisar adivinhar ou depender apenas de instruções em texto.

NOTA

O recurso de demonstração interativa disponível apenas para o KB Site 2.0.

Acessando a demonstração interativa

Para acessar a demonstração interativa,

1. Navegue até o artigo desejado no editor avançado WYSIWYG.

2. Digite o comando /Interactive demo Slash e pressione Enter.

3. Se a extensão demo Document360 Interactive não estiver instalada, clique em Instalar.

   NOTA

   Atualmente, essa extensão é suportada apenas no navegador Chrome .

4. Na loja web do Chrome, clique em Adicionar ao Chrome.

5. Uma vez instalado, retorne ao portal da base de conhecimento.

Gravando a tela

      O diálogo de demonstração interativa vai aparecer.

6. No menu suspenso de áudio, selecione a opção desejada ou selecione Não gravar áudio sem som.

7. Clique em Próximo.

8. Selecione a tela para capturar:

   • Aba Chrome: Grava apenas a aba Chrome selecionada.

   • Janela: Grava apenas a janela de aplicação selecionada.

9. Clique em compartilhar.

   A tela selecionada aparecerá junto com o painel de gravação da tela .

10. Escolha a resolução recomendada (16:9 ou 4:3).

11. Clique em Iniciar captura para começar a gravar.

12. Clique em Descartar para cancelar e voltar para a tela anterior.

13. Na seção Blur selecionada , clique em Adicionar para ocultar áreas específicas da tela ao gravar informações sensíveis.

14. Se necessário, ative os controles de gravação Show na tela.

    Um logo do Document360 aparecerá no canto inferior esquerdo da tela de gravação. Clicar no logo pausa a gravação. Esse logotipo também será visível na demo interativa gravada.

15. Cliques e interações do mouse serão capturados, e indicadores de cliques serão exibidos para facilitar a edição do guia.

16. Clique em Pausar para pausar a gravação e em Gravar para retomar.

17. Para parar a gravação, clique em Parar de compartilhar no painel flutuante ou Parar a gravação no painel de gravação da Tela .

    Após a gravação, o sistema importará a demonstração interativa para o artigo. Isso pode levar alguns momentos.

Adição de elementos interativos

Uma vez processada, a demo interativa gravada aparece no painel do editor de demonstrações interativas .

1. Clique no ícone Play () para pré-visualizar a demo interativa gravada.

   O editor de demonstração interativa oferece ferramentas de formatação, incluindo:

Adicionar elementos

a. Chamada à ação: Para adicionar um botão interativo na demo

1. No painel direito, clique em Chamado à ação.

2. Insira o título e a descrição.

   NOTA

   No campo Descrição, selecione o conteúdo e você pode usar as ferramentas básicas de formatação como Negrito (), Itálico (), Sublinhado (), Lista Ordenada (), Lista Não Ordenada () e Hiperlink ().

3. Na seção Ramos , insira o nome do botão e selecione a ação desejada:

   1. URL externa: Insira o link de destino.

   2. Próximo passo: Exibe uma mensagem ou informação para o usuário.

4. Clique em Adicionar novo para incluir outro botão.

5. Escolha a posição desejada do botão na seção Posição .

6. Ative a opção de narração de IA para adicionar narração:

   1. Selecione uma voz no menu suspenso.

   2. Entra o roteiro de narração.

   3. Clique no ícone Play () para pré-visualizar.

7. Clique em Aplicar.

b. Pontos de interesse

Hotspots podem ser usados para mostrar o efeito de clique do mouse na demo interativa.

1. Vá até a duração exata no vídeo e clique em Hotspot para adicionar.

   No diálogo Hotspots , revise a lista de hotspots existentes (se houver).

2. Navegue até o local desejado no vídeo e clique em Adicionar novo para adicionar um hotspot à linha do tempo.

3. Você pode arrastar o hotspot para a posição desejada.

4. Ative a opção Mostrar hotspot para exibir o hotspot.

5. No campo Tempo , insira o tempo desejado. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

6. Insira um título no campo Título .

7. Insira a descrição no campo Descrição .

   NOTA

   No campo Descrição , selecione o conteúdo e você pode usar as ferramentas básicas de formatação como Negrito (), Itálico (), Sublinhado (), Lista Ordenada (), Lista Não Ordenada () e Hiperlink ().

8. Nas configurações de Bolha, ajuste a posição do hotspot escolhendo o ponto exato da grade entre as opções disponíveis.

9. Na seção de Efeitos , ative o botão de ativar zoom se necessário.

10. Para adicionar narração por voz, ative a opção de alternância de voz da IA .

    1. Selecione a voz desejada e insira o conteúdo no campo de texto.

    2. Clique no botão Play () ao lado do conteúdo para visualizá-lo na voz selecionada.

11. Clique em Aplicar para salvar as alterações.

    

12. O texto será adicionado à lista. Passe o mouse sobre qualquer texto para:

    • Clique no ícone Editar () para modificar.

    • Clique no ícone Mais () e selecione Excluir para remover.

    

c. Borrão:

Para ocultar informações sensíveis na demonstração interativa:

1. No painel direito, clique em Desfoque.

2. Se nenhum desfoque foi adicionado antes, clique em Adicionar para adicionar um novo desfoque.

   Se já houver muitos desfoques, clique em Adicionar novos para adicionar novos desfoques.

3. Clique em Adicionar novo para adicionar uma área de desfoque.

4. Certifique-se de que o botão de desfoque de mostrar esteja ativado.

5. Insira um nome para o borrão.

6. Selecione o horário de início e o horário de fim para o desfoque. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

     NOTE

   Você pode usar o controle deslizante do vídeo para ajustar o horário de início e término do vídeo. E você pode redimensionar a dimensão de desfoque arrastando as bordas no vídeo interativo.

7. Escolha uma forma: Círculo ou Retângulo.

8. Ajuste o controle deslizante de Intensidade para modificar a opacidade.

9. Clique em Aplicar para salvar as alterações.

   

   O desfoque será adicionado à lista.

10. Passe o mouse sobre qualquer item de desfoque, clique no ícone Mais () e selecione Excluir para remover.

d. Imagem

A lista de imagens existentes aparece.

1. Se nenhuma imagem foi adicionada antes, clique em Adicionar para adicionar uma nova imagem.

   Se já houver muitas imagens, clique em Adicionar novas para adicionar novas imagens.

2. No campo Tempo , insira o tempo desejado. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

3. Clique em Imagem para importar imagens e emojis predefinidos categorizados por nome.

   Para aplicar sua própria imagem, clique no ícone e importe a imagem desejada do explorador de arquivos local.

4. Uma vez enviada, esta imagem será colocada acima do vídeo gravado.

   Você pode realizar as seguintes ações na imagem enviada:

5. Tempo: No campo Tempo , atualize o tempo desejado. Use o ícone Ajuste fino de milissegundos () para ajustes precisos.

6. Substituir imagem: Clique em Substituir imagem para substituir a imagem enviada. Os formatos suportados são JPG ou PNG.

7. Tamanho e posição: Selecione Livre para ajustar a posição da imagem usando o arrastar do mouse.

   1. No campo Grau , insira o valor desejado para girar a imagem.

   2. Use os ícones Girar à esquerda ou Girar à direita .

   Ou, selecione Ajustar na tela para ajustar a imagem ao tamanho da tela.

8. Na seção de Comportamento , você pode selecionar:

   1. Fique para: Mantenha a imagem por um tempo específico. Digite o número de segundos no campo Sec .

   2. Botão Próximo: Mantenha a imagem visível até o botão Próximo ser clicado.

   3. CTA: Vincule um chamado à ação.

9. Na seção de Narração :

   1. Ative a opção de Voiceover .

   2. Selecione a voz desejada no menu suspenso (com base no seu sotaque preferido).

   3. No campo Conteúdo , insira o texto de narração desejado.

   4. Clique no ícone Play () para pré-visualizar o conteúdo com a voz selecionada.

10. Clique em Aplicar para salvar as alterações.

    

    A imagem será adicionada à lista.

11. Passe o mouse sobre qualquer item da imagem, clique no ícone Mais () e selecione Excluir para remover.

    

e. Destaque: Destaque áreas importantes na demonstração interativa

1. No painel direito, clique em Destaque.

2. Clique em Adicionar para criar um destaque.

3. Insira um nome para os holofotes.

4. Selecione o horário de início e o horário de término. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

5. Escolha uma forma: círculo ou retângulo.

6. Clique em Aplicar para salvar as alterações.

   

f. Câmera

Durante a edição, você pode gravar um vídeo da sua câmera e adicioná-lo à sua demonstração interativa.

1. Clique na câmera.

   O painel Gravação aparece com uma lista de vídeos pré-gravados (se houver).

2. Clique em Criar.

   • Se nenhum vídeo foi adicionado antes, clique em Criar.

   • Se já houver muitos vídeos, clique em Adicionar novo para adicionar outro.

3. No painel Adicionar nova gravação , escolha um dos seguintes:

   • Grave novidades: Grave um vídeo diretamente usando sua câmera.

   • Selecione vídeo: Envie um vídeo já gravado.

4. No campo Tempo , insira o tempo desejado. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

5. Selecione a câmera e o microfone desejados, depois clique em Iniciar gravação.

6. Após a contagem regressiva de 3 segundos, a gravação começa.

   1. Use Pause e Retome conforme necessário.

   2. Clique no ícone de Retomar para recomeçar.

   3. Clique em Descartar para deletar a gravação atual.

   4. Clique em Stop para encerrar a gravação.

7. Depois de parar, clique em Salvar e continue. O sistema processará e adicionará o vídeo à demonstração.

8. Se necessário, clique em Gravar novamente para criar uma nova gravação.

9. O vídeo gravado será sobreposto acima da demonstração interativa. Do painel direito, você pode:

   • Clique em Substituir vídeo para trocar o original.

   • Clique no ícone Play () para pré-visualizar.

   • Clique em Gravar novo para capturar um vídeo novo.

10. Na seção Forma , escolha uma forma de exibição: Círculo, Quadrado, Largo ou Retrato.

11. Na seção Posição , selecione onde o vídeo deve aparecer na demonstração.

12. Ative a opção de Legendas para gerar legendas automaticamente se for detectado fala.

13. Clique em Aplicar para salvar as alterações.

14. Todos os vídeos gravados estão listados no painel. Para deletar um, passe o mouse sobre ele, clique no ícone Mais () e selecione Excluir.

  NOTE

Você não pode criar dois vídeos gravados no mesmo timestamp.

g. Texto

Você pode adicionar sobreposições de texto à sua demonstração interativa.

1. Clique em Texto.

   • Se nenhuma mensagem foi adicionada antes, clique em Adicionar.

   • Se já existirem textos, clique em Adicionar novo.

2. No campo Tempo , defina quando o texto deve aparecer. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

3. Insira o texto desejado no campo Texto .

4. Escolha a fonte e o tamanho da fonte.

5. Selecione uma cor de texto da paleta ou insira um código hexadecimal.

6. No campo Degree , insira um valor para girar a posição do texto.

7. Na seção de Comportamento , escolha um:

   • Fique por: Insira o número de segundos em que o texto permanece visível.

   • Mostrar até: Digite o tempo até o qual o texto permanece visível.

8. Se você selecionou Ficar para, pode ativar a narração com IA:

   1. Ative a opção de dublagem de IA .

   2. Selecione uma voz no menu suspenso.

   3. Entra o conteúdo de narração.

   4. Clique em Play para pré-visualizar.

9. Clique em Aplicar para salvar.

O texto será adicionado à lista. Passe o mouse sobre qualquer texto para:

• Clique no ícone Editar () para modificar.

• Clique no ícone Mais () e selecione Excluir para remover.

h. Destaque

Você pode usar os destaques para chamar atenção para elementos específicos da demonstração.

1. Clique em Destaque.

   • Se não houver destaques, clique em Adicionar.

   • Se já existirem destaques, clique em Adicionar novo.

2. No campo Nome , insira um nome. Isso não aparecerá na demo.

3. Selecione o horário de início e o horário de fim para o destaque. Use a opção Ajuste fino de milissegundos () para ajustes precisos.

4. No menu suspenso Forma , escolha Retângulo ou Círculo.

5. Na seção Cor, selecione uma cor de destaque.

6. Clique em Aplicar para salvar.

   

   O destaque será adicionado à lista. Para deletar um destaque, passe o mouse sobre ele, clique no ícone Mais e selecione Excluir.

   

Edit

i. Plantação

Para cortar qualquer parte do vídeo:

1. No painel direito, clique em Recortar.

2. Selecione uma proporção de aspecto: Original, Personalizado, Quadrado, Paisagem ou Retrato.

3. Você pode visualizar a saída do corte (largura e altura) com base na proporção selecionada.

4. Clique no ícone Excluir () para excluir o corte aplicado.

5. Clique em Aplicar para salvar as alterações.

   Uma vez cortada, apenas a parte recortada será visível quando o vídeo for salvo.

j. Acabamento:

Para cortar qualquer parte do vídeo:

1. No painel direito, clique em Trim.

2. Clique em Adicionar agora para adicionar uma nova versão à demonstração interativa.

   Se já existirem acabamentos, clique em Adicionar novo para adicionar outro acabamento.

3. Defina os horários do e do para .

   Clique em Aplicar e clique em Pronto.

k. Música:

Para adicionar música à demo interativa

1. Ative a opção Ativar música de fundo para adicionar música de fundo à demonstração interativa.

2. Clique em Escolher entre Galary para enviar um arquivo.

   NOTA

   Formatos de áudio suportados: .mp3, .aac (tamanho máximo do arquivo: 5 MB).

3. Na aba Presets , você pode usar opções de música pré-instaladas.

4. Selecione qualquer música e clique em Inserir.

5. Após o upload, clique em Substituir áudio para mudar a faixa selecionada.

6. Ajuste o controle deslizante de volume para controlar o volume.

7. A opção Fade In/Fade Out faz com que a música comece e termine suavemente durante essas interações.

8. Ative a Pausa na Interação se necessário. Quando o usuário adiciona música de fundo, a opção Pausar Interação pausa temporariamente a música adicionada sempre que o usuário clicar em hotspots ou interagir com o vídeo.

9. Depois de terminar, clique em Aplicar.

   

Voz

Você pode escolher como a demonstração interativa é narrada:

12. Voz original: Usa a voz de fundo original.

13. Voz de IA: Permite locuções geradas por IA em múltiplos idiomas.  

    Narração de IA: Para selecionar a narração de IA desejada entre vários idiomas. O roteiro do vídeo será renderizado na seção de Roteiro .

14. Sem voz: Não será aplicada nenhuma narração.

15. Legendas: Clique em Legendas para adicionar legendas à demo interativa. Se o vídeo tiver narração, as legendas geradas automaticamente aparecerão aqui, e você pode editá-las conforme necessário.

    Alternativamente, você pode inserir manualmente seu script de narração. Ative a opção Exibir legendas para mostrar legendas na demonstração interativa.

16. Elementos adicionais: Você pode ver os elementos adicionados na demonstração Interactide. A partir daqui, clique no ícone Editar () para editar o elemento desejado. Clique no ícone Excluir () ao lado dos elementos para deletar.

17. Clique em Fechar para salvar as alterações.

    

Editando a demo interativa gravada

Uma vez que a demonstração interativa seja adicionada a um artigo, você pode aplicar as seguintes opções de formatação:

1. Alinhar à esquerda: Alinhar a demonstração interativa à esquerda.

2. Centro: Alinha a demonstração interativa ao centro.

3. Alinhar à direita: Alinhar a demonstração interativa à direita.

4. Inline à esquerda: Coloca a demonstração interativa na linha à esquerda.

5. Bloco inline: Exibe a demonstração interativa como um elemento de bloco inline.

6. Inline à direita: Coloca a demonstração interativa em linha à direita.

7. Redimensionar: Ajusta as dimensões da demonstração interativa.

8. Cópia: Copia a demonstração interativa para a prancheta para reutilização em outro artigo ou categoria dentro do mesmo projeto.  

9. Edit: Permite modificações adicionais, incluindo:

   • Adicionar elementos: Desfoque e Destaque

   • Edit: Recorte, Acabamento e Música

   • Voz: Voz original, voz de IA e Sem voz