De component Sprite-sheet

Deze component wordt niet ondersteund voor AMP HTML-advertenties, videoadvertenties of beeldadvertenties.

U kunt de component Sprite-sheet gebruiken om sprite-animaties te maken of afzonderlijke afbeeldingssprites weer te geven terwijl u slechts één bronbestand voor afbeeldingen gebruikt.

  

Een sprite-sheet met 8 sprites wordt gebruikt om een animatie te maken. Elke sprite kan ook afzonderlijk worden weergegeven, zonder deel uit te maken van een animatie.

De component Sprite-sheet aan uw project toevoegen:

1. Open het deelvenster Componenten en daarna de map Grafische elementen en effecten.
2. Sleep de component Sprite-sheet  naar het werkvlak.
3. Geef de URL van het sprite-sheet-afbeeldingsbestand op in het veld Bronnen van het gedeelte met eigenschappen van de Sprite-sheet in het deelvenster Eigenschappen. Als het bronbestand lokaal is opgeslagen, klikt u in het veld op Browsen  om het bestand te selecteren via het bestandssysteem van uw computer.
4. Voer de X-verschuiving, Y-verschuiving, Framebreedte en Framehoogte in van de specifieke sprite die u wilt weergeven. Als u een animatie maakt, wordt deze sprite weergegeven in het eerste frame van de animatie.
5. Afhankelijk van het gebruik van het sprite-sheet volgt u de stappen om andere sprites weer te geven of om een sprite-animatie te maken.

   Andere sprites weergeven:

   1. Voeg een aanvullende component Sprite-sheet toe.
   2. Configureer de nieuwe component met dezelfde bron, maar met de verschuivingen en framedimensies voor de sprite die u in deze component wilt weergeven.

   Een sprite-animatie maken:

   1. Vouw de Geavanceerde eigenschappen in het deelvenster Eigenschappen voor de component Sprite-sheet uit.
   2. Geef het aantal frames in uw animatie op. De component geeft één sprite per frame weer en veronderstelt dat elke sprite dezelfde grootte heeft.
   3. Vink het vakje Automatisch afspelen aan als u wilt dat de animatie automatisch wordt afgespeeld. U kunt de animatie ook activeren door een gebeurtenis in te stellen met de actie Sprite-sheet > Afspelen of Animatie in-/uitschakelen (zie hieronder).

Eigenschappen

Eigenschap	Beschrijving
Naam	De componentnaam.
Bron	De URL voor het beeld dat als sprite-sheet wordt gebruikt. Kan worden gebonden aan dynamische gegevens.
X Offset (X-verschuiving)	De verschuiving, in pixels, van de linkerrand van de sprite-sheet naar de sprite.
Y Offset (Y-verschuiving)	De verschuiving, in pixels, van de bovenrand van de sprite-sheet naar de sprite.
Framebreedte	De breedte, in pixels, van de sprite.
Frame height (Framehoogte)	De hoogte, in pixels, van de sprite.
Uitlijning	De positie van de sprite binnen de component: center (centreren) bottom (onder) bottom left (linksonder) bottom right (rechtsonder) left (rechtsonder) right (rechts) top (boven) top left (linksboven) top right (rechtsboven)
Schalen	Sprites weergeven die een andere grootte hebben dan de component: Formaat van afbeelding wijzigen zodat deze past Afbeelding bijsnijden zodat deze past Geen Afbeelding uitrekken zodat deze past

Geavanceerde eigenschappen

Gebruik de geavanceerde eigenschappen om een sprite-animatie te configureren. Klik op het pictogram Uitvouwen  naast Geavanceerde eigenschappen in het deelvenster met componenteigenschappen om de volgende geavanceerde eigenschappen te bewerken:

