Web Designer Blog
The latest news and tips from the Google Web Designer team
Google Web Designer training re-launched
Thursday, November 17, 2016
Google Web Designer training re-launches
: 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.
Take the training today
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.
Posted by Jasmine Rogers, on behalf of the Academy for Ads team
New usability features for Google Web Designer
Wednesday, November 16, 2016
We’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:
Timeline Enhancements:
Advanced Mode - Zoom:
Users can now zoom in and out of the timeline allowing for more precise placement of keyframes.
Multiple keyframe/thumbnail selection:
Easily select or delete all the keyframes (in Advanced mode) or thumbnails (in Quick Mode) in a layer at once.
Animate properties in the first thumbnail:
Quick Mode now allows editing the first keyframe and retaining the other keyframe properties.
Drag to hide/lock layers:
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.
New easing functions:
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.
New easing functions for the animations in Google Web Designer
Copy/paste across documents
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.
Preferences panel
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.
JavaScript library support
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.
JavaScript library support in Google Web Designer
Today, we also launched a new Google Web Designer Learning path on
Academy for Ads
. 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.
Ready to get started? Check out our Google Web Designer
ad gallery
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
download it for free here
.
Posted by Jasmine Rogers, Program Manager, Google Web Designer
Masking in Google Web Designer
Friday, November 4, 2016
Investigating Masking in Google Web Designer
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.
What is masking?
A mask defines a region of the plane where content (the
maskee
) 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:
Everything is maskable.
The maskee may include text, images, animation, SVG, canvases, videos, custom elements, and even other masks.
A mask can have any shape.
It may be as simple as a circle, or it may be multiple disconnected regions with complicated geometry.
Masks can be animated.
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.
Masks stack and overlap.
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.
Events are masked.
Events originating outside the mask are blocked, and otherwise they pass through to the maskee without modification.
What did we try?
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
CSS3 masking
. 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.
Another way to implement masking, which is already supported by all major browsers, is to represent a mask as an element styled with
overflow: hidden
. 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.
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
only
within the mask region, it paints over everything that is
not
in the mask region.
CSS3 masking
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:
Clipping
is supported
on Chrome, Safari, and Firefox, although Firefox’s support for basic shapes is turned off by default.
Masking
is supported
in Chrome, Safari, and Firefox, but Firefox currently does not allow control over the image’s size or position.
IE does not currently support CSS3 masking, but future support
is likely
, at least for Edge.
We tested CSS3 clipping and masking in several different scenarios, and here’s what we found (
demo
):
Clipping.
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,
overflow: hidden
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).
Masking.
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 (
demo
).
In summary, smoothly animatable masks are only possible using clip-path with a basic shape — and even then, currently only in Chrome and Safari.
Overflow-based masking
An alternative to CSS3 masking is to set an element's overflow to “hidden”, and then add the maskee as a child element:
<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.
<div id=”mask”>
<div id=”maskCancel”>
<div id=”maskee”></div>
</div>
</div>
For example, if mask is moved ten pixels to the left,
maskCancel
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:
The intermediate element is forced to the same size as the mask, by setting its width and height to 100%.
If the mask’s left and top are (x, y), the intermediate element’s left and top are (-x, -y).
The intermediate element’s transform origin is identical to that of the mask, and its transform is the inverse of the mask’s transform.
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
best practices
), this means:
Animation of the mask’s transform-origin is copied to the intermediate element.
The inverse of the mask’s transform animation is applied to the intermediate element.
(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.
We built a
proof-of-concept implementation
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 (
demo
):
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 (
demo
), 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.
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
worse performance
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 (
demo
).
Stay tuned
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.
Posted by Lucas, Software Engineer
Appendix: Inverting animation for overflow-based masking
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
translate(tx, ty) rotate(rz) scale(sx, sy),
then the intermediate element’s transform is
scale(1/sx, 1/sy) rotate(-rz) translate(-tx, -ty).
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
and the inverse scaling animation is then
Functions like this cannot be exactly represented in CSS3, which
defines animation curves
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
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
At a distance
d
from the transform origin, this yields a positional error of
sed
, and so given a maximum mask size of
M
, the maximum error
E
is
Positional discrepancies can therefore be kept below half a pixel by requiring
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.)
Common animation topics from the Google Web Designer forum
Wednesday, June 8, 2016
Animation is a key element in most creatives made in Google Web Designer and our community forum is filled with interesting and complex topics on the subject. In this blog post, we will go over some common animation scenarios that are brought up in our forum, and provide workarounds to avoid these issues in creatives.
Animation goes behind other elements unexpectedly
Users have reported that some elements go behind other elements in animation on a browser preview. Let’s walk through the issue and try some potential solutions to the problem. Download
my_test.zip
to to see the actual example file.
To begin, we see a background gray image in a layer, and another image that shows 10 with a white background sitting on the top. 3D rotation animation is applied to the “10” image.
When you preview on a browser, the animation appears as this.
Approach 1 - Adjusting Z translation value for the background.
First, we want to make sure the rotating image is always above the background image. In order to do so, let’s move the gray background further behind by giving it a negative Z translation value in Properties Panel. When you change the Z value for the gray image, it appears smaller than the original image dimensions. To offset this, you can adjust the size of the image by using the Transform tool.
The “10” image should now be rotating in 3D on top of the gray background.
Please preview to ensure that the new adjustment of the 3D z value works on all browsers.
Approach 2 - Adjusting Z translation value for the element animated in 3D.
You can also adjust z translation value for the animated element to make it stay on top of other elements. If approach 1 doesn’t fix the issue, or the background image can not be altered for some reason, please try this approach.
In this example, select each keyframe for the image “10”, then add 110px of Z translation for all the keyframes. This will make the image appear larger than the original dimensions. To fix that, try adjusting the 3D scaling for each keyframe to a value that’s less than one, like 0.93. You may have to test different values to find out what works best for your animation.
Animation overlaps
We have heard occasionally that the elements on animation overlap each other when previewed on Safari even though they are laid out correctly in timeline and previewed correctly on the stage, or browser. This can happen when animation delays and ‘Pause’ events are used in the timeline.
To explore, let’s create an animation that shows “Yea” in a text box first, then pauses it. When a page background, a white background is clicked, the timeline starts playing to show ”Nay” text as “Yea” goes away. Download
test-overlap.zip
to see to see the actual example file.
When it is previewed on Chrome browser, it shows as this:
If you preview this on Safari, when the animation is paused, Nay is already displayed and overlapping with Yea before any user interaction happens.
Let’s try to resolve this overlap.
Approach - Removing the animation delays
When the overlap happens, let’s remove the animation delays for all the animated layers. In order to do so, 1) Move the playhead all the way back to 0.1s., 2) Select all the layers that have animation delays, 3) Hit F6 function key to add keyframes, 4) Move the keyframes to 0 until they appear as half diamond shapes.
This should fix the overlapping preview issue on Safari. After adjusting the animations, please test on all the browsers to verify adjustment works on all.
Page animation control
Many users have asked how to play the animation through pages, then make it go back to the first page and pause the animation at a certain point. It would also be great if we could control how long the animation plays and then pauses.
Let’s say you wanted to set up three pages in your creative and play the animation in the following page order. You want each page to play the animation for 2sec, then go to the next page until all the pages are cycled through twice.
Page 1
Page 2
Page 3
Page 1
Page 2
Page 3
Page 1 (end)
Approach - setTimeout event as a custom action
We can achieve this by adding a ‘setTimeout’ event for the timeline. Let’s walk through this process by using this example file
pages.zip
. Please download it and open pages.html file.
The example file is a three page ad file that has timeline animation on each page. Once you’ve downloaded it, preview it in your browser to see how it works. Now let’s look at the details.
On page1 we’ve added an event marker at 2 second mark to go to next page, page1_1. We’ve also added a timeline label “end” where we would like to end the whole animation after it’s gone through the page changes two times.
If you look at the events panel, the event that changes the page is shown as page1>event-1>GotoPage>pagedeck(page1_1)
Let’s take a look at the second page (page1_1) which is similar. Again, there is animation in the timeline and a timeline event marker added at the 2 second mark. If you look at the events panel, this event is displayed as page1_1>event-2>GotoPage>pagedeck(page1_2). When the animation plays on this page, it simply executes the timeline event at 2 seconds and goes to the next page.
Finally, let’s open the last page (page1_2). This is where we’ve added a custom action to control how long the animation plays until the ‘gotoAndPause’ event gets fired.
If we look at the timeline on page3, we see an event marker at the 2 second mark, just like the other pages. In the Events panel, you can see that there are two events associated with event three. The first has a custom action.
Note: 6000ms = 6s
We’ve added “setTimeout” as a function name, and created the following code:
setTimeout(nextPage, 6000);
function nextPage() {
gwd.actions.timeline.gotoAndPause('page1', 'end');
}
When this event gets fired, it will trigger a 6 second timeout, and then the page will go to ‘end’ label on ‘page1’ and pause the animation there. This six seconds represents the time it will take for the animation to cycle through another time. If we wanted the animation to cycle through the 3 pages three times, we’d have to set the timer to 12 seconds.
If you look at the events panel, you can see that there’s a second event attatched to event-3: page1_2>event-3>GotoPage>pagedeck(page1). This simply makes the page go back to the first page. It is important to remember that ‘setTimeout’ event has to be added before ‘GotoPage’ event, because ‘setTimeout’ should be executed before the page goes to the next page.
Now we can see how it works. Each page plays the animation for 2 sec and goes to the next page.On page 3 (page1_2), ‘setTimeout’ event gets fired, and the animation then continues to play normally for 6 seconds, when it then goes to the label “end” on page1 and pauses the animation there. As a result, all the pages are cycled through twice and the animation ends at the label “end”.
Using custom actions like this example will give you more control over your creative and its interactive content. Custom actions are saved in your file and you can reuse them for other elements if you like.
Final Thoughts
As developers we understand that it can be frustrating to deal with small differences and rendering issues on different browsers, platforms and devices. The Google Web designer team is working hard to solve those from the authoring side as we continue to release new feature enhancements. Please be sure to download the zip files and try the techniques in this article. We would also like to hear from you, so please send us your feedback and issue reports in our community forum!
Posted by Mariko, Test Engineer
A revamped UI and responsive design capabilities, now in Google Web Designer
Tuesday, May 3, 2016
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!
Check out our
Announcement
and the resources below for more information!
Resources:
Release Notes
Blog
Help Center Articles:
Responsive
,
UI
Videos:
Responsive
,
UI Overview
Posted by Jasmine Rogers, Google Web Designer
Popular Questions from the Google Web Designer Forum
Monday, April 25, 2016
The Google Web Designer Community Forum
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.
In this blog post, we’ll highlight some of our frequently asked questions from the forum.
How do I make an asset appear at a specific time during my animation?
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:
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.
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.
Approach 1 - Animating opacity from 0 to 1 between two keyframes
First, let’s select the element in the first keyframe and use the Properties panel to set its opacity to 0.
The element should now be invisible throughout the entire animation.
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.
So far, the element has opacity 0 throughout the animation.
Select the element in the last keyframe and use the Properties panel to set its opacity to 1.
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.
Next, select the blue DIV in middle keyframe and use the Properties panel to set the opacity to 0 there as well.
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.
Let’s recap the steps on how to make an element appear at a specific point in time in an existing animation:
Select the first keyframe/thumbnail in the animation.
Add the new element at the first keyframe/thumbnail.
Select the element at the first keyframe/thumbnail and use the Properties panel to set its opacity to 0.
Add a keyframe at the time you want the element to “appear’ (let’s call it time
t
). Its opacity will still be 0 at time
t
.
Add another keyframe right before time t (let’s call it time t’) and set the duration between
t’
and
t
to 0.01s.
Select the element at time
t
and set its opacity to 1.
Select the element at time
t’
and set its opacity to 0.
Download
timeline_animate_opacity.zip
to see the final result.
Approach 2 - Using Timeline Event Markers, CSS Panel, and the Events panel to show the element at the desired time
As an alternative, you can also achieve the same results by using display or visibility styles:
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).
Select ‘bluediv’ in the first keyframe and open the CSS panel.
Add the style: visibility: hidden
Switch the Timeline to Advanced mode.
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.
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.
We can now preview to view the resulting animation in the browser.
Download
timeline_css_event.zip
to see the final result.
Can I use external JavaScript libraries in Google Web Designer?
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:
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:
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.
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:
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
Greensock animation libraries
. Let’s use one of these libraries to add some interactivity to our ad.
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.
<script type="text/javascript" src="
https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js
"></script>
Now let’s switch back to Design view and add a DIV element using the Tag tool.
We’ll then use the Properties panel to set a background color on it, in this example let’s use blue.
Once the color is set, we’ll also use the Properties panel to set the id to ‘bluediv’.
Next, Right-click on the element and select “Add event…” to bring up the Events dialog.
We can set up the event as follows:
Event: Mouse->click
Action: select Custom, and click on ‘+ Add custom action’ to bring up the Custom code section
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'});
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.
Download
using_external_js.zip
to see the final result.
Closing Thoughts
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
Community Forum
!
Posted by Nivesh, UX Engineer
Exploring gallery components in Google Web Designer
Monday, April 18, 2016
In 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.
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.
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.
Autoplay
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.
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).
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.
Exiting the Ad
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.
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:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame tap
Action
: Google Ad: Exit ad
Receiver
: gwd-ad
Configuration
:
Metrics ID
: frameexit (or an ID of your choice)
URL
: http://example.com/all-products
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:
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
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:
, , http://example.com/product-3, , ,
Note: When you’re using Exit URLs this way, you cannot include a Frame tap event.
Pages of Multiple Frames
We can further configure the gallery to display multiple products at once, essentially grouping our frames into pages with multiple frames beside each other.
Let’s begin by setting the Swipeable Gallery component properties "Show Frames" and "Swipe Frames" to 2.
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.
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.
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame autoplayed
Action
: Custom
Custom Action: New
:
Name
: gwd.fadeOtherFrames
Code
:
var frames = this.querySelectorAll('.frame');
var activeFrame = this.getFrame(event.detail.id);
for (var i = 0; i < frames.length; i++) {
if (frames[i] == activeFrame) {
frames[i].style.opacity = 1.00;
} else {
frames[i].style.opacity = 0.25;
}
}
When autoplay completes or is interrupted, the "autoplay ended" event will be fired. We'll use this to restore all frames to full visibility:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Autoplay ended
Action
: Custom
Custom Action: New
:
Name
: gwd.restoreFrames
Code
:
var frames = this.querySelectorAll('.frame');
for (var i = 0; i < frames.length; i++) {
frames[i].style.opacity = 1.00;
}
Adding a carousel gallery
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:
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.
Now we'll add an event handler to have it follow along with the autoplay:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame autoplayed
Action
: Custom
Custom Action: New
:
Name
: gwd.syncCarousel
Code
:
document.getElementById(
'gwd-carouselgallery_1').goToFrame(event.detail.id);
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.
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Mouse over a frame
Action
: Custom
Custom Action: New
:
Name
: gwd.stopAutoplayAndSyncCarousel
Code
:
this.stopRotation();
document.getElementById(
'gwd-carouselgallery_1').goToFrame(event.detail.id);
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame tap
Action
: Custom
Custom Action
: gwd.stopAutoplayAndSyncCarousel
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:
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.
Feel free to take the gallery components for a spin, and let us know what you think in the blog comments!
Posted by Jeremy, Software Engineer
Five features to explore in Google Web Designer
Monday, April 11, 2016
Since 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.
So without further ado, let’s review five features and workflows you may find most useful in Google Web Designer.
1. Fluid layouts
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.
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.
Here is an example to illustrate how the fluid layout checkbox works:
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.
If we shrink the container width down, the image element would automatically shrink too, as if scale were applied.
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.
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.
In the following illustrations below you can see that we have shrunk and grown the size of the container while maintaining the layout.
2. Publish to Google Drive
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:
Start by creating a document and when you are ready to publish, select ‘Publish to Google Drive”.
Enter your Google credentials.
Leave the default options in the publish dialog, and click on Publish.
Once publish is completed, you can now open your browser and navigate to: drive.google.com
At the top of your list of files (if you sort by date) you should see a new folder named after your document.
Right click on that folder and select ‘Share…’
Click on get shareable link which enables link sharing on that folder.
Now double click that folder to go inside of it. You should now see your published files.
Right click on index.html and again click on ‘Share…’
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/
0ByYVu2aiDQ0SMDcyaFFZa0NjUjg
/view?usp=sharing
Copy the ID (the part of your link that’s like the bolded part, above) in a separate text document.
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).
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.
3. BYOC
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.
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.
For more information on custom components, visit this link:
Building a custom component
.
4. Custom swatches
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.
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.
5. Groups
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.
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.
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.
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:
Dynamic galleries
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!
Posted by Valerio, UX Engineer
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
English
events
exit
fluid layout
gallery
google cultural institute
google web designer
Google Web Designer Blog
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
2017
December
April
March
2016
November
Google Web Designer training re-launched
New usability features for Google Web Designer
Masking in Google Web Designer
June
Common animation topics from the Google Web Design...
May
A revamped UI and responsive design capabilities, ...
April
Popular Questions from the Google Web Designer Forum
Exploring gallery components in Google Web Designer
Five features to explore in Google Web Designer
March
February
Feed
Follow @googlewdesigner
