O componente "Virar"

O componente "Virar" permite gerar criativos em um formato de display imersivo com um modelo tridimensional interativo. A animação tridimensional inicial está vinculada à rolagem da página à medida que o anúncio fica visível. Os usuários podem interagir diretamente com o modelo e expandir o anúncio para tela cheia para ver mais.

Esse componente é para uso exclusivo em criativos "Espiral" do Display & Video 360 e não é compatível com o Microsoft Edge.

Para adicionar o componente "Virar" ao projeto:

1. Abra o painel Componentes e a pasta Gráficos e efeitos.
2. Arraste o componente Virar para o cenário.
3. Clique nele duas vezes para abrir a caixa de diálogo de edição do componente "Virar".
4. Selecione a camada Modelagem tridimensional no painel Camadas.
5. No campo URL do painel Propriedades, procure o arquivo GLB do recurso 3D que você quer usar. Também é possível ajustar outras propriedades (veja abaixo).
6. Para adicionar camadas, arraste os arquivos de imagem do seu sistema até o cenário ou o painel Camadas (somente no Windows ou Mac). Como alternativa, clique no botão Importar recursos na parte inferior do painel Biblioteca. Só é possível adicionar imagens como camadas no componente "Espiral".
7. Use as guias Início e Término para posicionar cada camada onde ela deve aparecer no início e no final da animação. É possível arrastar a camada para onde quiser ou usar os campos de posição Início e Término no painel Propriedades.
8. Defina outras opções de configuração conforme necessário (veja abaixo).
9. Quando estiver satisfeito com o componente (você pode usar a visualização enquanto trabalha nele), clique em Salvar. Você retornará à interface normal do Google Web Designer.

Opções de configuração

Para configurar o componente, clique duas vezes nele no cenário ou selecione-o e clique em Configurações… no painel Propriedades.

Adicionar um estado intermediário

Para ter mais controle sobre a animação do componente "Virar", é possível adicionar um estado intermediário e mudar as propriedades da camada nesse ponto.

1. Passe o cursor à direita da guia Início e clique no botão . A guia Meio será exibida.
2. Por padrão, o estado intermediário será inserido a meio caminho entre o início e o fim da animação. É possível ajustar o tempo da animação.
3. Vá para a guia Meio para definir as propriedades da camada neste ponto.

Para remover o estado intermediário, passe o cursor à direita da guia Meio e clique no X.

Alterar o tempo da animação

O tempo da animação do componente "Virar" é determinado pela distância percorrida até o fim da página. Por padrão, a animação começa quando a borda superior do componente começa a ser visualizada na página (0%) e termina quando a borda inferior desaparece no alto da página (100%). Se você adicionou um estado intermediário, também poderá ajustar quando ele ocorre durante a animação. Há duas maneiras de ajustar o tempo da animação:

• No painel Tempo da animação, arraste as caixas de início, meio e fim ou o controle deslizante para a porcentagem desejada.
• Insira as porcentagens inicial, intermediária e final nos campos no painel Tempo da animação.

Deixar o plano de fundo do modelo tridimensional transparente

1. Selecione o modelo tridimensional.
2. No painel Propriedades, marque a caixa Plano de fundo transparente da modelagem tridimensional.

Adicionar uma dica de gesto

1. Selecione o modelo tridimensional.
2. No painel Propriedades, clique no menu suspenso Ícone e escolha uma imagem da Biblioteca ou clique em Procurar... para selecionar uma imagem de seu sistema de arquivos.
3. Opcionalmente, insira o texto a ser exibido com o ícone no campo Texto.

A dica de gesto é exibida sobre o modelo tridimensional para solicitar que o usuário interaja com ele.

Girar o modelo tridimensional

1. Selecione o modelo tridimensional.
2. No painel Propriedades, defina a Guinada para o início, o meio e o fim da animação.

A guinada é a rotação do modelo em torno de um eixo vertical.

Adicionar camadas de imagem

Existem duas maneiras de adicionar uma camada:

• Arraste um arquivo do seu sistema para o cenário ou para o painel Camadas (somente no Mac ou Windows).
• Clique no botão Importar recursos na parte inferior do painel Biblioteca.

As novas camadas do componente "Virar" precisam ser imagens. Só é possível usar uma camada de modelo tridimensional, que é incluída por padrão.

Mover camadas

1. Selecione a camada que você quer mover.
2. Selecione a guia Início, Meio ou Término.
3. Use um dos seguintes métodos para posicionar a camada:
   • Arraste a camada para a nova posição.
   • Defina as propriedades de posição Início, Meio ou Término no painel Propriedades. Você só pode editar as propriedades correspondentes à guia atual. Use os botões Corresponder à posição inicial, Copiar a posição média ou Corresponder à posição final para copiar a outra posição.

