• Site Logo, Articulate

Busca de Artigos

Selecione um Produto

Diretório de suporte de null

Explore todos os artigos de null (Last Updated )

Nenhum artigo encontrado.

Resultados da pesquisa

Nenhum artigo encontrado.

Storyline 360: API avançada de JavaScript

Artigo atualizado pela última vez em 17 de fev. de 2026

Atenção, entusiastas do JavaScript! Prepare-se para desbloquear uma interatividade poderosa usando a funcionalidade avançada da API JavaScript no Storyline 360. Tenha controle preciso sobre as propriedades do objeto, acione animações personalizadas e crie efeitos avançados, como paralaxe. Continue lendo para saber mais.

Gere interações de JavaScript

Você não precisa de nenhuma experiência em codificação para criar interações avançadas. Basta conversar com o AI Assistant, e ele gerará o código e adicionará o gatilho para você. Confira este guia do usuário para ver como ele funciona.

Use a API JavaScript avançada

Quando se trata de criar interações poderosas usando a API avançada de JavaScript, você tem opções. Você pode modificar as propriedades do objeto, criar animações personalizadas, aplicar trechos de código e muito mais. Explore as possibilidades abaixo.

Encontre o ID do objeto

Para começar, primeiro você precisa obter o ID do objeto. Encontre essas informações usando qualquer um dos seguintes métodos:

  • Clique com o botão direito do mouse no objeto e selecione o ícone de cópia. O ID do objeto que não está entre parênteses será copiado para sua área de transferência.

O menu de contexto no Storyline 360.

  • No editor de JavaScript, escolha seu objeto na seta suspensa Referência do objeto e clique em Adicionar. O ID do objeto é referenciado na object() função.

Editor de JavaScript no Storyline 360.

Observação: a API JavaScript avançada atualmente não oferece suporte a conteúdo de áudio. Informe-nos se você gostaria de ver essa ou qualquer outra funcionalidade.

Definir propriedades do objeto

Depois de ter o ID do objeto, você pode referenciá-lo para definir qualquer uma dessas propriedades do objeto:

  • Posição:x, y (localização horizontal/vertical)
  • Escala: scaleXscaleY,, scale (0— 100%)
  • Rotação: rotation (0—360°)
  • Opacidade: opacity (0— 100%)
  • Ordem de profundidade: depth
  • Tamanho:width, height (somente leitura)
  • Estado: state (definido pelo nome)

Nota: Você deve usar a sintaxe de pontos para definir a posição, a rotação e as propriedades do objeto de escala. Por exemplo:

const ObjectName = object('ObjectID');
ObjectName.rotation = 45; // Rotate object 45 degrees
ObjectName.x = 0; // Move the object all the way to the left of the screen
ObjectName.scaleX += 10; // scale up by 10%

Ajuste as funções principais

Você pode usar qualquer uma das seguintes funções principais:

Cursor do mouse

  • Localização do cursor:pointerX(), pointerY()
  • Esconda o cursor: hidePointer()
  • Mostre o cursor: showPointer()

Dimensões do slide

  • slideWidth()
  • slideHeight()

Variáveis (anteriormente getVar e setVar)

  • Recupere o valor de uma variável: getVar('name')
  • Defina o valor de uma variável: setVar('name', value)

Atualizações

  • Execute uma função continuamente a 60 fps: update(callback)

const ObjectName = object('ObjectID');
update(() => {
  // move the ObjectName down if it's y is less than
  // the height of the slide
  if (ObjectName.y < slideHeight()) {
    ObjectName.y1 += 1;
  }
});

Explore trechos de código JavaScript

Os seguintes trechos de código JavaScript comuns também podem ser aplicados à ID de um objeto.

Girar objeto com base em uma variável
Controle a rotação de um objeto usando uma variável.

object('ObjectID').rotation = getVar('VariableID');

Siga o cursor (mouse ou toque)
Sincronize um objeto com o cursor.

const ObjectName = object('ObjectID');
update(() => {
  // use 1/2 the width and height to center the object  
  ObjectName.x = pointerX() - ObjectName.width / 2;
  ObjectName.y = pointerY() - ObjectName.height / 2;
});

Aponte para o cursor
Oriente um objeto em direção ao cursor.

