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:
- Open het deelvenster Componenten en daarna de map Grafische elementen en effecten.
- Sleep de component Sprite-sheet
naar het werkvlak.
- 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.
- 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.
- 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:
- Voeg een aanvullende component Sprite-sheet toe.
- 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:
- Vouw de Geavanceerde eigenschappen in het deelvenster Eigenschappen voor de component Sprite-sheet uit.
- Geef het aantal frames in uw animatie op. De component geeft één sprite per frame weer en veronderstelt dat elke sprite dezelfde grootte heeft.
- 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:
|
| Schalen |
Sprites weergeven die een andere grootte hebben dan de component:
|
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 verstuurdU 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.
De volgende acties voor de component Sprite-sheet kunnen worden geactiveerd als reactie op andere gebeurtenissen:
| Actie | Configuratieopties |
|---|---|
| Nieuwe animatie maken |
|
| 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.