Alterne para a guia Início, Meio ou Término e ajuste a outra posição da camada.

Trocar imagens

1. No cenário, clique com o botão direito do mouse na imagem que você quer substituir e selecione Trocar imagem… no menu pop-up.
2. Selecione uma imagem da Biblioteca ou clique no botão Importar arquivos para selecionar um arquivo de imagem do computador.

A nova imagem substituirá a original. Se você tiver redimensionado a imagem trocada, a nova também usará as dimensões alteradas. Caso contrário, ela usará as dimensões originais.

Mudar a ordem das camadas

No painel Camadas, arraste uma camada para a nova posição na lista.

A ordem das camadas determina quais serão exibidas na frente. As camadas listadas mais acima aparecem na frente das listadas mais abaixo.

Excluir camadas de imagem

1. Selecione a camada que você quer excluir.
2. Clique no botão Excluir na parte inferior do painel Camadas.

A camada do modelo tridimensional é obrigatória para o componente "Virar" e não pode ser excluída.

Redimensionar camadas

1. Selecione a camada que você quer redimensionar.
2. Use um dos seguintes métodos para redimensionar a camada:
   • No painel Propriedades, defina a largura e a altura da camada. Clique no botão Restringir proporção para definir se a proporção entre largura e altura será fixa.
   • Arraste uma das alças de redimensionamento nos cantos e nas bordas da camada no cenário.

A camada é dimensionada de acordo com o tamanho especificado durante toda a animação.

Alterar a opacidade da camada

1. Selecione a camada que você quer alterar.
2. No painel Propriedades, defina a opacidade inicial ou final como um valor entre 0 e 1, sendo que 0 é transparente e 1 é opaco.

A camada do modelo tridimensional será sempre opaca no final da animação.

Alterar o easing de animação da camada

1. Selecione a camada que você quer alterar.
2. No painel Propriedades, em Propriedades avançadas, selecione um tipo de easing na lista suspensa Easing.

O easing personalizado não está disponível.

Ocultar e mostrar camadas

No painel Camadas, clique na caixa ao lado da miniatura da camada (no botão Ocultar todas as camadas ).

É possível ocultar ou mostrar todas as camadas clicando no botão Ocultar todas as camadas .

Ocultar uma camada pode facilitar o trabalho em outra, além de impedir que a camada oculta apareça ao visualizar a configuração. No entanto, isso não afeta a visualização do navegador nem o criativo publicado.

Mostrar e ocultar o estado inativo

1. Selecione uma camada de imagem.
2. No painel Propriedades, em Propriedades avançadas, clique na caixa de seleção Mostrar o estado inativo.

O estado inativo é uma versão translúcida da camada nas posições que você não está editando no momento. Assim é possível comparar visualmente as posições inicial, intermediária e final. O estado inativo é apenas para referência e não é exibido nas visualizações nem no arquivo publicado.

Propriedades

Propriedades do componente "Virar"

Propriedade	Descrição
Nome	O nome do componente "Virar".
Fator de rolagem	Um número entre 0 e 1 representa a distância percorrida pela rolagem do visualizador. Essa propriedade é usada somente para exibição no cenário do Google Web Designer. O padrão é 0,5.

Se uma camada estiver selecionada, veja e edite as propriedades dela na caixa de diálogo de edição do componente "Virar".

Propriedades da camada do modelo tridimensional

Observação: os componentes "Virar" criados antes da versão 11.0.0 do Google Web Designer têm propriedades diferentes para a camada do modelo 3D.

