Yuma 4×4

Media and Communications

Groups with Events Overview – Google Web Designer

Groups with Events Overview – Google Web Designer


LUCAS: My name is Lucas, and
I’m an engineer on Google Web Designer. In this video, I will show
how to use events with groups. I’m starting with a
simple document that has two images and a
button where, when pressed, it hides the left-hand image. I’ll demonstrate
this in the browser. Click on the button, and
the image disappears. I can now select these elements
and convert them to a group. Because all of the elements
that participate in the event– the target, which is the
button; and the receiver, which is this left-hand image– because they are all
inside the group, the event is now
owned by the group. And that means that if I
drag new instances on stage, then they also have
the same event. So if I preview in a
browser, here’s one instance, and here’s the other. I can edit the group to
add additional events. So I’ll start by creating a new
button by copying and pasting the original. I’ll change its name. I’ll assign it an ID in
the Property Inspector. Finally, I will go
to the Events dialog and I will say that
when we click on this, we set the opacity of
the right teapot to 0. OK, and if I preview
this in the browser, I get the expected behavior. So far, we’ve added events
that are inside of a group. But can we have an
event that targets just a particular
instance of the group? Well, to start, I’ll
create a additional button. I’m going to call
this Show All Teapots. Make it a little easier to
see by giving it a background color. And I will assign it an ID. I’ll call it New Button. OK. Now, for an element to
participate in an event, it has to have a unique ID. Well, the button has an ID, and
the elements in this instance have IDs. Here, this image is
called left teapot, and here, it’s
called right teapot. However, these IDs
are not unique, because instances are
identical for all instances of the same group. And if I go to the
other instance, I see that this is also
called left teapot, and this is also
called right teapot. So to have a unique way of
identifying the elements in this instance, I have to
also give the instance an ID. So I’m going to call
it right instance. And with that, I can now
go to the Events dialogue and say, if I click– and here we see the elements
in that right-hand instance. We do not see the elements
in the left instance, because I never gave it an ID. So I select the left teapot. I set its opacity to 1. And then, finally, I
add an additional event that sets the opacity of
the other teapot to 1. And finally, if I
preview in the browser, everything works as intended. That concludes this introduction
to using events with groups. Thank you for watching.

2 thoughts on “Groups with Events Overview – Google Web Designer

Leave comment

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