Groups with Events Overview - Google Web Designer Google Web Designer Russian English

Groups with Events Overview - Google Web DesignerYouTube↗ IA↗(long shot)
Science & Technology 3.4K views 15 likes 2 dislikes 03 Jan 2018

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

Меня зовут Лукас. Я специалист

LUCAS: My name is Lucas, and I'm an engineer on Google Web

по 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

и меняю ее название.

I'll change its name.

На панели свойств присваиваю кнопке идентификатор.

I'll assign it an ID in the Property Inspector.

Теперь открывают окно событий,

Finally, I will go to the Events dialog

выбираю событие click

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

для наглядности.

Также присваиваю ей идентификатор

And I will assign it an ID.

NewButton (Новая кнопка).

I'll call it New Button.

Чтобы элемент мог участвовать в событии,

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

Это изображение называется LeftTeapot (Левый чайник),

Here, this image is called left teapot,

а это – RightTeapot (Правый чайник).

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,

этот чайник тоже называется LeftTeapot,

I see that this is also called left teapot,

а этот – RightTeapot.

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.

Назову его RightInstance (Правый экземпляр).

So I'm going to call it right instance.

Теперь перехожу в окно событий

And with that, I can now go to the Events dialogue

и выбираю click.

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.

и задаю для него непрозрачность: 1.

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.

Similar videos:

Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201834% match

Step 09: Change Styles
Dani Beaumont
48.9K views 140 likes 7 dislikes 17 Dec 201828% match

Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201628% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201527% match

Google Web Designer Asset Library Integration
Google Web Designer
10.7K views 15 likes 2 dislikes 13 Apr 201527% match

Element Tool Overview - Google Web Designer
Google Web Designer
2.3K views 14 likes 1 dislikes 20 Aug 201827% match

Percent Authoring Overview - Google Web Designer
Google Web Designer
1.6K views 11 likes 0 dislikes 21 Aug 201827% match

0 views 0 likes 0 dislikes 05 Jun 202627% match

Timeline Easing and Preview Range - Google Web Designer
Google Web Designer
7.6K views 37 likes 6 dislikes 03 Jan 201827% match

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201827% match

Publish to Studio
Google Web Designer
7.7K views 17 likes 1 dislikes 04 Aug 201427% match

CSS Panel Overview - Google Web Designer
Google Web Designer
3K views 16 likes 0 dislikes 20 Aug 201827% match

Template improvements - Google Web Designer
Google Web Designer
8.9K views 41 likes 2 dislikes 21 Jun 201727% match

Dynamic Exits in Studio - Google Web Designer
Google Web Designer
4.6K views 28 likes 1 dislikes 28 Sep 201826% match

Messerbau Folge 57 - Schleifvorrichtung Teil 3
Michael Tessin
6.9K views 244 likes 3 dislikes 07 Apr 201925% match

Ensanchar un pantalón de cintura con cuña trasera
Sew and be a dressmaker at home
33.5K views 1.2K likes 25 dislikes 14 May 201925% match

Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201525% match

Timeline Quick Mode - Google Web Designer
Google Web Designer
2.8K views 29 likes 0 dislikes 26 Jul 201825% match

Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201925% match

Tutorial: Setting up RGB waves on the K65 RGB, K70 RGB, and K95 RGB Keyboards.

54.1K views 135 likes 15 dislikes 22 Sep 201425% match

Settings Privacy About Contact Donate