Propriedade	Descrição
Nome	É o nome do componente "Modelagem tridimensional".
URL	É o arquivo GLB de origem do recurso 3D. Use o Khronos glTF Validator para garantir que o arquivo GLB seja válido. Para componentes "Virar" antigos É o URL ou o código do recurso tridimensional. Somente os recursos hospedados no Poly que têm o compartilhamento de link ativado são compatíveis. O arquivo precisa ter até 2 MB, porque os recursos maiores talvez não sejam carregados no Google Web Designer. Consulte o Guia de recursos 3D para ver outros requisitos. Os URLs precisam começar com https://poly.google.com/view/. Você encontra esse ID no final do URL da página de visualização do Poly. Por exemplo, https://poly.google.com/view/0CkCZrXqCWW. Exemplos: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Atualizar recursos : é possível atualizar o recurso 3D, basta clicar neste botão no campo URL. Caso não veja nenhuma mudança, talvez o recurso ainda esteja em processamento. Espere um pouco e tente novamente.
Plano de fundo transparente da modelagem tridimensional	Somente para componentes "Virar" antigos. Marque essa caixa se quiser que o plano de fundo do componente "Modelagem tridimensional" seja transparente.
Dica de gesto
Ícone	É a imagem a ser exibida sobre o modelo tridimensional para solicitar ao usuário que interaja com ele. A dica de gesto se move levemente para chamar a atenção do usuário até que o limite de animação seja atingido e desaparece quando o usuário começa a interagir com o modelo.
Texto	É o texto a ser exibido no ícone da dica de gesto. Só se aplica se um ícone de dica de gesto for especificado.
Definir limite da animação	Marque essa caixa para definir uma duração em segundos para limitar a duração da animação da dica de gesto.
Posição e tamanho
Início	É a distância da camada do canto superior esquerdo do componente "Virar" no início da animação. É possível editar o valor quando a guia Início está selecionada.
Meio	É a distância da camada do canto superior esquerdo do componente "Virar" no estado intermediário da animação. É possível editar o valor quando a guia Meio está selecionada.
Término	É a distância da camada do canto superior esquerdo do componente "Virar" no final da animação. É possível editar o valor quando a guia Término está selecionada.
Tamanho	Indica a largura e a altura da camada. Afeta a camada por toda a duração da animação.
Rotação
Guinada	É a rotação inicial, intermediária e final do modelo em torno de um eixo vertical, em graus.
Estilo
Opacidade	A opacidade da camada no início, no meio e no fim, representada por um número entre 0 (transparente) e 1 (opaco).
Propriedades avançadas
Easing	Informa o tipo de easing da animação da camada. O easing personalizado não está disponível.

Propriedades da camada de imagem

Propriedade	Descrição
Origem	É a fonte do arquivo de imagem. Não é editável.
URL de saída	É o URL de saída quando o usuário clica na imagem.
Posição e tamanho
Início	É a distância da camada do canto superior esquerdo do componente no início da animação. É possível editar o valor quando a guia Início está selecionada.
Meio	É a distância da camada do canto superior esquerdo do componente no estado intermediário da animação. É possível editar o valor quando a guia Meio está selecionada.
Término	É a distância da camada do canto superior esquerdo do componente no final da animação. É possível editar o valor quando a guia Término está selecionada.
Tamanho	Indica a largura e a altura da camada. Afeta a camada por toda a duração da animação.
Estilo
Opacidade	A opacidade da camada no início, no meio e no fim, representada por um número entre 0 (transparente) e 1 (opaco).
Propriedades avançadas
Easing	Informa o tipo de easing da animação da camada. O easing personalizado não está disponível.
Mostrar o estado inativo	Quando a propriedade está ativada, uma versão translúcida da camada é exibida na posição inativa (aquela que não está em edição no momento).

Eventos e ações

Eventos

Use eventos para ativar outras ações no anúncio. O componente "Virar" envia o seguinte evento:

Evento	Descrição
Componente Virar carregado	É enviado quando todos os recursos incluídos no componente são carregados.

Para selecionar esse evento na caixa de diálogo "Evento", defina o componente "Virar" como destino.

Também é possível definir eventos e ações para o modelo tridimensional incluído no componente "Virar".

Visualizar

Durante a configuração

É possível visualizar o componente "Virar" enquanto estiver trabalhando nele:

1. Clique duas vezes no componente no cenário para entrar no modo de edição.
2. Clique na guia Visualização na parte superior.
3. Role a página para cima e para baixo para ver como as camadas visíveis se comportam em um layout de dispositivo móvel de exemplo. As camadas ocultas não serão exibidas.
4. Não é possível editar o componente durante a visualização. Clique na guia Início, Meio ou Término, faça as alterações e clique na guia Visualização novamente para ver essas alterações.

No navegador

Para visualizar o componente no navegador, saia do modo de edição de componente e use o botão Visualizar no Google Web Designer. A página de visualização simula como o anúncio é exibido em uma página da Web com conteúdo suficiente para você rolar a tela acima e abaixo do componente.

É possível selecionar as seguintes opções do modo de visualização:

• Dispositivo: selecione um dispositivo móvel ou Personalizado.
• Girar o dispositivo : alterne entre retrato e paisagem.
• Tamanho da janela de visualização: se você selecionar Personalizado para o dispositivo, poderá definir um novo tamanho editando esse campo ou arrastando as alças de redimensionamento da visualização.

Os anúncios do componente "Virar" usam o modo de visualização paralaxe no navegador.