Events Overview - Google Web Designer Google Web Designer German English

Events Overview - Google Web DesignerYouTube↗ IA↗(long shot)
Science & Technology 5.3K views 39 likes 2 dislikes 01 Jun 2018

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

Hallo, mein Name ist Maciek und ich bin Entwickler bei Google Web Designer.

MACIEK: Hi my name is Maciek and I'm an engineer on Google Web Designer.

Heute zeige ich Ihnen,

Today I'll show you how to use Google Web

wie das Ereignissystem von Google Web Designer funktioniert.

Designer event system.

Am Ende dieses Videos wissen Sie,

By the end of this video

wie Sie Event-Handler in Ihren Dokumenten einrichten.

you'll know how to setup event handlers in your documents.

Ich habe ein einfaches Dokument

I've prepared a simple document for us to use

mit einer Karussell-Galerie und einem blauen div-Element vorbereitet.

which contains a carousel gallery and a blue div.

Um Ihrem Dokument Event-Handler hinzuzufügen,

In order to add event handlers to your document

benötigen Sie das Steuerfeld "Ereignisse" auf der rechten Seite.

you're going to want to find the events panel here on the right side.

Hier finden Sie eine Liste

This will show you a list of all of

der installierten Event-Handler.

your installed event handlers.

Da wir noch keine Handler haben,

We don't have any handlers yet here

ist die Liste leer.

so the list is empty.

Bei einer langen Liste

But if you have a lot of them,

können Sie Handler sortieren und filtern.

you can sort and filter through them.

Um Event-Handler hinzuzufügen,

To add event handlers to this list

rufen wir das Dialogfeld "Ereignisse" auf.

we're going to need to bring up the events dialog.

Sie haben verschiedene Möglichkeiten:

There are a couple ways to get to that dialog.

Wenn Sie bereits wissen, welches Ziel Sie auswählen möchten,

One way if you already know which target you want to select,

klicken Sie mit der rechten Maustaste auf ein Element

you can right click on an element and select

und dann auf "Ereignis hinzufügen".

Das ausgewählte Element wird dann als Ziel festgelegt.

This will set the selected element as your target.

Lassen Sie uns stattdessen die Auswahl des Elements aufheben

Instead let's deselect that element and open the

und das Dialogfeld "Ereignisse" über dieses kleine Plussymbol öffnen.

events dialog using this little plus icon in the corner.

Im Dialogfeld ist dann noch nichts ausgewählt.

This will open up the events dialog without any preferences selected.

Als Erstes legen wir ein Ziel fest.

The first thing we want to do

Das ist das Element, das unseren Event-Handler auslöst.

is select the target. This is the element that'll trigger our event handler.

In diesem Beispiel wähle ich das Karussell aus.

For this example I'm going to choose the carousel.

Anschließend müssen wir ein Ereignis auswählen,

Next we need to choose an event

das unseren Event-Handler auslöst.

which will trigger our event handler.

Die meisten Elemente unterstützen Mausereignisse und Berührungen.

Most elements support Mouse and Touch events.

Da es sich um ein Karussell handelt, unterstützt es auch spezielle Ereignisse.

Since this is a carousel it also supports some special specific events.

Ich wähle das Klickereignis aus.

I'm going to select the click event

Nun legen wir eine Aktion fest.

and now we get to choose an action.

Das ist die Aktion, die als Antwort auf das Ereignis ausgeführt werden soll.

This is the action that we want to perform in response to the event.

Für die meisten Elemente können CSS-Stile festgelegt

Most elements support setting CSS styles

und benutzerdefinierte Aktionen hinzugefügt werden. Dazu kommen wir gleich.

and adding custom actions which we'll get to in a minute.

Wenn Ihre Dokumente andere benutzerdefinierte Elemente aufweisen,

If you have other custom elements in

können Sie hier möglicherweise weitere Elemente auswählen.

your documents, they might have additional events here for you to select.

Für diese Demo wähle ich "Stile festlegen" aus.

For this demo I'm going to choose set styles.

Als Nächstes wählen wir einen Empfänger aus.

