tag:blogger.com,1999:blog-80541511518452152232024-03-18T12:28:35.342-07:00Google Web Designer BlogThe latest news and tips from the Google Web Designer teamewoodhttp://www.blogger.com/profile/12341551220176883769noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-8054151151845215223.post-15789913689231977902018-01-24T10:08:00.000-08:002020-10-05T14:53:43.440-07:00Google Web Designer Tips - Part 2<div class="separator" style="clear: both; text-align: center;">
</div>
This document compiles the top tips collected from years of helping users on the <a href="https://groups.google.com/forum/#!forum/gwdbeta" target="_blank">forum</a>, and from the <a href="https://webdesigner.googleblog.com/" target="_blank">Google Web Designer blog posts</a>.<br />
<br />
<h3>
1. Writing custom actions for events </h3>
<b>Issue</b>: when you need an action that is not available in the Events dialog.<br />
<b>Solution</b>: You can write custom actions in Google Web Designer easily using the following tips:<br />
<ul>
<li>Use the <a href="https://www.w3schools.com/jsref/met_win_settimeout.asp" target="_blank">setTimeout</a> method to call a function or evaluate an expression after a specified number of milliseconds (see example 1 below).</li>
<li>Add an event to perform an action, then copy that action in Code view to use in your custom action (see example 1 below). </li>
<li>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). </li>
<li>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). </li>
<li>Check our help page on <a href="https://support.google.com/webdesigner/answer/6279926" target="_blank">Component APIs</a> for properties, methods, events, and more examples. </li>
</ul>
<h2>
Example 1: go to a different page after 5 seconds (use setTimeout) </h2>
Note: this tip can be used to go to another page after 30 seconds to meet the <a href="https://support.google.com/adwordspolicy/answer/176108" target="_blank">AdWords requirements</a> that state animations cannot last longer than 30 seconds.<br />
<br />
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.<br />
<br />
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).<br />
<ol>
<li>Open the Events panel and click on the + button to add an event. </li>
<li>Select the page ID for the first page as the Target. </li>
<li>Select <b>Mouse > Click</b> as the Event. </li>
<li>Select <b>Google Ad > Go to page</b> as the Action. </li>
<li>Select <b>gwd-ad</b> as the Receiver. </li>
<li>Select the second page (page1_1 in this example) in Configuration. You may also set other settings such as the transition type, duration, etc. </li>
<li>Click <b>OK</b> to save. <div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/H_4uB6MQEchQppOgNj1cMO3o26GOkY1MAz3u-0QTxd1BKnktd4q-KB27hgF8DGfqKHK-w1nC-DkL_0KdZe3ngZU3f6x9BC7FfCo9tVwW5xeqC24otkles-V40R7BoLXai63qM4Pt" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="501" data-original-width="501" height="400" src="https://4.bp.blogspot.com/H_4uB6MQEchQppOgNj1cMO3o26GOkY1MAz3u-0QTxd1BKnktd4q-KB27hgF8DGfqKHK-w1nC-DkL_0KdZe3ngZU3f6x9BC7FfCo9tVwW5xeqC24otkles-V40R7BoLXai63qM4Pt" width="400" /></a></div>
</li>
<li> Switch to Code view and find: script type="text/javascript"
gwd-events="handlers". Copy the action code for going to the second
page.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/qBkDWa8WX2XE_uCe15dXC3ATbRHe3kEE3C5QYJwa7IhEJTDM8bC7hicgHOuTY-gCkeSgo244rGmE_Lrat9wEF1H_DRnhnD9L0zQV26vOB3jckqmtt1Sz5UUyGojHkPVEM26oDuH-" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="126" data-original-width="806" height="100" src="https://2.bp.blogspot.com/qBkDWa8WX2XE_uCe15dXC3ATbRHe3kEE3C5QYJwa7IhEJTDM8bC7hicgHOuTY-gCkeSgo244rGmE_Lrat9wEF1H_DRnhnD9L0zQV26vOB3jckqmtt1Sz5UUyGojHkPVEM26oDuH-" width="640" /></a></div>
<br />
<br />
Switch back to Design view. Now we will add the custom action to be triggered 5 seconds after the page is shown.<br />
<ol>
<li>On the first page with animation, click the + button in the Events panel to add an event. </li>
<li>Select the first page ID as the Target. </li>
<li>Select <b>Page > Ready to present the page</b> as the Event. </li>
<li>Select <b>Custom > Add custom action</b> as the Action. </li>
<li>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:
<span style="color: #6aa84f;">setTimeout(gotoPage, 5000);
function gotoPage() {
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1_1', 'none', 1000, 'linear', 'top');
} </span></li>
<li>Click <b>OK</b> to save. </li>
</ol>
Remove the first event that you added just to generate the action code to copy:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/urBziLbelFLSgtF2Cf6GSFWh2WI98zRWbFlvdGoqFbz1VbGYVMmQRTBqBVDN2Xrtowm_YsjP5jQEykaMp7uAEJnG-DTIyNGAMrZ9yo6v_VGDxXsNmkiiKgnSzgG4yyQ-8lJoNb5o" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="296" data-original-width="326" height="362" src="https://4.bp.blogspot.com/urBziLbelFLSgtF2Cf6GSFWh2WI98zRWbFlvdGoqFbz1VbGYVMmQRTBqBVDN2Xrtowm_YsjP5jQEykaMp7uAEJnG-DTIyNGAMrZ9yo6v_VGDxXsNmkiiKgnSzgG4yyQ-8lJoNb5o" width="400" /></a></div>
<br />
<br />
You now have the <a href="http://services.google.com/fh/files/blogs/set_timeout_example_2.zip" target="_blank">working file</a> that goes to the second page 5 seconds after the first page is shown.<br />
<br />
<h2>
Example 2: use timeline events to loop the ad through all pages twice. </h2>
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.<br />
<br />
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.<br />
<br />
<b>Add a timeline event to go to the next page at the end of the animation </b><br />
<ol>
<li>On the first page, at the last keyframe, right-click on the Events layer and select <b>Add event</b>.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/M8NEt9RSNop15UvW4-lsMA-KALztH2jGvqsQJK8Jr6lWWnCJOktKMCtoKaSHTCh9VUG9IbRtI4WqpJnyxbyDRCG1eLSgUUC87p_tbmkMCSN8Eu6b6Kx_MTmvymoT6SJ2igi6k7Ji" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="269" data-original-width="649" height="165" src="https://4.bp.blogspot.com/M8NEt9RSNop15UvW4-lsMA-KALztH2jGvqsQJK8Jr6lWWnCJOktKMCtoKaSHTCh9VUG9IbRtI4WqpJnyxbyDRCG1eLSgUUC87p_tbmkMCSN8Eu6b6Kx_MTmvymoT6SJ2igi6k7Ji" style="cursor: move;" width="400" /></a></div>
</li>
<li>Double-click on the event marker to open the Events dialog. <div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/5QiLQubRiK5urtusBbJDLFIOcG0kMED8FRqv1SOF9o5U89v1DKYsY2RqtJmBq_NTbiedU3SW1Fr2Sy_zKJfMaJVX1QDzRJUuA7h50wXDrHHN6Z4PuN1rfjg_88m3REPb9h3rNxiq" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="740" data-original-width="956" height="308" src="https://2.bp.blogspot.com/5QiLQubRiK5urtusBbJDLFIOcG0kMED8FRqv1SOF9o5U89v1DKYsY2RqtJmBq_NTbiedU3SW1Fr2Sy_zKJfMaJVX1QDzRJUuA7h50wXDrHHN6Z4PuN1rfjg_88m3REPb9h3rNxiq" width="400" /></a></div>
</li>
<li>Select <b>Google Ad > Go to page</b> as the Action.</li>
<li>Select <b>gwd-ad</b> as the Receiver. </li>
<li>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.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/Rb8Rv44TGBAKS4yQLzvhOSMRf7asahzypTJDfsoQvb8VIXu0paVcQesG42DpTAc3fFWuwsmgsv1ZNoY9mPnli5ZSexlrZh7CuKHKl89-5YgR2BbqhBDcO-bBotCQiliqN7P_R4hl" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="492" data-original-width="498" height="395" src="https://3.bp.blogspot.com/Rb8Rv44TGBAKS4yQLzvhOSMRf7asahzypTJDfsoQvb8VIXu0paVcQesG42DpTAc3fFWuwsmgsv1ZNoY9mPnli5ZSexlrZh7CuKHKl89-5YgR2BbqhBDcO-bBotCQiliqN7P_R4hl" width="400" /></a></div>
</li>
<li>Click <b>OK </b>to save. </li>
<li>You can edit this event by double-clicking on it in the Events panel. </li>
</ol>
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.<br />
<br />
The Events panel should show the following timeline events: <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/c_w35dMCCPmS0CkNCrcVMgiYhLQuSZreYAJhwz40PxNBnls5OI6WdJbdU7t5p0qSyftnG_XwcYFQDGQx16cEhIiORSHj2nNp8WJbABFZRl9xNQ2gNDt1zJaOT1k3K5_njn3_Qxao" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="293" data-original-width="322" height="290" src="https://2.bp.blogspot.com/c_w35dMCCPmS0CkNCrcVMgiYhLQuSZreYAJhwz40PxNBnls5OI6WdJbdU7t5p0qSyftnG_XwcYFQDGQx16cEhIiORSHj2nNp8WJbABFZRl9xNQ2gNDt1zJaOT1k3K5_njn3_Qxao" width="320" /></a></div>
<br />
<br />
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.<br />
<br />
<b>Use a counter to keep track of the loop</b><br />
<ol>
<li>Add a global variable as a counter by going to Code view and searching for window.gwd. </li>
<li>After the window.gwd line, add the following code to initialize the counter:
var counter = 1; </li>
<li>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'); </li>
<li>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 <b>Custom > Add custom action</b> in Action. </li>
<li>Type in a function name such as count. </li>
<li>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:
<span style="color: #6aa84f;">if (counter < 2) {
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top');
counter++;
}</span> <div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/Tr2zgRDQ7w5baez9QjfOlsBmnHBbMWwENCdpUGfV7NdaUHWdPr1mqPZpRpCu8HXs3AJrx6eaRtE4FwiWCthumMW9oyqZ1LlFtwo6QGB7EftDeyPjnB6eUynPFSomhkgBT6_ZUpA6" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="545" data-original-width="1600" height="217" src="https://3.bp.blogspot.com/Tr2zgRDQ7w5baez9QjfOlsBmnHBbMWwENCdpUGfV7NdaUHWdPr1mqPZpRpCu8HXs3AJrx6eaRtE4FwiWCthumMW9oyqZ1LlFtwo6QGB7EftDeyPjnB6eUynPFSomhkgBT6_ZUpA6" width="640" /></a></div>
</li>
<li>Click <b>OK</b> to save. </li>
<li>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.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/ZxlN6SdoYXUpVN8CiT1vfIhZdoN0yWGjP2H7XOmCFUluvDaNobvxPIdVcEa8XnfXupb1x7Kxcv-O8zLy_ZpRcLkrAQ3ZwsU-8SWZ_gsosuS_txwxGPDmkTv4pG5eyTGIrlS_HemI" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="296" data-original-width="326" height="289" src="https://2.bp.blogspot.com/ZxlN6SdoYXUpVN8CiT1vfIhZdoN0yWGjP2H7XOmCFUluvDaNobvxPIdVcEa8XnfXupb1x7Kxcv-O8zLy_ZpRcLkrAQ3ZwsU-8SWZ_gsosuS_txwxGPDmkTv4pG5eyTGIrlS_HemI" width="320" /></a></div>
</li>
</ol>
You now have the <a href="http://services.google.com/fh/files/blogs/loop_ad_twice.zip" target="_blank">working file</a> that loops twice through the 3 pages and stops at page 3.<br />
<br />
<h2>
Example 3: use custom events </h2>
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.<br />
<ol>
<li>Select the Element tool in the Toolbar. </li>
<li>Click on the custom element and type input in the Element field. </li>
<li>Draw the input element on the stage and give it an ID in the Properties panel.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/IZMSmPGIhPIvVLeW8D7rSc5r16rixI3JxP4rZXebFnBk1ajQhJj5wj6HeXajrw_Ko6QKaxitAWEgpZFREi8gKGQDB7eOxN2sW_FnEe560X_BubpdS5GvMw0c8ll6epeg2DETGzJP" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="1401" height="136" src="https://1.bp.blogspot.com/IZMSmPGIhPIvVLeW8D7rSc5r16rixI3JxP4rZXebFnBk1ajQhJj5wj6HeXajrw_Ko6QKaxitAWEgpZFREi8gKGQDB7eOxN2sW_FnEe560X_BubpdS5GvMw0c8ll6epeg2DETGzJP" width="640" /></a></div>
</li>
<li>Right-click on the input element on stage and select <b>Add event...</b> </li>
<li>Select <b>Mouse > click</b> as the Event. </li>
<li>Select <b>Custom > Add custom action</b> as the Action. </li>
<li>Type in a function name such as myInputChange. </li>
<li>In the code text area, add the custom action to log the value of the input field to the console when it's changed:
<span style="color: #6aa84f;">inputContent = document.getElementById('input').value;
console.log(inputContent)</span> <div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/aJGtUsaPUcWmRtOL2eGojhBuhI3Dsrp7oQUSkuXEUT_lPVQFFwxqhZM0sT3BkasTl4TwUiGDOUqjsXx4BSFEoBXmLbRxYGHTiADGsUt_9YEj7mrR8lNQEhz5jUGstf_7ISJmkHeX" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="525" data-original-width="643" height="325" src="https://4.bp.blogspot.com/aJGtUsaPUcWmRtOL2eGojhBuhI3Dsrp7oQUSkuXEUT_lPVQFFwxqhZM0sT3BkasTl4TwUiGDOUqjsXx4BSFEoBXmLbRxYGHTiADGsUt_9YEj7mrR8lNQEhz5jUGstf_7ISJmkHeX" width="400" /></a></div>
</li>
<li>Click <b>OK</b> to save. </li>
<li>Now we will replace the click event with a change event in Code view in 2 places:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/uaCMaZScfz5NjFj-t2pS-ZSzu9PvIlu2futkPMqnLoCg7tyDVqgQoUXMJ1WUaS2ZuE6lpaqjHISx5YmIxGpOTtcTEzLxZiX2fHJdSilBdFfRdQxiKeaQ6Hx26NaMDGJda0ZYU5yj" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="196" data-original-width="841" height="147" src="https://1.bp.blogspot.com/uaCMaZScfz5NjFj-t2pS-ZSzu9PvIlu2futkPMqnLoCg7tyDVqgQoUXMJ1WUaS2ZuE6lpaqjHISx5YmIxGpOTtcTEzLxZiX2fHJdSilBdFfRdQxiKeaQ6Hx26NaMDGJda0ZYU5yj" width="640" /></a></div>
</li>
<li>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. </li>
</ol>
You now have the <a href="http://services.google.com/fh/files/misc/custom_event.zip" target="_blank">working file</a> 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.<br />
<br />
<h2>
2. Adding global variables in Design view </h2>
This tip describes how to add a global variable in Design view without switching to Code view.<br />
<ol>
<li>Click on the plus button in the Events panel to add an event. </li>
<li>Select <b>document.body</b> as the Target. </li>
<li>Select <b>Google Ad > Ad initialized</b> as the Event. </li>
<li>Select <b>Custom > Add custom action</b> as the Action. </li>
<li>Give the function a name such as declareVars. </li>
<li>In the code section, declare and initialize your variables with the gwd. prefix such as gwd.myCounter = 0; </li>
<li>When the ad is initialized, the global variables can be used anywhere in your file.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/n8DdCJzKTKkzhBZn2RksLJZk5sldIwHNg9TEqIQ_IpwZeSeO93UvE3ifCs2CyrrJjYg4O1IylZdS3n7J81ewABti3gJTXD_CYBC6oAHEIrl-UVkksI78A92uzakRgF0OxFXJceWz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="484" data-original-width="500" height="309" src="https://3.bp.blogspot.com/n8DdCJzKTKkzhBZn2RksLJZk5sldIwHNg9TEqIQ_IpwZeSeO93UvE3ifCs2CyrrJjYg4O1IylZdS3n7J81ewABti3gJTXD_CYBC6oAHEIrl-UVkksI78A92uzakRgF0OxFXJceWz" width="320" /></a></div>
</li>
</ol>
Attached is the <a href="http://services.google.com/fh/files/blogs/global_variables.zip" target="_blank">example</a> that traces the gwd.myCounter variable in the browser console log using a timeline event at the first keyframe.<br />
<br />
We hope you have enjoyed these tips, and don't forget to download the working files and give these solutions a try!
<span class="byline-author"> </span><br />
<br />
<span class="byline-author">Posted by San K, Google Web Designer Team</span><br />
<ul>
</ul>
Anonymoushttp://www.blogger.com/profile/16177693702841543115noreply@blogger.com371tag:blogger.com,1999:blog-8054151151845215223.post-30133137629221392842017-12-19T12:56:00.001-08:002020-10-05T14:53:43.441-07:00Working with Dynamic Text in Google Web DesignerWhen working with dynamic text, you might encounter the problem where the text ends up longer than expected. If you have this issue, we have the solution! In this blog post you’ll learn to control your dynamic text while maintaining the integrity of your visual design.<br />
<br />
Consider the following example: starting with a new blank file, let’s make the background gray, add 2 white divs, and place text elements on top. You can see that the text content is bound to the product name in the Dynamic panel.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/EPVboxtE3ceTKhPWGKc8rQnl2OTK5clIMhkGSuttoyA-nIjBlXS1BGN8viGarggU56CKTIihhTKYf6mj6cDfofZEZOZJM_6ehkR64VwKtan2Acx2fSQXLq9DKfPw1eCe4EGQhQ1c" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="467" data-original-width="973" height="305" src="https://1.bp.blogspot.com/EPVboxtE3ceTKhPWGKc8rQnl2OTK5clIMhkGSuttoyA-nIjBlXS1BGN8viGarggU56CKTIihhTKYf6mj6cDfofZEZOZJM_6ehkR64VwKtan2Acx2fSQXLq9DKfPw1eCe4EGQhQ1c" width="640" /></a></div>
<br />
When previewed, it looks like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/gfYooudw9VOeF9DDy61rh_yO8tyzNlEMtZBCn3STS4PZwGQptBX8ROCZByv27lYXR7lWkhyR4xCs0SL6QaNgC8JbsXW6PmjRk47Ebxv_GS79Ml0Pebat1Fjzf8X6WixNobAlSbXb" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="252" data-original-width="302" src="https://1.bp.blogspot.com/gfYooudw9VOeF9DDy61rh_yO8tyzNlEMtZBCn3STS4PZwGQptBX8ROCZByv27lYXR7lWkhyR4xCs0SL6QaNgC8JbsXW6PmjRk47Ebxv_GS79Ml0Pebat1Fjzf8X6WixNobAlSbXb" /></a></div>
<br />
But when adding extensive sample text, you’ll see this issue:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/4OAZCav-YFsj3JXgM_CmjKmpsVYjPnY1estMu687j9y0gJSqci3MUsJjOb8biBRN6X5ld-auc46X1If6HATnr-KT6OxitFr4TU0k2HoJHwCQt8QGMDUfdD72VPN76nJ3LipVDorP" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="252" data-original-width="302" src="https://3.bp.blogspot.com/4OAZCav-YFsj3JXgM_CmjKmpsVYjPnY1estMu687j9y0gJSqci3MUsJjOb8biBRN6X5ld-auc46X1If6HATnr-KT6OxitFr4TU0k2HoJHwCQt8QGMDUfdD72VPN76nJ3LipVDorP" /></a></div>
<br />
<br />
There are actually two issues occurring here: the right item text has become smaller, and it's also overflowing its container.<br />
<br />
<br>
<h3>
Truncation & Minimum Font Size </h3>
To fix both issues, let's switch to Code view and search for the gwd-text-helper tag following the body tag. Copy the code below and paste it inside the tag before the closing bracket.<br />
<br />
<span style="background-color: yellow;">gwd-fitting-truncate="true" gwd-min-font-size-px="7"</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/splmmBPcQprqcwQ9iOZpIAdmLwtrpKUZYXWAK3w_v9QpIDWWTXXGF7PNG9124sFmdrFXBhmSp1UUbPW234p0WvDKh1eI5ykSCuQv4vZFZfGtbDCsTM-kixv7ALsIyIukeSaSH_fg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="66" data-original-width="811" height="51" src="https://1.bp.blogspot.com/splmmBPcQprqcwQ9iOZpIAdmLwtrpKUZYXWAK3w_v9QpIDWWTXXGF7PNG9124sFmdrFXBhmSp1UUbPW234p0WvDKh1eI5ykSCuQv4vZFZfGtbDCsTM-kixv7ALsIyIukeSaSH_fg" width="640" /></a></div>
<br />
<br />
Now when previewed, it will look like this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/yPXc76WUk_7b3AMZFDMOnh811wB-VqC3S-YkYo2cbLEOBCIEK-b1h9tkqNvPBAlFXHKNei6SaioK5H6UO_CAduz3YKeBYaMM2r0h86Dn9Gmguao0dJ2Y4hyazbRlYEOkT0sY4rsu" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="252" data-original-width="302" src="https://3.bp.blogspot.com/yPXc76WUk_7b3AMZFDMOnh811wB-VqC3S-YkYo2cbLEOBCIEK-b1h9tkqNvPBAlFXHKNei6SaioK5H6UO_CAduz3YKeBYaMM2r0h86Dn9Gmguao0dJ2Y4hyazbRlYEOkT0sY4rsu" /></a></div>
<br />
<br />
<br />
Much better. The text now stays within its bounding box due to truncation—but it might be a little small. That’s easy to adjust by editing the <b>gwd-min-font-size-px</b> attribute added above. Currently it's set to 7, but adjusting it to 12 may look better, and there are 2 ways to do that—either in the <b>gwd-text-helper</b> tag to specify a global setting for all text in your document, or to control each text element separately (common for headlines or titles), add the tag directly to the paragraph element like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/4CwWPhYti235e4YzwHKSP09elq6O9N-fw0BgqUwcZYVQ_bfDIL-d4Zd4eAi5iTEArW0iX55eGNKO8xa45p6wvuHpY6ATASIZk8g8HsiEQNWOdDxHDGUiA5sPF5CiPH46ZjHyXMgu" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="105" data-original-width="302" src="https://2.bp.blogspot.com/4CwWPhYti235e4YzwHKSP09elq6O9N-fw0BgqUwcZYVQ_bfDIL-d4Zd4eAi5iTEArW0iX55eGNKO8xa45p6wvuHpY6ATASIZk8g8HsiEQNWOdDxHDGUiA5sPF5CiPH46ZjHyXMgu" /></a></div>
<br />
You may also prevent text resizing entirely by using a <b>gwd-min-font-size-px</b> value equal to your initial size (16px in this case).<br />
<br />
These controls should solve most dynamic text issues, but there is one case where you may want a little more control—the case of vertical centering. Let's duplicate the two text boxes and bind their content to products 2 & 3 (I’ve also adjusted the amount of text to demonstrate the issue):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/qq-DWWVrtVTGenRgIRU6McG523d1VKyeBHFeoCr6PX9hRA7mVu5WsDOJLQovJYOV-HDYOkfNrZ43_V4CZ2jwB2xcU1PSHGpNZwA7KhPFBMvhSOhmGVRWksOzXMl4uLT93Jz_zfVV" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="252" data-original-width="302" src="https://4.bp.blogspot.com/qq-DWWVrtVTGenRgIRU6McG523d1VKyeBHFeoCr6PX9hRA7mVu5WsDOJLQovJYOV-HDYOkfNrZ43_V4CZ2jwB2xcU1PSHGpNZwA7KhPFBMvhSOhmGVRWksOzXMl4uLT93Jz_zfVV" /></a></div>
<br />
<br />
<h3>
Vertically Centering Dynamic Text </h3>
You may also want to vertically center text fields, so let's go ahead and do that for products 2 & 3. First wrap each text field in a new div by right-clicking the paragraph element and selecting “wrap”. We’ll also name the new div with the -ctn suffix, and use -txt for text elements to help keep things organized.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/desyqPoeoanB3q1xTOl6jQISWJjb5yT49S1S-MFJ-zV91dCAMvyvSvZmJZieU-5P3Bu8QdkJxZbqN_L3acN_-U736zHm199WiywSC2tXj0EeG0p4HE6616BBvpFiL58YPOHMqmk5" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="466" data-original-width="374" height="320" src="https://4.bp.blogspot.com/desyqPoeoanB3q1xTOl6jQISWJjb5yT49S1S-MFJ-zV91dCAMvyvSvZmJZieU-5P3Bu8QdkJxZbqN_L3acN_-U736zHm199WiywSC2tXj0EeG0p4HE6616BBvpFiL58YPOHMqmk5" width="256" /></a></div>
<br />
<br />
Double-click the new -ctn div to edit the paragraph element and apply these settings in the CSS panel:<br />
<br />
<div style="text-align: left;">
<b>left: 0</b>; </div>
<div style="text-align: left;">
<b>width: 100%</b>; </div>
<div style="text-align: left;">
<b>top</b>: should be de-selected </div>
<div style="text-align: left;">
Change <b>height </b>to <b>max-height: 100% </b></div>
Next open Code View and add the class <span style="background-color: yellow;">v-center</span> to the paragraph tag.<br />
<br />
Repeat the above steps for both new text fields.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/h2EsfcdH3uqBODNW6jvNZ1udQ4Pr1l8ouN4HD9VLdXvyFzIKWgqJzsUtPPApcG-So_NlvsxC3D6ulqXrSzH6lmSu0K6FJWkoQ6NqdbFNEp23QzX3D4P4nw0ndUTVC1_CNkRv0jUa" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="65" data-original-width="810" height="50" src="https://2.bp.blogspot.com/h2EsfcdH3uqBODNW6jvNZ1udQ4Pr1l8ouN4HD9VLdXvyFzIKWgqJzsUtPPApcG-So_NlvsxC3D6ulqXrSzH6lmSu0K6FJWkoQ6NqdbFNEp23QzX3D4P4nw0ndUTVC1_CNkRv0jUa" width="640" /></a></div>
<br />
<br />
Finally, copy the following code and paste it at the end of the CSS styles in the "head" element of your document:<br />
<br />
<span style="background-color: yellow;">p { </span><br />
<span style="background-color: yellow;">margin: 0px; </span><br />
<span style="background-color: yellow;">} </span><br />
<br />
<span style="background-color: yellow;">.v-center { </span><br />
<span style="background-color: yellow;">position: relative; </span><br />
<span style="background-color: yellow;">top: 49%; </span><br />
<span style="background-color: yellow;">transform: translateY(-50%); </span><br />
<span style="background-color: yellow;">} </span><br />
<br />
<span style="background-color: yellow;">.v-bottom { </span><br />
<span style="background-color: yellow;">position: relative; </span><br />
<span style="background-color: yellow;">top: 100%; </span><br />
<span style="background-color: yellow;">transform: translateY(-100%); </span><br />
<span style="background-color: yellow;">} </span><br />
<br />
Now when previewed, your text fields should be vertically centered as shown below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/xCpTSV0pejvZCgkyfRRQz_j7Jdh_oxJ6z5sHhmlSRfKp146IjwDs4v4vYxIykDnNw5GmmjmxjBYvjVh8M9-1Bh8s4rpfAgkVgnDEONJSzYVSALKBBFXv8mKW66-L5x0x0TfGlCmb" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="252" data-original-width="302" src="https://4.bp.blogspot.com/xCpTSV0pejvZCgkyfRRQz_j7Jdh_oxJ6z5sHhmlSRfKp146IjwDs4v4vYxIykDnNw5GmmjmxjBYvjVh8M9-1Bh8s4rpfAgkVgnDEONJSzYVSALKBBFXv8mKW66-L5x0x0TfGlCmb" /></a></div>
<br />
Note the v-bottom class above can be used in cases where the text needs to be aligned at the bottom of its container.<br />
<br />
With these three controls in hand (truncation, minimum font size, and vertical positioning), you should be able to solve the most common dynamic text formatting issues. Give these tips a try and let us know how they work for you in the comments!<br />
<br />
<span class="byline-author">Posted by Kent M, Google Web Designer</span>Anonymoushttp://www.blogger.com/profile/16177693702841543115noreply@blogger.com213tag:blogger.com,1999:blog-8054151151845215223.post-84303339011628575092017-12-15T11:27:00.001-08:002020-10-05T14:53:43.446-07:00Google Web Designer Tips - Part 1This document compiles the top tips collected from years of helping users on the <a href="https://groups.google.com/forum/#!forum/gwdbeta" target="_blank">forum</a>, and from the <a href="https://webdesigner.googleblog.com/" target="_blank">Google Web Designer blog posts</a>.<br />
<br />
<br />
<h3>
1. Use CSS transform for animation </h3>
<b>Issue</b>: choppy animation when animating Top/Left/Width/Height.<br />
<b>Solution</b>: use CSS transform (<b>3D translation </b>and <b>scale</b>) for animation instead of Top/Left/Width/Height.<br />
<br />
Google Web Designer defaults to CSS transform when creating CSS-based
animation because the CSS transform property provides a higher frame
rate and smoother animation. What this means is that when you use the
selection tool to move an element or the transform tool to resize it in
an animation, it will default to CSS transform (3D translation and scale
section in the Properties panel) (see our <a href="https://support.google.com/webdesigner/answer/6319682" target="_blank">help</a>).
However, many users change the Top/Left/Width/Height fields in the
Properties panel when animating elements and this will cause choppy
animation.<br />
<br />
To avoid choppy animation, try using 3D translate X and Y for position,
and 3D scale for size in the Properties panel when you animate elements.
If you use the selection tool (or arrow tool) to move an element or the
transform tool to resize an element, that should take care of it for
you by default.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/v3E_O4aQ9mDifrEmruvR5EiWPifM-68Xjek5g7HCFlEKPPGqNNa-BWpZrb115ZemY9Gi0n-3evUKN2FFroe8_w6pFWdl--XFumYJJdGgaWFxBya0p6almPdTXBrkMOxurAhtPuLh" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="598" data-original-width="657" height="580" src="https://1.bp.blogspot.com/v3E_O4aQ9mDifrEmruvR5EiWPifM-68Xjek5g7HCFlEKPPGqNNa-BWpZrb115ZemY9Gi0n-3evUKN2FFroe8_w6pFWdl--XFumYJJdGgaWFxBya0p6almPdTXBrkMOxurAhtPuLh" width="640" /></a></div>
Note: if the animation of an image is choppy on IE when using CSS transform, wrap the image with animation in a div by right clicking on the image and selecting Wrap, then in the Properties panel of the parent div, set Selection 3D Rotation Z to 0.01 to workaround the issue.<br />
<br />
<br />
<h3>
2. Pixelation when using 3D scale for animation </h3>
<b>Issue</b>: when using 3D scale for animation, the image becomes pixelated when scaled up.<br />
<b>Solution</b>: start with a large image that is the same size as the scaled up image. Add your starting and ending keyframes. At the starting keyframe, scale down the image using the Properties panel's 3D scale options. This creates an animation where the image grows in size without being pixelated.<br />
<br />
<br />
<h3>
3. Groups for reusable elements </h3>
Grouping objects creates a reusable element that can be placed in documents as "instances", which are references to the group's elements. Any change that is made to the group is reflected in all the instances of that group (see our <a href="https://support.google.com/webdesigner/answer/6084742" target="_blank">help</a>).<br />
<br />
One example where groups are useful is a CTA button with an exit event that exists on different pages in the creative.
Another benefit is that events for the elements in the group are retained in all instances of the group as long as the group instance has an ID assigned to it.<br />
To create a group, right-click on the element on stage and select <b>Create Group...</b><br />
You can then view the group in the Library panel and drag it on to the stage to create additional instances.<br />
<br />
Groups are also used in the Swipeable and Carousel Galleries in dynamic creatives to display a custom layout for each product item in a collection. For example, you can create a group to display a product's image, name, description, price, etc., and this layout can be repeated for each product in the feed. This workflow will be described in a future dynamic tips blog post.<br />
<br />
<br />
<h3>
4. Make an element appear/disappear at a specific time during the animation </h3>
<b>Issue</b>: how to create an animation with an element that needs to be hidden/shown at certain keyframes.<br />
<b>Solution</b>: use <b>opacity</b> and <b>step-end/step-start</b> easing. You can also watch the YouTube video on this topic <a href="https://youtu.be/rvjRTfVRhfo" target="_blank">here</a>.<br />
<br />
In this example, a div is hidden until the 3s mark. Then it is animated until 5s and disappears at 5s.
To do this, let’s switch to the timeline’s Advanced mode then select the first keyframe. In the Properties panel of the element, set the opacity to 0 to hide the element.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/H67fZosvioUPKEUHRZmBct6y8ovzZJ8av939ho7-7LFJ_-j4yDsFTadryP1q1snpnyRW9DMHSi_CMbURA_EBRtfJjPQmZ-FnB8Jhu5m1cr2G9NH8zH37HeV9XsvBd2YQmQFhfLUE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="551" data-original-width="1011" height="347" src="https://1.bp.blogspot.com/H67fZosvioUPKEUHRZmBct6y8ovzZJ8av939ho7-7LFJ_-j4yDsFTadryP1q1snpnyRW9DMHSi_CMbURA_EBRtfJjPQmZ-FnB8Jhu5m1cr2G9NH8zH37HeV9XsvBd2YQmQFhfLUE" width="640" /></a></div>
<br />
<br />
<br />
Add the second keyframe where you want to show the element, at 3s in this example, and set the opacity of the element to 1.<br />
<br />
At this point, if you preview, you will see that the element animates from 0 opacity to 1 because the easing is set to linear by default.<br />
<br />
Right-click on the span between the keyframes and change the easing from linear to <b>step-end</b>.
At this point, the element will not show until the second keyframe.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/y-xLLE44FaiCDOgQQKXtNjHHTgQMRg7dbWfRwz2f2bieS0mgiUSCiYk9Y2arCJwu5ueQTHLTd7ddqbLA9yfJfblXh58yFVQu-Ivkpt-DdLDyHjDfNk3zHp3LJdqhxsBV242qOtjB" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="561" data-original-width="1011" height="353" src="https://4.bp.blogspot.com/y-xLLE44FaiCDOgQQKXtNjHHTgQMRg7dbWfRwz2f2bieS0mgiUSCiYk9Y2arCJwu5ueQTHLTd7ddqbLA9yfJfblXh58yFVQu-Ivkpt-DdLDyHjDfNk3zHp3LJdqhxsBV242qOtjB" width="640" /></a></div>
<br />
Add a third keyframe, at 5s in this example, and animate your element (in this example, it travels across the stage).<br />
<br />
To hide the element again, add another keyframe at 5.5s, and set opacity to 0 and easing to step-start.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/8v18OXzvvFiNgoPZel-Q81XTw1tTXnPcfKJ4pD2xfp8pmyDv0ebg7otCG9ayOEVVbNnpNwUZlaljDpjH2P1Yup7T3e1m7XtDOyhJZk1nbdddkRXkwKcs6u8tlkVuxkQ82soxF55x" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="561" data-original-width="1016" height="352" src="https://3.bp.blogspot.com/8v18OXzvvFiNgoPZel-Q81XTw1tTXnPcfKJ4pD2xfp8pmyDv0ebg7otCG9ayOEVVbNnpNwUZlaljDpjH2P1Yup7T3e1m7XtDOyhJZk1nbdddkRXkwKcs6u8tlkVuxkQ82soxF55x" width="640" /></a></div>
<br />
Then drag the keyframe so it’s right next to the keyframe at 5s.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/tQEMjRl-7HpLXWkHef4BaMVz4xjIOIx08BV4Uij2INLeYpTXRCJZ0nGoVkmxn8jvaty4-K7wokkmUAEHEPdDDRSIFd4qDXaTEafeozli1g8hXrNDPv90ck9xs6tZK6jLYAmhYcNR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="554" data-original-width="1007" height="352" src="https://4.bp.blogspot.com/tQEMjRl-7HpLXWkHef4BaMVz4xjIOIx08BV4Uij2INLeYpTXRCJZ0nGoVkmxn8jvaty4-K7wokkmUAEHEPdDDRSIFd4qDXaTEafeozli1g8hXrNDPv90ck9xs6tZK6jLYAmhYcNR" width="640" /></a></div>
<br />
Now you have accomplished turning an element on or off at a certain keyframe!
You can view the <a href="http://services.google.com/fh/files/blogs/on_off.zip" target="_blank">source file</a> or check out our <a href="https://webdesigner.googleblog.com/2016/04/popular-questions-from-google-web.html" target="_blank">blog post</a> to use other ways to achieve the same effect.<br />
<br />
<h3>
<br />
5. How to replace an image without losing the events or animation </h3>
<b>Issue</b>: some users build a new creative using an existing creative and want to easily change an image without losing events or animation.<br />
<b>Solution</b>: use <b>Swap image</b> in the context menu (see our <a href="https://support.google.com/webdesigner/answer/6184292" target="_blank">help</a>).<br />
Select the image on the stage to be changed, right-click on it, and select <b>Swap image...</b><br />
In the Swap image dialog, select the new image (if it’s already in the Library), or add a new image and select it.
Click <b>OK</b> to save.<br />
<br />
<br />
<h3>
6. How to update an element’s size and position without affecting animation</h3>
<b>Issue</b>: when building multi-size creatives, many users may start with one size, then build additional sizes using the first completed creative instead of using responsive design. In this workflow, it is necessary to update the element’s size and position in the new creative while keeping the animation the same.<br />
<b>Solution</b>: use CSS transform for animation (solution #1 in this post) , then update the Top, Left, Width, and Height properties in the <b>first keyframe in Advanced mode</b> to update the element’s position and size without affecting the animation.<br />
<br />
When using animation, the best practice is to animate using CSS transform to avoid choppy animation. In addition to the performance benefit, you can also quickly update the element’s size and/or position without having to update all keyframes.<br />
<br />
For example, let’s say you have a 100x100px element at the first keyframe like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/Rk8Ti09zyFqHyjARgkDCd1wYKjuxK6syIohKE4rsZjsKwNd_lS1HsP01w4i61xuHG692_--VQIIaxy7Dt5dU7v7ZTIXskQe9giDBQIPWIaRkT2QEAQ5PV4JRue6kbuWrqHsZHHxY" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="571" data-original-width="1232" height="296" src="https://1.bp.blogspot.com/Rk8Ti09zyFqHyjARgkDCd1wYKjuxK6syIohKE4rsZjsKwNd_lS1HsP01w4i61xuHG692_--VQIIaxy7Dt5dU7v7ZTIXskQe9giDBQIPWIaRkT2QEAQ5PV4JRue6kbuWrqHsZHHxY" width="640" /></a></div>
<br />
<br />
In the second keyframe, it moves across the screen and shrinks to half of its size like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/jqBU-WDSMfB02DUNCdgy9uPp0FC6cG18_QVitHJM2IWLK-9qJpBNE9XniLo6gstJU9eHO273u17yT18kDxCpT5aSD4bNHWonDbv3uCdBW_xoHAAkb5GD4bEgUr0If_AndUGTs7Y5" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="511" data-original-width="1206" height="270" src="https://2.bp.blogspot.com/jqBU-WDSMfB02DUNCdgy9uPp0FC6cG18_QVitHJM2IWLK-9qJpBNE9XniLo6gstJU9eHO273u17yT18kDxCpT5aSD4bNHWonDbv3uCdBW_xoHAAkb5GD4bEgUr0If_AndUGTs7Y5" width="640" /></a></div>
<br />
<br />
Now let’s say you’re building a bigger creative and the element has to be 200x200px. You can simply select the first keyframe and update the Width and Height properties. Since Width and Height are not used to animate the element, what you change in the first keyframe will propagate across all subsequent keyframes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/VRPqLAXanAOSXPMNDRdAwBrLLfrg8k82HsDsMBdI0vnYgJznI01IH11Sfx_TH9V4qeE_4c8RcqtW5iA0RdkZwoMnvjxcpfp3CJy7B_owMPNVqTnC_cZ-OPQf-7rW8qw3URLuYwNc" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="516" data-original-width="1226" height="268" src="https://4.bp.blogspot.com/VRPqLAXanAOSXPMNDRdAwBrLLfrg8k82HsDsMBdI0vnYgJznI01IH11Sfx_TH9V4qeE_4c8RcqtW5iA0RdkZwoMnvjxcpfp3CJy7B_owMPNVqTnC_cZ-OPQf-7rW8qw3URLuYwNc" width="640" /></a></div>
<br />
The element will now be 200x200px and travel across the screen by 200px with its size reduced in half:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/GWj9yszeFbY_ZYiq4UzqrnRmd3ij4xfi-v4DjiKn4M5gzIT6z_TIXGU1dbMSMlLzplMZMmCPmiZmAR4sh9Emjz1YasSS7-2qLj9mtQ_5jEGUHNn1sUs0KkkUnjsmTqCWNT3nSvOE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="541" data-original-width="1221" height="282" src="https://3.bp.blogspot.com/GWj9yszeFbY_ZYiq4UzqrnRmd3ij4xfi-v4DjiKn4M5gzIT6z_TIXGU1dbMSMlLzplMZMmCPmiZmAR4sh9Emjz1YasSS7-2qLj9mtQ_5jEGUHNn1sUs0KkkUnjsmTqCWNT3nSvOE" width="640" /></a></div>
<br />
<br />
<br />
<h3>
7. How to loop the Swipeable Gallery infinitely </h3>
<b>Issue</b>: when autoplay is set, the Swipeable Gallery only autoplays until the last frame and then returns to the first frame.<br />
<b>Solution</b>: <b>autoplay</b> the Swipeable Gallery infinitely by rotating once when the autoplay ends, and setting the rotation time and autoplay duration for smooth looping.<br />
<br />
In this example, there are 3 images, autoplay is set in the Properties panel, and autoplay rotation is set to 3000 in the Advanced properties for the Swipeable Gallery. This means that the gallery autoplays from the first to the last frame in 3 seconds.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/cb-MUAdxvnvkp0DJSS1hU3tNRp4SFbMjH-OySQ3APNvDVZXM4k26J3RBCRAVmfKERD8lPx1yZY_F2p9cc62pEc_c4iCSyHoj3QGQDghqUV7P98FxBHBJ8aQGEOiDvyHLLgpGex38" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="489" data-original-width="359" height="400" src="https://3.bp.blogspot.com/cb-MUAdxvnvkp0DJSS1hU3tNRp4SFbMjH-OySQ3APNvDVZXM4k26J3RBCRAVmfKERD8lPx1yZY_F2p9cc62pEc_c4iCSyHoj3QGQDghqUV7P98FxBHBJ8aQGEOiDvyHLLgpGex38" width="292" /></a></div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/hHD3BLxBIERJCeXEPhpEOg9eRyPzhJrBU4-FykorTitfeJZ4T6bxLtIUlqUWODGht25XbLmKPXixL6-KrWrXPvqKLHB0L50x5pIsmWCaOEu3iCHz3nH2gTgZ4-rVnoue7HYNmnqD" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="381" data-original-width="396" height="383" src="https://2.bp.blogspot.com/hHD3BLxBIERJCeXEPhpEOg9eRyPzhJrBU4-FykorTitfeJZ4T6bxLtIUlqUWODGht25XbLmKPXixL6-KrWrXPvqKLHB0L50x5pIsmWCaOEu3iCHz3nH2gTgZ4-rVnoue7HYNmnqD" width="400" /></a></div>
<br />
<br />
<br />
When you preview, you will see that the Swipeable Gallery autoplays once, then goes back to the first frame and stops. To autoplay it infinitely, add an autoplay ended event to rotate once forward.<br />
<ol>
<li>Right-click on the Swipeable Gallery and select <b>Add event</b>. </li>
<li>Select Swipeable Gallery > <b>Autoplay ended</b> as the Event. </li>
<li>Select Swipeable Gallery > <b>Rotate once</b> as Action. </li>
<li>Select the Swipeable Gallery ID as the Receiver. </li>
<li>In Configuration, set the Rotation time to be the same as the autoplay duration. In this example, this is 3000 with forward direction. </li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/5P0PwqkG-sMUf72U5wQ4Y-60cChp1HoBv30WpU6E_YbDPbbyG7Q1sR007JoK3nqvxypEkxJeIXn9v_T6-7iT0gNLiJztmVR_47RYvMOcjGTHBm_z4U96LG20riSCYqDjrQKLu_cP" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="502" height="400" src="https://1.bp.blogspot.com/5P0PwqkG-sMUf72U5wQ4Y-60cChp1HoBv30WpU6E_YbDPbbyG7Q1sR007JoK3nqvxypEkxJeIXn9v_T6-7iT0gNLiJztmVR_47RYvMOcjGTHBm_z4U96LG20riSCYqDjrQKLu_cP" width="395" /></a></div>
<br />
<br />
Click OK to save.<br />
You now have a <a href="http://services.google.com/fh/files/blogs/gallery_loop.zip" target="_blank">working file</a> that loops the Swipeable Gallery infinitely.<br />
<br />
<br />
We hope you have enjoyed these tips, and don't forget to download the working files and give these solutions a try!
<br />
<span class="byline-author">Posted by San K, Google Web Designer Team</span>
Anonymoushttp://www.blogger.com/profile/16177693702841543115noreply@blogger.com477tag:blogger.com,1999:blog-8054151151845215223.post-75666292358336749362017-04-03T13:11:00.001-07:002020-10-05T14:53:43.445-07:00Creating custom exits for dynamic remarketing creatives<a href="https://support.google.com/bidmanager/answer/6023768" target="_blank">Dynamic remarketing</a> is a great way to improve your advertising performance, especially if your goal is to sell more products. However, working with a dynamic creative can be tricky. Some of the values required by your creative, like call to action (CTA) text, Product Names, Exit URLs, etc., are not known ahead of time and come from a product "feed". Google Web Designer's Dynamic properties dialog can help you bind such values to elements in your creative, but what if you want to post-process these values before they are bound to your creative?<br />
<br />
In this article, we will tackle one such case - adding a custom exit function to your dynamic remarketing creative, which lets you post-process the exit URL before exiting to it.<br />
<br />
<div dir="ltr" style="margin-left: 0pt;">
<table style="border-collapse: collapse; border: none; width: 468pt;"><colgroup><col width="*"></col></colgroup><tbody>
<tr style="height: 0pt;"><td style="background-color: #d9d9d9; border-bottom: solid #000000 1pt; border-left: solid #000000 1pt; border-right: solid #000000 1pt; border-top: solid #000000 1pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: red; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">⚠</span><span style="background-color: #d9d9d9; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> When working with a URL, take special care to generate a valid URL and keep in mind that some browsers have a maximum supported URL length.</span></div>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
Let's say you have created the six-product creative below for dynamic remarketing in DoubleClick Bid Manager.<br />
<div style="text-align: center;">
<span id="docs-internal-guid-7c91acb3-34ca-69ef-2db6-b7d9372bf03e"><span style="background-color: white; color: #222222; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><img alt="[UNSET].png" height="325" src="https://lh3.googleusercontent.com/kdJcflHQcacxIpw9rg3qnED9G_fABXltRevKfrA1fyEUwo1m6ilUCgsEMcJYGpKUWW_7BcH5CkO7JJh9cm1cM0lHNwTuVizaApYti8lYAbkFTCHcf8qfNCvBXgGet81hVr14501P" style="border: none; transform: rotate(0rad);" width="464" /></span></span></div>
<br />
<br />
<br />
Let’s begin by adding a custom exit for product 0:<br />
<br />
Step 1: If applicable, remove the dynamic bindings for the "Exit Override URL" within the Tap Area component of product 0.<br />
<br />
<div style="text-align: center;">
<img alt="[UNSET].png" height="333" src="https://lh4.googleusercontent.com/ez4xNAIYjJAaaHjBT_89sWUw8gQSP73acYR1qPPrMk4vdB7KOxsuhIokVwD42UkYbSp3anOizTOQOrPqc-XyEBD2ziJca7pKzxq04q0s-WGRRVlWoXMbLT9sqXQsRV_uKQNLHfMc" style="border: none; color: #222222; font-family: Arial; font-size: 12pt; transform: rotate(0rad); white-space: pre-wrap;" width="474" /></div>
<br />
<span id="docs-internal-guid-7c91acb3-34cd-3462-7c3a-2492093709e1"><br /></span>
<br />
<div dir="ltr" style="margin-left: 0pt;">
<table style="border-collapse: collapse; border: none; width: 468pt;"><colgroup><col width="*"></col></colgroup><tbody>
<tr style="height: 0pt;"><td style="background-color: #d9d9d9; border-bottom: solid #000000 1pt; border-left: solid #000000 1pt; border-right: solid #000000 1pt; border-top: solid #000000 1pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: transparent; color: red; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">⚠</span><span style="background-color: #d9d9d9; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Without this change, clicking on your creative can lead to more than one exit.</span></div>
</td></tr>
</tbody></table>
</div>
<br />
<br />
Step 2: Select the tap area for product 0 (the first product).<br />
<br />
Step 3: Add a new event for the tap area by clicking the "+" button on the Events panel.<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-7c91acb3-34cd-c4e1-e86d-82063f41a335"><span style="background-color: white; color: #222222; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><img alt="[UNSET].png" height="322" src="https://lh5.googleusercontent.com/vBRPvxLYdvAnznc6KsPfDQEXweQk3T1nimZ-DbHNwBlBjI5VUsCZtAYloHzZ4lXFx_7zvOxjy_vtw9Q4sP7TfQa8j6qNbHjvpTpWsCUSO1N4bs6PjKzbylygMwBRJ0xW1b-byXWA" style="border: none; transform: rotate(0rad);" width="521" /></span></span></div>
<br />
Step 4: Select Tap Area > Touch/Click as the event.<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-7c91acb3-34ce-0e2c-98f3-b1fd63791a22"><span style="background-color: white; color: #222222; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><img alt="[UNSET].png" height="333" src="https://lh4.googleusercontent.com/rSasP1ceaQMjd8m_qa0y5ULK-DGmY0G7nUP79kyf8ajfS7pVbCHPqSrkxo2jscVeUAsKe5k2Rjp82wRijLwK6V2-Cz5flJyeB8OblejG42lrnvYDjMHSHK5iMWW3H3UBgevrlrXj" style="border: none; transform: rotate(0rad);" width="333" /></span></span></div>
<br />
Step 5: For the action, select Custom > Add custom action.<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-7c91acb3-34ce-87aa-0f97-aa1963ed0e75"><span style="background-color: white; color: #222222; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><img alt="[UNSET].png" height="339" src="https://lh4.googleusercontent.com/cptDTyW7LkF-6SAUMZ397C4tvN8FunDJbDcLvOMIPADq-6ybTW5i2RMU7Abx5Y1Dzn_r-DbFulMyGv--NcLsdRyWuSHzGQnelYltBlHs5K3wJCfSYoOflwTb3KVjL92HWaMKIjdq" style="border: none; transform: rotate(0rad);" width="339" /></span></span></div>
<br />
<br />
Step 6: Add a function name (e.g., mycustomexit0) then paste the below code snippet into the text area. Replace the comment with the logic for your custom post-processing, then click OK.
<br />
<br />
<div dir="ltr" style="margin-left: 0pt;">
<table style="border-collapse: collapse; border: none; width: 468pt;"><colgroup><col width="*"></col></colgroup><tbody>
<tr style="height: 0pt;"><td style="background-color: #d9d9d9; border-bottom: solid #000000 1pt; border-left: solid #000000 1pt; border-right: solid #000000 1pt; border-top: solid #000000 1pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: #d9d9d9; color: #222222; font-family: "courier new"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var exitURL = dynamicContent.Product_0_url</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: #d9d9d9; color: #222222; font-family: "courier new"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// Custom post-processing happens here</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: #d9d9d9; color: #222222; font-family: "courier new"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Enabler.dynamicExit("exit", exitURL, "0")</span></div>
</td></tr>
</tbody></table>
</div>
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-7c91acb3-34cf-3982-b627-a5e972d354d0"><span style="background-color: white; color: #222222; font-family: "arial"; font-size: 12pt; vertical-align: baseline; white-space: pre-wrap;"><img alt="[UNSET].png" height="431" src="https://lh3.googleusercontent.com/fgL2oOjdk6SJbxcmho4sEjagCq_J2VIxVNet6HTzyArPLiltoSwJb0Bu1MAKXiIw6uJ_c7IFCM4buLyZhbwpEXOgndVFsSwCNnRBEuUCK7hLUcUWYvHyFTwjRsPVYkGdIPQsfbPc" style="border: none; transform: rotate(0rad);" width="428" /></span></span></div>
<br />
<span id="docs-internal-guid-7c91acb3-34cf-86f7-b4d1-f11823bdcee7"><br /></span>
<br />
<div dir="ltr" style="margin-left: 0pt;">
<table style="border-collapse: collapse; border: none; width: 468pt;"><colgroup><col width="*"></col></colgroup><tbody>
<tr style="height: 0pt;"><td style="background-color: #d9d9d9; border-bottom: solid #000000 1pt; border-left: solid #000000 1pt; border-right: solid #000000 1pt; border-top: solid #000000 1pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: #d9d9d9; color: lime; font-family: "arial"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">💡 </span><span style="background-color: #d9d9d9; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Use Enabler.dynamicExit() instead of the traditional Enabler.exitOverride() for dynamic creative exits and pass in the product index as the third parameter. This helps Google's optimization engine understand which product was clicked on, and allows us to further improve performance of dynamic creatives.</span></div>
</td></tr>
</tbody></table>
</div>
<br />
<br />
Repeat the above steps for the other five products in the creative, changing the index accordingly, e.g., for the second product, use index 1, and so on.<br />
<br />
To test your changes, follow the steps in the Bid Manager dynamic creative <a href="https://support.google.com/bidmanager/answer/7163768" target="_blank">help center article</a> to upload your creative in Bid Manager. Then, preview the creative and click on the products to verify your custom exits are working as expected.<br />
<br />
Creating custom exits isn't so tricky after all! We've just shown you how your dynamic creative can use custom exits and send information about product-level clicks. If you require post-processing of exit URLs, try these steps with your creatives and let us know what you think in the comments below.
<br />
<span class="byline-author"><br /></span>
<span class="byline-author">Posted by Manikandan, Software Engineer</span>Unknownnoreply@blogger.com86tag:blogger.com,1999:blog-8054151151845215223.post-15017241224920448852017-03-13T13:28:00.000-07:002020-10-05T14:53:43.440-07:00Exploring text in Google Web Designer<div style="font-family: inherit;">
In today’s blog post, we’ll show you how to manage the appearance of text throughout your Google
Web Designer document. We’ll begin with simple changes, such as the font family, text weight, size or color. We’ll then show you how to make a new text element look like an existing one, and how to define default styles so you can reuse them easily.</div>
<br />
<br />
<a name='more'></a><br />
<br />
<h2>
<span style="font-size: x-large;">Basic style changes</span> </h2>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
</div>
We’ll begin by having you create a text element and change its styles:<br />
<br />
<div>
<span style="font-family: inherit;"><span style="vertical-align: baseline; white-space: pre-wrap;">Select the Text tool </span><span style="vertical-align: baseline; white-space: pre-wrap;"><img height="26" src="https://lh3.googleusercontent.com/YpNnVCLGash743_rHk5ILyk8Su_lpWrpM3WcblfbsKOkJsN9-r8b9gXbkH2GRzTROFMX4tA7rb1lkCeYOr_UwtWpcsksE27ekz7PYGPixl3GJJy1l2CgqvwHkfoDNl01Bjg0arEq" style="border: none; margin: 0px; transform: rotate(0rad);" width="26" /></span><span style="vertical-align: baseline; white-space: pre-wrap;">, then click on stage where you want to create your text. You can also click and drag to define the dimensions of the text element.</span></span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lh6.googleusercontent.com/j_Zhke7bDaQwi5_geziljl9BdVu432whkzepPGvTPrPSEDW1xMoAnwJ4idIe1aEM1-YyxxYrh0Ft_WGvO2mQfxfLcU0AzzfFkIapZuHBFgmjn7laa1ojlTc8Fkpb5Uj1-IgjkBSq" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="115" src="https://lh6.googleusercontent.com/j_Zhke7bDaQwi5_geziljl9BdVu432whkzepPGvTPrPSEDW1xMoAnwJ4idIe1aEM1-YyxxYrh0Ft_WGvO2mQfxfLcU0AzzfFkIapZuHBFgmjn7laa1ojlTc8Fkpb5Uj1-IgjkBSq" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="256" /></a></div>
<br />
<br />
<div>
<span style="white-space: pre-wrap;">The text is created with the properties you can see in the next toolbar: it will use the font, style, size, color and text alignment styles that are currently selected.</span></div>
<br />
<div>
<br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="24" src="https://lh4.googleusercontent.com/hP_Vqv7tQFDo2ctSW2GvNrzmY1etMVUUbhRrQ3Fwlq-WsMfch5vTrEMkqh6a4LSkpiVXMj_Wtfe_PGbHLCoF_eGmT1MByoy5TG5M4RBZrkS4ATHlboRn7JwQmmXGTAlTQ8JJIyfb" style="border: none; transform: rotate(0rad);" width="624" /></span></div>
</div>
<br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Once your text is created, you can change its properties</span><span style="background-color: white; color: #333333; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> by clicking on the text and pressing 'Esc'.</span></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="116" src="https://lh4.googleusercontent.com/bAMvpjdc0xwEuDrwU-v4017Zliu35XXO2QQ3gg3-zNSR40hlMqGziBqb_52ckrBlP0laKxixicnq6eQ7CQfyhR1aNGuNxiJSQ251Yf7kYsfPq5Qbl_U18tK0SwzBUm2z9YKwXf1V" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="252" /></span></div>
</div>
<span style="font-family: inherit;"><b id="docs-internal-guid-49e1a3e2-6207-abb2-8c71-1c36a4fe84bd" style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can now change the text's font family by clicking on the font dropdown, and then choosing one </span><span style="font-family: inherit; white-space: pre-wrap;">of the fonts listed, or searching for additional fonts using the ‘More fonts...’ option.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="433" src="https://lh4.googleusercontent.com/jtjTgI0dSf-OLyUzm79N3KGaNMkBm3CZ4w9gGf2DjxZ0q5vmR6gYrFHsPZuSxzR1oN_zPJwPd20v26YiV2FHGq6LRVQPLz0_mQXO-1mAULklKbBVqc_TzAZbhN5oGd-1qiAe2qYM" style="border: none; transform: rotate(0rad);" width="200" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The fonts are previewed in the dropdown.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you select ‘More fonts…’, a dialog opens.</span><br />
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="517" src="https://lh4.googleusercontent.com/Q2YIrD9bakY7jZvhCS-RTbRzENlCqkX-TDiYkGxjLd8TFJ9Iut9PWJKgmcAIjywHyV7ZfAe4uJHtPL8QExLD8D2H4Y2gJkd1ADfIp_kR0Us-B9nBAbP0A2MBTPb844SlQPME43Yu" style="border: none; transform: rotate(0rad);" width="624" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Clicking on one of the font names on the left will add it to the ‘Added fonts’ list on the right. You can filter the fonts list by font name, category, and language script. Once you have selected one or more fonts, click ’OK’ to add it to the font dropdown. </span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The last selected font is applied to the selected text in the document.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="593" src="https://lh5.googleusercontent.com/36-jw_5igwlkSoerUfJWSeDjwSDupf6kTYmfFlNEVpwByTt0h2Vbt0ZuXJ5PBgAocyYw-BO-zyq9qwBMXKn87430EqvRHAIIw8f6a38Jrn5z7X4BT0xt-xFJQo31G1RPzGLIBHca" style="border: none; transform: rotate(0rad);" width="199" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can change the weight or style of your text by clicking on the style dropdown and choosing one of the available options. The dropdown previews what the different styles will look like with the currently selected font.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="164" src="https://lh4.googleusercontent.com/rqw2t_2jsIRflOJny8zWWCJjvJbPC3pRJTXNXsOum20Cg1eUrekPoyKd7N901sJRRsX1qhcoRL9wz4Ee0RtUUNDDtyhmxk2rP5nb-X09S2GS_ST7nrQu-tT5ffPO5i7LCpQT-QKH" style="border: none; transform: rotate(0rad);" width="161" /></span></div>
</div>
<b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b>
<br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Clicking on the size input allows you to type a new value. </span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="33" src="https://lh5.googleusercontent.com/LltVxeAEblEyC1ZrrONzTOByzNjJxR0rvNWvTUjZT7CsB1ZRDJymOoEnx4UqB0oRY4SxcbXMpLSecGDOo6-H2VdE4ZYawjB7uYYsegKNHL714RmKDu4PbXwpquYLzGXlWpBx_Cxz" style="border: none; transform: rotate(0rad);" width="92" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can also increase or decrease its value by using the up and down arrows, which changes the current value by 1; 'Shift' plus up or down changes the size by 10. Lastly, you can click on it and drag up or down to change the value.</span></div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you want to change the text color, either click on the current HEX value and type a new value, or click on the color swatch to show the color popup. From there you can change the color using the color tools.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img alt="Text color swatch - 022117.png" height="276" src="https://lh4.googleusercontent.com/mSGHG6btRqwScF_3pt1nD2IJMt_bBOYV8hEJu7BDQs7gzgW3ZAgxCR4gY1MtTJ9PxSI7WmB9UB9j-y_LVKhQ_Z36YKGQKORG3yjUh-94IWyGplP2O7wgF5-9MaQ6aay29DrpsrZ_" style="border: none; transform: rotate(0rad);" width="424" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The text toolbar also allows you to set the text alignment by clicking on one of the alignment buttons.</span></span></div>
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="31" src="https://lh4.googleusercontent.com/Z9Ej8gD8T5RTjx9QTvS8qMMepiVMmXNQrqwK8GAgDsJTuCxAyUcLt8oTcyRPnorCILebDcndE2_EH9HDy1LgmCDN19zoWr_Adjn6zhh8MMusUExKjXw24hBk8n7qL0HuHiVpxhBL" style="border: none; transform: rotate(0rad);" width="137" /></span></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">These values:</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="25" src="https://lh4.googleusercontent.com/7C491u_9CNWQpWqsPUpyDDOA9aFN8kvo40k1kxOayTHg22y20I5qtA47hv4St6UyQfW7fQF3RTyZRLo4ROiuF2OqAd_1LDj9Z4oEaNPwb6sdQBWUh5pVyuv6MKRvVm1SR2RpxtI6" style="border: none; transform: rotate(0rad);" width="624" /></span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Will make the text look like this:</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="104" src="https://lh6.googleusercontent.com/HAhISr1lOOr3dhipAyH1g2fHcxFWq3B9ivbA5dY5sA5MLwq1S57Jvg7V_ioBQYLgPnwW6H-jKHZE5vTPwSm5gP7H2hXF3AWGtkKjVc0sIgWttvK3AZL6zBpoYowD96_eP0gVWS6Q" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="243" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: left;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Set any additional properties for an element by clicking on the ‘Properties’ or ‘CSS’ panels.</span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="80" src="https://lh4.googleusercontent.com/8cE29TpBblpNSgnGfj0Akru_xbIc9LktCOVr6DRHIiEHTN5OBnSL7wWRsKWGRWjh3cNFDbVPzmA0qwHt4t1bQXsAP4-M4Uu0mg7f3zOylGB5hIFtucbSjpKRq2n-SiFkrM_q3mZQ" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="253" /></span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="60" src="https://lh4.googleusercontent.com/_TxcaUBd3r4BPuuXXhZfLtxBOgdS_8cIj_DROS7FhliK1zjztEfPIRr4wtZhijH9Ow60jxlPYW6cX1B1e4-JO3LoQhCRHkACDkWbIm4cGw5AJ-TWB254niECvM_rJpzziIgQPm4R" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="202" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: left;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Note: to modify the styles for just part of the text, select that part and then use the text toolbar to modify its font, weight, size or color.</span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="72" src="https://lh4.googleusercontent.com/CXD6q_1RN751x2XilBFib_enq9XK23I5Js06uDFPE0WWP8OgEsEeVDqtfiG8QFC4tVuCaIoFYoGBQyWvz2zSmLIdDwmCIKVn2Ek5_rn5iXrOu6FZOWd15AecXO20uW9Ryi4SLheR" style="-webkit-transform: rotate(0.00rad); border: 1pt solid #000000; transform: rotate(0.00rad);" width="209" /></span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="58" src="https://lh5.googleusercontent.com/A7DE2hkGPB3_wyMXiwJjyY7n8CHpFTLUBOGowSztapzrNya_Kz2aCBRv1K5CdcrEoK--CYRn-61Ps8Nste0tCXlhb_nlZzSs51DL1J0M5SLIjG5qPt_8Z4QmKvgjkdEcuJQoQ1gb" style="-webkit-transform: rotate(0.00rad); border: 1pt solid #000000; transform: rotate(0.00rad);" width="202" /></span></div>
</div>
<b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b>
<br />
<h1 0pt="" 10pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Copy/pasting text styles</span></h1>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Once the text looks the way you want, you can duplicate the style by right-clicking on your text element and choosing ‘Copy text styles’. </span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="133" src="https://lh4.googleusercontent.com/ld5R298dC3pIj95grl8xiS5mnnuMtZER2s-O7Sb1PGHFP93Rb7YvMR8K6aRbrO5Qsig7XVLN-CTDtg3ZlZCL3Bw4RNxPzxT4BRXi0xPel120H0LqLBjIUtEKJfsT-xHdwnqmVUtA" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="300" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can then right-click on another element and choose ‘Apply text styles’. The option is not available until you do 'Copy text style'.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="255" src="https://lh3.googleusercontent.com/7a24PtbhnXKkKUHIhYSsjx0wTT5rq7RC2NlCKFjqmFkdgjWOn2K7D8rAZlwfkmunjmloK-5p8QFAVlLbQq-MSOA70gr46pH3wZ6YNtqJgsuWtXPjbl9sXqMlcDF6e9GZUj9aWTcv" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="304" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">When you click on it, the other text element gets the same styles as the original text element.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="139" src="https://lh4.googleusercontent.com/xDTw3aIT7zZe_6NfDa-HAkIvYGEnRxhpQd_PPpXCeCuQDSkC5IshmT4vXzn09qH_H9kH7-g1YT8j2FhHGNvGce3DQyhSSHLtjMRs8IyP173GFwCUnp-ff-K9ClScHCFgoFWrtEu7" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="210" /></span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Note: you can copy and apply text styles across documents.</span></div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<h1 0pt="" 10pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Setting the default styles</span></h1>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Opening the tag dropdown on the text toolbar allows you to preview the default appearance of various text types. The font, style, size and other text properties are shown with the text, and the text color is shown within the circle.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="487" src="https://lh4.googleusercontent.com/js4X2_u6ewBtriTX711OOaQhNDMXt4h_EVpmewuXA5eAuh8CMZGDer20zcbamaK_zM_finiQdJop5rrDM769P9IIqXtHSgwg7eufShNOw10ywC0KgQGcxGpPZasFqWSOZRhFKyn2" style="border: none; transform: rotate(0rad);" width="325" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can change these defaults by using the ‘Set as default’ option in the tag’s submenu.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">With this text </span></span><img height="60" src="https://lh4.googleusercontent.com/_TxcaUBd3r4BPuuXXhZfLtxBOgdS_8cIj_DROS7FhliK1zjztEfPIRr4wtZhijH9Ow60jxlPYW6cX1B1e4-JO3LoQhCRHkACDkWbIm4cGw5AJ-TWB254niECvM_rJpzziIgQPm4R" style="border: 1pt solid rgb(0 , 0 , 0); font-family: "arial"; font-size: 11pt; margin: 0px; transform: rotate(0rad); white-space: pre-wrap;" width="202" /><span style="font-family: inherit; white-space: pre-wrap;"> selected, click on ‘Set as default’:</span><br />
<span style="font-family: inherit;"><br /></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="85" src="https://lh4.googleusercontent.com/KBj_kaKNVjGesLFo8U8YwhpPcXFr0aJoXkyhZqffH6YrXosQ5JK4Q8EyYjrGNZYTfxxb38c9N-reafN7xxli7J3xqDffVWDFWMUIyojDb_f9bGWQi37klXyAq3V8PO2RCQ6Pj5Cv" style="border: none; font-family: inherit; font-size: 11pt; transform: rotate(0rad);" width="513" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The preview of the </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">heading 1</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text is changed:</span></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="125" src="https://lh5.googleusercontent.com/Ockwt9LGHsRsqDVruluKhPnesA13ZrFEX93520GUh2q949s7VGBDVTKPE_QimiCZgwh95-esW-L9B_vrlKewLDg95rHa_uKJvZYJY_oFnU4X487aIdFA-ko_g9zArQYTjQ2hJpcW" style="border: none; transform: rotate(0rad);" width="305" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">All the existing </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">heading 1</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text elements across your entire document will look like the new defaults, unless you have changed some properties of the elements, which will retain their values.</span></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">And if you create a new </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">heading 1</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text</span></span><br />
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit; margin-left: 1em; margin-right: 1em;"><img border="0" height="30" src="https://lh3.googleusercontent.com/YZtb1QcpQ7voNbml3c-em1FJVQEhr4sJ-4F1Xoxrd4ohxyjfsJAfSov8DsPqCfi98rYqxFC9Gtw4r1UXs_ElaWNAjg_Ot64oDJXEQztQPGi33dmDcrtrKaOrnybPmBrnOv--pn7_" style="border: none; transform: rotate(0rad);" width="196" /></span></div>
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">it automatically looks like its defaults:</span></div>
<h1 0pt="" 10pt="" center="" dir="ltr" margin-bottom:="" margin-top:="" text-align:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: small; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="151" src="https://lh3.googleusercontent.com/xo0olZwR0yaaRrlumgyMCWVqydZBvoqzsPa8aX9bXc7GK4eRCSHskRpvVp4jO2xivpMnnCbSfhgC7RA5lgzHM34cbLbyxSNwyRgPvnz9G02bMTcOzLEAaqQD139TtN2dQHFrhXRL" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="205" /></span></h1>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Note: you can change the current styles of an existing text element by selecting it and picking a different option in the tag dropdown.</span></div>
<b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b>
<br />
<h1 0pt="" 10pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Applying the default styles</span></h1>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can automatically change a text element’s current styles to one of the saved defaults.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Select both text elements using ‘ctrl+a’.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="137" src="https://lh3.googleusercontent.com/EkcrISGSm6b3zqzzGXD9gmsGe0D-jPhA16sXD-5N5ak1bhG8qrePIcz-dfPxHcLXC6jKWIHzBj3IUS-WIO0dR1U9VkcD0OAc3BQZ2Zr3I0L-I_d_NjWgDPI3cdrn5t72P6kB_ze9" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="208" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Then in the </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">heading 2</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> submenu select ‘Apply default’.</span></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="93" src="https://lh6.googleusercontent.com/gUTG3x6aZRAhccRxRcif6CMuydE6cLpwI8I6OvSP3vzsueJyzAX-3KrSug0ygKJyEDopv3hbshVeZExpFdDFLMRmI-b5IUsfjDhHGilHnXOq6HsGyq9EoGYQkn7cUYXMEtUbzsRo" style="border: none; transform: rotate(0rad);" width="499" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Both our </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">normal</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text and </span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">heading 1</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text now look like our</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> heading 2</span><span style="background-color: transparent; color: black; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> style defaults.</span></span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="132" src="https://lh3.googleusercontent.com/FVuKFeBIgiswva8NG8xZsdqL3ny0kCNoXHuKxngw7DozQu2fKiC6ldM1SIG9tIizaeByY76fvgoLLhTArg8L2RtvVrKZ6sUwY9VPBvo6zBwYub6zupwUE3-EJ4m9b-Z1AaekD5eT" style="border: 1pt solid rgb(0, 0, 0); transform: rotate(0rad);" width="211" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<h1 0pt="" 10pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Reusing default styles in another document</span></h1>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can reuse the default text styles in a different document, by copying and pasting some lines of code from your document to others.</span></div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to code view, identify the style sheet related to the text styles (its ID is gwd-text-style) and then copy the lines and paste into your other document before the main style sheet, or replacing an existing ‘gwd-text-style’ sheet.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="335" src="https://lh5.googleusercontent.com/oDkOnHWgQC64XZUsj6Jl4eUdgWy58b2ABJfR16pG7W-VeGAkV5z7MomNHknsanQNJ_-d56mCQUEN4s0heKC6tcDs4PJbE-VxHedZQuDNGyNqK-mzLbNPecnYEkSUHRHZknKCSZIn" style="border: none; transform: rotate(0rad);" width="394" /></span></div>
</div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Find the font link in the first document and paste it in the header of the other document.</span></div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<div style="text-align: center;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img height="17" src="https://lh6.googleusercontent.com/YwBIW5SbpHY_Xhm_u9Vo0m0-O4Y0XBYXr0iZlT6loSvncTjg6JwiPx6xdrH_xJfd5cyIpywOc1NmYgeOHkmMU7Y-rqeUEDG3vpe-Acj87_2UoJNjyfLHdUIP9TkTkCwrtaYZUtFz" style="border: none; transform: rotate(0rad);" width="624" /></span></div>
</div>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you already have links to other Google Fonts, these links will be merged upon saving.</span></div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Note: if only system fonts are used, this last step is unnecessary. </span></div>
<span style="font-family: inherit;"><b style="font-weight: normal;"><br /></b>
</span><br />
<h1 0pt="" 10pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-size: 20pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Closing Thoughts</span></h1>
<div 0pt="" dir="ltr" margin-bottom:="" margin-top:="">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">With Google Web Designer, you can modify the appearance of your text elements (or parts of them) by using the text toolbar, properties panel or CSS panel. </span><span style="font-family: inherit; white-space: pre-wrap;">You can also reuse the properties you’ve set on a text element by copying and pasting the text styles, or by defining the current properties as the default styles. You can use tags that you define for all text elements in your entire document or across multiple documents.</span></div>
<span style="font-family: inherit;"><br /></span>
<span class="byline-author" style="font-family: inherit;">Posted by Jean-Pierre, Software Engineer</span></div>
Unknownnoreply@blogger.com136tag:blogger.com,1999:blog-8054151151845215223.post-36036152682932971982016-11-17T10:11:00.003-08:002020-10-05T14:53:43.442-07:00Google Web Designer training re-launched<b>Google Web Designer training re-launches</b>: We’re thrilled to re-launch our core training for Google Web Designer, entitled “Get started with Google Web Designer”. This new Learning path and Achievement program has launched exclusively on Academy for Ads, Google’s hub for on-demand advertising training.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="https://4.bp.blogspot.com/-kkSxTQwgz50/WC3uH2EcOTI/AAAAAAAAMhQ/wR1emH-9vT4G_SeYNiwjuaOyDUAHSil4gCLcB/s640/AFA%2BSocial%2BMedia%2BGraphics_Twitter-GWD.png" width="640" /></div>
<br />
<br />
<a href="https://goo.gl/R02ORd" target="_blank">Take the training today</a> to learn the ins and outs of building HTML5 ads with the tool. Block off a couple hours to take the full learning path to develop the expertise you need to use Google Web Designer to the fullest.<br />
<br />
<br />
<span class="byline-author">Posted by Jasmine Rogers, on behalf of the Academy for Ads team</span>Unknownnoreply@blogger.com68tag:blogger.com,1999:blog-8054151151845215223.post-79477762574886401322016-11-16T09:38:00.000-08:002020-10-05T14:53:43.445-07:00New usability features for Google Web DesignerWe’re excited to introduce several new improvements to make Google Web Designer faster and easier to use. Whether you're copying and pasting across projects or dragging and dropping layers across the timeline, the tool allows you to work the way you need. Today, we're launching the following updates:<br />
<br />
<h3>
<b>Timeline Enhancements: </b></h3>
<ul>
<li><b>Advanced Mode - Zoom:</b> Users can now zoom in and out of the timeline allowing for more precise placement of keyframes. </li>
<li><b>Multiple keyframe/thumbnail selection:</b> Easily select or delete all the keyframes (in Advanced mode) or thumbnails (in Quick Mode) in a layer at once. </li>
<li><b>Animate properties in the first thumbnail:</b> Quick Mode now allows editing the first keyframe and retaining the other keyframe properties. </li>
<li><b>Drag to hide/lock layers:</b> It is now possible to drag-select hide/lock icons in the layers instead of clicking each icon one by one. And users will still be able to click each layer to lock or hide, if desired. </li>
<li><b>New easing functions:</b> We have added two new easing functions for animation: step-start and step-end. Using these new functions for animated property values, users will gain more control over their animation transitions. </li>
</ul>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-V5Nm490npJg/WCts_gOopPI/AAAAAAAAMgY/J-zaDPE8Bkwgg06k_4UkqhJUM1ADFVgiACLcB/s1600/Easing%2B-%2Bstep%2Bend%2Bstart%2B-%2B111416.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="536" src="https://2.bp.blogspot.com/-V5Nm490npJg/WCts_gOopPI/AAAAAAAAMgY/J-zaDPE8Bkwgg06k_4UkqhJUM1ADFVgiACLcB/s640/Easing%2B-%2Bstep%2Bend%2Bstart%2B-%2B111416.gif" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="text-align: center;">
New easing functions for the animations in Google Web Designer</div>
</td></tr>
</tbody></table>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<b>Copy/paste across documents </b></h3>
<div style="text-align: left;">
Any element that can be copied in the same document can now be copied to other documents, including assets and groups. In addition, if assets or other data conflicts, a dialog box will open to ask you to manually choose the resolution.<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<b>Preferences panel </b></h3>
<div style="text-align: left;">
Customize Google Web Designer to your style and workflow preferences in one central location. For example, you can set a number of Code View defaults including the color theme and preferred keymap.<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<b>JavaScript library support </b></h3>
<div style="text-align: left;">
DoubleClick Studio users can now easily import the Greensock JS Library for creatives made in Google Web Designer. You can also add a variety of plugins including TweenLite, TweenMax, and Text Plugins to help you build your creatives.</div>
<div style="text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-tFTfJgCLYAg/WCttk6_Z4MI/AAAAAAAAMgc/xYVPpSEERIg9s8qJdklx95sJd5WgKwuQACLcB/s1600/Greensock%2Bsupport%2B3%2B-%2B111516.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="593" src="https://4.bp.blogspot.com/-tFTfJgCLYAg/WCttk6_Z4MI/AAAAAAAAMgc/xYVPpSEERIg9s8qJdklx95sJd5WgKwuQACLcB/s640/Greensock%2Bsupport%2B3%2B-%2B111516.gif" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="text-align: center;">
JavaScript library support in Google Web Designer</div>
</td></tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Today, we also launched a new Google Web Designer Learning path on <a href="https://goo.gl/Juc84d" target="_blank">Academy for Ads</a>. This resource can help you learn the ins and outs of Google Web Designer in quick, five minute modules or dedicate more time to working through the full Learning path.<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Ready to get started? Check out our Google Web Designer <a href="https://www.google.com/webdesigner/showcase/" target="_blank">ad gallery</a> for inspiration. If you’ve already downloaded Google Web Designer, it will automatically update to reflect the new features listed above. If you haven’t yet downloaded the tool, you can <a href="https://goo.gl/y0i8qN" target="_blank">download it for free here</a>.</div>
<div style="text-align: left;">
<br /></div>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Posted by Jasmine Rogers, Program Manager, Google Web Designer</div>
Unknownnoreply@blogger.com138tag:blogger.com,1999:blog-8054151151845215223.post-58732482828464665102016-11-04T09:43:00.000-07:002020-10-05T14:53:43.443-07:00Masking in Google Web Designer<h3>
Investigating Masking in Google Web Designer </h3>
Masking routinely tops the list of requested features in Google Web Designer. We investigated different approaches to implementing masking in HTML5, and we concluded that the limitations of existing browsers make effective masking infeasible at this time. We recognize that this is a disappointing result, so we’re using this space to explain (and show!) what we tried, and why we think masking is not yet ready for production.<br />
<br />
<h3>
What is masking? </h3>
A mask defines a region of the plane where content (the <b>maskee</b>) is rendered; outside of this region, the content is invisible. For example, a circular mask may be used to create a spotlight effect, by only revealing content within the "light". A complete masking solution would meet the following criteria:
<br />
<br />
<br />
<ol>
<li><b>Everything is maskable.</b> The maskee may include text, images, animation, SVG, canvases, videos, custom elements, and even other masks. </li>
<br /><br />
<li><b>A mask can have any shape.</b> It may be as simple as a circle, or it may be multiple disconnected regions with complicated geometry. </li>
<br /><br />
<li><b>Masks can be animated.</b> The mask can be translated, rotated, and scaled; it can be morphed into new shapes; and in the most general case, the mask can be a video. </li>
<br /><br />
<li><b>Masks stack and overlap.</b> Placing one mask inside another is equivalent to intersecting the two masks. If two independent masks overlap, the output of one is rendered atop the other, with no other interference. </li>
<br /><br />
<li><b>Events are masked.</b> Events originating outside the mask are blocked, and otherwise they pass through to the maskee without modification. </li>
<br /><br />
</ol>
<h3>
</h3>
<h3>
What did we try? </h3>
<br />
There is no way to achieve all of the above properties on any particular browser, much less every browser we support (i.e., Chrome, Firefox, Safari, and IE 10+). We don’t require perfection, however; an approximate solution can still be useful in practice.
We initially experimented with <a href="https://www.html5rocks.com/en/tutorials/masking/adobe/" target="_blank">CSS3 masking</a>. Smooth mask animation is only possible if the mask is a CSS basic-shape, but otherwise all masking behaviors, such as those listed in the section above, are supported. However, CSS3 masking is not yet available on all major browsers.<br />
<br />
Another way to implement masking, which is already supported by all major browsers, is to represent a mask as an element styled with <i>overflow: hidden</i>. This exhibits all masking behaviors, although the mask’s shape is equivalent to the element’s border, which effectively limits masks to rectangles, circles, ellipses, and capsules. Despite this limitation, overflow-based masking would still be useful for basic effects like wipes and reveals. Moreover, on browsers that support CSS3 masking, the mask’s shape could essentially be arbitrary, although animation would still be limited to the element’s transform. Unfortunately, we discovered that even in simple cases, overflow-based masking produced blurring and flickering artifacts on some browsers.<br />
<br />
Finally, it’s worth noting that in simple cases, masking-like effects can be achieved simply by overlaying an image with transparent regions, which is already possible in Google Web Designer. This technique, however, is really the opposite of masking -- instead of rendering <i>only </i>within the mask region, it paints over everything that is <i>not </i>in the mask region.<br />
<br />
<br />
<h3>
CSS3 masking </h3>
We started by exploring CSS3 masking, which comes in two forms: clipping (clip-path) and masking (image-mask). Clipping crops the rendering of an element and its children to a binary mask defined either through an inlined SVG, or a “basic shape” consisting of a circle, and ellipse, or a polygon. Masking crops the element’s content to an image’s boundary, and then applies an alpha channel determined by the image content. As of this writing, browser support for CSS3 masking is as follows:
<br />
<br />
<ul>
<li>Clipping <a href="http://caniuse.com/#feat=css-clip-path" target="_blank">is supported</a> on Chrome, Safari, and Firefox, although Firefox’s support for basic shapes is turned off by default. </li>
<li>Masking <a href="http://caniuse.com/#feat=css-masks" target="_blank">is supported</a> in Chrome, Safari, and Firefox, but Firefox currently does not allow control over the image’s size or position. </li>
<li>IE does not currently support CSS3 masking, but future support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/masks/" target="_blank">is likely</a>, at least for Edge. </li>
</ul>
<br />
We tested CSS3 clipping and masking in several different scenarios, and here’s what we found (<a href="http://codepen.io/lucasgwd/pen/JRgPGe" target="_blank">demo</a>):<br />
<br />
<b>Clipping.</b> Clip paths defined as SVG elements offer the most flexible representation of a mask’s shape, but CSS animations applied to SVG clipping elements are ignored at render time. Basic shapes offer less expressive mask geometry, but at least they can be animated: for circles and ellipses, the centers and radii are interpolated, and for polygons, control points locations are linearly interpolated (assuming that each keyframe has the same number of control points). One quirk is that in some browsers, <i>overflow: hidden</i> must be set on the mask element, or else the clipping path will be ignored if the maskee contains 3D transforms or has animated transforms (2D or 3D).<br />
<br />
<b>Masking. </b>Masking allows essentially arbitrary mask geometry, but animation of the mask shape is limited to defining CSS keyframes for mask-position and mask-size, allowing the mask to be translated and (non-uniformly) scaled. However, the mask is always rendered with positions and sizes rounded to the nearest integer, resulting in jagginess artifacts when the mask is animated slowly (<a href="http://codepen.io/lucasgwd/pen/EgqYNe">demo</a>).<br />
<br />
In summary, smoothly animatable masks are only possible using clip-path with a basic shape — and even then, currently only in Chrome and Safari.<br />
<br />
<br />
<h3>
Overflow-based masking </h3>
<br />
An alternative to CSS3 masking is to set an element's overflow to “hidden”, and then add the maskee as a child element:<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "courier new"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><div id=”mask”></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "courier new"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <div id=”maskee”></div></span></div>
<span id="docs-internal-guid-42154d5c-0240-ceac-cb23-93248de965cc"><span style="font-family: "courier new"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></div></span></span><br />
<br />
<div id="”mask”">
<div id="”maskee”">
</div>
</div>
This crops the maskee to the bounds of the parent element. Because the maskee is a child of the mask, however, moving the mask will also move the maskee. To allow them to move independently, we can insert an intermediate element that cancels changes to the mask.
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "courier new"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><div id=”mask”></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "courier new"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <div id=”maskCancel”></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "courier new"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <div id=”maskee”></div></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "courier new"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </div></span></div>
<span id="docs-internal-guid-42154d5c-0241-0823-5202-d2f37b3d1a1c"><span style="font-family: "courier new"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></div></span></span><br />
<br />
<div id="”mask”">
<div id="”maskCancel”">
<div id="”maskee”">
</div>
</div>
</div>
For example, if mask is moved ten pixels to the left, <i>maskCancel</i> is moved ten pixels to the right, giving the appearance that maskee remains stationary while the mask reveals a different portion of it. More generally, changes to the mask configuration can be canceled as follows:<br />
<br />
<br />
<ol>
<li>The intermediate element is forced to the same size as the mask, by setting its width and height to 100%. </li>
<li>If the mask’s left and top are (x, y), the intermediate element’s left and top are (-x, -y). </li>
<li>The intermediate element’s transform origin is identical to that of the mask, and its transform is the inverse of the mask’s transform. </li>
</ol>
Similarly, if the mask is animated using CSS3 keyframes, additional keyframes rules must be added to the intermediate layer to cancel this animation. Assuming that animation is limited to transform (per existing <a href="https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" target="_blank">best practices</a>), this means:<br />
<br />
<br />
<ol>
<li>Animation of the mask’s transform-origin is copied to the intermediate element. </li>
<li>The inverse of the mask’s transform animation is applied to the intermediate element. </li>
</ol>
(2) is by far the most complicated part of the process, and as it need not be understood to evaluate the practical effectiveness of overflow-based masking, we discuss it in the Appendix at the end of this post.<br />
<br />
We built a <a href="http://codepen.io/lucasgwd/pen/dpxbzx" target="_blank">proof-of-concept implementation</a> of overflow-based masking, and discovered that even in simple of cases, animating the mask transform produces blurring and flickering artifacts on some browsers. For example, here is a screenshot of Chrome’s output, using a circular mask that translates back and forth (<a href="http://codepen.io/lucasgwd/pen/mrNbWJ" target="_blank">demo</a>):<br />
<br />
<span id="docs-internal-guid-42154d5c-06ef-9a10-6058-7a506f92bbc7"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><img height="271" src="https://docs.google.com/a/google.com/drawings/d/sm_g_JrfpObXDSi_yQO8VuA/image?w=624&h=271&rev=94&ac=1" style="border: none; transform: rotate(0rad);" width="624" /></span></span><br />
<br />
<br />
<br />
It appears as if the maskee is first being rendered with the intermediate layer’s transform applied, and then re-rendered with the mask’s transform, resulting in blurring and flickering artifacts. This behavior is not consistent across browsers: as of this writing, the artifacts appear in Chrome in all cases, they appear in Firefox if the animation includes scale or rotation (<a href="http://codepen.io/lucasgwd/pen/GjVKmp" target="_blank">demo</a>), and they do not appear in IE or Safari. However, on all browsers, no artifacts are present if overflow is set to visible, but the mask/intermediate layer/maskee construct is otherwise left unmodified.<br />
<br />
Animation of an element’s left, top, width, and height (LTWH) is generally discouraged, and by default GWD uses LTWH for static layout and translation/scale for animation. Still, in light of these rendering artifacts, it’s worth considering whether LTWH makes more sense for masking. One problem with LTWH animation is that it has <a href="https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">worse performance</a> than transform animation: dozens of objects can easily be animated at 60Hz using transforms, but will slow down to 10Hz or worse if LTWH is used. If a document only has one or two masks and isn’t too complicated, however, perhaps the performance penalty is acceptable. A second problem is that LTWH values are rounded to the nearest integer at render time, which avoids the rendering artifacts discussed above, but at the expense of creating clunky, stair-step-like animations when objects animate slowly (<a href="http://codepen.io/lucasgwd/pen/edqOWr" target="_blank">demo</a>).<br />
<br />
<br />
<h3>
Stay tuned </h3>
<br />
We would love to add masking to Google Web Designer, but as an HTML5 authoring tool, we're limited by what browsers are able to support. Still, the web is constantly evolving, and browsers are continually improving, so we still hope and expect to ultimately be able to add masking to our suite of tools.<br />
<br />
<br />
Posted by Lucas, Software Engineer<br />
<br />
<br />
<br />
<br />
<h3>
Appendix: Inverting animation for overflow-based masking </h3>
<br />
If a mask is rotated or translated, then an inverse animation can easily be created by reversing the order of each key’s transforms and negating the values of each transform channel. For example, if the mask’s transform is<br />
<br />
<div style="text-align: center;">
<i>translate(tx, ty) rotate(rz) scale(sx, sy), </i></div>
<br />
then the intermediate element’s transform is<br />
<br />
<div style="text-align: center;">
<i>scale(1/sx, 1/sy) rotate(-rz) translate(-tx, -ty). </i></div>
<br />
If a mask is also scaled, then the inverse scale animation is defined in terms of a reciprocal. For example, a simple linear scaling from s1 to s2 over a time interval T can be written as<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-42154d5c-06ef-32ec-b0d6-06c74215e634"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><img alt="linearScale.png" height="34" src="https://lh6.googleusercontent.com/VYbxuqhd6ebTLZhH7BGpn7dn5KRLmU10n_hrFffHbYNvF9b4UZOxR3Z1SZwyFU4BLgMp7tFMoheXXI1lfviAEz3SVaU3M4WMfax2-1Nn04a2gynZCbMwVKdXANGFGNK7KEX9qgjm" style="border: none; transform: rotate(0rad);" width="147" /></span></span></div>
<br />
and the inverse scaling animation is then<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-42154d5c-06f0-707f-325e-e98a9be929fb"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><img alt="linearScaleInverse.png" height="33" src="https://lh5.googleusercontent.com/VrYpb9DGSakoNrf4le_dRktVR1RT_Z69HgcTDx1iNN_W6lugq3u081bodhzDiXwuw41MCHTGJqWtD1y0-8BcCjbaYeo_FHUmDl455l7PW7nphsvu-NHhtBBqcV8evE26MAi8Ghr_" style="border: none; transform: rotate(0rad);" width="169" /></span></span></div>
<br />
Functions like this cannot be exactly represented in CSS3, which <a href="https://www.w3.org/TR/2012/WD-css3-transitions-20120403/#transition-timing-function-property" target="_blank">defines animation curves</a> as 2D cubic Bezier segments where the first dimension is time and the second dimension is normalized value. While we could simply disallow scaling, this would make it impossible to achieve wipe and reveal effects. Instead, we generate samples of the ideal inverse scale animation<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-42154d5c-06f1-9d96-9c7d-5e0008271cd5"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><img alt="inverseScaleSamples.png" height="34" src="https://lh5.googleusercontent.com/0c4EYARyOSpSqpOhbkPpnndzbAraWYPgs3_XB-OI5WD8m00tDqsEeuNJs8Tb-0tRpNCooMB5Xe49iiltCAg0mXcsy7bnpEaK5fzBYJOkxZb7_f7dA0E6C2LoQ0OhSRexG1FA6KY7" style="border: none; transform: rotate(0rad);" width="209" /></span></span></div>
<br />
and fit an approximating animation curve. For simplicity, in our experiments we constructed inverse animations as piecewise linear functions, although more compact results can be obtained by fitting general cubic Bezier curves. To determine an acceptable error tolerance for the approximation, consider an absolute error e resulting in a net scale at the maskee of <br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-42154d5c-06f1-fff6-fa48-512bf2c776bd"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><img alt="scaleError.png" height="33" src="https://lh3.googleusercontent.com/0R2lOWOOHCcNOC57_7S5oaS6rNNl3Igc6zQOY-E3wui1kmeynSA97WfAbHP5NcVox_lIXBvF0Txso2IfzSFdpY5KarAaPe4kkSWI9gq6VeEv5zHATy_dDbQAnKRNNB2-ZMQfBrSn" style="border: none; transform: rotate(0rad);" width="91" /></span></span></div>
<br />
At a distance <i>d</i> from the transform origin, this yields a positional error of <i>sed</i>, and so given a maximum mask size of <i>M</i>, the maximum error <i>E </i>is <br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-42154d5c-06f3-5fb2-6ce2-8717aac13447"><span style="font-family: "arial"; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><img alt="maxScaleError.png" height="15" src="https://lh6.googleusercontent.com/eyN6_JQTIJq7n_3j96xs02s9tGOdJ6N86L72iKLhpulxZYZ6z6s54neoapsRyih8J7byBWZ_fZCftPPYqGDTzyGrYgmArzb_LVaYQ-sZjFKUMYsIKWRNBeePlEWThEXy62hF16V4" style="border: none; transform: rotate(0rad);" width="152" /></span></span></div>
<br />
Positional discrepancies can therefore be kept below half a pixel by requiring <br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-42154d5c-06f3-9d0b-4140-d157dee7a09c"><span style="font-family: "arial"; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><img alt="errorBound.png" height="32" src="https://lh6.googleusercontent.com/4GcT56AfmrorsAVlQk0WUU4lH5ySvrnP-MwLUHCthNw1t-z_LonzjVkiKV21n16ccityu0SnksuD9BM4ZmmofPwRsZ6ejI2j8JK1pOus359Om_kOhL0LOB21aLzJxzDSmRdhhDs-" style="border: none; transform: rotate(0rad);" width="68" /></span></span></div>
<br />
Intuitively, the smaller the scale value, the larger the error we can tolerate, because only a narrow slice of content will be visible through the mask.
(It is also possible to invert animation of uniform scale by animating z translation, but this technique does not generalize to animations that include non-uniform scaling, and it alters the meaning of existing z translations authored in the maskee.)Unknownnoreply@blogger.com800tag:blogger.com,1999:blog-8054151151845215223.post-1899439629044961912016-06-08T13:45:00.002-07:002020-10-05T14:53:43.439-07:00Common animation topics from the Google Web Designer forumAnimation 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.<br />
<h2>
<br /></h2>
<h3>
<span style="font-size: x-large;">Animation goes behind other elements unexpectedly</span></h3>
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 <a href="http://services.google.com/fh/files/blogs/my_test.zip" target="_blank">my_test.zip</a> to to see the actual example file.<br />
<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/mS6R9NvGudkFVVB5HB_YCvZUimARdOefLC28ptoKQ9AezvooidKXvOMn6oiExziSiZjExTp4a2cKfV0G225YvZ9DKS2jyxdedTdbg18t_7ZdxrsrKtlR-Obj04i652mQWgmxUxNn" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="401" src="https://2.bp.blogspot.com/mS6R9NvGudkFVVB5HB_YCvZUimARdOefLC28ptoKQ9AezvooidKXvOMn6oiExziSiZjExTp4a2cKfV0G225YvZ9DKS2jyxdedTdbg18t_7ZdxrsrKtlR-Obj04i652mQWgmxUxNn" width="640" /></a></div>
<br />
<br />
When you preview on a browser, the animation appears as this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/UhStx6KvBO7Yn1lGDvrnNe8ibolIOuZ39W4o0cgIOvd5frlbLHW2gwmJTTaMeRW0wcDg2jca_lSaze0cmPpuRxWzqUTnxeKsjvXBwb_Xb_3eUiZDR3apxLOZj7nAEC6QskgMScor" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://1.bp.blogspot.com/UhStx6KvBO7Yn1lGDvrnNe8ibolIOuZ39W4o0cgIOvd5frlbLHW2gwmJTTaMeRW0wcDg2jca_lSaze0cmPpuRxWzqUTnxeKsjvXBwb_Xb_3eUiZDR3apxLOZj7nAEC6QskgMScor" width="320" /></a></div>
<br />
<br />
<h3>
<span style="font-size: large;">Approach 1 - Adjusting Z translation value for the background.</span></h3>
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/1QM-6t9nAevOgEJjdW5DTpKCYslFBm9qrxE4XFd08JeCNKwZHl4dQbHbeTEU-uCTREa2xyjeUxUu2ioCvnfp8bZUyy1VTCPzoWaPjZ1n_GiCZFoTAPFUz2dIUuHJDznbWJ0G1Lbq" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://4.bp.blogspot.com/1QM-6t9nAevOgEJjdW5DTpKCYslFBm9qrxE4XFd08JeCNKwZHl4dQbHbeTEU-uCTREa2xyjeUxUu2ioCvnfp8bZUyy1VTCPzoWaPjZ1n_GiCZFoTAPFUz2dIUuHJDznbWJ0G1Lbq" width="360" /></a></div>
<br />
<br />
The “10” image should now be rotating in 3D on top of the gray background.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/YnoQWpFbzPH3Ye_YSSDi_o8hyAhz298NfJ3xE1nx23pohAQAoDmN4rAQ3kwEwdcRNa8Ep3QO0Pe2H97v46E384E1F0MPNf6T6ah4xmrrOFLCelJu7FSIwTUMeeMt-JkbrsrssRZ9" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://4.bp.blogspot.com/YnoQWpFbzPH3Ye_YSSDi_o8hyAhz298NfJ3xE1nx23pohAQAoDmN4rAQ3kwEwdcRNa8Ep3QO0Pe2H97v46E384E1F0MPNf6T6ah4xmrrOFLCelJu7FSIwTUMeeMt-JkbrsrssRZ9" width="320" /></a></div>
<br />
<br />
Please preview to ensure that the new adjustment of the 3D z value works on all browsers.<br />
<br />
<h3>
<span style="font-size: large;">Approach 2 - Adjusting Z translation value for the element animated in 3D.</span></h3>
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/fgLONw65kh8WWmKhdMf-lsY7bf2Id8rrqHhawjBjkvun-EdN2yl66ZqYt9JlkAoFPYI0G_UiP-SrRwWLTZpOJ90x9JzxFT3djeq9yZhXWV2nWgGKeZ5TyELVkmhDPK8x0vF87kFR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="305" src="https://4.bp.blogspot.com/fgLONw65kh8WWmKhdMf-lsY7bf2Id8rrqHhawjBjkvun-EdN2yl66ZqYt9JlkAoFPYI0G_UiP-SrRwWLTZpOJ90x9JzxFT3djeq9yZhXWV2nWgGKeZ5TyELVkmhDPK8x0vF87kFR" width="640" /></a></div>
<br />
<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/fknD39_vZGPuSPMvUXJmjXGKkwonxI5T4oMv7Oz91BV6305TvNbgZMRiVm3yDnmqSXsR6G8uVrfAE1xIDS8LzQMW2hjwwHBe-sGY0vj9C-q7csLH1Pvc-H7yyGXx8n5190AiUbE5" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://3.bp.blogspot.com/fknD39_vZGPuSPMvUXJmjXGKkwonxI5T4oMv7Oz91BV6305TvNbgZMRiVm3yDnmqSXsR6G8uVrfAE1xIDS8LzQMW2hjwwHBe-sGY0vj9C-q7csLH1Pvc-H7yyGXx8n5190AiUbE5" width="400" /></a></div>
<br />
<br />
<h3>
<span style="font-size: x-large;">Animation overlaps</span></h3>
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.<br />
<br />
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 <a href="http://services.google.com/fh/files/blogs/test-overlap.zip" target="_blank">test-overlap.zip</a> to see to see the actual example file.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/xPRSV4e6e5snVf4FQW9jwqkL_fSvgpGrUrxyXLrhmDOUnVf8UeEkEIe2d_yiLg7YNJD7JUu9AWH66fK0RreAvN6LYqbgCb1mT7Z7R91smYJlq7g3_qPbmh9FMoLsG1A7wYiC8Ccp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="422" src="https://2.bp.blogspot.com/xPRSV4e6e5snVf4FQW9jwqkL_fSvgpGrUrxyXLrhmDOUnVf8UeEkEIe2d_yiLg7YNJD7JUu9AWH66fK0RreAvN6LYqbgCb1mT7Z7R91smYJlq7g3_qPbmh9FMoLsG1A7wYiC8Ccp" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/AMq0IHSuIgY49Zktbzp7LkaUZ4R0OGcUvPdkToNze9XSA57wBb3vTDNy14yqgx6Zb7lVWUaaxXMvDMIhBItQuTqhKI_F0pG1kI2sEimc9_63maQ-9xN1-kOsQz61dIJt5pIia14O" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="422" src="https://2.bp.blogspot.com/AMq0IHSuIgY49Zktbzp7LkaUZ4R0OGcUvPdkToNze9XSA57wBb3vTDNy14yqgx6Zb7lVWUaaxXMvDMIhBItQuTqhKI_F0pG1kI2sEimc9_63maQ-9xN1-kOsQz61dIJt5pIia14O" width="640" /></a></div>
<br />
<br />
When it is previewed on Chrome browser, it shows as this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/ByBJfrcPbJ1wlxH0XGgwKKbZmX2bHddh8MQFs_V1MmYnMkl9i8BuV-sjaLSl12oiqDJttQQDDlu5SuTPvdmwwsYu6w_3qLV3zI2B5-oNZbpqcgTxPRjwSRE-ywMWz2_7mtPJ-sqQ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://2.bp.blogspot.com/ByBJfrcPbJ1wlxH0XGgwKKbZmX2bHddh8MQFs_V1MmYnMkl9i8BuV-sjaLSl12oiqDJttQQDDlu5SuTPvdmwwsYu6w_3qLV3zI2B5-oNZbpqcgTxPRjwSRE-ywMWz2_7mtPJ-sqQ" width="640" /></a></div>
<br />
<br />
If you preview this on Safari, when the animation is paused, Nay is already displayed and overlapping with Yea before any user interaction happens.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/IvRmTMECzecQ4KAsMh-kyg4SD_GG6Kk3YBgfsPa_isgPxpur8vCBfxYU1DXzsZXsy6hSOh2pQRM_pxfTCfqv93aoDzyUBg7FSlyZPfNwSuYJPGSASUOF2neEhBfn8fVIaj1WDjuP" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/IvRmTMECzecQ4KAsMh-kyg4SD_GG6Kk3YBgfsPa_isgPxpur8vCBfxYU1DXzsZXsy6hSOh2pQRM_pxfTCfqv93aoDzyUBg7FSlyZPfNwSuYJPGSASUOF2neEhBfn8fVIaj1WDjuP" /></a></div>
<br />
<br />
Let’s try to resolve this overlap.<br />
<br />
<h3>
<span style="font-size: large;">Approach - Removing the animation delays</span></h3>
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/lszatUC8eh3gGyvT10XNtfc4Tgipd5m6r4LORDf1JJu_Nm17f0h3qJ6DNqFWLzIR8LQykPiakSXVppFUS8ABukpfDIfxGQXHys3ZYDSpMtDDL9mbEZnzZdo75CIwy69DHKLfQ27z" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="595" src="https://1.bp.blogspot.com/lszatUC8eh3gGyvT10XNtfc4Tgipd5m6r4LORDf1JJu_Nm17f0h3qJ6DNqFWLzIR8LQykPiakSXVppFUS8ABukpfDIfxGQXHys3ZYDSpMtDDL9mbEZnzZdo75CIwy69DHKLfQ27z" width="640" /></a></div>
<br />
<br />
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.<br />
<br />
<h3>
<span style="font-size: x-large;">Page animation control</span></h3>
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.<br />
<br />
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.<br />
<br />
<ul>
<li>Page 1 </li>
<li>Page 2 </li>
<li>Page 3 </li>
<li>Page 1 </li>
<li>Page 2 </li>
<li>Page 3 </li>
<li>Page 1 (end) </li>
</ul>
<br />
<h3>
<span style="font-size: large;">Approach - setTimeout event as a custom action</span></h3>
We can achieve this by adding a ‘setTimeout’ event for the timeline. Let’s walk through this process by using this example file <a href="http://services.google.com/fh/files/blogs/pages.zip" target="_blank">pages.zip</a>. Please download it and open pages.html file.<br />
<br />
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. <br />
<br />
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.<br />
<br />
If you look at the events panel, the event that changes the page is shown as page1>event-1>GotoPage>pagedeck(page1_1)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/rHlpO8-xeUa92uE7L3TtWUgO00PF5pjoFYvH2T5OJyk01d_7S0mPIlEUet3wrYdjCTzvqt-bitOZfx2ZROJk_7lHvlqhCrgl1jDyhhgPrAp5Uk1D4yZX18RgFe0n14vmh9qSVjHf" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://3.bp.blogspot.com/rHlpO8-xeUa92uE7L3TtWUgO00PF5pjoFYvH2T5OJyk01d_7S0mPIlEUet3wrYdjCTzvqt-bitOZfx2ZROJk_7lHvlqhCrgl1jDyhhgPrAp5Uk1D4yZX18RgFe0n14vmh9qSVjHf" width="640" /></a></div>
<br />
<br />
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.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/Xq4O6F_ulkzl9HZXylpRkPrABBDupPunJYKseGCT7CS2r6JXJRmW-zU9Jkx9bpPXLOLJwoBkseIoV-BRS_dxTNcbyzSboAC3A1IUVKihv5h8mkaeRkgcKH1xh5o-lkWnC_Xo1TD2" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="330" src="https://3.bp.blogspot.com/Xq4O6F_ulkzl9HZXylpRkPrABBDupPunJYKseGCT7CS2r6JXJRmW-zU9Jkx9bpPXLOLJwoBkseIoV-BRS_dxTNcbyzSboAC3A1IUVKihv5h8mkaeRkgcKH1xh5o-lkWnC_Xo1TD2" width="640" /></a></div>
<br />
<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/xNnperlTcbBhlsNqtpSQQ9dwwblnhPiv_pp081StMckMXAaK584o1iDlqinvX4pISK3hUOPOS5apbo7F-ioPVN2fqUWEHi8Qne7PuIYXgYiBNPsODiGbap6XvdNwCwygSfJw0w6V" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://1.bp.blogspot.com/xNnperlTcbBhlsNqtpSQQ9dwwblnhPiv_pp081StMckMXAaK584o1iDlqinvX4pISK3hUOPOS5apbo7F-ioPVN2fqUWEHi8Qne7PuIYXgYiBNPsODiGbap6XvdNwCwygSfJw0w6V" width="640" /></a></div>
<br />
<br />
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.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/sQLf42RxBHJh50ZAXaHxup2PRHDSpp9fHIwjhT8DUoR6yJ3TxJcvghh-cE8hIpPTA9pvs8L8XiWnHdjcZwZZTVb67_7riVZyb6d6XiP5PR16_r5OxefpyvHLfKnkdgTdD4TKyRSj" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://1.bp.blogspot.com/sQLf42RxBHJh50ZAXaHxup2PRHDSpp9fHIwjhT8DUoR6yJ3TxJcvghh-cE8hIpPTA9pvs8L8XiWnHdjcZwZZTVb67_7riVZyb6d6XiP5PR16_r5OxefpyvHLfKnkdgTdD4TKyRSj" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: start;">Note: 6000ms = 6s</span></td></tr>
</tbody></table>
<br />
We’ve added “setTimeout” as a function name, and created the following code:<br />
<br />
setTimeout(nextPage, 6000);<br />
function nextPage() {<br />
gwd.actions.timeline.gotoAndPause('page1', 'end');<br />
}<br />
<br />
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.<br />
<br />
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.<br />
<br />
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”.<br />
<br />
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.<br />
<br />
<h3>
<span style="font-size: x-large;">Final Thoughts</span></h3>
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!<br />
<br />
<span class="byline-author">Posted by Mariko, Test Engineer</span>Unknownnoreply@blogger.com110tag:blogger.com,1999:blog-8054151151845215223.post-60124797100921473232016-05-03T10:27:00.002-07:002020-10-05T14:53:43.443-07:00A revamped UI and responsive design capabilities, now in Google Web Designer<span style="font-size: large;">Today, we're releasing a new version of Google Web Designer that includes an entirely revamped UI and responsive design capabilities to help you create true responsive ads! </span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Check out our <a href="http://goo.gl/ObKHja" target="_blank">Announcement</a> and the resources below for more information! </span><br />
<h3>
</h3>
<h3>
<span style="font-size: x-large;"><b><span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></b></span></h3>
<div>
<span style="font-size: x-large;"><b><span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></b></span></div>
<div>
<span style="font-size: x-large;"><b><span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></b></span></div>
<h3>
<span style="font-size: x-large;"><span style="font-family: "trebuchet ms" , sans-serif; font-weight: normal;">Resources:</span></span></h3>
<b><a href="https://support.google.com/webdesigner/answer/7001881" target="_blank">Release Notes</a></b><br />
<a href="http://goo.gl/ObKHja" rel="nofollow" target="_blank"><b>Blog</b></a><br />
<b>Help Center Articles: <a href="https://support.google.com/webdesigner/answer/7002913" target="_blank">Responsive</a>, <a href="https://support.google.com/webdesigner/answer/3187129" target="_blank">UI</a></b><br />
<b>Videos: <a href="https://www.youtube.com/watch?v=pdEoLrGwMTY&index=1&list=PLpGjaPSt59a1tzwdBaPOwT_dcDcXlkAvD" rel="nofollow" target="_blank">Responsive</a>, <a href="https://www.youtube.com/watch?v=x8x6kENKG0M" rel="nofollow" target="_blank">UI Overview</a></b><br />
<br />
<span class="byline-author">Posted by Jasmine Rogers, Google Web Designer</span>Unknownnoreply@blogger.com43tag:blogger.com,1999:blog-8054151151845215223.post-34887018684750794122016-04-25T15:10:00.001-07:002020-10-05T14:53:43.442-07:00Popular Questions from the Google Web Designer Forum<a href="https://groups.google.com/forum/#!forum/gwdbeta" target="_blank">The Google Web Designer Community Forum</a> is a resource that our customers use to ask questions, provide answers and reach out to our team directly. If you haven’t visited the community forum yet, feel free to check it out. It contains lots of useful information, tips, questions, etc. from users like yourself.
<br />
<br />
In this blog post, we’ll highlight some of our frequently asked questions from the forum.<br />
<br />
<br />
<h3>
<span style="font-size: x-large;">How do I make an asset appear at a specific time during my animation? </span></h3>
<br />
For example, let’s say we have the following file, a simple animation spanning two keyframes where a yellow DIV animates from left to right:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/ib138qOBLJRzAN0A5Pjd6vlvosenBandUHhyyNgr7IbiuJPKnxBrSeuhJwe-cpTf0ORc-Cc7okUVKO9ZSnLqkxVmahit-BDfEJTCQXprSxNOQQ--fUc-hqw7RzsO3KqOs7f_jEQN" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="380" src="https://3.bp.blogspot.com/ib138qOBLJRzAN0A5Pjd6vlvosenBandUHhyyNgr7IbiuJPKnxBrSeuhJwe-cpTf0ORc-Cc7okUVKO9ZSnLqkxVmahit-BDfEJTCQXprSxNOQQ--fUc-hqw7RzsO3KqOs7f_jEQN" width="400" /></a></div>
<br />
<br />
When this animation finishes, we want to display another asset, say a blue DIV. Many users will often add the blue DIV at the last keyframe and be unpleasantly surprised that this new DIV appears in the first keyframe as well.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/fP_9WplitQjaghuGcY_E5qZK3mLmMdGWFy9lA1jY9k7tPumFTTes0jaUg54JaO4voWEIYrtsHcWaFxsUkuAsnGmyfFmEZboHM9mVOfp6wfBVOuEmDlj7OGegYEr7RslRyMl0uSLo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="386" src="https://3.bp.blogspot.com/fP_9WplitQjaghuGcY_E5qZK3mLmMdGWFy9lA1jY9k7tPumFTTes0jaUg54JaO4voWEIYrtsHcWaFxsUkuAsnGmyfFmEZboHM9mVOfp6wfBVOuEmDlj7OGegYEr7RslRyMl0uSLo" width="400" /></a></div>
<br />
<br />
Any time you add a new element to a document, it's present in the document at all times, however, we can control when the element “appears” by setting its display, visibility, or opacity styles. Of these styles, only opacity is animatable, so let’s cover that first. We’ll also cover using the display or visibility styles to achieve this effect a bit later.<br />
<br />
<h3>
<span style="font-size: x-large;">Approach 1 - Animating opacity from 0 to 1 between two keyframes </span></h3>
<br />
First, let’s select the element in the first keyframe and use the Properties panel to set its opacity to 0.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/g_leCbLw8xt3ju1jcLXe5Q5vtIJ9rQn2o2JaNkzp8z9qdEeqN9cmGyjXVII2ONFrTD1Jv10lQMz9p36y_aqBVmxWij5HJXnX4RzH06uvY-7_m4lSmYXEEUDXwgfA04wpE5Y352ue" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://1.bp.blogspot.com/g_leCbLw8xt3ju1jcLXe5Q5vtIJ9rQn2o2JaNkzp8z9qdEeqN9cmGyjXVII2ONFrTD1Jv10lQMz9p36y_aqBVmxWij5HJXnX4RzH06uvY-7_m4lSmYXEEUDXwgfA04wpE5Y352ue" width="320" /></a></div>
<br />
<br />
The element should now be invisible throughout the entire animation.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/8_HPKq0bMPZlVYjpYU8pibogZIwIDiF8uBH5c4jZZrMh8acSUuwTe2u5oPACABquU3twlO2UoOlBO-D13OOH5EQr95pCuJj4eJmDz1_Nx1ju5bMJsDTYp-dIxTgOY3RS2XEL9dzA" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="390" src="https://1.bp.blogspot.com/8_HPKq0bMPZlVYjpYU8pibogZIwIDiF8uBH5c4jZZrMh8acSUuwTe2u5oPACABquU3twlO2UoOlBO-D13OOH5EQr95pCuJj4eJmDz1_Nx1ju5bMJsDTYp-dIxTgOY3RS2XEL9dzA" width="400" /></a></div>
<br />
<br />
Now we’ll Insert a new keyframe at the end and change the duration between the last keyframe and the keyframe right before it to 0.01 seconds.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/gMYMUFqlNb5cb-d9vT9ZgalvILTPT9O4cg-3s6tCmHsaQ3DLAyGOgjIYAnnlNxApwAWARcoL6eL_U69nhbSlqL4LC3YWYxn25pb1ufRqQKtIPrLouzPAB7HKQmnntGPG539WobeZ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://4.bp.blogspot.com/gMYMUFqlNb5cb-d9vT9ZgalvILTPT9O4cg-3s6tCmHsaQ3DLAyGOgjIYAnnlNxApwAWARcoL6eL_U69nhbSlqL4LC3YWYxn25pb1ufRqQKtIPrLouzPAB7HKQmnntGPG539WobeZ" width="640" /></a></div>
<br />
<br />
So far, the element has opacity 0 throughout the animation.<br />
<br />
Select the element in the last keyframe and use the Properties panel to set its opacity to 1.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/nuVplRmY06K0r-UheG9kWTP8g_7PeN9hbY5Urp_ocllVCR4j3inHWmqEzbBpWChCIdJSieTBUxUyfWSi94cYAaMfnSFmVF9l4fBxopa3tnv2uM7VFsykvP1tpfbUKFeTIHxC9qX5" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="https://2.bp.blogspot.com/nuVplRmY06K0r-UheG9kWTP8g_7PeN9hbY5Urp_ocllVCR4j3inHWmqEzbBpWChCIdJSieTBUxUyfWSi94cYAaMfnSFmVF9l4fBxopa3tnv2uM7VFsykvP1tpfbUKFeTIHxC9qX5" width="640" /></a></div>
<br />
<br />
The blue DIV’s opacity is now animating from a value of 0 at the first keyframe to a value of 1 at the last keyframe. The middle keyframe has an interpolated value for its opacity.<br />
<br />
Next, select the blue DIV in middle keyframe and use the Properties panel to set the opacity to 0 there as well.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/k_pBecr3prdeGtNTGX_bLLaz6sKIOKpG3n1dHjX7emr3dK5O4Iw0dv-ThHzMSrwCDJmmGuG1szvwjnEQe0p6MoLbA6RPKD6uAr8zsJX-HXxo8ut809XbyNFVeDP313ulJtc4h9II" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="335" src="https://1.bp.blogspot.com/k_pBecr3prdeGtNTGX_bLLaz6sKIOKpG3n1dHjX7emr3dK5O4Iw0dv-ThHzMSrwCDJmmGuG1szvwjnEQe0p6MoLbA6RPKD6uAr8zsJX-HXxo8ut809XbyNFVeDP313ulJtc4h9II" width="400" /></a></div>
<br />
<br />
If we preview the resulting animation in the browser, we can see the blue DIV’s opacity is now animating from a value of 0 at the first keyframe to a value of 0 still at the middle keyframe. The animation duration between the first and middle keyframes is 0.5 seconds. The blue DIV’s opacity then quickly animates from 0 to 1 because the duration between the middle and last keyframes is 0.01 seconds, making it seem like the blue DIV appears after 0.5 seconds.<br />
<br />
Let’s recap the steps on how to make an element appear at a specific point in time in an existing animation:<br />
<br />
<ol>
<li>Select the first keyframe/thumbnail in the animation. </li>
<li>Add the new element at the first keyframe/thumbnail. </li>
<li>Select the element at the first keyframe/thumbnail and use the Properties panel to set its opacity to 0. </li>
<li>Add a keyframe at the time you want the element to “appear’ (let’s call it time <i>t</i>). Its opacity will still be 0 at time <i>t</i>. </li>
<li>Add another keyframe right before time t (let’s call it time t’) and set the duration between <i>t’</i> and <i>t</i> to 0.01s. </li>
<li>Select the element at time <i>t</i> and set its opacity to 1. </li>
<li>Select the element at time <i>t’</i> and set its opacity to 0. </li>
</ol>
Download <a href="http://services.google.com/fh/files/blogs/timeline_animate_opacity.zip">timeline_animate_opacity.zip</a> to see the final result.<br />
<br />
<br />
<h3>
<span style="font-size: x-large;">Approach 2 - Using Timeline Event Markers, CSS Panel, and the Events panel to show the element at the desired time</span> </h3>
<br />
As an alternative, you can also achieve the same results by using display or visibility styles:<br />
<br />
<br />
<ol>
<li>Select the blue DIV and use the Properties panel to give it an id (let’s use ‘bluediv’ for the id in the example below). </li>
<li>Select ‘bluediv’ in the first keyframe and open the CSS panel. </li>
<li>Add the style:
visibility: hidden
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/IebQTUAeyBlmPlfumvdt61og56eNDneCDJvf6iH5frprGV9L5JD9V00EST4o5JCD0TijfPnKOFWhGkzMHwa5jEZ0R3arfizojhuKp7ifpjXja-kw9Cexi8RHSvh4CDnTZRqbIbw0" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://2.bp.blogspot.com/IebQTUAeyBlmPlfumvdt61og56eNDneCDJvf6iH5frprGV9L5JD9V00EST4o5JCD0TijfPnKOFWhGkzMHwa5jEZ0R3arfizojhuKp7ifpjXja-kw9Cexi8RHSvh4CDnTZRqbIbw0" width="285" /></a></div>
</li>
<li> Switch the Timeline to Advanced mode. </li>
<li>Move the Timeline’s playhead to the time you want the element to be visible and add a new Timeline event marker by clicking on the diamond icon in the Timeline panel’s Events row. <div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/ExqF1K9e4lfc0BIJdLTakwIudOOtLb4Vgh98zcsSgLY0wweK2AKN81AoqrQD6g1a8v5worXY9_C-mirG7C_ZGzA8Kf9qgJyQ3-p8bhaMcyQihgCF4LciAWQ6dxnH4QkTF_dozfet" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155" src="https://4.bp.blogspot.com/ExqF1K9e4lfc0BIJdLTakwIudOOtLb4Vgh98zcsSgLY0wweK2AKN81AoqrQD6g1a8v5worXY9_C-mirG7C_ZGzA8Kf9qgJyQ3-p8bhaMcyQihgCF4LciAWQ6dxnH4QkTF_dozfet" width="400" /></a></div>
</li>
<li>Double-click on the newly added diamond event marker to bring up the Events dialog and add the following action for that event.
Action: CSS -> Set styles -> ID of the element -> ‘+’ button to add the CSS style visibility: visible. </li>
<li>We can now preview to view the resulting animation in the browser. </li>
</ol>
Download <a href="http://services.google.com/fh/files/blogs/timeline_css_event.zip">timeline_css_event.zip</a> to see the final result.<br />
<br />
<br />
<h3>
<span style="font-size: x-large;">Can I use external JavaScript libraries in Google Web Designer? </span></h3>
<br />
Yes, you can! In fact, external JavaScript files are often used in ads. You can verify this by creating a new banner file and viewing the folder that you created the file in. In the example below, we’ve named a file ‘using_external_js’ and then browsed to its location. You will see some JavaScript files next to the HTML file, something like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/hNVvhzam2HineOUnIHM-1W2d3eR73OG-WCwQ-10tNu_ZxaGCSKZj6iIzyR9JUF_oyPKpgohLDgu4bEy61u7AnTYu9gEPKmAe5lN6u0rIEKYF4fQD3D5VX9yLoM9FRBkNgC7BdTOM" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://1.bp.blogspot.com/hNVvhzam2HineOUnIHM-1W2d3eR73OG-WCwQ-10tNu_ZxaGCSKZj6iIzyR9JUF_oyPKpgohLDgu4bEy61u7AnTYu9gEPKmAe5lN6u0rIEKYF4fQD3D5VX9yLoM9FRBkNgC7BdTOM" width="320" /></a></div>
<br />
<br />
If we switch to Code view and look at the document’s head element, we’ll see script tags with their ‘src’ attributes set to these JavaScript file:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/UuNqklJo97z7JKYfoAbkThkW0fb0R6xoB6v56PslhCNBz58WeC0xFsQTLg0-Z7lq94JaB_5tQCXHQ7pFXEqT_vCyccK0xoT47FW1L3wBpBus5fLz7Ef_oCiWSyDxvKdTwSlT-Nts" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://1.bp.blogspot.com/UuNqklJo97z7JKYfoAbkThkW0fb0R6xoB6v56PslhCNBz58WeC0xFsQTLg0-Z7lq94JaB_5tQCXHQ7pFXEqT_vCyccK0xoT47FW1L3wBpBus5fLz7Ef_oCiWSyDxvKdTwSlT-Nts" width="640" /></a></div>
<br />
<br />
You can also add references to your own external JavaScript files in the head element after these script tags. The references can be relative paths from your HTML file, such as gwdpage_min.js in the example above, or they can be absolute paths to JavaScript libraries on the web, such as the link to DoubleClick studio’s Enabler library in the example above.<br />
<br />
When you publish your ad, you have the option to include your JavaScript files directly in your HTML file rather than referencing them by selecting "Inline local files" in the publish dialog:
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/F9XaF8dXT1Xr4CYXN71ya9LMeM9p9j9mZZ4zJDZKzrd5d4IpWdEmUJ8EnVH3_dXlnDGCWwgZTgLAxqm7poGSBLQ7Po_7inhH3X-eUsoIDXc2bBF5wBinwk4xkZST7BvWVb5Ig4WY" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="173" src="https://1.bp.blogspot.com/F9XaF8dXT1Xr4CYXN71ya9LMeM9p9j9mZZ4zJDZKzrd5d4IpWdEmUJ8EnVH3_dXlnDGCWwgZTgLAxqm7poGSBLQ7Po_7inhH3X-eUsoIDXc2bBF5wBinwk4xkZST7BvWVb5Ig4WY" width="320" /></a></div>
<br />
<br />
You may find commonly used JavaScript libraries on a CDN hosted by your publisher, similar to Enabler.js in the example above. For example, DoubleClick hosts common JavaScript libraries such as the popular <a href="https://support.google.com/richmedia/answer/6307288" target="_blank">Greensock animation libraries</a>. Let’s use one of these libraries to add some interactivity to our ad.<br />
<br />
<br />
<ol>
<li>In Code view we’ll add a script element to reference the library we want to use. For this example, we’ll add the following script element to the list of script elements in the head. <span id="docs-internal-guid-f9a76945-3ff7-8f06-61c6-c42789837825"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><script type="text/javascript" src="</span><a href="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js" style="text-decoration: none;"><span style="color: #1155cc; font-family: "arial"; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js</span></a><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">"></script></span></span></li>
<li>Now let’s switch back to Design view and add a DIV element using the Tag tool. </li>
<li>We’ll then use the Properties panel to set a background color on it, in this example let’s use blue. </li>
<li>Once the color is set, we’ll also use the Properties panel to set the id to ‘bluediv’. </li>
<li>Next, Right-click on the element and select “Add event…” to bring up the Events dialog. </li>
<li>We can set up the event as follows: </li>
</ol>
<ul>
<li>Event: Mouse->click </li>
<li>Action: select Custom, and click on ‘+ Add custom action’ to bring up the Custom code section </li>
<li>In the ‘Custom code’ dialog, enter a name for the function (let’s name it ‘rotateDiv’) and add the following custom code:
TweenLite.to('#bluediv', 1, {rotation: '+=360'}); </li>
</ul>
Now, preview your file in the browser and click on the blue DIV. You'll notice on each click the blue DIV will rotate one full turn using Greensock’s TweenLite library.<br />
Download <a href="http://services.google.com/fh/files/blogs/using_external_js.zip">using_external_js.zip</a> to see the final result.<br />
<br />
<br />
<h3>
<span style="font-size: x-large;">Closing Thoughts </span></h3>
<br />
Learning how to customize animation and utilize popular JavaScript libraries can be powerful tools in creating amazing, interactive content. Let us know what you create with Google Web Designer and please continue to provide feedback and comments in our <a href="https://groups.google.com/forum/#!forum/gwdbeta" target="_blank">Community Forum</a>!<br />
<br />
<span class="byline-author">Posted by Nivesh, UX Engineer</span><br />
<br />
<br />Unknownnoreply@blogger.com111tag:blogger.com,1999:blog-8054151151845215223.post-54706135533924967942016-04-18T14:09:00.001-07:002020-10-05T14:53:43.443-07:00Exploring gallery components in Google Web DesignerIn this article we'll be exploring the advanced capabilities of Google Web Designer's gallery components. Together we'll author a standard 300x250 banner ad, which presents a selection of product images, and enhance it as we go.<br />
<br />
To start, we'll add a Swipeable Gallery component to our document by dragging a new instance from the Components panel to the stage. Click on the gallery to select it on the stage, then go to the Properties panel and click the icon next to the Images property to open the Gallery Images dialog. Import a few images (I'm using six) and hit OK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/SnFuvgbKy-U-3d3tRoVeXTuLbhGPV35vTPf2dz0dS4j3UeywR9KEkUyFDRgs4LZWYG4isW9_zSp3O6CgQJE_bhhOcB7xncbWNFGStwaZ5i2DZm2xZt4jxeq9DaHuWzvWHxLP_8AI" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="187" data-original-width="407" height="182" src="https://3.bp.blogspot.com/SnFuvgbKy-U-3d3tRoVeXTuLbhGPV35vTPf2dz0dS4j3UeywR9KEkUyFDRgs4LZWYG4isW9_zSp3O6CgQJE_bhhOcB7xncbWNFGStwaZ5i2DZm2xZt4jxeq9DaHuWzvWHxLP_8AI" width="400" /></a></div>
<br />
<br />
We now have a swipeable gallery of images, but this may not be apparent to viewers. In its initial configuration a Swipeable Gallery will only display a single product image, and its appearance will never change unless the viewer swipes on it. They're likely to assume that it's just a static image. Let's make that clearer.<br />
<br />
<br />
<h2>
<span style="font-size: x-large;">Autoplay</span> </h2>
<br />
To demonstrate that the image the user sees is actually a swipeable gallery, we'll configure the gallery to automatically play through its contents. The first step is to check the "Autoplay" box in the component's Properties panel. By default this will automatically play through the gallery contents once over a period of three seconds, but let’s customize that.<br />
<br />
Under the "Advanced properties" dialog for the gallery component, we have two more properties for controlling autoplay behaviour. The first is fairly self-explanatory: the "autoplay duration" properties defines the amount of time (in milliseconds) that the gallery plays automatically. At the end of this duration, it will jump back to the first frame. Note: You may want to be cautious with how large you make this value. Most ad networks have limits regarding how long animations are allowed to run without viewer interaction. We'll go ahead and set ours to 18000 (18 seconds).<br />
<br />
The other autoplay property is "autoplay step interval". This controls how long each frame is displayed before moving to the next frame during autoplay. By default, this property is not set, and the total autoplay duration will be divided in order to display each frame exactly once. So given our example of 18 seconds for 6 frames, each frame would be displayed for three seconds. We'd like something a bit faster, so we'll enter an autoplay step interval of 1500 (1½ seconds). This will result in each frame being displayed twice during the autoplay. The autoplay will be stopped immediately if the viewer swipes on the gallery.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/J6anz2Gh_HzUulMcVXRw-zSPXck_KM9jNdNwhj1y4Os6lfHqUlQD8_NUSv6o_kq0oBNKoJU5pA_cHuRYVhwdw8UC0XL2EDddRjXnq1qv1H4R60U3fj2ho6y46MV7-uMQ4evPt7MC" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="122" data-original-width="445" height="107" src="https://2.bp.blogspot.com/J6anz2Gh_HzUulMcVXRw-zSPXck_KM9jNdNwhj1y4Os6lfHqUlQD8_NUSv6o_kq0oBNKoJU5pA_cHuRYVhwdw8UC0XL2EDddRjXnq1qv1H4R60U3fj2ho6y46MV7-uMQ4evPt7MC" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<h2>
<span style="font-size: x-large;">Exiting the Ad</span><span style="font-size: large;"> </span></h2>
<br />
Our creative is still missing an essential capability: a way for the viewer to jump to the product page by exiting the ad. It's common to use the Tap Area component to mark a section of the ad as tappable, and add an event handler to exit to a given URL when the viewer taps. However, if you place a Tap Area component on top of the gallery, the viewer will not be able to swipe through the gallery because those swipes will be intercepted by the Tap Area instead. This may be suitable for some cases, but it's not what we're looking for here.<br />
<br />
If we only have a single landing page for all of the products, we can add a single tap event handler to the gallery which exits to that page. We do this by pressing the "+" button in the Events panel and selecting:<br />
<br />
<ul>
<li><b>Target</b>: gwd-swipegallery_1 </li>
<li><b>Event</b>: Swipeable Gallery: Frame tap </li>
<li><b>Action</b>: Google Ad: Exit ad </li>
<li><b>Receiver</b>: gwd-ad </li>
<li><b>Configuration</b>: </li>
<ul>
<li><b>Metrics ID</b>: frameexit (or an ID of your choice) </li>
<li><b>URL</b>: http://example.com/all-products </li>
</ul>
</ul>
However, we often have separate landing pages for each product, and would like to send the viewer to the one corresponding to the product they clicked on. This behaviour can be enabled by using the "Exit URLs" advanced property of the gallery. Exit URLs is a comma-separated list of URLs corresponding to each product in the gallery. For example, if the products in our gallery had pages at the following URLs (in gallery order) - http://example.com/product-1, http://example.com/product-2, http://example.com/product-3, etc, we could then assign them to their respective frames by setting Exit URLs to the following value:
<br />
<br />
http://example.com/product-1,http://example.com/product-2,http://example.com/product-3,http://example.com/product-4,http://example.com/product-5,http://example.com/product-6<br />
<br />
If you don't want a given frame to trigger an exit, you can leave its entry in the list empty. For example, if you only wanted the third frame to trigger an exit you could set Exit URLs to the following value:<br />
<br />
, , http://example.com/product-3, , ,<br />
<br />
Note: When you’re using Exit URLs this way, you cannot include a Frame tap event.<br />
<br />
<br />
<br />
<h2>
<span style="font-size: x-large;">Pages of Multiple Frames</span><span style="font-size: large;"> </span></h2>
<br />
We can further configure the gallery to display multiple products at once, essentially grouping our frames into pages with multiple frames beside each other.<br />
<br />
Let’s begin by setting the Swipeable Gallery component properties "Show Frames" and "Swipe Frames" to 2.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/ElAdy0OtFP6_AhnJHUSPY1-B24wmet5JPkPK0bB5GdE7W4NEx30qBDa5-GoVWSFNCdNIow1l_Mo5b5LCP3HyxTII4Sw3FZ1rjncFdUbIbivlBTGSitiCJtYfc2611UEQDovNnDwL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="253" data-original-width="279" height="289" src="https://1.bp.blogspot.com/ElAdy0OtFP6_AhnJHUSPY1-B24wmet5JPkPK0bB5GdE7W4NEx30qBDa5-GoVWSFNCdNIow1l_Mo5b5LCP3HyxTII4Sw3FZ1rjncFdUbIbivlBTGSitiCJtYfc2611UEQDovNnDwL" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<br />
This will split the gallery's horizontal space between the available frames, and scale down the frames to fit (this behavior can be controlled by the "scaling" property). Clicks on each frame will still be recognized separately.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/8-UVmVilf8kmzUYMF_gnrJsXyV-5GMN88aVHJbaeXez_kCKfizjDLEEfjtz6zAvx1CBLKEvbnr2cC5Oe4BJhE2AR80HphdhEfT8qrJM3vpayW9uhevKe3ZRyitRXcb8QhZ1wsHtL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="261" data-original-width="312" height="167" src="https://4.bp.blogspot.com/8-UVmVilf8kmzUYMF_gnrJsXyV-5GMN88aVHJbaeXez_kCKfizjDLEEfjtz6zAvx1CBLKEvbnr2cC5Oe4BJhE2AR80HphdhEfT8qrJM3vpayW9uhevKe3ZRyitRXcb8QhZ1wsHtL" width="200" /></a><a href="https://2.bp.blogspot.com/4m-EhykpYO4bZjGIRP_GR-CcKD46COFWfaU2EvQJHLpMOr-NUsktAF-H1CXAYVw-ZH5qfnDf09LNQlBCnSq9m4OYKoQsPkIN9oqtV8SOU7UUyJW_DxBh0--pF9XtS5Yg1gRAE5Er" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="260" data-original-width="312" height="166" src="https://2.bp.blogspot.com/4m-EhykpYO4bZjGIRP_GR-CcKD46COFWfaU2EvQJHLpMOr-NUsktAF-H1CXAYVw-ZH5qfnDf09LNQlBCnSq9m4OYKoQsPkIN9oqtV8SOU7UUyJW_DxBh0--pF9XtS5Yg1gRAE5Er" width="200" /></a></div>
<br />
<br />
During autoplay we may still want to draw the viewer's attention to one item at a time, even if multiple images are visible. In order to support this, there is a "frame autoplayed" event which will be fired for each frame individually during autoplay, at a consistent interval. To enable this functionality we will use a custom JavaScript event handler to define the behavior we want. In this case, we'll dim the frames that are not currently activated.<br />
<br />
<br />
<ul>
<li><b>Target</b>: gwd-swipegallery_1 </li>
<li><b>Event</b>: Swipeable Gallery: Frame autoplayed </li>
<li><b>Action</b>: Custom </li>
<li><b>Custom Action: New</b>: </li>
<ul>
<li><b>Name</b>: gwd.fadeOtherFrames </li>
<li><b>Code</b>:</li>
</ul>
</ul>
<span style="text-align: center;"> var frames = this.querySelectorAll('.frame'); </span><br />
<div>
<span style="text-align: right;"> var activeFrame = this.getFrame(event.detail.id); </span><br />
for (var i = 0; i < frames.length; i++) { </div>
<div>
if (frames[i] == activeFrame) { </div>
<div>
frames[i].style.opacity = 1.00; </div>
<div>
} else { </div>
<div>
frames[i].style.opacity = 0.25;<br />
} </div>
<div>
} </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/r7s9fD2Cozy9GOg21Id9FmlJQHtJU6gPT9-ysNFRg36BtKrmoTRHsoCqo7mHhV-LPBubsX0UUtA1-7OGH49XUSFn49YkowBbCH9ouGUkN6mG6wDp3_SGNR1crIr5dg8RyQ8l9_KA" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="260" data-original-width="309" height="336" src="https://4.bp.blogspot.com/r7s9fD2Cozy9GOg21Id9FmlJQHtJU6gPT9-ysNFRg36BtKrmoTRHsoCqo7mHhV-LPBubsX0UUtA1-7OGH49XUSFn49YkowBbCH9ouGUkN6mG6wDp3_SGNR1crIr5dg8RyQ8l9_KA" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
When autoplay completes or is interrupted, the "autoplay ended" event will be fired. We'll use this to restore all frames to full visibility: </div>
<div>
<br /></div>
<div>
<ul>
<li><b>Target</b>: gwd-swipegallery_1 </li>
<li><b>Event</b>: Swipeable Gallery: Autoplay ended </li>
<li><b>Action</b>: Custom </li>
<li><b>Custom Action: New</b>: </li>
<ul>
<li><b>Name</b>: gwd.restoreFrames </li>
<li><b>Code</b>: </li>
</ul>
</ul>
var frames = this.querySelectorAll('.frame'); </div>
<div>
for (var i = 0; i < frames.length; i++) { </div>
<div>
frames[i].style.opacity = 1.00; </div>
<div>
} </div>
<div>
<br />
<br />
<br /></div>
<h2>
<span style="font-size: x-large;">Adding a carousel gallery</span> </h2>
<div>
<br /></div>
<div>
In this final section, we're going to get a bit fancier. To increase the emphasis on the active product, we're going to add a large Carousel Gallery component above our Swipeable Gallery, and put the same images in it. Whenever a frame in the Swipeable Gallery is autoplayed, hovered, or tapped, we'll also rotate the Carousel Gallery to display it. The end result will look something like this:
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/Sr5WxYyWAIYg8w4nvy6lCUpYtGBb_0fVRUd3U0nQ86NIl39BzCCEWQ9CSndaE1Q7ChnBmNhrBOFcXSlZoC9o4MfELi_-8jq8nKn5SkzUhs10PXN3XMTY-5iagxqDmt7WKuipnjyG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="264" data-original-width="312" height="338" src="https://2.bp.blogspot.com/Sr5WxYyWAIYg8w4nvy6lCUpYtGBb_0fVRUd3U0nQ86NIl39BzCCEWQ9CSndaE1Q7ChnBmNhrBOFcXSlZoC9o4MfELi_-8jq8nKn5SkzUhs10PXN3XMTY-5iagxqDmt7WKuipnjyG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Let’s start by dragging a new Carousel Gallery component to the stage. Select the Swipeable Gallery, go to its Properties, copy the list of Images and paste them in the corresponding Properties field for the Carousel Gallery. Next we’ll, set the Carousel Gallery's Start Frame property to 1, to match the Swipeable Gallery and use the Transform control to resize and lay out the galleries. </div>
<div>
<br /></div>
<div>
Now we'll add an event handler to have it follow along with the autoplay:
</div>
<div>
<ul>
<li><b>Target</b>: gwd-swipegallery_1 </li>
<li><b>Event</b>: Swipeable Gallery: Frame autoplayed </li>
<li><b>Action</b>: Custom </li>
<li><b>Custom Action: New</b>: </li>
<ul>
<li><b>Name</b>: gwd.syncCarousel </li>
<li><b>Code</b>: </li>
</ul>
</ul>
document.getElementById( </div>
<div>
'gwd-carouselgallery_1').goToFrame(event.detail.id);</div>
<div>
Then we'll add two more, which will respond to viewer taps and hovers. We'll also have these cancel the autoplay, if it's still active, since we don't want autoplay to suddenly move the carousel again after it's just moved in response to a mouse hover. </div>
<div>
<ul>
<li><b>Target</b>: gwd-swipegallery_1 </li>
<li><b>Event</b>: Swipeable Gallery: Mouse over a frame </li>
<li><b>Action</b>: Custom </li>
<li><b>Custom Action: New</b>: </li>
<ul>
<li><b>Name</b>: gwd.stopAutoplayAndSyncCarousel </li>
<li><b>Code</b>: </li>
</ul>
</ul>
this.stopRotation(); </div>
<div>
document.getElementById( </div>
<div>
'gwd-carouselgallery_1').goToFrame(event.detail.id);
</div>
<div>
<ul>
<li><b>Target</b>: gwd-swipegallery_1 </li>
<li><b>Event</b>: Swipeable Gallery: Frame tap </li>
<li><b>Action</b>: Custom </li>
<li><b>Custom Action</b>: gwd.stopAutoplayAndSyncCarousel </li>
</ul>
Finally, we need to prevent the viewer from swiping or clicking on the Carousel Gallery since it's not meant to be moved independently, but instead to track the movements of the Swipeable Gallery. We do this by using the tag tool to draw a plain element on top of the Carousel Gallery, to intercept any taps and swipes. This leaves us with the following stage layout and events: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/q6200CCiP0ZyWpG7_WM9_iu81fe7YlOCLa6V4135wM0p_muc3j803PoLR7428_53v-4FRkG_YgJSRMbmVYvUl_tmOIMLxoOxTtoKLwVrN9WLMFT1VHLNPpqC0CrqInMxVmxpwzpe" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="316" data-original-width="800" height="251" src="https://4.bp.blogspot.com/q6200CCiP0ZyWpG7_WM9_iu81fe7YlOCLa6V4135wM0p_muc3j803PoLR7428_53v-4FRkG_YgJSRMbmVYvUl_tmOIMLxoOxTtoKLwVrN9WLMFT1VHLNPpqC0CrqInMxVmxpwzpe" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
Click the Preview button, and you should see the galleries appear in your browser and start autoplaying. Try swiping through the lower gallery and watch the top one follow along, or click one of the lower gallery frames to exit the ad. </div>
<div>
<br /></div>
<div>
Feel free to take the gallery components for a spin, and let us know what you think in the blog comments! </div>
<div>
<span class="byline-author"><br /></span></div>
<div>
<span class="byline-author">Posted by Jeremy, Software Engineer</span></div>
Unknownnoreply@blogger.com944tag:blogger.com,1999:blog-8054151151845215223.post-68230104173406011932016-04-11T16:29:00.000-07:002020-10-05T14:53:43.444-07:00Five features to explore in Google Web DesignerSince the public launch of Google Web Designer it has been exciting to see so many features evolve and new features being released. We are very grateful for all the great feedback we get from all of you, which has helped us to shape and further refine the current set of features.<br />
<br />
So without further ado, let’s review five features and workflows you may find most useful in Google Web Designer.<br />
<br />
<br />
<h3>
<span style="font-size: x-large;">1. Fluid layouts </span></h3>
<br />
Historically Google Web Designer only supported visual authoring of static layouts, where all elements were absolutely positioned and had their top, left, width and height styles set in pixels. This works well when all the content has a fixed size but doesn’t work so well when the top-most container size varies. Even small changes can require all the elements to be manually re-positioned.
<br />
<br />
So in order to support authoring ‘fluid’ layouts, the first step we took was to allow users to use percentages when setting any of those positioning styles. Allowing elements size and position to be defined as a percentage of the size of their container lets them shrink and grow with the container, but keeps the overall structure unchanged. While this covers the simple case of having a single element, it does not make the layout fluid when elements have a mix of fixed and percent-based sizes. To assist in the latter case, we added a fluid layout checkbox that can be combined with the existing alignment, distribution and spacing to calculate the correct layout position.<br />
<br />
Here is an example to illustrate how the fluid layout checkbox works:<br />
Below you can see an element containing an image and a Tap Area component. The image has a width of 50% and the button has a fixed size width of 50px.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/1Jv9iiRtcHegJMoj_fngAYKlXQ8uceSEVwZbiWR67wy7KjkBTVlIG5BGMyVyVrAoXoFjHfkPKViw7ftQT7mPyVD3eFqUA3GPtjSrtJxMN7-8MxXoj7SxOaEWzXaBNG8EULq8EFF3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://4.bp.blogspot.com/1Jv9iiRtcHegJMoj_fngAYKlXQ8uceSEVwZbiWR67wy7KjkBTVlIG5BGMyVyVrAoXoFjHfkPKViw7ftQT7mPyVD3eFqUA3GPtjSrtJxMN7-8MxXoj7SxOaEWzXaBNG8EULq8EFF3" width="640" /></a></div>
<br />
If we shrink the container width down, the image element would automatically shrink too, as if scale were applied.<br />
<br />
On the other hand, the tap area would remain unchanged and bleed over the container’s right edge.
So let's try this: select both elements, and from the selection tool options check the Fluid layout option. Immediately after that click on the ‘space horizontally’ button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/iQOVHYQXVWDSjxYNPgINOWqfKmhWf_2sRgYX9g6lqN-hn8fmvn8iV_m41ONvxuUJUN11b0Dp-_fpnkZ-24g5JPdOvqgYaQs71CBaN2Ch27Q1xbepBwoJGRR_rhZzz5QCixmemqiH" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://1.bp.blogspot.com/iQOVHYQXVWDSjxYNPgINOWqfKmhWf_2sRgYX9g6lqN-hn8fmvn8iV_m41ONvxuUJUN11b0Dp-_fpnkZ-24g5JPdOvqgYaQs71CBaN2Ch27Q1xbepBwoJGRR_rhZzz5QCixmemqiH" width="640" /></a></div>
<br />
<br />
Because fluid layout is enabled and we are aligning to the container, space horizontally will then calculate the correct styles to apply to each element inside the container in order to keep the same layout. This results in both the image and tap area resizing proportionally to their container.<br />
<br />
In the following illustrations below you can see that we have shrunk and grown the size of the container while maintaining the layout.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/DRgcBV6nAhkMvN195-FB6M_Nvc7SdvGVX9tJUXICaYH9rduIlRuyKb0aFKNOKIEP29PIc4OoF6hYzzYWcD_5FLfIkNcbXlEjsu8UNIXKK__9PC7duCmhTcrkIgwZstnJ-RLZbkGb" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://2.bp.blogspot.com/DRgcBV6nAhkMvN195-FB6M_Nvc7SdvGVX9tJUXICaYH9rduIlRuyKb0aFKNOKIEP29PIc4OoF6hYzzYWcD_5FLfIkNcbXlEjsu8UNIXKK__9PC7duCmhTcrkIgwZstnJ-RLZbkGb" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/Dn31bbNCx8Gz-vtfsi65Cj5hlv_uZyUd5uIKNRClm3gWhAj6z--i9m7jx5BGmgn0IAKYC5SqRnthnhTSk71l7poPSRdsDtS0OpSsrTeBVXppQpGjaVfdv2OJ_hg1-stqUmH7sC_k" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="234" src="https://3.bp.blogspot.com/Dn31bbNCx8Gz-vtfsi65Cj5hlv_uZyUd5uIKNRClm3gWhAj6z--i9m7jx5BGmgn0IAKYC5SqRnthnhTSk71l7poPSRdsDtS0OpSsrTeBVXppQpGjaVfdv2OJ_hg1-stqUmH7sC_k" width="640" /></a></div>
<br />
<br />
<h2>
<span style="font-size: x-large;">2. Publish to Google Drive</span></h2>
<br />
Google Web Designer allows you to publish a document directly to Google Drive. At first it might seem that this is just an easy way to share your content or maybe have a separate backup of your published content. But by taking a few extra steps you can use this feature to preview your creative on any browser, desktop or mobile. Move through the steps below to enable serving your creative from Google Drive:<br />
<br />
<br />
<ol>
<li>Start by creating a document and when you are ready to publish, select ‘Publish to Google Drive”. </li>
<li>Enter your Google credentials. </li>
<li>Leave the default options in the publish dialog, and click on Publish. </li>
<li>Once publish is completed, you can now open your browser and navigate to: drive.google.com </li>
<li>At the top of your list of files (if you sort by date) you should see a new folder named after your document. </li>
<li>Right click on that folder and select ‘Share…’ </li>
<li>Click on get shareable link which enables link sharing on that folder. <div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/tK705VBG1XsNlbOtCQ0_UaaTCwvWIrDOPZEw21YaLrFq_0SD2B5_sZ2upR6ilkw6t9R2ljxqhZPESY0UBPWESbIv_fVQKxAlP7d-xgm9e4Q_oBeWRsfevGxYXjOewUh-05asw4dI" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="228" src="https://3.bp.blogspot.com/tK705VBG1XsNlbOtCQ0_UaaTCwvWIrDOPZEw21YaLrFq_0SD2B5_sZ2upR6ilkw6t9R2ljxqhZPESY0UBPWESbIv_fVQKxAlP7d-xgm9e4Q_oBeWRsfevGxYXjOewUh-05asw4dI" width="640" /></a></div>
</li>
<li>Now double click that folder to go inside of it. You should now see your published files. </li>
<li>Right click on index.html and again click on ‘Share…’ </li>
<li>In the dialog that opens click on the ‘get shareable link’. At this point you will see the shareable link for that file. Here is what that link will look like:
https://drive.google.com/file/d/<b>0ByYVu2aiDQ0SMDcyaFFZa0NjUjg</b>/view?usp=sharing </li>
<li>Copy the ID (the part of your link that’s like the bolded part, above) in a separate text document. </li>
<li>Append that ID to the following url to preview serve you document in any browser.
www.googledrive.com/host/[ID] (replace [ID] with your file ID). </li>
</ol>
What is really cool about this, is that if you later make a change to the document, publish again and refresh your browser, you will now see the changes to your document. Publish to Drive will always override your existing content unless you specify a different location.<br />
<br />
<h2>
<br />
<span style="font-size: x-large;">3. BYOC</span><span style="font-size: x-large;"> </span></h2>
<br />
Bring (build) your own component. In Google Web Designer we try to have good set of built-in components. Some of those components are generic yet they do allow a bit of customization. As we continue building components and improving the existing ones, we also want to make sure users can have access to tailored components. To ensure this, we have added the ability to add your own components to Google Web Designer. The best part of this feature is that each custom component is packaged in a zip file, which can easily be shared. Once imported the custom components will behave just like one of the native components.<br />
<br />
You can add a custom component by simply clicking on the ‘+’ button in the component panel and select the .zip file that contains your custom component. Once you drag and drop the component on stage, it is added to the document and can immediately be used. A custom component can also specify any number of external dependencies in the component manifest, which will be automatically imported into your document.<br />
<br />
For more information on custom components, visit this link: <a href="https://support.google.com/webdesigner/topic/6175711?hl=en&ref_topic=6175722" target="_blank">Building a custom component</a>.<br />
<br />
<h2>
<br />
<span style="font-size: x-large;">4. Custom swatches</span></h2>
<br />
Having a great color palette often makes a big impact when creating rich content. Google Web Designer’s color panel enables the user to pick a large number of default colors, create new colors and design complex gradients.<br />
<br />
The really cool part about creating gradients or custom colors is the ability to save it as a custom swatch. If you click on the swatches tab, you will see the list of default colors, and at the end of the list is a ‘+’ icon. A click on that icon will save the currently selected color or gradient as a custom swatch.<br />
<br />
<h2>
<br />
<span style="font-size: x-large;">5. Groups</span><span style="font-size: large;"> </span></h2>
<br />
Last but not least is Google Web Designer’s Group feature. Grouping allows you to create reusable objects that can be placed in a document, much like components. The benefit of groups is that any changes made to the group will be reflected every place the group is used. This eliminates the need to copy and paste, which also provides the added benefit of a smaller file size since we only need to store one instance. When publishing a document you will have the option to ‘unpack’ all instances which will replace those instances with the actual content of the group. Or you can decide to have this replacement done at runtime, which will decrease the file size as well.<br />
<br />
Another great benefit of groups is that when there are no instances in your document, groups are stored in a separate companion file. This means that they will not count towards your total file size! In other words you don’t have to remove unused groups as long as no instances are placed in your document.<br />
<br />
Groups will also encapsulate animations. When you create a group from elements that are animated, those animations are now part of your groups. Any instances placed on stage will animate relative to where they are positioned.<br />
<br />
Finally groups can be used to create dynamic galleries which can have multiple elements in each frame instead of a single image. For more info on dynamic galleries visit this link: <a href="https://support.google.com/webdesigner/answer/6321678?hl=en&ref_topic=3243982" target="_blank">Dynamic galleries</a>
<br />
<br />
So there you have it, a few of our top features for you to try. I hope you found this useful and please let us know what you think in the comments or feel free to write in about your favorite features!<br />
<span class="byline-author">Posted by Valerio, UX Engineer</span>
Unknownnoreply@blogger.com161tag:blogger.com,1999:blog-8054151151845215223.post-60303481101424064532016-04-04T17:02:00.000-07:002020-10-05T14:53:43.444-07:00Interactive Design with CSS and Events<h1>
Introduction </h1>
<br />
One of Google Web Designer’s strengths is that it allows for content creation without requiring users to be seasoned coders. With a few clicks, drags and keypresses you can create an animated and event-driven HTML5 experience without any hand-coding at all.<br />
<br />
While the usefulness of visual authoring is obvious, the web platform is powerful and ever growing; so knowing a bit of CSS and JavaScript can give you a valuable toolset in creating engaging online experiences.<br />
<br />
In this article, we’ll observe some of the CSS created when authoring a transition effect and combine it with a small amount of JavaScript to have tighter control of the visual state of elements. Some basic understanding of HTML and CSS is assumed.<br />
<br />
<h1>
The Design </h1>
<br />
For the design, our goal is to create an HTML “ferris wheel” effect by using Web Designer’s three-dimensional transformation tools, the Timeline and the CSS Panels, among other key features. For now, we’ll be rotating simple text elements.We’ll also want to control the animation playback using triggering element.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/GTgR3kN9LOW1jz3dyGbnacy3CcEwMaMKmunJg9uo4JrfTYb5FJdVA7UHUYAwDPYMo6ifbA6r08594olwl0klH9tqGhfLsV8qirsPl_Xa_NxIECwFPXhgnWneFcA1e62i7D1rpBqm" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/GTgR3kN9LOW1jz3dyGbnacy3CcEwMaMKmunJg9uo4JrfTYb5FJdVA7UHUYAwDPYMo6ifbA6r08594olwl0klH9tqGhfLsV8qirsPl_Xa_NxIECwFPXhgnWneFcA1e62i7D1rpBqm" /></a></div>
<br />
<br />
Let’s start by creating the text elements, adjusting their font styles and position, and adding rotational animation.<br />
<br />
<h2>
Create Text Elements </h2>
<br />
Using the Text Tool, click near the top of the stage to create a paragraph element and type some text. Our design involves presenting a list of 4 destinations, so let’s type “San Francisco” as our first destination.<br />
<br />
In the CSS Panel, you’ll notice a rule was created to apply styles to your text element -- it should have a selector reading something like “.<b>gwd-p-1234</b>”. This selector might seem like gibberish to you, and well, you’d be right. This is because Web Designer doesn’t know what you plan to use the CSS rule for, so it assigns a generic selector. Updating these selectors to be more meaningful will make your code easier to read and understand.<br />
<br />
With the CSS Panel open, click on the selector to activate it for edits. Change the selector to ‘<b>.label</b>’. Next, use the Text Tool’s toolbar to set the font family, font size and color to your preference. I’ve chosen large, light text using the Google Font “Luckiest Guy”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/c6Y_1mYBv5fYj3UjRCLQivKt9HKxZrA7X8WDvES-LnVz0J3UvMpowLj0W4592Vr8wk5614Z9DyM3MauzVDugkMeF9Un2AG2yS9EMU5o7Z-VoAUoQTqmrzPPSqt-c1kr9kPpEDW_D" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="481" src="https://3.bp.blogspot.com/c6Y_1mYBv5fYj3UjRCLQivKt9HKxZrA7X8WDvES-LnVz0J3UvMpowLj0W4592Vr8wk5614Z9DyM3MauzVDugkMeF9Un2AG2yS9EMU5o7Z-VoAUoQTqmrzPPSqt-c1kr9kPpEDW_D" width="640" /></a></div>
<br />
<br />
Now, switch over to the Selection Tool, copy/paste the current selection and drag downward (or hold Shift+Down Arrow) to move the copy directly below the original. Switch back to the Text Tool and change the label’s text to something new (e.g. “Mountain View”).<br />
<br />
Hit Ctrl+A (or Command+A on OS X) to select both paragraphs, right-click either one and select “Wrap” from the context menu. This will create a DIV to surround our two paragraphs. Feel free to update the generated CSS rule selector to something meaningful for added maintainability (keeping with the wheel analogy, I’ve chosen “<b>.spoke</b>” for my selector). While we’re at it, right-click and again select “Wrap” from the menu, this time changing the generated CSS selector to “<b>.wheel</b>”. Our “wheel” will eventually contain multiple “spokes”, but we’ll get to that later.<br />
<br />
<h1>
<br />Animate the container </h1>
<br />
Now that we have a bit of content, let’s work on our animation. We’ve already wrapped our text elements in a DIV, so rotating that DIV should spin the inner text elements on the correct path. With the outer element selected (the one using the selector “<b>.wheel</b>”), use the Timeline to set a keyframe at 1 second. You can apply rotation at that keyframe by either using the 3D Object Rotate Tool or the Properties Panel. Since we know the exact values to enter (<b>360 degrees</b> of rotation along the X-axis), using the Properties Panel here is a more efficient workflow.<br />
<br />
We’ll want this animation to loop indefinitely, so use the animation repeat control on the appropriate Timeline track to set animation looping to “Infinite”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/T0QZ7S8fiHgwckEbI9wLxQ3G1_wlf9n8Xl7xF9yGfeg6qHMXkTkZgtpbZM-lp4-DJ4G0cnqs5WfmnimrucX4YXftAEJ9T1TyFUxJQ_xEE49h53HCZUsvJMQfiM9DR0HdWcyyLZlK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="365" src="https://1.bp.blogspot.com/T0QZ7S8fiHgwckEbI9wLxQ3G1_wlf9n8Xl7xF9yGfeg6qHMXkTkZgtpbZM-lp4-DJ4G0cnqs5WfmnimrucX4YXftAEJ9T1TyFUxJQ_xEE49h53HCZUsvJMQfiM9DR0HdWcyyLZlK" width="640" /></a></div>
<br />
<h2>
An unexpected twist </h2>
<br />
A handy feature of Web Designer’s Timeline is animation scrubbing. Click and drag the Timeline’s tick marker back and forth to get a preview of our newly created animation. You’ll notice our “ferris wheel” is behaving a bit unexpectedly. While the path of rotation is what we want, the text labels do not remain upright -- a desired quality in both textual labels and ferris wheel cars.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/i_AU93rdOKhNJh7fratllcIMLd4uz-Q4L-qF8g2NrIsdzXGALqb-1nV9P5BMN-SPJIqiRo8cuEC58hSmVuOyUKAmv-s0P_N3bU0YKk9XdxnRZjhAi7ygfL8jpvnnmgjySolwnv2e" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://1.bp.blogspot.com/i_AU93rdOKhNJh7fratllcIMLd4uz-Q4L-qF8g2NrIsdzXGALqb-1nV9P5BMN-SPJIqiRo8cuEC58hSmVuOyUKAmv-s0P_N3bU0YKk9XdxnRZjhAi7ygfL8jpvnnmgjySolwnv2e" width="626" /></a></div>
<br />
<br />
To ensure the text remains legible, we’ll add a counter-rotation animation to our labels.<br />
<br />
<br />
<h1>
Apply counter-rotation animation </h1>
<br />
With the Selection Tool activated, double-click the “spoke” element. This changes the drawing container and allows us to access our label elements once again for editing. For each label, add a keyframe at 1s in its Timeline, and set the X-axis rotation at that keyframe to <b>-360 degrees</b> using the Properties Panel.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/59oD9Dm7Tu-M_WJ6kCfk-ZZF4pynWHnitAjRYOFSoRCTUnex2MIPWJ1Yyu8Q6OPgLzrcOV_NA-l0JPz6vT44XSoM5CusKVNaFyynqcqcqecY6VclN84SV9fGYE65ERUiG5-8U_eD" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="466" src="https://3.bp.blogspot.com/59oD9Dm7Tu-M_WJ6kCfk-ZZF4pynWHnitAjRYOFSoRCTUnex2MIPWJ1Yyu8Q6OPgLzrcOV_NA-l0JPz6vT44XSoM5CusKVNaFyynqcqcqecY6VclN84SV9fGYE65ERUiG5-8U_eD" width="640" /></a></div>
<br />
<br />
The animations should also have looping set to “Infinite.” Another pass at scrubbing the Timeline animation should yield much better results.<br />
<br />
<h1>
Adding another “spoke” </h1>
<br />
The design calls for 4 destinations to be listed, so naturally, we’ll add another “spoke” to the wheel. We can do this quickly by copying and pasting the existing spoke element (containing two labels). The second spoke is now laying on top of the first, but it should really intersect it at the center. We can achieve this by rotating it about its X-axis by <b>90 degrees</b>.<br />
<br />
You’ll notice the pasted element will already have animations listed in the Timeline. These are the copies of the original counter-rotation animation we used for the first set of labels, but now we must update them to make up for the fact that they are rotated an additional 90 degrees. For each of these two labels, set X-axis rotation in the first keyframe to <b>270 degrees</b> and <b>-90 degrees</b> in the last. Next, use the Text Tool to update the strings within the new labels. I’m sticking to California cities, and so let’s add “Monterey” and “Santa Barbara”.<br />
<span style="background-color: #f9cb9c;"><br /></span>
<span style="background-color: #fce5cd;">NOTE! You may find it easier to edit your text by temporarily rotating the stage to get a better view. To do this, select the 3D Stage Rotate Tool and click and drag a point on stage around to get a different perspective. </span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/xCyDXq7cGwRlZiaMlGIy6dCZHpgcSC_kEWRzO1kpYYvIqztEOFag3K5Z51f-NkdoP0BEHQ5CFVJwRxfqRaUEk7M7AtZ93D3krOmTFQnhFOD8GvAzio4z9uTBb-g1TG034OATSkuX" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="487" src="https://2.bp.blogspot.com/xCyDXq7cGwRlZiaMlGIy6dCZHpgcSC_kEWRzO1kpYYvIqztEOFag3K5Z51f-NkdoP0BEHQ5CFVJwRxfqRaUEk7M7AtZ93D3krOmTFQnhFOD8GvAzio4z9uTBb-g1TG034OATSkuX" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: start;">The Text Tool allows for editing in 3D. Use the 3D Stage Rotate Tool to get a better angle for your edits. </span> </td></tr>
</tbody></table>
<br />
<h1>
Adding an animation control </h1>
<br />
To control the animation, we’ll add another text element (using the Text Tool) to serve as a button. Since this control will toggle playback, type “Toggle” as the content of your text element. In the Properties Panel, assign an ID attribute; ID’s are needed on target elements before using Web Designer’s event listening feature.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/lZK1Sxpvfe5P6XEjZy_bxzq7RMDsNKRPaB7ge_z5ZBhApH1fzYNMgdexAfvBNF0Rr2rCnb9t1quEMw5aGwisJ_xkgphsTE54MX7zZc-88U3lICB7EXs3rL2NBWJenbbhiC_u3oPJ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="274" src="https://3.bp.blogspot.com/lZK1Sxpvfe5P6XEjZy_bxzq7RMDsNKRPaB7ge_z5ZBhApH1fzYNMgdexAfvBNF0Rr2rCnb9t1quEMw5aGwisJ_xkgphsTE54MX7zZc-88U3lICB7EXs3rL2NBWJenbbhiC_u3oPJ" width="640" /></a></div>
<br />
<br />
After assigning the ID, right-click the new element and select “<b>Add event…</b>” to launch the Events Dialog. Select <b>Mouse > Click, Timeline > Toggle Play</b>, select your current page and click <b>Save</b>. You should now notice this new event configuration listed in the Events Panel.<br />
<br />
<h1>
Final steps</h1>
<br />
So far, we’ve create an HTML structure that allows us to apply a rotation to invoke a spinning wheel effect. We’ve also wired an event listener a toggle button using the Events Dialog to pause and resume animation playback on the user’s demand. Let’s see if it works!<br />
<br />
To see your design working in a browser, click the <b>Preview</b> button and select your preferred browser. Test out the toggle button. What do you see?<br />
<br />
You should notice that pausing the animation using the button only affects the top-level animation -- the labels continue to rotate along their X-axis:<br />
<span style="white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/t1aAfnYblTxKW4YJM25RpnINHuPzjUH5FA7v4FTaHZL6n31KWRK1iExv7qWbh73mcJouiMZpgVtw7hnXyn76_71NXP7hKJZ4kuTYTIZE4JKutDNED8su1RNP7S5ePwcO2_K4IKU9" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="https://3.bp.blogspot.com/t1aAfnYblTxKW4YJM25RpnINHuPzjUH5FA7v4FTaHZL6n31KWRK1iExv7qWbh73mcJouiMZpgVtw7hnXyn76_71NXP7hKJZ4kuTYTIZE4JKutDNED8su1RNP7S5ePwcO2_K4IKU9" width="640" /></a></div>
<br />
<span style="white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span>
<span style="white-space: pre-wrap;"><span style="font-family: inherit;">To fix this, let’s jump into Code View and take a closer look at our CSS.</span></span><br />
<br />
In Code View, find a block of CSS resembling the following:
<br />
<br />
#page1.gwd-pause-animation .gwd-gen-1cvqgwdanimation {<br />
<b>animation-play-state: paused !important;</b><br />
}<br />
<br />
This CSS rule relies on the class “<b>gwd-pause-animation</b>” to be applied to the page’s root element in order to pause playback, <b>but only</b> for the top-level element. Change the code to the following to also target the animations on labels:<br />
<br />
#page1.gwd-pause-animation .gwd-gen-1cvqgwdanimation,<br />
<b><span style="color: #38761d;">#page1.gwd-pause-animation .label</span></b> {<br />
animation-play-state: paused !important;<br />
}<br />
<br />
With the animation pausing rule modified, let’s give our toggle button another test run. Hit Preview one more time. The toggle button should now work!<br />
<br />
<h1>
Keep it rolling </h1>
<br />
In this exercise, you have successfully built a pausable, three-dimensional animation using JavaScript events and some custom CSS; techniques you can utilize to further enhance your animation projects! We’ve covered a lot of ground in this exercise, but this only scratches the surface of what is possible with Google Web Designer! Continue to follow along with us and let us know what you think in the blog comments!<br />
<br />
<span class="byline-author">Posted by Eric, UX Engineer</span>
Unknownnoreply@blogger.com43tag:blogger.com,1999:blog-8054151151845215223.post-87997189955549244542016-03-28T15:09:00.002-07:002020-10-05T14:53:43.446-07:00Using Pages with custom code in Google Web DesignerAs 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.<br />
<br />
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.<br />
<br />
<h1>
<span style="font-size: x-large;">
Looping between animation sequences </span></h1>
<br />
Let’s assume we have this storyboard:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/_vJvrdhHChEQfTT77ctRgXk9-u_Zx9M1iQm4TkFEaWnEmSkscGse7szQTcq87LJCaTVu-aaXS64hlVmLoOErXdJXMHVzQ8PblPuT6aZ4NX8ixxYRmQNK2CbZ0zHCCLNWToc6Ocmh" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://2.bp.blogspot.com/_vJvrdhHChEQfTT77ctRgXk9-u_Zx9M1iQm4TkFEaWnEmSkscGse7szQTcq87LJCaTVu-aaXS64hlVmLoOErXdJXMHVzQ8PblPuT6aZ4NX8ixxYRmQNK2CbZ0zHCCLNWToc6Ocmh" width="640" /></a></div>
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<br />
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.<br />
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/ROKF2MT1barvN86n8zTCbeKtSQ-eq5RJqOeOz30niTo4mndgRcKnxQRparMHCFl2FM590S7zPVy2oOvYyE2IvuFthYKhwWkDLpfmk143Hck1TLvxudGKtzn7ErPc4qTVe0HG0ezL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/ROKF2MT1barvN86n8zTCbeKtSQ-eq5RJqOeOz30niTo4mndgRcKnxQRparMHCFl2FM590S7zPVy2oOvYyE2IvuFthYKhwWkDLpfmk143Hck1TLvxudGKtzn7ErPc4qTVe0HG0ezL" /></a></div>
<br />
<ul>
<li>Target: document.body</li>
<li>Event: Google Ad > Ad Initialized</li>
<li>Action: custom</li>
<li>Custom Code: see the image above</li>
</ul>
<br />
<ul>
</ul>
<br />
<br />
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:
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/crh15OpVu8tog0fhnr-DRdhX-XKyIneaYwtfuCbeso_oGS3wINER0JX4-jDZQASb4lgGeESBI4o8seYxqNahWrNqkr7somyPCg5T67DINthZyZGITzx1vLLDKGe_MUbY7C6bDEEV" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/crh15OpVu8tog0fhnr-DRdhX-XKyIneaYwtfuCbeso_oGS3wINER0JX4-jDZQASb4lgGeESBI4o8seYxqNahWrNqkr7somyPCg5T67DINthZyZGITzx1vLLDKGe_MUbY7C6bDEEV" /></a></div>
<br />
<ul>
<li>Target and Event are automatically detected after clicking the event marker in the timeline.</li>
<li>Action: Page Deck > Go to Page</li>
<li>Configuration: Page ID: Page B.</li>
</ul>
<br />
<br />
This will tell Google Web Designer to move to page B after animations on page A are finished.<br />
<br />
Go to page B, and create the animation you want in this phase of your ad.<br />
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.<br />
Create a new event, but this time, under Action, select “Add custom action” and add the following custom code:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/f4_464V-Po4moO_UKzBGTwxbWwmnNJGKLggGyI1uclswxnCnhGBwJC2n5CIAdXRxHMqBAxSkFe0sVIgnDBmdEUh09SeM4EgmFMq3jj8hA5jdUVqn0AJGLRJeVa9QAbJ6sKYQP5Sf" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/f4_464V-Po4moO_UKzBGTwxbWwmnNJGKLggGyI1uclswxnCnhGBwJC2n5CIAdXRxHMqBAxSkFe0sVIgnDBmdEUh09SeM4EgmFMq3jj8hA5jdUVqn0AJGLRJeVa9QAbJ6sKYQP5Sf" /></a></div>
<br />
<br />
Let’s have a look at the code:<br />
<br />
gwd.currentLoop++;<br />
if (gwd.currentLoop < gwd.totalLoops) {<br />
//Loop the animation, and go to page A<br />
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageA');<br />
} else {<br />
//No more loop, go to page C<br />
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageC');<br />
}<br />
<br />
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.<br />
<br />
This lets us create a complex animation with multiple sequences without a lot of duplication or unnecessary layers.<br />
<br />
<br />
<br />
<br />
<h2>
<span style="font-size: x-large;">
Postponing asset loading </span></h2>
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
<i><span style="color: #cc0000;">Did you know?</span></i> 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.<br />
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/cBi4IMZZrApnUZ9hEE859CxwDaDXjS8sndkv8lhNy-7_HcbcGeUblFAgPN-x-4t9HfUVnrlaJgqN86Rq_Rsv6S4FCnN0xPMQszzpniVgwcdWJRBNZwvvrDbfS6QQcqo86ZYEW1Qh" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/cBi4IMZZrApnUZ9hEE859CxwDaDXjS8sndkv8lhNy-7_HcbcGeUblFAgPN-x-4t9HfUVnrlaJgqN86Rq_Rsv6S4FCnN0xPMQszzpniVgwcdWJRBNZwvvrDbfS6QQcqo86ZYEW1Qh" /></a></div>
<br />
<br />
<br />
<ul>
<li>Target: document.body</li>
<li>Event: Ad.initialized</li>
<li>Action: custom</li>
</ul>
<br />
<br />
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.<br />
<br />
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;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/H-6d-uHpx9o8VqvjPxLHoK9nvJN8ej9u8TBgVRe3OScKFkIDn8CFg_uKBiqWE3IVFxgx4L3F-i--cya9bI9jT8lzqH1Qj3AWs966Su2_UHnFapZJqzx7jlMS7H6dt4rsaTJhJEhR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/H-6d-uHpx9o8VqvjPxLHoK9nvJN8ej9u8TBgVRe3OScKFkIDn8CFg_uKBiqWE3IVFxgx4L3F-i--cya9bI9jT8lzqH1Qj3AWs966Su2_UHnFapZJqzx7jlMS7H6dt4rsaTJhJEhR" /></a></div>
<br />
<br />
We are now changing the state of our global variable every time there is an user interaction (rollover) on the first video.<br />
<br />
Finally, we need to add one last event:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/mypjQkxpFhutyYOykhmdF388AJza2loraytxvZjeJbPPs8HFJryDJaL41TyVjIuBlY2ULzo0aG57saWZDgvt_AERRgygBELD7sW6VUubfSI-GFZYNGEfYcgq14W17x0hFGiDA4Id" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/mypjQkxpFhutyYOykhmdF388AJza2loraytxvZjeJbPPs8HFJryDJaL41TyVjIuBlY2ULzo0aG57saWZDgvt_AERRgygBELD7sW6VUubfSI-GFZYNGEfYcgq14W17x0hFGiDA4Id" /></a></div>
<br />
<br />
<br />
<ul>
<li>Target: video on the first page</li>
<li>Event: Video > ended</li>
<li>Action: custom</li>
</ul>
<br />
<br />
The custom code we’re using looks like this:
<br />
<br />
if (gwd.userInteracted) {<br />
document.querySelector('[is="gwd-pagedeck"]').goToPage('page1_1');<br />
}<br />
<br />
Here, we are checking to see if an interaction has happened, and when it has, we move to the second page.<br />
<br />
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.<br />
<br />
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.<br />
<span class="byline-author"><br /></span>
<span class="byline-author">Posted by Nicola, Software Engineer</span>Unknownnoreply@blogger.com37tag:blogger.com,1999:blog-8054151151845215223.post-78429907520168768312016-03-21T09:44:00.001-07:002020-10-05T14:53:43.445-07:00Helping developers bring their creative vision to lifeOver 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 <a href="http://doubleclickadvertisers.blogspot.com/2015/11/dynamic-creative-comes-to-google-web.html" target="_blank">dynamic creative workflow</a>.<br />
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/yt77uBztsTk/0.jpg" frameborder="0" height="343" src="https://www.youtube.com/embed/yt77uBztsTk?feature=player_embedded" width="624"></iframe><br />
<br />
<br />
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.
<br />
<br />
<br />
<ul>
<li><b>How would you rate Google Web Designer’s ability to help hand-coders who don’t like to use similar products?</b> 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. </li>
</ul>
<ul>
<li><b>Is working with external libraries using Google Web Designer still a problem?</b> 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. </li>
</ul>
<ul>
<li><b>Manipulating animations with less development time is the biggest challenge for developers. How did you approach this while using only Google Web Designer?</b> 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. </li>
</ul>
<ul>
<li> <b>How easy/difficult is it to use for a novice developer?</b> 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. </li>
</ul>
<br />
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.<br />
<br />
Want to know how Tristan and team built the ad? <a href="http://www.richmediagallery.com/detailPage?id=11593" target="_blank">Download the source code here to know more!</a><br />
<span class="byline-author"><br /></span>
<span class="byline-author">Posted by Tristan, Sales Animation Interactive Designer</span>
Unknownnoreply@blogger.com242tag:blogger.com,1999:blog-8054151151845215223.post-22160652274264726432016-03-14T13:53:00.001-07:002020-10-05T14:53:43.440-07:00Creating Looping Animations with Google Web DesignerA 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.<br />
<br />
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:<br />
<br />
<ul>
<li>How to use the Timeline to create perfectly smooth looping animations. </li>
<li>How to use the Wrap and Group features of Google Web Designer. </li>
<li>How to edit your new group directly from the Asset Library. </li>
<li>How to create new instances of the group from the Asset Library. </li>
</ul>
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/Ces25YTfX-DcFA0LoSJevwMO7OKKfuiijZqi1YDmOkCQ7KFTCM7bf4V0BnMl8fyBNMkBE3QtxVf6mhOusOrN497jDkxVM4HE00ifUB03HR01o_e7UuSK67yje3_ScrGGH_S6gxE3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="https://4.bp.blogspot.com/Ces25YTfX-DcFA0LoSJevwMO7OKKfuiijZqi1YDmOkCQ7KFTCM7bf4V0BnMl8fyBNMkBE3QtxVf6mhOusOrN497jDkxVM4HE00ifUB03HR01o_e7UuSK67yje3_ScrGGH_S6gxE3" width="640" /></a></div>
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/ghsqWOqfsdrwmQwMPDoJxKOB_k1IWkfRPoRKLNYsllt6nn8hFbeDOyQSNVh0A2BuBLDJUG4pBXIakAiZy6dXHY7lCQHqphDU_nzKnYe3Tfe_JUmYr9q247xs_8NxSBjrgyHR3J6r" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="https://3.bp.blogspot.com/ghsqWOqfsdrwmQwMPDoJxKOB_k1IWkfRPoRKLNYsllt6nn8hFbeDOyQSNVh0A2BuBLDJUG4pBXIakAiZy6dXHY7lCQHqphDU_nzKnYe3Tfe_JUmYr9q247xs_8NxSBjrgyHR3J6r" width="400" /></a></div>
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d0-5002-956b-7857707faf91"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<br />
<br />
This creates a start and end keyframe that have identical states. Next, add a keyframe at 0.24 second:<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d3-2cb7-c11b-f5ed2862f1b4"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/tHpsp9lBrHZsRpDgCHoqgmegt5teDfApag260xP79KytvCVnOUyaKpSUKhQlirceuAJSVoUNlxWYuP5nf9B_c5gKTkZSITt68kk3hYcuh-g0GgyFFFI7UI68xeIpzEiTVTY8rbiB" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://2.bp.blogspot.com/tHpsp9lBrHZsRpDgCHoqgmegt5teDfApag260xP79KytvCVnOUyaKpSUKhQlirceuAJSVoUNlxWYuP5nf9B_c5gKTkZSITt68kk3hYcuh-g0GgyFFFI7UI68xeIpzEiTVTY8rbiB" width="400" /></a></div>
<br />
<br />
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:<br />
<br />
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/ITKIYVfn-NqV1faqh25ouYyUWf_3eZAlL72fl7LQCnnqW72QC4VXAg1hNUkIfUKyr0YD_i0EHxcPehKQxP8B9dhzYDkBWt4vyKlB0_4R1tHrgYukqj1Tn_cbSH8y2XQyzNFpXCZJ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/ITKIYVfn-NqV1faqh25ouYyUWf_3eZAlL72fl7LQCnnqW72QC4VXAg1hNUkIfUKyr0YD_i0EHxcPehKQxP8B9dhzYDkBWt4vyKlB0_4R1tHrgYukqj1Tn_cbSH8y2XQyzNFpXCZJ" /></a></div>
</div>
<br />
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.<br />
<br />
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:<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d5-f410-ad9f-688025b38d27"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/8OMvg3NPbpnQO59fT0EAvHeVTFa3MvdCr1XtsKjmuglWccD_Z2egzmQN0i88Lxo4dz1FrG9Zpry9udqv9a7rM4SX6pbAMWuxIIeI3OHribS3nmrH5mhMWeZyn1gldAdYTRE4XP_P" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="89" src="https://1.bp.blogspot.com/8OMvg3NPbpnQO59fT0EAvHeVTFa3MvdCr1XtsKjmuglWccD_Z2egzmQN0i88Lxo4dz1FrG9Zpry9udqv9a7rM4SX6pbAMWuxIIeI3OHribS3nmrH5mhMWeZyn1gldAdYTRE4XP_P" width="640" /></a></div>
<br />
<br />
You can preview your animation to make sure it works the way you expected.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d7-ef88-1fba-bdb634b9bc55"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/UsnheXPFPh9xlN39gCEUL0Hk8il4Y7aalQcJqwB5_GxK2iWliagoOv9kcmaKblxu6ZgBfp4x6GOMOC5uiegWU0Uet-Vv6NlDqLHjq_oPtZXm5usZzI9VbrV8MKEma0MToXRuLFGD" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://1.bp.blogspot.com/UsnheXPFPh9xlN39gCEUL0Hk8il4Y7aalQcJqwB5_GxK2iWliagoOv9kcmaKblxu6ZgBfp4x6GOMOC5uiegWU0Uet-Vv6NlDqLHjq_oPtZXm5usZzI9VbrV8MKEma0MToXRuLFGD" width="400" /></a></div>
<br />
<br />
When that is done, the new group will appear as an asset in the Asset Library:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/pB4Z2lCMIMW3GfFNnCT69NY70-D1hB0CHRe0I05uWUXp3n4DVOAvMjgofUbB57rrtCHcTg3gV4RgGkTfngHkd6XsaDx0y0I796t0V0saoSkGcYLQiLGFzMOTszKPE1HVDvv_lC9m" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://3.bp.blogspot.com/pB4Z2lCMIMW3GfFNnCT69NY70-D1hB0CHRe0I05uWUXp3n4DVOAvMjgofUbB57rrtCHcTg3gV4RgGkTfngHkd6XsaDx0y0I796t0V0saoSkGcYLQiLGFzMOTszKPE1HVDvv_lC9m" width="252" /></a></div>
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d8-864e-b090-a4f498009d80"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<br />
You can now easily drag-and-drop instances of the animation onto the stage:<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d8-f030-560a-5477528ccdb9"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/4GbWJVEw9x8ZZO1MkZt7jgkcZX78psa3W6X6_djoObV5YoJs-4cZGdNNkbSl34hsWAiNPFeN57Q3P8kyQyL2mxBnMpdSTrK3IRMRzZwbsjh-uZu97ZmTJRSaOvGGEtLwFDSs2C9L" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://4.bp.blogspot.com/4GbWJVEw9x8ZZO1MkZt7jgkcZX78psa3W6X6_djoObV5YoJs-4cZGdNNkbSl34hsWAiNPFeN57Q3P8kyQyL2mxBnMpdSTrK3IRMRzZwbsjh-uZu97ZmTJRSaOvGGEtLwFDSs2C9L" width="400" /></a></div>
<br />
<br />
Here we have added three more instances to the stage. When you preview the animation, they will all animate in sync with one another.<br />
<br />
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.<br />
<br />
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:<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76d9-943d-bfbc-371b7492be55"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/LVK4fluG0YBCuOhjioXvGL75EysAFakug4-cjHmjlZoUjKj2LdRQqal4hFc8WI3EcGFahkHXVwTqy8Tmc920PLeWBIz1BWZ77bQp_8Fwvz-ieE2g8dYao1TeVNGsNyOfpkH2_-8X" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="321" src="https://4.bp.blogspot.com/LVK4fluG0YBCuOhjioXvGL75EysAFakug4-cjHmjlZoUjKj2LdRQqal4hFc8WI3EcGFahkHXVwTqy8Tmc920PLeWBIz1BWZ77bQp_8Fwvz-ieE2g8dYao1TeVNGsNyOfpkH2_-8X" width="640" /></a></div>
<br />
<br />
Notice that the DOM breadcrumb indicator just above the Timeline shows that you are now within the wrapper DIV of the group.<br />
<br />
Select the middle keyframe and use the Color panel to change the color of the element to blue:<br />
<br />
<div style="text-align: center;">
<span id="docs-internal-guid-0df55408-76da-25e6-399b-7ef4543d7ed5"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/Frgx2Lr4QpeSEmefOCKvJQaHcf_jBnNDbgaX4w4P0TNIykrrRtXdvmXyYSsMygzKxCUDyHoK_NIo9qiU5Jbkx0eVl71ppBGCgW2X4EJw1EuqIRp2pTVYQM0mtSAnrGZydz0Vmseu" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://4.bp.blogspot.com/Frgx2Lr4QpeSEmefOCKvJQaHcf_jBnNDbgaX4w4P0TNIykrrRtXdvmXyYSsMygzKxCUDyHoK_NIo9qiU5Jbkx0eVl71ppBGCgW2X4EJw1EuqIRp2pTVYQM0mtSAnrGZydz0Vmseu" width="640" /></a></div>
<br />
<br />
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.<br />
<br />
Now when you preview your animation, you’ll see that all of the instances now change their color as well as scale.<br />
<br />
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.<br />
<span class="byline-author"><br /></span>
<span class="byline-author">Posted by Jonathan Reid, Senior UX Engineer</span>
Unknownnoreply@blogger.com49tag:blogger.com,1999:blog-8054151151845215223.post-54081842460503080352016-03-08T09:53:00.000-08:002020-10-05T14:53:43.442-07:00Building cross-device Lightbox creatives with Google Web DesignerIn 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.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/4p4IwTzG7nX77_pdmNVWAWKQnP5dC0gnZtzXgtbc-eJw21NshlyokFzSDnsBZc2esNAXpy6XVcz_EihgKYhx-beGFkiWcilsG-oUUcw13IyxV5aE82a_--cWcsGcHTMmKL71t4mH" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://2.bp.blogspot.com/4p4IwTzG7nX77_pdmNVWAWKQnP5dC0gnZtzXgtbc-eJw21NshlyokFzSDnsBZc2esNAXpy6XVcz_EihgKYhx-beGFkiWcilsG-oUUcw13IyxV5aE82a_--cWcsGcHTMmKL71t4mH" width="640" /></a></div>
<br />
<br />
(Left, the engagement state in mpu 300x250 size. Right, the expanded state featuring an image gallery).<br />
<br />
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.<br />
<br />
<h3>
<b>Create a new file</b></h3>
<br />
To create a new Expandable creative in Google Web Designer:<br />
<br />
<ol>
<li>Select the “Fullscreen Lightbox” option in the dropdown for “Expansion Mode”. </li>
<li>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. </li>
<li>Choose a name for your creative and select any other important file properties </li>
<li>Click Ok </li>
</ol>
You will see two pages created: <b>Banner Page</b> and <b>Expanded Page</b>.<br />
<br />
<div class="separator" style="clear: both; margin: auto; text-align: center;">
<a href="https://2.bp.blogspot.com/j03IvSaANQUntFgyxAZwl5hvHN6G1n_Q8n-7pd0cutacroHg3YXpcgkjo1fPSAOpn2OtlmlSqk44A44Hk0qhHydjr_JCIPxcS5X5f720_wClmKTsEIe6DAoN9sGEPCqMYKrYsQL-" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="301" src="https://2.bp.blogspot.com/j03IvSaANQUntFgyxAZwl5hvHN6G1n_Q8n-7pd0cutacroHg3YXpcgkjo1fPSAOpn2OtlmlSqk44A44Hk0qhHydjr_JCIPxcS5X5f720_wClmKTsEIe6DAoN9sGEPCqMYKrYsQL-" width="400" /></a></div>
<br />
<h3>
Add an event to listen for Desktop mouseovers</h3>
<br />
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.<br />
<br />
<ol>
<li>Add a new event by selecting the plus (+) button in the Events panel. </li>
<li>Select the "expand-button" element as the target then choose "Mouse > mouseover". </li>
<li>Choose "Google Ad > Go to page" and "gwd-ad" as the receiver. </li>
<li>In the Configuration panel, for Page ID, select the Expanded page and click <b>Save</b>. </li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/rXeMevYNGnwnZBRaLyJ8gK0Jche0wHFFv-xKagYF_srkxKSXiFkDscGXH9U2YRQAGKsJC3g4MmkPAw_ridQ2hZugHvMA0KTvNiG2Pf0bGCbW_ICCSVtCZ0T4S3pTjMxXO1gRoq9B" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://4.bp.blogspot.com/rXeMevYNGnwnZBRaLyJ8gK0Jche0wHFFv-xKagYF_srkxKSXiFkDscGXH9U2YRQAGKsJC3g4MmkPAw_ridQ2hZugHvMA0KTvNiG2Pf0bGCbW_ICCSVtCZ0T4S3pTjMxXO1gRoq9B" width="400" /></a></div>
<div>
<br /></div>
<br />
<ol>
</ol>
<h3>
Remove the close button</h3>
<ol>
<li>Click the page indicator at the bottom of the stage and switch to the Expanded page. </li>
<li>Remove the close button tap area. The close button isn't needed because the Lightbox API will add a close button automatically.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/P6QYyoan8ZigUV6AVuXxRnvES-UPADYV_35XuBJB3l0KAo3u5msyfBuJ4-i-z-pAJadr1zEj7CfRtG9Xru7-51wgyDs7LvCqT4dcieRt6BpWCQ1TtN7nvGXvGuX0mFEhrBFHuyHE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://3.bp.blogspot.com/P6QYyoan8ZigUV6AVuXxRnvES-UPADYV_35XuBJB3l0KAo3u5msyfBuJ4-i-z-pAJadr1zEj7CfRtG9Xru7-51wgyDs7LvCqT4dcieRt6BpWCQ1TtN7nvGXvGuX0mFEhrBFHuyHE" width="400" /></a></div>
<div>
<br /></div>
<br />
<ol>
</ol>
<h3>
Detect devices</h3>
<br />
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.<br />
<br />
<ol>
<li>Switch to the Banner page, then add a new event by selecting the plus (+) button in the Events panel. </li>
<li>Select "Banner page" as the target, then "Page > Page activated", "Custom > Add custom action". </li>
<li>Give the function a name, for example “detectMobile” then copy and paste the following code: </li>
</ol>
gwd.isMobile = {<br />
Android: <b><span style="color: #6aa84f;">function</span></b>() {<br />
<span style="color: #6aa84f;"><b>return</b></span> navigator.userAgent.match(<span style="background-color: #f4cccc;">/Android/i</span>);<br />
},<br />
BlackBerry: <b><span style="color: #6aa84f;">function</span></b>() {<br />
<b><span style="color: #6aa84f;">return</span></b> navigator.userAgent.match(<span style="background-color: #f4cccc;">/BlackBerry/i</span>);<br />
},
iOS: <b><span style="color: #6aa84f;">function</span></b>() {<br />
<span style="color: #6aa84f;"><b>return</b></span> navigator.userAgent.match(<span style="background-color: #f4cccc;">/iPhone|iPad|iPod/i</span>);<br />
},
Opera: <span style="color: #6aa84f;"><b>function</b></span>() {<br />
<span style="color: #6aa84f;"><b>return</b></span> navigator.userAgent.match(<span style="background-color: #f4cccc;">/Opera Mini/i</span>);<br />
},
Windows: <b><span style="color: #6aa84f;">function</span></b>() {<br />
<b><span style="color: #6aa84f;">return</span></b> navigator.userAgent.match(<span style="background-color: #f4cccc;">/IEMobile/i</span>);<br />
},
any: <b><span style="color: #6aa84f;">function</span></b>() {<br />
<b><span style="color: #6aa84f;">return</span></b> (gwd.isMobile.Android() || gwd.isMobile.BlackBerry() || gwd.isMobile.iOS() ||<br />
gwd.isMobile.Opera() || gwd.isMobile.Windows()) && gwd.hasTouchScreen();<br />
}<br />
};<br />
gwd.hasTouchScreen = <b><span style="color: #6aa84f;">function</span></b>() {<br />
<b><span style="color: #6aa84f;">var</span></b> n = !<b><span style="color: blue;">1</span></b>,<br />
o = <b><span style="color: #6aa84f;">function</span></b>(n) {<br />
<b><span style="color: #6aa84f;">return</span></b> -<span style="color: blue;"><b>1</b></span> !== <span style="color: #6aa84f;">window</span>.navigator.userAgent.toLowerCase().indexOf(n)<br />
};<br />
<span style="color: #6aa84f;"><b>return</b></span> (<span style="background-color: #f4cccc;">"ontouchstart"</span> <b><span style="color: #6aa84f;">in</span></b> <span style="color: #6aa84f;">window</span> || navigator.maxTouchPoints > <span style="color: blue;"><b>0</b></span> ||<br />
navigator.msMaxTouchPoints > <span style="color: blue;"><b>0</b></span>) && (o(<span style="background-color: #f4cccc;">"NT 5"</span>) || o(<span style="background-color: #f4cccc;">"NT 6.1"</span>) || o(<span style="background-color: #f4cccc;">"NT 6.0"</span>) || (n = !<span style="color: blue;"><b>0</b></span>)), n<br />
};<br />
<br />
<h3>
Add a call to action</h3>
<br />
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.<br />
<br />
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.<br />
<br />
<span style="color: #999999;">/*</span><br />
<span style="color: #999999;">* Edit the lines below to modify your CTA or other elements as necessary.</span><br />
<span style="color: #999999;">*/</span><br />
<br />
<span style="color: #6aa84f;"><b>if</b></span> (gwd.isMobile.any()) {<br />
gwd.actions.events.getElementById(<span style="background-color: #f4cccc;">"cta"</span>).textContent = <span style="background-color: #f4cccc;">"Tap to Expand"</span>;<br />
} else {<br />
gwd.actions.events.getElementById(<span style="background-color: #f4cccc;">"cta"</span>).textContent = <span style="background-color: #f4cccc;">"Hover to Expand"</span>;<br />
}<br />
<br />
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.<br />
<br />
To choose between pixels and percentages:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/oD0uYYddCGNZ8fCP2ll-nEDzWHvDcUNJ5pkPtZ8T8aAYeGWaxPGcUVMj7nIet2d8oYGO0iK0Gf7ly5m7t4bI2nkOxcTnT9IxevVxl5vrCpR-CqWP6Z0-55z9rh567YOXMBlD5QFo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/oD0uYYddCGNZ8fCP2ll-nEDzWHvDcUNJ5pkPtZ8T8aAYeGWaxPGcUVMj7nIet2d8oYGO0iK0Gf7ly5m7t4bI2nkOxcTnT9IxevVxl5vrCpR-CqWP6Z0-55z9rh567YOXMBlD5QFo" /></a></div>
<br />
<br />
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.<br />
<br />
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!
<br />
<span class="byline-author">Posted by Nicola Bortignon, Software Engineer</span>Unknownnoreply@blogger.com39tag:blogger.com,1999:blog-8054151151845215223.post-23269389744252753782016-02-29T13:29:00.001-08:002020-10-05T14:53:43.441-07:00Welcome to the Google Web Designer Blog!Welcome to the Google Web Designer Developer Blog!<br />
<br />
Google Web Designer has skyrocketed in usage over the last year and while we are just getting started, there is so much more we plan to do. This year will see a large amount of new capabilities and we are excited to continue to enable great workflows that spark your creativity and help you create winning campaigns.<br />
<br />
We already have a large library of <a href="https://www.youtube.com/user/GoogleWebDesigner" target="_blank">tutorial videos on YouTube</a>, which is an excellent learning tool for our product and I encourage everyone to watch and learn from them. We also have a community <a href="https://groups.google.com/forum/#!forum/gwdbeta" target="_blank">Forum</a> where our team regularly engages with users, as well as a robust <a href="https://support.google.com/webdesigner" target="_blank">Help Center</a> that broadly covers Google Web Designer’s features.<br />
<br />
As great as our current resources are, there is a lot more information that can be shared from the minds of the developers who actually build Google Web Designer. Beginning now, members of the Google Web Designer team will write a weekly blog post that focuses on how to utilize the tool to create amazing content. These posts will include useful tips and how-to’s, everything from the best way to create certain ad types, to advice on how to get the most out of Google Web Designer’s features and functionality. From time to time we will also provide sneak peeks on new features and concepts we plan to introduce into the tool.<br />
<br />
I hope you will check out our posts each week and that you develop more knowledge and skills from them.
<br />
<span class="byline-author">Posted by Sean Kranzberg, Engineering Manager, Google Web Designer</span>Unknownnoreply@blogger.com143