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 Internet Explorer nem 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 "Virar".
  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 trash can icon 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 no botão de ativaçã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. Será necessário esperar um minuto e tentar 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.
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.

Isso foi útil?
Como podemos melhorá-lo?

Precisa de mais ajuda?

Faça login e veja mais opções de suporte para resolver o problema rapidamente.