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.

Documenttype WebGL-glTF (bèta) gebruiken

Animate 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.

Een WebGL-glTF-bestand publiceren

Animaties converteren naar de GLTF- en GLB-indeling

Met de indelingen WebGL-GLTF en GLB kunt u bestanden kleiner maken en sneller in runtime verwerken. In Animate kunt u documenten in beide indelingen gebruiken. Wilt u uw video's in beide indelingen gebruiken? Bekijk de tutorial aan het einde van dit voorbeeld en voer de volgende stappen uit.

Geavanceerde animaties maken met de functie WebGL GLTF exporteren in Animate

Bekijk de video om te weten hoe een animatie eruitziet in de WebGL GLTF- en GLB-indelingen.

Animate 18.0 en eerdere versies

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

Het WebGL-documenttype

Met Animate 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.

Een WebGL-document maken

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

1. Start Animate.
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).

Voorvertoning van WebGL-inhoud in browsers

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 op Ctrl+Enter (Windows) en CMD+Enter (Mac). Hiermee wordt uw standaardbrowser gestart en de WebGL-inhoud gerenderd.

Animate vereist een webserver om WebGL-inhoud uit te voeren. Animate heeft een ingebouwde webserver die is geconfigureerd om WebGL-inhoud uit te voeren op poort 8090. Als deze poort al wordt gebruikt door een server, wordt dit conflict automatisch gedetecteerd en opgelost door Animate.

Inhoud publiceren naar WebGL-indeling

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:

Geef een betekenisvolle naam op voor de uitvoer. En blader naar de locatie waar u de WebGL-uitvoer wilt publiceren of voer deze locatie in.

Hiermee geeft u aan of het HTML Wrapper-bestand al dan niet moet worden overschreven telkens wanneer u uw WebGL-project publiceert. Schakel deze optie uit als u externe wijzigingen hebt gemaakt in het gepubliceerde HTML-bestand en deze wijzigingen wilt behouden wanneer u wijzigingen die u in Animate hebt doorgevoerd aan de animatie of de elementen, aan het bijwerken bent.

Neemt alle verborgen lagen op in de WebGL-uitvoer. Als u de selectie van Verborgen lagen opnemen opheft, worden lagen die als verborgen zijn gemarkeerd (met inbegrip van lagen die in filmclips zijn genest) niet naar het resulterende WebGL geëxporteerd. Zo kunt u gemakkelijk verschillende versies van het WebGL-document testen door lagen onzichtbaar te maken.

Herhaalt de inhoud wanneer het laatste frame wordt bereikt. Hef de selectie van deze optie op als u de inhoud wilt stoppen wanneer het laatste frame wordt bereikt.

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

De WebGL-uitvoer begrijpen

De gepubliceerde WebGL-uitvoer bevat de volgende bestanden:

Dit omvat de runtime, roept elementen op en initialiseert de WebGL-renderer. Het bestand krijgt standaard de naam <FLA_name>.html. U kunt een andere naam opgeven voor het HTML-bestand in het dialoogvenster Publicatie-instellingen (Bestand > Publicatie-instellingen).

Het HTML-bestand wordt standaard in dezelfde map geplaatst als de map van de FLA. U kunt een andere locatie opgeven in het dialoogvenster Publicatie-instellingen.

Rendert gepubliceerde inhoud op WebGL. Wordt gepubliceerd in de map libs/ van het WebGL-document. Dit bestand krijgt de naam flwebgl-<versie>.min.js

Het omvattende HTML-bestand gebruikt dit JS-bestand om WebGL-inhoud te renderen.

Bewaart alle kleurwaarden (van vormen) inclusief de bitmapinstanties in het werkgebied.

Audio toevoegen aan uw WebGL-document

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.

Bestaande inhoud migreren naar een WebGL-document

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.

van inhoud (lagen of bibliotheeksymbolen) van een traditioneel Animate-documenttype (zoals ActionScript 3.0, AIR for Android, AIR for Desktop enzovoort) naar een WebGL-document. In dat geval wordt een niet-ondersteund inhoudstype verwijderd of omgezet in ondersteunde standaardinstellingen.

Als u bijvoorbeeld 3D-animatie kopieert, worden alle 3D-transformaties verwijderd die zijn toegepast op objecten in het werkgebied.

van een PSD- of AI-bestand met niet-ondersteunde inhoud. In dat geval wordt de inhoud verwijderd of omgezet in ondersteunde standaardinstellingen.

U importeert bijvoorbeeld een PSD-bestand waarop vervagende effecten zijn toegepast. Animate verwijdert het effect.

met meerdere documenttypen tegelijk (bijvoorbeeld ActionScript 3.0 en WebGL), wanneer u overschakelt naar een document waarin een niet-ondersteund gereedschap of een niet-ondersteunde optie geselecteerd is. In dit geval geeft Animate visueel aan dat deze functie niet wordt ondersteund.

U hebt bijvoorbeeld een stippellijn gemaakt in een ActionScript 3.0-document en u schakelt om naar WebGL met het gereedschap Lijn nog altijd geselecteerd. Bekijk de aanwijzer en de Eigenschapcontrole. Deze geven op visuele wijze aan dat de stippellijn niet wordt ondersteund in WebGL.

U kunt Javascript-code schrijven in het deelvenster Handelingen die zal worden uitgevoerd nadat de speler het frame opent. De variabele 'this' in de context van framescripts verwijst naar de instantie van de MovieClip waartoe deze behoort. Bovendien hebben framescripts toegang tot Javascript-functies en -variabelen die zijn gedeclareerd in het HTML-containerbestand. Als u een frame of laag van een ActionScript-document kopieert en naar een WebGL-document plakt, worden er opmerkingen toegevoegd aan scripts als deze er zijn.

Wijzigingen die worden toegepast op inhoud na het migreren

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

Inhoudstypen die niet worden ondersteund in HTML5 Canvas, worden verwijderd. Bijvoorbeeld:

worden niet ondersteund. Het effect wordt verwijderd en de vorm zal in plaats daarvan een Effen vulling aannemen.

Inhoudstype of functie wordt ondersteund, maar een eigenschap van de functie niet. Bijvoorbeeld:

 

wordt gewijzigd om Effen vulling aan te nemen met de primaire kleur.

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

Renderen verbeteren met bitmap-caching

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).

Overwegingen bij het gebruik van cache als bitmap

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.