Web Designer Blog
The latest news and tips from the Google Web Designer team
Google Web Designer Tips - Part 2
Wednesday, January 24, 2018
This document compiles the top tips collected from years of helping users on the
forum
, and from the
Google Web Designer blog posts
.
1. Writing custom actions for events
Issue
: when you need an action that is not available in the Events dialog.
Solution
: You can write custom actions in Google Web Designer easily using the following tips:
Use the
setTimeout
method to call a function or evaluate an expression after a specified number of milliseconds (see example 1 below).
Add an event to perform an action, then copy that action in Code view to use in your custom action (see example 1 below).
Use Code view to add a global variable (under the line window.gwd = window.gwd || {};) if you want to set a flag and only trigger an event when the condition is true (see example 2 below).
If you want to use an event that isn't listed in the Events panel (e.g. ‘change’), you can add an event that exists in the Events dialog, then edit it in Code view (see example 3 below).
Check our help page on
Component APIs
for properties, methods, events, and more examples.
Example 1: go to a different page after 5 seconds (use setTimeout)
Note: this tip can be used to go to another page after 30 seconds to meet the
AdWords requirements
that state animations cannot last longer than 30 seconds.
In this example, there is an animation that loops infinitely in the first page and a second page without any animation. We will add an event so that 5 seconds after the first page is shown, it will go to the second page.
To start, we want to find the code that goes to the second page so that we can use this in our custom action. This can be done by adding an event to go to the second page. The specific event doesn’t matter, since we're only concerned with the action at this point (going to the second page).
Open the Events panel and click on the + button to add an event.
Select the page ID for the first page as the Target.
Select
Mouse > Click
as the Event.
Select
Google Ad > Go to page
as the Action.
Select
gwd-ad
as the Receiver.
Select the second page (page1_1 in this example) in Configuration. You may also set other settings such as the transition type, duration, etc.
Click
OK
to save.
Switch to Code view and find: script type="text/javascript" gwd-events="handlers". Copy the action code for going to the second page.
Switch back to Design view. Now we will add the custom action to be triggered 5 seconds after the page is shown.
On the first page with animation, click the + button in the Events panel to add an event.
Select the first page ID as the Target.
Select
Page > Ready to present the page
as the Event.
Select
Custom > Add custom action
as the Action.
In the Custom Code dialog, name your function. In this case, you might use a name such as after5s. Then enter the following code, pasting the action code that you copied previously:
setTimeout(gotoPage, 5000); function gotoPage() { gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1_1', 'none', 1000, 'linear', 'top'); }
Click
OK
to save.
Remove the first event that you added just to generate the action code to copy:
You now have the
working file
that goes to the second page 5 seconds after the first page is shown.
Example 2: use timeline events to loop the ad through all pages twice.
In this example, the ad has 3 pages with animation, each with an event to go to the next page after the animation is finished.
The ad loops through all the pages twice, i.e., page 1 > page 2 > page 3, looping one more time and ending on page 3 after the second loop. Let’s add timeline events on each page to go to the next page at the end of the animation.
Add a timeline event to go to the next page at the end of the animation
On the first page, at the last keyframe, right-click on the Events layer and select
Add event
.
Double-click on the event marker to open the Events dialog.
Select
Google Ad > Go to page
as the Action.
Select
gwd-ad
as the Receiver.
In Configuration, select the page ID of the page to go to. In this example, it’s page2. You may also set other settings such as transition type, duration, etc.
Click
OK
to save.
You can edit this event by double-clicking on it in the Events panel.
Repeat the steps above to add timeline events for the other pages. On the last page, configure the event to go back to the first page.
The Events panel should show the following timeline events:
When you preview the ad, it will start with the first page, go to the next page at the end of the animation, and continue to loop. Next, we will set the ad to loop through the pages once and stop at page 3.
Use a counter to keep track of the loop
Add a global variable as a counter by going to Code view and searching for window.gwd.
After the window.gwd line, add the following code to initialize the counter: var counter = 1;
On the last page (page3 in this example), only go back to page1 if the counter is less than 2, then increment the counter. To do this, go to Code view, look for the action that goes to page1, and copy it. It'll look like this: gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top');
In Design view, go to page 3, and double-click on the event marker at the end of the animation to add another timeline event. Select
Custom > Add custom action
in Action.
Type in a function name such as count.
In the code text area, enter code to check whether the counter is less than 2, paste the code to go to page 1, then increment the counter like this:
if (counter < 2) { gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top'); counter++; }
Click
OK
to save.
In the Events panel, remove the timeline event on page3 that goes back to page1 now that we have the custom action with the counter to do that.
You now have the
working file
that loops twice through the 3 pages and stops at page 3.
Example 3: use custom events
In this example, you will draw a text input element on the stage and add a ‘change’ event to output the text content in the console when the Enter or Tab key is pressed.
Select the Element tool in the Toolbar.
Click on the custom element and type input in the Element field.
Draw the input element on the stage and give it an ID in the Properties panel.
Right-click on the input element on stage and select
Add event...
Select
Mouse > click
as the Event.
Select
Custom > Add custom action
as the Action.
Type in a function name such as myInputChange.
In the code text area, add the custom action to log the value of the input field to the console when it's changed:
inputContent = document.getElementById('input').value; console.log(inputContent)
Click
OK
to save.
Now we will replace the click event with a change event in Code view in 2 places:
When you switch back to Design view, you'll see the change event in the Events panel and you can edit it further as needed.
You now have the
working file
that outputs the input text content in the console window when there is a change event in the input field, i.e., the input’s value is committed on an Enter or Tab keypress.
2. Adding global variables in Design view
This tip describes how to add a global variable in Design view without switching to Code view.
Click on the plus button in the Events panel to add an event.
Select
document.body
as the Target.
Select
Google Ad > Ad initialized
as the Event.
Select
Custom > Add custom action
as the Action.
Give the function a name such as declareVars.
In the code section, declare and initialize your variables with the gwd. prefix such as gwd.myCounter = 0;
When the ad is initialized, the global variables can be used anywhere in your file.
Attached is the
example
that traces the gwd.myCounter variable in the browser console log using a timeline event at the first keyframe.
We hope you have enjoyed these tips, and don't forget to download the working files and give these solutions a try!
Posted by San K, Google Web Designer Team
Common animation topics from the Google Web Designer forum
Wednesday, June 8, 2016
Animation is a key element in most creatives made in Google Web Designer and our community forum is filled with interesting and complex topics on the subject. In this blog post, we will go over some common animation scenarios that are brought up in our forum, and provide workarounds to avoid these issues in creatives.
Animation goes behind other elements unexpectedly
Users have reported that some elements go behind other elements in animation on a browser preview. Let’s walk through the issue and try some potential solutions to the problem. Download
my_test.zip
to to see the actual example file.
To begin, we see a background gray image in a layer, and another image that shows 10 with a white background sitting on the top. 3D rotation animation is applied to the “10” image.
When you preview on a browser, the animation appears as this.
Approach 1 - Adjusting Z translation value for the background.
First, we want to make sure the rotating image is always above the background image. In order to do so, let’s move the gray background further behind by giving it a negative Z translation value in Properties Panel. When you change the Z value for the gray image, it appears smaller than the original image dimensions. To offset this, you can adjust the size of the image by using the Transform tool.
The “10” image should now be rotating in 3D on top of the gray background.
Please preview to ensure that the new adjustment of the 3D z value works on all browsers.
Approach 2 - Adjusting Z translation value for the element animated in 3D.
You can also adjust z translation value for the animated element to make it stay on top of other elements. If approach 1 doesn’t fix the issue, or the background image can not be altered for some reason, please try this approach.
In this example, select each keyframe for the image “10”, then add 110px of Z translation for all the keyframes. This will make the image appear larger than the original dimensions. To fix that, try adjusting the 3D scaling for each keyframe to a value that’s less than one, like 0.93. You may have to test different values to find out what works best for your animation.
Animation overlaps
We have heard occasionally that the elements on animation overlap each other when previewed on Safari even though they are laid out correctly in timeline and previewed correctly on the stage, or browser. This can happen when animation delays and ‘Pause’ events are used in the timeline.
To explore, let’s create an animation that shows “Yea” in a text box first, then pauses it. When a page background, a white background is clicked, the timeline starts playing to show ”Nay” text as “Yea” goes away. Download
test-overlap.zip
to see to see the actual example file.
When it is previewed on Chrome browser, it shows as this:
If you preview this on Safari, when the animation is paused, Nay is already displayed and overlapping with Yea before any user interaction happens.
Let’s try to resolve this overlap.
Approach - Removing the animation delays
When the overlap happens, let’s remove the animation delays for all the animated layers. In order to do so, 1) Move the playhead all the way back to 0.1s., 2) Select all the layers that have animation delays, 3) Hit F6 function key to add keyframes, 4) Move the keyframes to 0 until they appear as half diamond shapes.
This should fix the overlapping preview issue on Safari. After adjusting the animations, please test on all the browsers to verify adjustment works on all.
Page animation control
Many users have asked how to play the animation through pages, then make it go back to the first page and pause the animation at a certain point. It would also be great if we could control how long the animation plays and then pauses.
Let’s say you wanted to set up three pages in your creative and play the animation in the following page order. You want each page to play the animation for 2sec, then go to the next page until all the pages are cycled through twice.
Page 1
Page 2
Page 3
Page 1
Page 2
Page 3
Page 1 (end)
Approach - setTimeout event as a custom action
We can achieve this by adding a ‘setTimeout’ event for the timeline. Let’s walk through this process by using this example file
pages.zip
. Please download it and open pages.html file.
The example file is a three page ad file that has timeline animation on each page. Once you’ve downloaded it, preview it in your browser to see how it works. Now let’s look at the details.
On page1 we’ve added an event marker at 2 second mark to go to next page, page1_1. We’ve also added a timeline label “end” where we would like to end the whole animation after it’s gone through the page changes two times.
If you look at the events panel, the event that changes the page is shown as page1>event-1>GotoPage>pagedeck(page1_1)
Let’s take a look at the second page (page1_1) which is similar. Again, there is animation in the timeline and a timeline event marker added at the 2 second mark. If you look at the events panel, this event is displayed as page1_1>event-2>GotoPage>pagedeck(page1_2). When the animation plays on this page, it simply executes the timeline event at 2 seconds and goes to the next page.
Finally, let’s open the last page (page1_2). This is where we’ve added a custom action to control how long the animation plays until the ‘gotoAndPause’ event gets fired.
If we look at the timeline on page3, we see an event marker at the 2 second mark, just like the other pages. In the Events panel, you can see that there are two events associated with event three. The first has a custom action.
Note: 6000ms = 6s
We’ve added “setTimeout” as a function name, and created the following code:
setTimeout(nextPage, 6000);
function nextPage() {
gwd.actions.timeline.gotoAndPause('page1', 'end');
}
When this event gets fired, it will trigger a 6 second timeout, and then the page will go to ‘end’ label on ‘page1’ and pause the animation there. This six seconds represents the time it will take for the animation to cycle through another time. If we wanted the animation to cycle through the 3 pages three times, we’d have to set the timer to 12 seconds.
If you look at the events panel, you can see that there’s a second event attatched to event-3: page1_2>event-3>GotoPage>pagedeck(page1). This simply makes the page go back to the first page. It is important to remember that ‘setTimeout’ event has to be added before ‘GotoPage’ event, because ‘setTimeout’ should be executed before the page goes to the next page.
Now we can see how it works. Each page plays the animation for 2 sec and goes to the next page.On page 3 (page1_2), ‘setTimeout’ event gets fired, and the animation then continues to play normally for 6 seconds, when it then goes to the label “end” on page1 and pauses the animation there. As a result, all the pages are cycled through twice and the animation ends at the label “end”.
Using custom actions like this example will give you more control over your creative and its interactive content. Custom actions are saved in your file and you can reuse them for other elements if you like.
Final Thoughts
As developers we understand that it can be frustrating to deal with small differences and rendering issues on different browsers, platforms and devices. The Google Web designer team is working hard to solve those from the authoring side as we continue to release new feature enhancements. Please be sure to download the zip files and try the techniques in this article. We would also like to hear from you, so please send us your feedback and issue reports in our community forum!
Posted by Mariko, Test Engineer
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
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
Google Web Designer Tips - Part 2
2017
December
April
March
2016
November
June
May
April
March
February
Feed
Follow @googlewdesigner