const objectName = object('ObjectID');
update(() => {
  const dx = objectName.x + objectName.width / 2 - pointerX();
  const dy = objectName.y + objectName.height / 2 - pointerY();
  const angle = Math.atan2(dy, dx);
  objectName.rotation = angle / Math.PI * 180;
});

Movimento de paralaxe
Crie um efeito de paralaxe movendo um objeto com base em uma porcentagem da posição do cursor. Você pode até mesmo atribuir um deslocamento opcional, como no trecho de código mostrado abaixo, que seria de 200 pixels.

const ObjectName = object('ObjectID');
update(() => {
  ObjectName.x = 200 + pointerX() * .25;
});

Mover para
reduzir um objeto para 500 pixels no x.

const ObjectName = object('ObjectID');
update(() => {
  ObjectName.x += (500 - circle.x) / 12;
});

Animação
Use a animate função JavaScript nativa, uma API de animação rica em recursos, para criar animações. As animações criadas com essa função não alteram as propriedades descritas acima. Em vez disso, essas animações operam de forma independente dentro de seu próprio escopo e são projetadas para serem animações estáticas modernas na linha do tempo.

Para tornar as animações pesquisáveis na linha do tempo, envolva-as na função: addToTimeline

const objectName = object('ObjectID');
addToTimeline(
  objectName.animate(
    [
      { transform: 'translateX(0px)' },
      { transform: 'translateX(200px) rotate(45deg)', filter: 'blur(4px)' }
    ],
    {
      duration: 1000, // Animation duration in milliseconds<
      easing: 'ease-in-out', // Easing function
      fill: 'forwards' // Keep the final state after animation
    }
  )
);

Saiba mais sobre a função animar.

Dica profissional: use o AI Assistant para criar animações de entrada em JavaScript sem codificação.

Acesso às folhas de estilo em cascata (CSS)
Modifique o CSS de um objeto com a propriedade style. Embora algumas propriedades não se apliquem a determinados objetos, propriedades CSS, como filtrar e transformar, oferecem controle preciso sobre o estilo.

// add a 10 pixel blur to an object
object('ObjectID').style.filter = 'blur(10px)';

Saiba mais sobre filtros CSS.

Teste uma interação de amostra

Quer ver o que é possível com a API JavaScript avançada? Confira esse exemplo. Você pode explorar o código no arquivo do projeto clicando no link de download no canto superior direito da interação.

Torne as interações acessíveis

Siga estas dicas para tornar suas interações mais acessíveis:

  • Use a interatividade estrategicamente. Evite usar animações e efeitos apenas para decoração. Eles devem ter um propósito claro, como orientar os alunos em um processo ou focar em um detalhe específico.
  • Considere o tempo. Mantenha a duração da animação e dos efeitos em menos de cinco segundos. A interatividade que começa automaticamente e dura mais de cinco segundos deve permitir que os alunos pausem, parem ou ocultem a interação de acordo com os padrões de acessibilidade. (2.2.2 Pausar, parar, ocultar)
  • Dê controle aos alunos. Forneça uma opção para desativar animações e efeitos. Por exemplo, você pode usar uma variável verdadeiro/falso para rastrear se um aluno deseja ver a interatividade. Então, dependendo da escolha do aluno, uma camada com interatividade ou uma camada diferente sem interatividade apareceria. (2.3.3 Animação a partir de interações)
  • Atenda ao tamanho mínimo da meta. Objetos clicáveis menores que o tamanho mínimo desejado de 24 pixels de largura por 24 pixels de altura podem dificultar a interação precisa dos alunos. Certifique-se de que os elementos interativos atendam ao tamanho mínimo desejado ou tenham espaço suficiente ao redor deles. (2.5.8 Tamanho do alvo [mínimo])
  • Mantenha as coisas simples. A interatividade rápida, complexa ou não essencial pode aumentar a carga cognitiva. Para aumentar a acessibilidade, sincronize suas interações com texto ou narração, permita que os alunos desativem a interatividade e garanta que as interações estejam alinhadas aos objetivos de aprendizagem.

Entenda a compatibilidade

A API JavaScript avançada é exclusiva do Storyline 360 a partir de março de 2025. Embora você possa abrir, editar e publicar projetos que usam essa API em versões anteriores do Storyline 360, o código será interrompido.