• 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 10 de mar. de 2026

Atenção, entusiastas do JavaScript! Prepare-se para desbloquear uma interatividade poderosa com 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 em 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. Você pode até mesmo responder às entradas do mouse, toque e teclado diretamente do JavaScript. 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 avançada de JavaScript atualmente não é compatível com 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 its 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  = 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.

Lidar com eventos de entrada

A API JavaScript avançada oferece suporte à entrada do aluno por meio de interações com mouse, toque e teclado. Use esses eventos para criar interações dinâmicas e responsivas.

Eventos de ponteiro (nível de objeto)

Todos os objetos de slide têm métodos de ponteiro integrados para interações de mouse e toque. Explore cada um abaixo.

ponteiro para baixo (HandlerFunction)

Quando os alunos clicam em um objeto de slide com o mouse ou tocam em uma superfície sensível ao toque, isso aciona:

const objectName = object(’ObjectID’);
// when the pointer is down, run the handler function
objectName.pointerdown(() => {
  objectName.scale = 200;
});

Nota: Um objeto de slide só pode ter um evento de cada tipo. Se vários eventos do mesmo tipo forem atribuídos, somente o último entrará em vigor.

clique em (HandlerFunction)

Quando os alunos clicam ou tocam em um objeto de slide, ele aciona:

const objectName = object(’ObjectID’); objectName.click(() => {
>  objectName.rotation += 45;
});

pointerup (HandlerFunction)

Quando os alunos soltam o mouse de um objeto de slide ou levantam o dedo de um dispositivo sensível ao toque, ele aciona:

const objectName = object(’ObjectID’); objectName.pointerup(() => {
  // increase the size of the object by 10%
  objectName.scale += 10;
});

Nota: pointerup() é um alias paraclick().

ponteiro (HandlerFunction)

Quando os alunos movem o ponteiro até os limites de um objeto de slide, ele aciona:

const objectName = object(’ObjectID’); objectName.pointerover(() => {
  objectName.opacity = 50;
});

ponteiro (HandlerFunction)

Quando os alunos movem o ponteiro para fora dos limites de um objeto de slide, ele aciona:

const objectName = object(’ObjectID’); objectName.pointerout(() => {
  objectName.opacity = 100;
});

Eventos de teclado (nível de slide)

Os eventos do teclado são realizados globalmente no nível do slide.

keydown (função Handler)

Quando os alunos pressionam uma tecla, ela aciona:

keydown(event => {
  console.log(’Key pressed:’, event.key);
});

keyup (função Handler)

Quando os alunos liberam uma chave, ela aciona:

keyup(event => {
  console.log(’Key released:’, event.key);
});

getKeyDown ()

Retorna um objeto com valores booleanos indicando se as teclas estão pressionadas no momento. Isso se destina à lógica de chave contínua em um update() loop.

const objectName = object(’ObjectID’); update(() => {
  if (getKeyDown().ArrowRight) {
    objectName.x += 5;
  }   if (getKeyDown().ArrowLeft) {
    objectName.x -= 5;
  }   if (getKeyDown().ArrowUp) {
    objectName.y -= 5;
  }   if (getKeyDown().ArrowDown) {
    objectName.y += 5;
  }
});

Os valores-chave comuns incluem ArrowRightArrowLeft,ArrowUp,,ArrowDown,Enter, ’ ’ (barra de espaço),,a, bc, etc.

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 avançada de JavaScript é 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.