Creating WebGL apps with Google Web Designer and Verge3D

In this tutorial, we’ll show you a totally code-less approach to building WebGL applications from scratch using Google Web Designer and Verge3D.

Get Google Web Designer here: https://www.google.com/webdesigner/
Get Verge3D here: https://www.soft8soft.com/get-verge3d/
See also the textual version of this tutorial: https://www.soft8soft.com/docs/manual…

GOOGLE ADS GOOGLE WEB DESIGNER TUTORIAL PORTUGUÊS ANÚNCIOS DISPLAY ANIMAÇÃO BANNER SITE 2019 2020

Conheça o Google Web Designer criador de anúncios para o Google Ads. Tutorial em Português como criar animações em HTML para banner em display e criação de sites.

Baixe o Google Web Designer para Google Ads
https://www.google.com.br/webdesigner/

Suas ideias se tornam realidade em diferentes telas
Crie designs baseados em HTML5 que sejam interativos e envolventes, além de imagens animadas que possam ser executadas em qualquer dispositivo.

Faça o download do Google Web Designer
Compatível com Mac 10.10 ou superior, Windows 7 ou superior e Linux 64 bits (Debian/Ubuntu/Fedora/openSUSE)

Uma ideia. Todas as telas.
Não adianta fazer um trabalho incrível se ele não puder ser visto. Agora, tudo o que você criar estará disponível em qualquer tela, de computador, tablet ou dispositivo móvel, sem problemas de compatibilidade.

Foco no design
Cuidamos do HTML5 e do CSS3 para que você possa se concentrar no que ama: criar experiências visuais fantásticas. Um pacote completo de design que permite dar vida a todas as suas ideias.

Potencialize com o código
Se estiver com vontade de colocar a mão na massa, saiba que todo o código é editável, para que você nunca fique sem acesso ao próprio trabalho. Suas ideias agora podem ser potencializadas, e não restringidas, pelo código.

Recursos
Com o Google Web Designer, você cria um conteúdo lindo e envolvente em HTML5. Use animação e elementos interativos para dar vida às suas criações e aproveite a integração perfeita com outros produtos do Google, como o Google Drive, o DoubleClick Studio e o Google Ads.

Anúncios com design interativo

Criar anúncios responsivos
Ferramentas de animação sólidas

Adicione funcionalidades aos projetos usando os componentes da Web pré-programados. Os componentes padrão incluem iFrame, Google Maps, área de toque, galeria de imagens e YouTube. Além disso, cada componente gera o relatório
de metas automaticamente, sem necessidade de codificação.

Use os “Eventos” para conectar suas ações a gestos físicos e fazer seu criativo reagir ao toque, à inclinação, à rotação ou à agitação de dispositivos inteligentes. Use eventos predefinidos ou crie seus próprios.

Organize os vários estados de um projeto usando “Páginas” e crie todas as páginas que seu projeto precisar. Use a navegação entre as páginas para dar ao seu público-alvo o controle sobre o que desejam ver ou fazer em seguida.
Espero ter te ajudado com o Google Web Designer para Google Ads

Se você quer saber mais sobre mim
Acesse meu site http://www.afonsoalcantara.com.br
Instagram: @afonsoalcantara https://goo.gl/Kmve3u
Facebook: https://goo.gl/97Jm3F
Site Empresa: http://www.wproo.com
Email: contato@wproo.com

Tutorial: Drag and drop elements with Google Web Designer

A quick tutorial about how to create Drag’n’Drop on the stage with just 8 lines of code. Google Web Designer doesn’t provide native Drag’n’Drop for elements on the stage, so we have to create it on our own.

Find more tutorials on http://www.html5advertising.de
Find full Drag’n’Drop Tutorial here: http://html5advertising.de/2019/01/tu…

For touch events, just attach the touchstart event to the same dragStart function and a touchMove event for the page. The following script will catch both, touch and mouse events:

Javascript:

gwd.dragStart = function(event) {
gwd.dragger = this;
event = (event.touches ? event.touches[0] : event);
gwd.s = window.getComputedStyle ? getComputedStyle(this, null) : this.currentStyle;
gwd.dX = event.pageX – parseInt(gwd.s[“left”]);
gwd.dY = event.pageY – parseInt(gwd.s[“top”]);
}

gwd.dragMove = function(event) {
if (gwd.dragger) {
event = (event.touches ? event.touches[0] : event);
gwd.actions.events.setInlineStyle(gwd.dragger.id, “left:” + (event.pageX – gwd.dX) + “px; top:” + (event.pageY – gwd.dY) + “px”);
}
}

gwd.dragStop = function(event) {
gwd.dragger = null;
}

Advanced Preview Configuration – Google Web Designer

In this video, Google Web Designer software engineer Natalie provides a walkthrough on the advanced preview configuration. The new preview modes for different document types let you easily resize the preview viewport. For responsive ads, you can see different-sized versions of your ad at the same time. For dynamic ads, you can preview multiple versions with different sample data feeds, all on the same page.

Available for Download now: google.com/webdesigner

Comment on the video below or submit feedback in our forum: https://support.google.com/webdesigne…

Parallax Overview – Google Web Designer

In this video, Google Web Designer software engineer Nivesh provides an overview of the Parallax component.
The Parallax component lets you build creatives for Display & Video 360 in an immersive display format designed for mobile web. Layer images to create the illusion of depth as viewers scroll the page.

Available for Download now: google.com/webdesigner

Comment on the video below or submit feedback in our forum: https://support.google.com/webdesigne…

Authoring Dynamic Sample Data – Google Web Designer

In this video, Google Web Designer software engineer Lucas provides a demo on authoring dynamic ads. Learn how bind ad properties to a feed, and how to preview the ad with sample feed data.

To learn how to set up the feed or dynamic profile in Studio, watch
https://www.youtube.com/watch?v=C2SkV…

Available for Download now: google.com/webdesigner

Comment on the video below or submit feedback in our forum: https://support.google.com/webdesigne…

Publish to Display & Video 360 – Google Web Designer

In this video, Google Web Designer software engineer Maciek provides an overview on how to upload creatives directly to your Display & Video 360 account. Creatives are saved as drafts..

Available for Download now: google.com/webdesigner

Comment on the video below or submit feedback in our forum: https://support.google.com/webdesigne…

Google Web Designer Livestream 2018 for Designers and Developers

This is the edited recording of a Livestream Training for Google Web Designer (date: 2018-10-23) about Ad Creation and Mini Game Development with the free Animation Tool.

Agenda:

Google Web Designer for Designers
———————————————————-
TUTORIAL: Banner Creation (00:03:50)
GWD Components (00:43:42)
TUTORIAL: Dynamic Banner Demo (00:48:03)

Google Web Designer for Developers (01:01:55)
————————————————————
Technology behind Google Web Designer (01:03:46)
Coding with GWD API (01:16:16)
TUTORIAL: Mini Game Development (01:22:40)
GWD Demos (01:55:14)
TUTORIAL: Creating Mobile Apps with GWD + PhoneGap (02:01:01)
What’s next? (02:05:06)

########################

Download Assets:

Assets for Basic Introduction:
http://www.html5advertising.de/downlo…

Assets for Dynamic Banner for DV360:
http://www.html5advertising.de/downlo…

Treasure Hunter:
http://www.html5advertising.de/downlo…

Slot Machine:
http://www.html5advertising.de/downlo…

Watch 3D:
http://www.html5advertising.de/downlo…

Nexus 5 3D:
http://www.html5advertising.de/downlo…
(Maps not working without API key!)

Pizza Pazza:
http://www.html5advertising.de/downlo…
(only a few paths of decision tree implemented, Tomato Sauce + Salami will always work ;-D)

Google Web Designer for Google Ads Demo

To download Google Web Designer: google.com/webdesigner

Building Expanding Creatives – Google Web Designer

In this video, Product Technology Manager Owen Corso walks us through creating an expandable ad in Google Web Designer for Studio.

Available for Download now: google.com/webdesigner

Comment on the video below or submit feedback in our forum: https://support.google.com/webdesigne…