De component Krul

Met de component Krul kunt u advertentiemateriaal maken in een immersieve display-indeling met een interactief 3D-model. Als de advertentie op het scherm verschijnt, wordt de eerste 3D-animatie aan de paginascroll gekoppeld. Gebruikers kunnen rechtstreeks acties uitvoeren met het model en de advertentie uitvouwen naar volledig scherm om meer te bekijken.

Zo voegt u de component Krul aan uw project toe:

1. Open het deelvenster Componenten en vervolgens de map Grafische elementen en effecten.
2. Sleep de component Krul naar het werkvlak.
3. Dubbelklik op de component om het bewerkingsdialoogvenster voor Krul te openen.
4. Selecteer de laag 3D-model in het deelvenster Lagen.
5. Browse in het veld URL van het deelvenster Eigenschappen naar het GLB-bestand van het 3D-item dat u wilt gebruiken. U kunt ook andere eigenschappen aanpassen (zie hieronder).
6. Voeg lagen toe door afbeeldingsbestanden van uw bestandssysteem naar het werkvlak of het deelvenster Lagen (alleen Windows of Mac) te slepen, of door onderaan het deelvenster Bibliotheek op de knop Afbeeldingen toevoegen te klikken. U kunt alleen afbeeldingen toevoegen als lagen in de component Krul.
7. Positioneer elke laag op de plek waar deze moet worden weergegeven aan het begin en het einde van de animatie met behulp van het tabblad Begin en Einde. U kunt de laag naar de gewenste plek slepen of de velden Startpositie en Eindpositie in het deelvenster Eigenschappen gebruiken.
8. Stel indien nodig aanvullende configuratieopties in (zie hieronder).
9. Als u tevreden bent met de component (u kunt een voorbeeld bekijken terwijl u eraan werkt), klikt u op Opslaan. U keert terug naar de reguliere Google Web Designer-interface.

Configuratieopties

Als u de component wilt configureren, dubbelklikt u op het werkvlak op de component of selecteert u de component en klikt u op Instellingen… in het deelvenster Eigenschappen.

Een Midden-status toevoegen

Voor meer controle over de animatie van de component Krul kunt u een Midden-status toevoegen en de laageigenschappen op dat punt wijzigen.

1. Plaats de muisaanwijzer rechts van het tabblad Begin en klik op de knop . Het tabblad Midden wordt weergegeven.
2. Standaard vindt de Midden-status plaats tussen het begin en einde van de animatie. U kunt de timing van de animatie aanpassen.
3. Schakel naar het tabblad Midden om de laageigenschappen in te stellen.

Als u de Midden-status wilt verwijderen, plaatst u de muisaanwijzer aan de rechterkant van het tabblad Midden en klikt u op X.

De timing van de animatie wijzigen

De timing van de animatie van de component Krul wordt bepaald door hoe ver deze op of van de pagina is gescrolld. De animatie begint standaard als de bovenste rand van de component op de pagina verschijnt (0%) en eindigt als de onderste rand van de pagina verdwijnt (100%). Als u een Midden-status heeft toegevoegd, kunt u ook aangeven als deze plaatsvindt tijdens de animatie. Er zijn twee manieren om de timing van de animatie aan te passen:

• In het deelvenster Timing voor animatie sleept u de selectievakjes voor Begin, Midden en Einde of de schuifregelaar naar het gewenste percentage.
• Geef de Begin-, Midden- en Einde-percentages op in de velden in het deelvenster Timing voor animatie.

De achtergrond van het 3D-model transparant maken

1. Selecteer het 3D-model.
2. Vink in het deelvenster Eigenschappen het selectievakje Transparante achtergrond voor 3D-model aan.

Een cue voor gebaar toevoegen

1. Selecteer het 3D-model.
2. Klik in het deelvenster Eigenschappen op het dropdownmenu Pictogram en kies een afbeelding uit de bibliotheek of klik op Bladeren… om een afbeelding te selecteren uit uw bestandssysteem.
3. U kunt eventueel in het veld Tekst tekst invoeren om weer te geven met het pictogram.

De cue voor gebaar wordt weergegeven op het 3D-model om de gebruiker in staat te stellen een actie uit te voeren.

Het 3D-model draaien

1. Selecteer het 3D-model.
2. Stel in het deelvenster Eigenschappen Gieren in voor het begin, het midden en het einde van de animatie.

De waarde voor gieren is de rotatie van het model rond een verticale as.

Afbeeldingslagen toevoegen

U kunt op twee manieren een laag toevoegen:

• Sleep een bestand van uw bestandssysteem naar het werkvlak of naar het deelvenster Lagen (alleen Windows of Mac).
• Klik op de knop Items importeren onderaan het deelvenster Bibliotheek.

Nieuwe lagen in de component Krul moeten afbeeldingen zijn. Er is slechts één 3D-modellaag toegestaan, die standaard is opgenomen.

Lagen verplaatsen

