O componente Folha de sprite

Esse componente não é compatível com anúncios HTML para AMP, anúncios em vídeo nem com anúncios gráficos.

Você pode usar o componente Folha de sprite para criar animações em sprite ou exibir sprites de imagens individuais separadamente usando somente um arquivo de origem de imagem.

  

Uma folha com oito sprites usada para criar uma animação. Os sprites também podem ser exibidos individualmente, sem fazer parte de uma animação.

Para adicionar o componente Folha de sprite ao seu projeto, faça o seguinte:

1. Abra o painel Componentes e depois a pasta Gráficos e efeitos.
2. Arraste o componente Folha de sprite para o cenário.
3. Na seção de propriedades do componente Folha de sprite no painel Propriedades, insira o URL do arquivo de imagem da folha de sprite no campo Origem. Se o arquivo de origem for local, clique no botão Procurar para selecionar o arquivo no sistema de arquivos do computador.
4. Insira as informações de Deslocamento X, Deslocamento Y, Largura do frame e Altura do frame do sprite específico que você quer exibir. Para criar uma animação, esse sprite será mostrado no primeiro frame da animação.
5. Dependendo do uso da folha de sprite, siga as etapas para exibir outros sprites ou criar uma animação.

   Para exibir outros sprites, faça o seguinte:

   1. Adicione outro componente Folha de sprite.
   2. Configure o novo componente usando a mesma origem, mas com os deslocamentos e dimensões de frame do sprite que você quer exibir nesse componente.

   Para criar uma animação em sprites, siga estas etapas:

   1. Expanda as Propriedades avançadas no painel Propriedades do componente Folha de sprite.
   2. Insira o número de frames na animação. O componente exibe um sprite por frame e considera que cada sprite tem o mesmo tamanho.
   3. Marque a caixa Reprodução automática para que a animação seja reproduzida automaticamente. Também é possível configurar um evento com a ação Folha de sprite > Exibir ou Alternar a animação (como descrito abaixo) para acionar a animação.

Propriedades

Propriedade	Descrição
Nome	O nome do componente.
Origem	É o URL da imagem usada como folha de sprite. Pode ser vinculado a dados dinâmicos.
X Offset (Deslocamento X)	Indica o deslocamento em pixels da borda esquerda da folha de sprite até o sprite.
Y Offset (Deslocamento Y)	Indica o deslocamento em pixels da borda superior da folha de sprite até o sprite.
Largura do frame	É a largura do sprite em pixels.
Altura do frame	É a altura do sprite em pixels.
Alinhamento	É a posição do sprite no componente: center (centro) bottom (inferior) bottom left (inferior esquerda) bottom right (inferior direita) left (esquerda) right (direita) top (superior) top left (superior esquerda) top right (superior direita)
Dimensionamento	Como exibir sprites com tamanho diferente do componente: Redimensionar imagem para caber Cortar imagem para preencher Nenhum Esticar imagem para preencher

Propriedades avançadas

Use as propriedades avançadas para configurar uma animação em sprites. Clique no ícone de expandir ao lado de Propriedades avançadas no painel correspondente ao componente para editar as seguintes definições:

Propriedade	Descrição
Number of Frames (Número de frames)	É o número de frames que compõem a animação. Se você inserir um número maior que a quantidade de sprites na folha de sprite, a animação incluirá frames em branco no final.
Duration (Duração)	É a duração de cada frame em milésimos de segundos.
Number of Loops (Número de loops)	É o número de vezes que a animação é repetida. Defina essa propriedade como 0 para que a animação seja repetida continuamente.
Reprodução automática	Quando selecionada, a animação é reproduzida automaticamente.
End on frame one (Acabar no primeiro frame)	Quando selecionada, a animação termina no primeiro frame após o último loop.
Reverse (Inverter)	Quando selecionada, a animação é reproduzida no sentido inverso.

Eventos e ações

Eventos enviados pelo componente Folha de sprite

Você pode acionar outras ações com base nos seguintes eventos do componente Folha de sprite:

Evento	Descrição
Pausado	É enviado quando a animação é pausada.
Finalizado	É enviado quando a animação é finalizada.
Reprodução iniciada	Enviado quando a reprodução da animação é iniciada.
Repetido	Enviado quando a animação é reiniciada.

Para selecionar um desses eventos na caixa de diálogo Evento, defina o componente Folha de sprite como o destino.

Ações realizadas pelo componente Folha de sprite

As seguintes ações do componente Folha de sprite podem ser acionadas em resposta a outros eventos:

Ação	Opções de configuração
Criar nova animação	Deslocamento X: indica o deslocamento em pixels do lado esquerdo da folha de sprite até o sprite. Deslocamento Y: indica o deslocamento em pixels do topo da folha de sprite até o sprite. Largura do frame: é a largura do sprite em pixels. Altura do frame: é a altura do sprite em pixels. Frames: é o número de frames que compõem a animação. Duration (Duração): é a duração de cada frame em milésimos de segundos. Loops: é o número de vezes que a animação é repetida. Defina esse valor como 0 para que a animação seja repetida continuamente. Reprodução automática: quando selecionada, a animação é reproduzida automaticamente. Reverse (Inverter): quando esta opção é selecionada, a animação é exibida no sentido inverso.
Exibir	Inicia a animação do ponto atual em que ela foi interrompida ou pausada.
Pausar	Pausa a animação atual.
Alternar a animação	Alterna a animação entre reprodução e pausa.
Repetir	Inicia a animação a partir do primeiro frame.
Voltar	Exibe o frame anterior da série.
Ir adiante	Exibe o próximo frame da série.
Ir para o frame	Exibe o frame especificado.

Ao selecionar uma dessas ações na caixa de diálogo Evento, defina o componente Folha de sprite como o destinatário.

Saiba como configurar eventos.

Visualizar

Depois de especificar a origem, os deslocamentos e as dimensões dos frames, o Google Web Designer exibirá uma visualização estática do componente Folha de sprite no cenário. Desse modo, você poderá confirmar se o sprite foi especificado corretamente.

As animações em sprites não podem ser visualizadas na interface do Google Web Designer. Para ver animações em sprites, clique no botão Visualizar no canto superior direito para visualizar o documento no seu navegador.