Events Overview – Google Web Designer

Events Overview – Google Web Designer

MACIEK: Hi my name is Maciek and I’m an
engineer on Google Web Designer. Today I’ll show you how to use Google Web Designer event system. By the end of this video you’ll know how to setup event handlers in your documents. I’ve prepared a simple document for us to use which contains a carousel gallery and a blue div. In order to add event handlers to your document you’re going to want to
find the events panel here on the right side. This will show you a list of all of your installed event handlers. We don’t have any handlers yet here so the list is empty. But if you have a lot of them, you can sort and filter through them. To add event handlers to this list we’re going to need to bring up the events
dialog. There are a couple ways to get to that dialog. One way if you already know which target you want to select, you
can right click on an element and select Add event… This will set the selected element as your target. Instead let’s
deselect that element and open the events dialog using this little plus
icon in the corner. This will open up the events dialog without any preferences selected. The first thing we want to do is select the target. This is the element
that’ll trigger our event handler. For this example I’m going to choose the
carousel. Next we need to choose an event which will trigger our event handler. Most elements support Mouse and Touch events. Since this is a carousel it also
supports some special specific events. I’m going to select the click event and now we get to choose an action. This is the action that we want to perform in response to the event. Most elements support setting CSS styles and adding custom actions which we’ll get to in a minute. If you have other custom elements in your documents, they might have
additional events here for you to select. For this demo I’m going to choose set
styles. Next we’re going to choose a receiver. This is the element whose CSS
we want to change. For this demo I’m going to choose the blue div, and I’ll assign some CSS properties to it. I’ll change the background color of
the div to be red. You can choose some easing options, add a duration, and click OK to save. That’s it. We’ve added an event handler to our document. Now we can go ahead and preview the document and see what we’ve made. Now we see when I
click on the carousel, the blue div slowly changes to red. That was pretty easy. Now let’s say we’ve made a mistake and we want to change our event handler. We don’t need to make a whole brand new event handler. We can just edit the one
that we’ve currently made. If you double click on the event handler, it’ll open up
the events dialog in editing mode. Let’s go back to the actions screen and
select custom action. Here you can write any valid JavaScript code. I’m going to go ahead and give the code a function name. And for the purpose of this demo
let’s just make an alert call. That looks good. Now click OK to save. We see that our event handler has been updated to show
that we’re going to call my function. Let’s preview it. Now when I click on the
carousel we see the alert statement come up. I love Google Web Designer! That’s it for today. If you have any questions about events or any other Google Web
Designer topics, just post them in the comments section. Thank you.

9 thoughts on “Events Overview – Google Web Designer

  1. hi there,
    can you please share some video explaining how to 'tilt' and 'shake' image ads or banners? I found those options in events, but I do not know how to use them.

  2. Please, Help! I did action for button when I click (for example – border). Now, how disable the border if I click again?

  3. I have an animated gif which is a logo I would like to play at a specific point in my animated banner, can instruct how to ad an event to this so it just plays once at the end?

Leave a Reply

Your email address will not be published. Required fields are marked *