1. Selecteer de laag die u wilt verplaatsen.
2. Selecteer het tabblad Begin, Midden of Einde.
3. Positioneer de laag via een van de volgende methoden:
   • Sleep de laag naar de nieuwe positie.
   • Stel de eigenschappen voor de positie van Begin, Midden of Einde in het deelvenster Eigenschappen in. U kunt alleen de eigenschappen bewerken die overeenkomen met het huidige tabblad. Gebruik de knoppen Waarde van beginpositie kopiëren, Aanpassen aan middenpositie of Waarde van eindpositie kopiëren om de andere positie te kopiëren.

Ga naar het tabblad Begin, Midden of Einde om de andere positie van de laag aan te passen.

Afbeeldingen wisselen

1. Klik met de rechtermuisknop op het werkvlak dat u wilt wisselen en selecteer Afbeelding wisselen in het pop-upmenu.
2. Selecteer een afbeelding in de bibliotheek of klik op de knop Bestanden importeren om een afbeeldingsbestand op uw computer te selecteren.

De nieuwe afbeelding vervangt de oorspronkelijke afbeelding. Als u het formaat van de afbeelding die u wisselt, eerder heeft verkleind, worden de aangepaste afmetingen ook gebruikt voor de nieuwe afbeelding. Anders worden de eigen afmetingen van de nieuwe afbeelding gebruikt.

Lagen opnieuw ordenen

Sleep in het deelvenster Lagen een laag naar de nieuwe positie in de lijst.

De volgorde van de lagen bepaalt welke lagen vóór elkaar worden weergegeven. Lagen die hoger worden weergegeven, worden weergegeven vóór lagen die lager in de lijst staan.

Afbeeldingslagen verwijderen

1. Selecteer de laag die u wilt verwijderen.
2. Klik onderaan het deelvenster Lagen op de knop Verwijderen .

De 3D-modellaag is vereist voor de component Krul en kan niet worden verwijderd.

Formaat van lagen aanpassen

1. Selecteer de laag waarvan u het formaat wilt aanpassen.
2. Pas het formaat van de laag aan via een van de volgende methoden:
   • Stel in het deelvenster Eigenschappen de breedte en hoogte van de laag in. Klik op de knop Beeldverhouding beperken om aan te geven of de beeldverhouding tussen de breedte en hoogte moet worden vastgezet.
   • Sleep een van de formaatgrepen in de hoeken en randen van de laag op het werkvlak.

De laag wordt geschaald naar het opgegeven formaat voor de volledige duur van de animatie.

Transparantie van lagen wijzigen

1. Selecteer de laag die u wilt wijzigen.
2. Stel in het deelvenster Eigenschappen de begin- of eindtransparantie in op een waarde tussen 0 en 1. (0 is transparant en 1 is ondoorzichtig.)

De 3D-modellaag is altijd ondoorzichtig aan het einde van de animatie.

De easing van laaganimaties wijzigen

1. Selecteer de laag die u wilt wijzigen.
2. Selecteer in het deelvenster Eigenschappen onder Geavanceerde eigenschappen een easingtype in het dropdownmenu Easing.

Aangepaste easing is niet beschikbaar.

Lagen weergeven en verbergen

Klik in het deelvenster Lagen op het vak naast de miniatuurafbeelding van de laag (onder de knop Alle lagen verbergen ).

U kunt alle lagen verbergen of weergeven door op de knop Alle lagen verbergen te klikken.

Als u een laag verbergt, kunt u gemakkelijker aan een andere laag werken en wordt de verborgen laag niet in het configuratievoorbeeld weergegeven. Dit heeft echter geen invloed op het browservoorbeeld of het gepubliceerde advertentiemateriaal.

Ghosts weergeven en verbergen

1. Selecteer een afbeeldingslaag.
2. Klik in het deelvenster Eigenschappen onder Geavanceerde eigenschappen op de schakelknop Ghost weergeven.

De ghost is een doorschijnende versie van de laag op de positie die u momenteel niet bewerkt, zodat u de begin-, midden- en eindposities visueel kunt vergelijken. Ghosts dienen uitsluitend ter referentie en worden niet weergegeven in voorbeelden of in het gepubliceerde bestand.

Eigenschappen

Eigenschappen van de component Krul

Eigenschap	Beschrijving
Naam	De naam van de component Krul.
Scroll-factor	Een getal tussen 0 en 1 waarmee wordt aangegeven hoe ver de kijker heeft gescrolld. Wordt alleen gebruikt voor weergave in het Google Web Designer-werkvlak. Het standaardaantal is 0,5.

U kunt de laageigenschappen bekijken en bewerken als u het bewerkingsdialoogvenster voor Krul heeft geopend en een laag heeft geselecteerd.

Eigenschappen van 3D-modellagen

