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.
Para adicionar o componente Folha de sprite ao seu projeto, faça o seguinte:
- Abra o painel Componentes e depois a pasta Gráficos e efeitos.
- Arraste o componente Folha de sprite para o cenário.
- 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.
- 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.
- 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:
- Adicione outro componente Folha de sprite.
- 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:
- Expanda as Propriedades avançadas no painel Propriedades do componente Folha de sprite.
- 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.
- 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:
|
Dimensionamento |
Como exibir sprites com tamanho diferente do componente:
|
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 spriteVocê 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.
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 |
|
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.