Eigenschap	Beschrijving
Number of frames (Aantal frames)	Het aantal frames waaruit de animatie bestaat. Als u een getal opgeeft dat hoger is dan het aantal sprites in uw sprite-sheet, bevat uw animatie aan het eind lege frames.
Duration (Duur)	De duur van elk frame in milliseconden.
Number of Loops (Aantal herhalingen)	Het aantal keren dat de animatie wordt herhaald. Stel in op 0 als u wilt dat de animatie doorlopend wordt herhaald.
Automatisch afspelen	Als dit selectievakje is aangevinkt, wordt de animatie automatisch afgespeeld.
End on frame one (Beëindigen bij eerste frame)	Als dit selectievakje is aangevinkt, wordt de animatie beëindigd op het eerste frame na de laatste herhaling.
Reverse (Omgekeerd)	Als dit selectievakje is aangevinkt, wordt de animatie omgekeerd afgespeeld.

Gebeurtenissen en acties

Gebeurtenissen die door de component Sprite-sheet worden verstuurd

U kunt andere acties activeren op basis van de volgende gebeurtenissen van de component Sprite-sheet:

Gebeurtenis	Beschrijving
Onderbroken	Wordt verstuurd als de animatie wordt onderbroken.
Beëindigd	Wordt verstuurd als de animatie is beëindigd.
Afspelen gestart	Wordt verzonden wanneer de animatie wordt afgespeeld.
Opnieuw afgespeeld	Wordt verzonden wanneer de animatie opnieuw wordt gestart.

Als u een van deze gebeurtenissen selecteert in het dialoogvenster Gebeurtenis, stelt u de component Sprite-sheet in als doel.

Acties die door de component Sprite-sheet worden uitgevoerd

De volgende acties voor de component Sprite-sheet kunnen worden geactiveerd als reactie op andere gebeurtenissen:

Actie	Configuratieopties
Nieuwe animatie maken	X-verschuiving: De verschuiving, in pixels, van de linkerkant van de sprite-sheet naar de sprite. Y-verschuiving: De verschuiving, in pixels, van de bovenkant van de sprite-sheet naar de sprite. Framebreedte: De breedte, in pixels, van de sprite. Framehoogte: De hoogte, in pixels, van de sprite. Frames: Het aantal frames waaruit de animatie bestaat. Duration (Duur): De duur van elk frame in milliseconden. Loops (Lussen): Het aantal keren dat de animatie wordt herhaald. Stel in op 0 om de animatie doorlopend te herhalen. Automatisch afspelen: Als dit selectievakje is aangevinkt, wordt de animatie automatisch afgespeeld. Reverse (Omgekeerd): Als dit selectievakje is aangevinkt, wordt de animatie omgekeerd afgespeeld.
Afspelen	Hiermee wordt de animatie gestart vanaf de huidige gestopte of onderbroken locatie.
Pauzeren	Hiermee wordt de huidige animatie onderbroken.
Animatie in-/uitschakelen	Hiermee wordt geschakeld tussen het afspelen en onderbreken van de animatie.
Opnieuw afspelen	Hiermee wordt de animatie gestart vanaf het eerste frame.
Teruggaan	Hiermee wordt het vorige frame in de reeks getoond.
Vooruitgaan	Hiermee wordt het volgende frame in de reeks getoond.
Ga naar frame	Hiermee wordt het opgegeven frame weergegeven.

Als u een van deze acties selecteert in het dialoogvenster Gebeurtenis, stelt u de component Sprite-sheet in als ontvanger.

Meer informatie over hoe u gebeurtenissen configureert.

Voorbeeld

Nadat u een bron, verschuivingen en framedimensies heeft opgegeven, toont Google Web Designer een statisch voorbeeld van de component Sprite-sheet op het werkvlak, zodat u kunt checken of u de sprite correct heeft opgegeven.

Er kan geen voorbeeld van sprite-animaties worden weergegeven in de Web Designer-interface. Als u een sprite-animatie in actie wilt zien, bekijkt u een voorbeeld van uw document in uw voorkeursbrowser door rechtsboven op de knop Voorbeeld te klikken.