Eigenschap	Beschrijving
Naam	De naam van de component 3D-model.
URL	Het GLB-bronbestand voor het 3D-item. Gebruik de Khronos glTF Validator om na te gaan of uw GLB-bestand geldig is. Voor oudere Krul-componenten De URL of ID van het 3D-item. Alleen in Poly gehoste items waarvoor het delen van links is geactiveerd, worden ondersteund. Het itembestand moet 2 MB of kleiner zijn, omdat grotere items mogelijk niet worden geladen in Google Web Designer. Bekijk de handleiding voor 3D-items voor aanvullende vereisten. URL's moeten binnen met https://poly.google.com/view/. U vindt de ID aan het einde van de URL van de Poly-weergavepagina, bijvoorbeeld https://poly.google.com/view/0CkCZrXqCWW. Voorbeelden: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Items vernieuwen : U kunt het 3D-item vernieuwen door op deze knop te klikken in het veld URL. Als u geen wijzigingen ziet, is het mogelijk dat het item nog steeds wordt verwerkt. Wacht in dat geval een minuut en probeer het opnieuw.
Transparante achtergrond voor 3D-model	(Alleen voor oudere Krul-componenten.) Vink dit selectievakje aan als u wilt dat de achtergrond van de component 3D-model transparant is.
Cue voor gebaar
Pictogram	De afbeelding die wordt weergegeven over het 3D-model om de gebruiker te vragen een actie uit te voeren met het model. De cue voor gebaar beweegt enigszins om de aandacht van de gebruiker te trekken tot de animatielimiet is bereikt. De cue verdwijnt zodra de gebruiker een actie uitvoert met het model.
Tekst	De tekst die wordt weergegeven onder het pictogram voor de cue voor gebaar. Dit is alleen van toepassing als een icoon voor de cue voor gebaar is opgegeven.
Animatielimiet instellen	Vink dit selectievakje aan en stel een duur in seconden in om te beperken hoelang de animatie voor de cue voor gebaar duurt.
Positie en grootte
Begin	De afstand van de laag vanaf de linkerkant en de bovenkant van de component Krul aan het begin van de animatie. Bewerkbaar als het tabblad Begin is geselecteerd.
Midden	De afstand van de laag vanaf de linkerkant en de bovenkant van de component Krul tijdens de Midden-status van de animatie. Bewerkbaar als het tabblad Midden is geselecteerd.
Einde	De afstand van de laag vanaf de linkerkant en de bovenkant van de component Krul aan het einde van de animatie. Bewerkbaar als het tabblad Einde is geselecteerd.
Formaat	De breedte en hoogte van de laag. Beïnvloedt de laag gedurende de volledige duur van de animatie.
Rotatie
Gieren	De begin-, midden- en eindrotatie van het model rond een verticale as, in graden.
Stijl
Transparantie	De begin-, midden- en eindtransparantie van de laag, aangegeven met een getal tussen 0 (transparant) en 1 (ondoorzichtig).
Geavanceerde eigenschappen
Easing	Het type easing voor de animatie van de laag. Aangepaste easing is niet beschikbaar.

Eigenschappen van de afbeeldingslaag

Eigenschap	Beschrijving
Bron	De bron van het afbeeldingsbestand. (Niet-bewerkbaar.)
Afsluit-URL	De afsluit-URL als de gebruiker op de afbeelding klikt.
Positie en grootte
Begin	De afstand van de laag vanaf de linkerkant en de bovenkant van de component aan het begin van de animatie. Bewerkbaar als het tabblad Begin is geselecteerd.
Midden	De afstand van de laag vanaf de linkerkant en de bovenkant van de component tijdens de Midden-status van de animatie. Bewerkbaar als het tabblad Midden is geselecteerd.
Einde	De afstand van de laag vanaf de linkerkant en de bovenkant van de component aan het einde van de animatie. Bewerkbaar als het tabblad Einde is geselecteerd.
Formaat	De breedte en hoogte van de laag. Beïnvloedt de laag gedurende de volledige duur van de animatie.
Stijl
Transparantie	De begin-, midden- en eindtransparantie van de laag, aangegeven met een getal tussen 0 (transparant) en 1 (ondoorzichtig).
Geavanceerde eigenschappen
Easing	Het type easing voor de animatie van de laag. Aangepaste easing is niet beschikbaar.
Ghost weergeven	Indien ingeschakeld, wordt er een doorschijnende versie van de laag weergegeven op de inactieve positie (de positie die u momenteel niet bewerkt).

Gebeurtenissen en acties

Gebeurtenissen

Gebeurtenissen kunnen worden gebruikt om andere acties in uw advertentie te activeren. De component Krul stuurt de volgende gebeurtenis:

Gebeurtenis	Beschrijving
Krul geladen	Wordt gestuurd als alle items in de component zijn geladen.

Als u deze gebeurtenis selecteert in dialoogvenster Gebeurtenis, stelt u de component Krul in als doel.

U kunt ook gebeurtenissen en acties voor het 3D-model instellen die zijn opgenomen in de component Krul.

Voorbeeld