Web Designer Blog
The latest news and tips from the Google Web Designer team
Using Pages with custom code in Google Web Designer
Monday, March 28, 2016
As you probably know, Google Web Designer has a Pages construct that can be used to create new scenes in your storyboard. No matter where you are in your creative, you can add a new page to create additional functionality.
In this article we’ll have a look at two unique use cases where pages can be used; to repeat animation sequences, and to enforce polite loading of assets.
Looping between animation sequences
Let’s assume we have this storyboard:
In this storyboard, we want to transition 3 times between sequence A and B, and after that we move to sequence C, where we place our call to action.
There are a few ways we can achieve this. One way is to create a full length animation in one continuous timeline, recreating the A to B animation 3 times, and then transition to the part C of our storyline. While this will work, we’ll need to create and manage a lot of layers and animations keypoints, which is not ideal.
Another way would be to create 7 different pages, and recreate the same animation on pages 1,3,5 and 2,4,6. Then we’d need to add an event on each page to move to the next one. While this is better than the previous solution, it still creates a lot of unnecessary duplication.
A much cleaner way to handle this storyboard would be to use three pages, one for each sequence, and loop between the pages using some custom code. So let’s get started:
First, create a new Ad, and add 2 new pages. You should have now 3 pages – in this example we’ll call them pages A, B and C.
While staying on page A, we’ll create the global variables that we will use to control how many times to repeat the transition between A and B. From the event panel, click the ‘+’ button, and add the following custom event:
Target: document.body
Event: Google Ad > Ad Initialized
Action: custom
Custom Code: see the image above
Create the animation you want on page A, then go to the end of the Event timeline and add an event by right-clicking. Double-click the event marker that you just added, and define a new event like this:
Target and Event are automatically detected after clicking the event marker in the timeline.
Action: Page Deck > Go to Page
Configuration: Page ID: Page B.
This will tell Google Web Designer to move to page B after animations on page A are finished.
Go to page B, and create the animation you want in this phase of your ad.
As you did for page A, go to the end of the timeline and add a new event by double-clicking on the Events timeline.
Create a new event, but this time, under Action, select “Add custom action” and add the following custom code:
Let’s have a look at the code:
gwd.currentLoop++;
if (gwd.currentLoop < gwd.totalLoops) {
//Loop the animation, and go to page A
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageA');
} else {
//No more loop, go to page C
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageC');
}
In the first line we are incrementing the variable currentLoop. This is how we note the completion of a new iteration of the loop A->B. In the “If” statement, we are checking to see if we’ve completed all the loops that we intended. If we have, we move to PageC, otherwise we move back to pageA.
This lets us create a complex animation with multiple sequences without a lot of duplication or unnecessary layers.
Postponing asset loading
Publisher’s specs can often have restrictions that limit the size of the assets. For example assets may be limited to 75kb for polite loading, animation may require user interaction, or the ad may have a maximum size of 10MB.
Google Web Designer already offers a ‘Polite Loading’ option in the publish window, but let’s take a look at using pages to give us more control of how the assets load.
Let’s assume we are creating a masthead ad, and we want to display a 10 second looped video, and then show a longer video on user interaction (such as a rollover). The publisher specs for this campaign require a maximum of 1.5 MB page load, with a maximum of 10MB after user interaction. Since you can’t load both the video on page load, what can we do? You got it, we are going to use two pages! We’ll place the 10 second video on the first page, and on the second we’ll put the full length video.
Did you know?
The resources on a page are loaded only when that page is displayed for the first time! This is a great way to load only the assets that you really need.
First, create an ad, then add a second page. Place the short video on the first page, and the longer video on the second. Then create a new event like this:
Target: document.body
Event: Ad.initialized
Action: custom
In the custom action, we are creating a new global variable that keeps track of the user interaction. We have set it to false as a starting state.
Now we’ll add a new event, this time choosing the video on the first page as the target, and for the event we select Mouse > mouseOver;
We are now changing the state of our global variable every time there is an user interaction (rollover) on the first video.
Finally, we need to add one last event:
Target: video on the first page
Event: Video > ended
Action: custom
The custom code we’re using looks like this:
if (gwd.userInteracted) {
document.querySelector('[is="gwd-pagedeck"]').goToPage('page1_1');
}
Here, we are checking to see if an interaction has happened, and when it has, we move to the second page.
In this example, we used three events to avoid jumping directly to page2 after the user interaction; we wanted to be sure that the video on page 1 had played completely. This way we can create a seamless transition between the 2 videos, giving the impression of a single video.
I hope these examples inspire you to think about what you can do using pages together with some simple custom events. Give it a try, and let us know what you think.
Posted by Nicola, Software Engineer
Helping developers bring their creative vision to life
Monday, March 21, 2016
Over the past two years, we’ve focused on building Google Web Designer into a comprehensive HTML5 authoring tool that every developer would want in a toolkit. We heard from developers and evolved the product to suit their needs, building sleek animation features, hand-editable code, direct integration into ad servers (AdWords and DoubleClick,) and recently, a new intuitive
dynamic creative workflow
.
With these features in place, we wanted to test the capabilities of the product. We challenged an internal team of designers and developers to build an ad with all the beautiful, interactive capabilities that an advertiser expects, using only Google Web Designer. Using imagery from the Google Cultural Institute’s World Wonders collection, the team came up with the following:
We interviewed Tristan, the lead developer of the creative, to discuss some of the challenges designers face while using ad creation tools and he was very enthusiastic about how Google Web Designer has made his life simpler.
How would you rate Google Web Designer’s ability to help hand-coders who don’t like to use similar products?
Google Web Designer passes the most difficult test of any visual development environment: it respectfully gets out of your way when you prefer to assemble things by hand.
Is working with external libraries using Google Web Designer still a problem?
I can easily build on Google Web Designer's component library using jQuery and the GreenSock Animation Platform (GSAP) to customize and display items however I wish. I push them onto the screen, I slide them them off. I switch videos on, then I silence them again.
Manipulating animations with less development time is the biggest challenge for developers. How did you approach this while using only Google Web Designer?
Instead of building animations inside the timeline, I can use GSAP to rotate HTML elements in 3D, twirl them around to reveal secondary content, and stagger movement for visual clarity. When handling dynamic content, these techniques are invaluable.
How easy/difficult is it to use for a novice developer?
Google Web Designer provides a number of components which require no advanced API knowledge whatsoever. I can display a client's video playlist straight from YouTube. I can assemble swipeable product galleries with dot navigation. I can display a map with custom pins dropped at nearby retail locations. Any one of these things by itself is something a client would love to see in their lightbox unit.
The Google Cultural Institute lightbox unit imagines a very simple menuing system. It's a starting point. Behind the scenes, this piece illustrates how programmers and designers alike can seamlessly blend components with custom code to produce beautiful work quickly.
Want to know how Tristan and team built the ad?
Download the source code here to know more!
Posted by Tristan, Sales Animation Interactive Designer
Creating Looping Animations with Google Web Designer
Monday, March 14, 2016
A common technique when building complex animations in any medium is to create small looping animation clips that are used multiple times throughout the project, often in the background: birds flying, stars twinkling, falling snow, clouds floating in the sky, etc.
In this blog post we’ll demonstrate how you can create CSS keyframe looping animation clips in Google Web Designer, and then encapsulate them using Groups so you can manage them through the Asset Library and more easily use multiple instances of them throughout your larger project. By the end of this article you’ll understand:
How to use the Timeline to create perfectly smooth looping animations.
How to use the Wrap and Group features of Google Web Designer.
How to edit your new group directly from the Asset Library.
How to create new instances of the group from the Asset Library.
We’ll use a very simple example to demonstrate the techniques. Begin by creating a new file. Choose the Advanced Mode for the Timeline in the “Create new blank file” dialog. When the file is open, use the Tag tool to draw a single DIV element on the stage and color it red:
Here you can see we have set the ID property on the element to “redbox” as well. That’s not required, but makes it easier to track the original animated element through the process. We’ve also chosen to work with a DoubleClick ad file, but again that’s not necessary--all of these features are available to all file types.
The animation we will build will be a simple scaling animation where the red box shrinks a little and then grows back to its original size. We’ll have this animation last half a second, and when we set it to looping it will look like the box is pulsating.
One of the most important things about creating smooth animation loops is to make sure the endpoints match. You want the visual state of the animated element at end of one iteration of the loop to match up perfectly with the visual state at the beginning of the next loop, otherwise the loop will not appear continuous. With the Timeline that’s easy to do by defining the endpoints first.
Using the Select tool, select the element on stage if it’s not already selected. Then in the timeline add a keyframe at the maximum time for a loop--in our example, at half a second:
This creates a start and end keyframe that have identical states. Next, add a keyframe at 0.24 second:
Now we can use the Properties panel to scale the element’s size. In the Translation, Rotation and Scale section click the link icon on the left of the scaling directions so the scaling will be uniform in all directions. Then make sure the middle keyframe is selected and use any of the X, Y, or Z scales to shrink the element by half:
This will cause the element to shrink on stage. This change will be recorded in the selected keyframe, and that will result in an animation clip that has perfectly matching starting and ending points.
Back on the Timeline, click the animation repeat icon on the red box layer to bring up the looping dialog. Choose Infinite, which will cause the short animation to be repeated throughout the rest of the Timeline:
You can preview your animation to make sure it works the way you expected.
Now we have a perfectly looping animation clip. Often times these clips need to be used in multiple places in a larger composition, so we need to be able to paste multiple instances of this animation wherever we want. To do this we will use the Wrap and Groups feature of Google Web Designer.
The Wrap feature of Google Web Designer simply wraps the selected element(s) with a DIV. This is useful for encapsulating a single element in the DOM, and also for wrapping together several different elements in a single entity. The DIV has no special functionality, it simply acts as a container. We’ll use this in our example to simply encapsulate the animated element to make it easier to manipulate in the future.
The Groups feature of Google Web Designer allows you to create reusable objects from existing elements of your project. Groups appear in the Asset Library, and you can create new instances of the group by dragging and dropping from the library onto the stage.
We will start by using the Wrap feature to wrap the animated element in a DIV element. With the Selection tool active, right-click on the element on stage and choose Wrap from the context menu. This will wrap the element in a DIV. To create a Group, right-click on the element again and choose “Create group…” from the context menu. Give the group a name using the editor:
When that is done, the new group will appear as an asset in the Asset Library:
You can now easily drag-and-drop instances of the animation onto the stage:
Here we have added three more instances to the stage. When you preview the animation, they will all animate in sync with one another.
Since the animation clip is a Group, you gain all the benefits of groups. You can, for example, edit the group template using the Asset Library, and those changes will be made to all instances of the group. To do this, right-click on the group in the Asset Library and choose Edit from the context menu. This will allow you to edit the group directly on the stage.
As an example, let’s add a color change to the animation. Double-click on the wrapper DIV to drill down into the DOM. This will reveal the animated element in the Timeline:
Notice that the DOM breadcrumb indicator just above the Timeline shows that you are now within the wrapper DIV of the group.
Select the middle keyframe and use the Color panel to change the color of the element to blue:
As before, this change will be recorded in the selected keyframe. You can preview the change and add other animations (such as translation or rotation) if you want. To exit the Group editor click on the top-level (left-most) DIV marker in the DOM breadcrumb.
Now when you preview your animation, you’ll see that all of the instances now change their color as well as scale.
Using this technique you can easily create any looping animation and encapsulate it in a group for easy use throughout your project. In this simple example we’ve animated a single DIV element, but this same technique can be used to create looping animation clips with any valid element, including images, text, and custom components. You can even put multiple animated elements into a single group, just select all desired animated elements on the stage and then right-click and choose “Create group” from the context menu. Give it a try and let us know what you create in the comments below.
Posted by Jonathan Reid, Senior UX Engineer
Building cross-device Lightbox creatives with Google Web Designer
Tuesday, March 8, 2016
In this blog post we explore how to use Google Web Designer to create Lightbox creatives which can adapt to any screen size and device orientation.We’ll also take advantage of ready to use components, reduce the amount of custom code you need to write, and directly publish to DoubleClick Studio.
(Left, the engagement state in mpu 300x250 size. Right, the expanded state featuring an image gallery).
Lightbox, also known as Engagement Ads, are one of the most interesting ad formats on the web. They are usually composed by two parts, the invitation state and the engaged/expanded state. The user is required to rollover the invitation state for 2 seconds before the expansion is triggered. The nature of the interaction results in high performing ads, where the user interaction is highly valued because there is a clear intent to further explore the content advertised.
Create a new file
To create a new Expandable creative in Google Web Designer:
Select the “Fullscreen Lightbox” option in the dropdown for “Expansion Mode”.
Enter any expanded size-for example 800x500.The expanded size can be any size that you are comfortable working with, however this dimension is ignored at expansion time. The Fullscreen API will use the entire available screen size across all devices.
Choose a name for your creative and select any other important file properties
Click Ok
You will see two pages created:
Banner Page
and
Expanded Page
.
Add an event to listen for Desktop mouseovers
For the Lightbox to function correctly on both Desktop and Mobile we need to add an additional event to respond to mouseovers on Desktop. There is an existing touch/click event already added to the expand-button element so we will add the same functionality for mouseover.
Add a new event by selecting the plus (+) button in the Events panel.
Select the "expand-button" element as the target then choose "Mouse > mouseover".
Choose "Google Ad > Go to page" and "gwd-ad" as the receiver.
In the Configuration panel, for Page ID, select the Expanded page and click
Save
.
Remove the close button
Click the page indicator at the bottom of the stage and switch to the Expanded page.
Remove the close button tap area. The close button isn't needed because the Lightbox API will add a close button automatically.
Detect devices
Add device detection code to change the expansion CTA text depending on the device. We need custom code which detects whether the creative is served to a mobile device or to desktop.
Switch to the Banner page, then add a new event by selecting the plus (+) button in the Events panel.
Select "Banner page" as the target, then "Page > Page activated", "Custom > Add custom action".
Give the function a name, for example “detectMobile” then copy and paste the following code:
gwd.isMobile = {
Android:
function
() {
return
navigator.userAgent.match(
/Android/i
);
},
BlackBerry:
function
() {
return
navigator.userAgent.match(
/BlackBerry/i
);
}, iOS:
function
() {
return
navigator.userAgent.match(
/iPhone|iPad|iPod/i
);
}, Opera:
function
() {
return
navigator.userAgent.match(
/Opera Mini/i
);
}, Windows:
function
() {
return
navigator.userAgent.match(
/IEMobile/i
);
}, any:
function
() {
return
(gwd.isMobile.Android() || gwd.isMobile.BlackBerry() || gwd.isMobile.iOS() ||
gwd.isMobile.Opera() || gwd.isMobile.Windows()) && gwd.hasTouchScreen();
}
};
gwd.hasTouchScreen =
function
() {
var
n = !
1
,
o =
function
(n) {
return
-
1
!==
window
.navigator.userAgent.toLowerCase().indexOf(n)
};
return
(
"ontouchstart"
in
window
|| navigator.maxTouchPoints >
0
||
navigator.msMaxTouchPoints >
0
) && (o(
"NT 5"
) || o(
"NT 6.1"
) || o(
"NT 6.0"
) || (n = !
0
)), n
};
Add a call to action
Now add a CTA text element to the stage and name it "cta". You can name it whatever you want, but note that the ID name will need to match the ID in the code in the next step. Double-click on the "pageactivated" event in the events panel or switch to code view and edit manually.
Add the following code to the end of the "detectMobile" custom function. This modifies the CTA text based on whether a mobile device was detected.
/*
* Edit the lines below to modify your CTA or other elements as necessary.
*/
if
(gwd.isMobile.any()) {
gwd.actions.events.getElementById(
"cta"
).textContent =
"Tap to Expand"
;
} else {
gwd.actions.events.getElementById(
"cta"
).textContent =
"Hover to Expand"
;
}
You now have the basics for a cross-screen compatible Lightbox creative. From here you can begin to add components and visual elements you wish to work with and position them using the percentage dropdown instead of fixed pixels.
To choose between pixels and percentages:
Click the measurement unit (px or %) and select the unit you want to use from the pop-up. Percentage values are based on the size of the enclosing container.
And that’s it! This is basically all you need to do in Google Web Designer to get a ready-to-use creative. Once you have the hang of it, try some of the other available components. Have fun!
Posted by Nicola Bortignon, Software Engineer
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
English
events
exit
fluid layout
gallery
google cultural institute
google web designer
Google Web Designer Blog
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
2017
December
April
March
2016
November
June
May
April
March
Using Pages with custom code in Google Web Designer
Helping developers bring their creative vision to ...
Creating Looping Animations with Google Web Designer
Building cross-device Lightbox creatives with Goog...
February
Feed
Follow @googlewdesigner
