Revigore seu conteúdo com animações de entrada baseadas em IA que você não precisa programar sozinho. Converse com o AI Assistant no Storyline 360, descreva o efeito desejado em linguagem conversacional e assista ao AI Assistant escrever o código e criar o gatilho do JavaScript. Continue lendo para saber como.

• Comece
• Aplique animações de entrada a um ou vários objetos
• Itere e crie animações em várias etapas
• Entenda a compatibilidade

Comece

Siga estas etapas para criar animações de entrada envolventes em JavaScript conversando com o AI Assistant.

1. Escreva suas instruções. Clique na guia AI Assistant à direita e insira suas solicitações na caixa de bate-papo na parte inferior. As instruções podem ser tão simples quanto “Sugira uma animação para este slide”. Se você já tiver um objeto selecionado, você pode dizer algo como: “Faça esse objeto aparecer lentamente”.
2. Gere o gatilho. O AI Assistant responde com um esboço para uma animação apropriada, conforme mostrado na imagem abaixo.

• • Se preferir, você pode pular o esboço pedindo ao AI Assistant que crie o gatilho imediatamente.
  • Depois de aprovar o esboço, o AI Assistant converte suas instruções em código JavaScript e cria o gatilho.

3. Revise e edite o código (opcional). O AI Assistant exibe o trecho de código na janela de bate-papo, mas ele fica oculto por padrão. Clique na divisa no cabeçalho da resposta para revelar o código, conforme mostrado na imagem abaixo.

• • Para copiar o código, clique no ícone Copiar JavaScript (folhas de papel) abaixo dele, à direita.
  • Se você quiser editar manualmente o código ou ajustar as configurações do gatilho, clique no ícone Abrir gatilho (raio). Isso abre a caixa de diálogo Trigger Wizard, na qual você pode atualizar o nome, modificar o código, ajustar o tempo e adicionar condições.
  • Por padrão, o gatilho gerado pela IA está vinculado ao evento “Início do cronograma”.

1. Pré-visualize a animação. Clique no botão Visualizar para colocar Storyline no modo de visualização e ver a animação ser reproduzida.
2. Refine o resultado. Durante a pré-visualização, você pode continuar conversando com o AI Assistant para fazer mais ajustes. Por exemplo, você pode dizer coisas como “Diminua a velocidade da animação em 2x” ou “Repita a animação infinitamente”. Desfaça ações simplesmente perguntando no chat. Os trechos de código anteriores também têm um botão Restore Trigger para reverter ou comparar versões diferentes.
3. Compartilhe seu feedback (opcional). Se você achar útil o conteúdo gerado, clique no ícone de polegar para cima no canto inferior esquerdo, logo abaixo do botão Visualizar. Caso contrário, clique no ícone de polegar para baixo e compartilhe suas ideias. Seu feedback será enviado diretamente para nossas equipes de produtos e engenharia.

Observação: o AI Assistant ainda não consegue se lembrar de conversas passadas. Fechar e reabrir um projeto redefine o bate-papo.

Efeitos de animação suportados

O AI Assistant pode gerar vários efeitos populares de animação de entrada, incluindo:

• Desvanecer
• Voe até lá
• Flutue para dentro
• Girar
• E mais...

Nota: O AI Assistant também pode inventar novas animações de entrada. Experimente para ver o que funciona. Por exemplo, peça ao AI Assistant que “faça com que os botões se mexam e desapareçam”.

Efeitos de animação não suportados

Embora animações de mascaramento simples sejam possíveis, animações que correspondam exatamente às animações de mascaramento existentes do Storyline, ou animações de máscara muito complexas, provavelmente não funcionarão. Isso inclui, mas não está limitado a:

• Dividir
• Limpe
• Forma
• Barras aleatórias

Dicas profissionais:

• Precisa de inspiração criativa? Peça ideias ao AI Assistant. Por exemplo, “Sugira animações para este slide”.
• O AI Assistant reconhece as seleções de slides, portanto, nem sempre é necessário nomear objetos nos prompts.
• Você pode aplicar animações de entrada de JavaScript aos objetos nas camadas do slide, não apenas aos objetos no slide base.
• Peça ao AI Assistant que escreva comentários detalhados sobre o código para ajudar a esclarecer o que cada parte faz ao inspecionar o código JavaScript gerado.
• Tenha cuidado ao combinar transições de slides e animações em JavaScript, pois algumas podem entrar em conflito e causar resultados inesperados, principalmente com determinados tipos de movimento.

Aplique animações de entrada a um ou mais objetos

Ao trabalhar com um ou mais objetos em um slide, o AI Assistant oferece flexibilidade na aplicação de animações de entrada.

Animar objetos individuais

Especifique qual animação deve ser aplicada a cada objeto individual. Abaixo está um exemplo de aplicação de uma animação diferente a cada objeto.

Aviso: mova o quadrado da esquerda para a direita, o círculo de cima para baixo, a cruz da direita para a esquerda e o triângulo de baixo para cima

Animar vários objetos

Anime todos os objetos usando o mesmo efeito de animação com um único prompt. O exemplo abaixo mostra a mesma animação aplicada a todos os objetos.

Aviso: faça com que os objetos apareçam lentamente

Dica profissional: O AI Assistant cria um único gatilho, independentemente do número de animações e objetos. Se você precisar de um acionador separado para cada objeto, especifique isso no bate-papo.

Itere e crie animações em várias etapas

Conversar com o AI Assistant para criar animações facilita a iteração. Também permite combinar efeitos em animações de várias etapas, aumentando a interatividade do conteúdo. Veja como:

1. Comece pedindo ao AI Assistant que crie uma animação inicial.
2. Clique no botão Visualizar para entrar no modo de visualização. A caixa de bate-papo AI permanece aberta durante a pré-visualização. Clicar no botão AI Assistant no canto superior direito o oculta ou reabre.
3. Durante a pré-visualização, você pode fornecer mais instruções para adicionar novos efeitos às animações existentes. Você pode adicionar quantas etapas quiser e o AI Assistant reescreverá o código mantendo o mesmo gatilho.
4. Cada atualização atualiza automaticamente a pré-visualização, permitindo que você veja as alterações instantaneamente.
5. Não está satisfeito com os resultados? Lembre-se de que você pode desfazer ações facilmente perguntando ao AI Assistant no bate-papo ou usando o botão Restore Trigger em trechos de código anteriores para reverter para uma etapa específica ou comparar versões.

Confira nosso artigo de dicas e truques para obter mais ideias e exemplos imediatos.

Quer criar interações mais avançadas? Leia este guia do usuário para saber mais.

Entenda a compatibilidade

As animações de entrada de AI JavaScript são exclusivas do Storyline 360 a partir de 2 de dezembro de 2025. Projetos com gatilhos de animação em JavaScript criados no AI Chat não abrirão nas versões anteriores do Storyline 360. Para restaurar a compatibilidade, exclua o nome do gatilho no gatilho JavaScript gerado e salve seu arquivo.