Een WebGL-document maken en publiceren

WebGL is een open webstandaard voor het renderen van grafische afbeeldingen op elke compatibele browser zonder dat u bijkomende invoegtoepassingen nodig hebt. WebGL is volledig geïntegreerd in alle webstandaarden van de browser die versneld GPU-gebruik toestaat van het verwerken van afbeeldingen en effecten als onderdeel van de webpaginacanvas. WebGL-elementen kunnen worden ingebed met andere HTML-elementen en samengesteld met andere delen van de pagina.

Hoewel de meeste browsers tegenwoordig WebGL ondersteunen, raadpleegt u best deze koppeling voor meer informatie over de exacte versies die worden ondersteund.

Sommige browsers hebben WebGL niet standaard ingeschakeld. Raadpleeg dit artikel als u WebGL op uw browser wilt inschakelen.

Animate CC beschikt nu over twee WebGL-glTF-documenttypes. U kunt het docummenttype WebGL-glTF Standard gebruiken om integratie met elk standaard WebGL-glTF-pakket mogelijk te maken. Dit is volledig compatibel met standaarden.

Raadpleeg de volgende inhoud als u Animate CC 18.0 of een van de eerdere versies van Animate CC gebruikt.

Met Animate CC kunt u rijke interactieve inhoud maken en publiceren in de WebGL-indeling (Web Graphics Library). Omdat WebGL volledig geïntegreerd is in browsers, stelt dit Animate in staat om het versneld GPU-gebruik van het verwerken en renderen van grafische afbeeldingen te optimaliseren, als onderdeel van de webpaginacanvas.

Met dit nieuwe documenttype kunt u inhoud maken en deze snel publiceren naar WebGL-uitvoer. U kunt krachtige gereedschappen in Animate gebruiken om rijke inhoud te maken, maar ook WebGL-uitvoer renderen die op elke compatibele browser kan worden uitgevoerd. Dit betekent dat u de traditionele tijdlijn, werkruimte en tekengereedschappen van Animate kunt gebruiken om WebGL-inhoud op een native manier te ontwerpen en produceren. De meest gebruikte browsers ondersteunen WebGL en stellen Animate dus in staat om inhoud te renderen op de meeste webplatforms.

In Animate CC kunt u met het WebGL-document snel inhoud maken en publiceren voor de WebGL-indeling. Zo maakt u een WebGL-document:

1. Start Animate CC.
2. Klik in het welkomstscherm op de optie WebGL(Voorbeeld). Of u kunt de menuoptie Bestand > Nieuw selecteren om het dialoogvenster Nieuw document weer te geven. Klik op de optie WebGL(Voorbeeld).

U kunt de functie Film testen van Animate gebruiken om een voorbeeld van uw inhoud te bekijken of uw inhoud te testen. Ga als volgt te werk als u een voorbeeld wilt weergeven:

1. Druk in Animate CC op Ctrl+Enter (Windows) en CMD+Enter (MAC). Hiermee wordt uw standaardbrowser gestart en de WebGL-inhoud gerenderd.

Met Animate kunt u WebGL-inhoud op een native manier maken en publiceren vanuit de toepassing zelf.

Ga als volgt te werk als u uw WebGL-document wilt publiceren:

1. Selecteer de optie Bestand > Publicatie-instellingen om het dialoogvenster Publicatie-instellingen te openen. Of selecteer Bestand > Publiceren. als u al Publicatie-instellingen hebt opgegeven voor WebGL.
2. Geef in het dialoogvenster Publicatie-instellingen waarden op voor:

3. Klik op Publiceren om WebGL-inhoud naar de gewenste locatie te publiceren.

De gepubliceerde WebGL-uitvoer bevat de volgende bestanden:

U kunt audio importeren en inbedden in uw WebGL-document, het afspelen controleren met de synchronisatie-instellingen (gebeurtenis, starten en stoppen) en tijdlijnaudio afspelen in runtime. WebGL ondersteunt momenteel alleen .wav- en .mp3-indelingen.