Next we're going to choose a receiver.

Das ist das Element, dessen CSS wir ändern möchten.

This is the element whose CSS we want to change.

Für diese Demo wähle ich das blaue div-Element

For this demo I'm going to choose the blue div,

und weise ihm einige CSS-Eigenschaften zu.

and I'll assign some CSS properties to it.

Ich ändere die Hintergrundfarbe zu rot.

I'll change the background color of the div to be red.

Sie können einige Easing-Optionen auswählen

You can choose some easing options,

und eine Dauer festlegen.

add a duration, and click

Klicken Sie dann auf "OK".

Jetzt haben wir unserem Dokument einen Event-Handler hinzugefügt.

That's it. We've added an event handler to our document.

Nun können wir uns das Dokument in der Vorschau ansehen. Wenn ich auf das Karussell klicke,

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

wird das blaue div-Element langsam rot.

slowly changes to red.

Das war recht einfach.

That was pretty easy.

Angenommen, uns ist ein Fehler unterlaufen

Now let's say we've made a mistake

und wir möchten unseren Event-Handler ändern.

and we want to change our event handler.

Dazu müssen wir ihn nicht komplett neu erstellen,

We don't need to make a whole brand new event handler.

sondern wir bearbeiten einfach den bereits vorhandenen.

We can just edit the one that we've currently made.

Durch Doppelklicken darauf

If you double click on the event handler,

wird das Dialogfeld "Ereignisse" im Bearbeitungsmodus geöffnet.

it'll open up the events dialog in editing mode.

Auf dem Aktionsbildschirm wählen wir "Benutzerdefinierte Aktion hinzufügen".

Let's go back to the actions screen and select custom action.

Hier können Sie einen beliebigen gültigen JavaScript-Code schreiben.

Here you can write any valid JavaScript code.

Ich gebe dem Code einen Funktionsnamen.

I'm going to go ahead and give the code a function name.

Und für diese Demo machen wir einfach eine Meldung, die aufgerufen wird.

And for the purpose of this demo let's just make an alert call.

Das sieht gut aus.

That looks good.

Jetzt klicken wir zum Speichern auf "OK".

Now click OK to save.

Wir sehen, dass unser Event-Handler

We see that our event handler has been updated

aktualisiert wurde, sodass meine Funktion aufgerufen wird.

to show that we're going to call my function.

Sehen wir uns das in der Vorschau an.

Let's preview it.

Wenn ich jetzt auf das Karussell klicke,

Now when I click on the carousel

wird die Meldung angezeigt:

we see the alert statement come up.

I love Google Web Designer.

I love Google Web Designer! That's it for today.

Das wars für heute.

If you have any questions

Falls Sie Fragen zu Ereignissen oder anderen Themen rund um Google Web Designer haben,

about events or any other Google Web Designer topics,

posten Sie sie im Kommentarbereich.

just post them in the comments section.

Similar videos:

Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201883% match

UI Overview - Google Web Designer
Google Web Designer
4.5K views 35 likes 1 dislikes 20 Aug 201880% match

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

Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201867% match

Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202067% match

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

Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202067% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 201467% match

Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201757% match

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

Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201657% match

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201557% match

Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 201557% match

Image Processing Overview - Google Web Designer
Google Web Designer
4.3K views 65 likes 0 dislikes 31 Aug 202057% match

Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 201542% match

Ad Validator - Google Web Designer
Google Web Designer
4.8K views 16 likes 1 dislikes 07 Sep 201837% match

Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201835% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201835% match

Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201833% match

Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201532% match

Building Expanding Creatives - Google Web Designer
Google Web Designer
8.7K views 56 likes 2 dislikes 18 Sep 201832% match

A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 201432% match

Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201932% match

Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201831% match

Tag Tool Demo
Google Web Designer
17.6K views 57 likes 3 dislikes 30 Sep 201330% 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 201930% match

Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201828% match

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

Publish to Display & Video 360 - Google Web Designer
Google Web Designer
7.1K views 19 likes 3 dislikes 28 Nov 201827% match

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

Settings Privacy About Contact Donate