Zie Geluiden gebruiken in Animate voor meer informatie over het werken met audio.

U kunt bestaande inhoud in Animate migreren naar een WebGL-document. Met het oog hierop kunt u in Animate migreren door inhoud handmatig te kopiëren of importeren. Bij het werken met meerdere documenten in Animate is het bovendien gebruikelijk om inhoud tussen documenten te kopiëren als lagen of als elementen in de bibliotheek. Hoewel de meeste functies van Animate worden ondersteund, worden bepaalde inhoudstypen gewijzigd om beter te voldoen aan de WebGL-indeling.

Animate bevat verschillende krachtige functies die helpen om visueel aantrekkelijke inhoud te maken. Omdat sommige van deze functies echter native zijn in Animate, zullen ze niet worden ondersteund in een WebGL-document. Animate is ontwikkeld om dergelijke inhoud te wijzigen in een ondersteunde indeling en om visueel aan te geven wanneer een gereedschap of functie niet wordt ondersteund.

De volgende opties zijn typen wijzigingen die worden toegepast wanneer u verouderde inhoud migreert naar een WebGL-document.

Zie dit artikel voor een volledige lijst met functies die niet worden ondersteund en hun terugvalwaarden tijdens het migreren.

U kunt de renderprestaties optimaliseren door op te geven dat een statische filmclip (bijvoorbeeld een achtergrondafbeelding) of een knopsymbool bij uitvoering in cache moet worden geplaatst. Vectoritems worden standaard opnieuw getekend in elk frame. Als u een filmclip of knopsymbool als bitmap in cache plaatst, voorkomt u dat de browser het item continue opnieuw moet tekenen, omdat de afbeelding een bitmap is en de positie ervan niet wordt gewijzigd. Dit zorgt voor een aanzienlijke verbetering in de prestaties bij het renderen van WebGL-inhoud.

Als u bijvoorbeeld een animatie met een complexe achtergrond maakt, maakt u een filmclip met alle items in de achtergrond. Vervolgens selecteert u Als bitmap in cache opslaan voor de achtergrondfilmclip in de Eigenschapscontrole. Tijdens het afspelen wordt de achtergrond gerenderd als een bitmap die op de huidige schermdiepte is opgeslagen. De browser tekent de bitmap in het werkgebied snel en slechts eenmaal, waardoor de animatie sneller en vloeiender wordt afgespeeld.

Door een filmclip als bitmap in cache te plaatsen kunt u deze filmclip gebruiken en automatisch op de plaats vastzetten. Wanneer een gebied verandert, wordt de bitmapcache bijgewerkt door vectorgegevens. Dit vermindert het aantal keren dat de browser opnieuw moet tekenen en zorgt er voor dat er vloeiender en sneller wordt gerenderd.

Als u de eigenschap Als bitmap in cache opslaan wilt inschakelen voor een filmclipsymbool, selecteert u de filmclipinstantie en selecteert u Als bitmap in cache opslaan in de vervolgkeuzelijst Renderen in Eigenschapcontrole (Venster > Eigenschappen).

Als u de eigenschap Als bitmap in cache opslaan gebruikt op WebGL-inhoud, houd dan rekening met het volgende:

• De maximumgrootte van het filmclipsymbool is beperkt tot 2048x2048. Houd er rekening mee dat de werkelijke grenzen van de filmclipinstantie die in de cache kan worden opgeslagen, kleiner zijn dan 2048x2048 omdat WebGL een aantal pixels reserveert.
• Als er meerdere instanties van dezelfde filmclip zijn, genereert Animate de cache met de grootte van de eerste instantie die wordt aangetroffen. De cache wordt echter niet opnieuw gegenereerd en de eigenschap Als bitmap in cache opslaan wordt niet genegeerd, zelfs wanneer de transformatie van de filmclip in grote mate wordt gewijzigd. Als het filmclipsymbool een grotere schaal krijgt tijdens de animatie, kunnen daardoor de afzonderlijke pixels van de animatie zichtbaar worden.