Wat is WebGL?

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.

Opmerking:

Zorg ervoor dat u WebGL inschakelt op uw browser, omdat WebGL op sommige browsers standaard is uitgeschakeld.

Documenttype WebGL-glTF (bèta) gebruiken

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.

  1. Als u een document op basis van WebGL-glTF wilt maken, selecteert u WebGL-glTF Standard of WebGL-glTF Extended in de bestemming Geavanceerd van het beginscherm.

    Documenttype WebGL-glTF
    Documenttype WebGL-glTF
  2. Geef op basis van uw eisen de hoogte, breedte en eenheden op en klik op Maken.

Een WebGL-glTF-bestand publiceren

  1. Klik op Publicatie-instellingen in de Eigenschapcontrole.

    WebGL-glTF-bestand publiceren
    WebGL-glTF-bestand publiceren
  2. Typ een naam in het tekstvak Output name (Naam uitvoer).

    Dialoogvenster Publicatie-instellingen van documenttype WebGL-glTF Standard
    Dialoogvenster Publicatie-instellingen van documenttype WebGL-glTF Standard
  3. Selecteer GLB of GLTF in Indelingsoptie.

  4. Geef een decimaalnummer op binnen het bereik 1-3 in het tekstvak Image Resolution (Afbeeldingsresolutie).

  5. Schakel Remove white spaces in JSON file (Witruimtes verwijderden in JSON-bestand) in om de omvang van het bestand te verminderen.

  6. De opties Tijdlijn herhalen en Verborgen lagen opnemen zijn standaard ingeschakeld U kunt deze uitschakelen om kleine fouten te vinden.

  7. Klik op de knop Publiceren om het bestand te publiceren.

Een videozelfstudie over WebGL-glTF-export (Standard en Extended)

Een videozelfstudie over WebGL-glTF-export (Standard en Extended)
Video die laat zien hoe u WebGL-glTF-export (Standard en Extended) gebruikt

Animate CC 18.0 en eerdere versies

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

Het WebGL-documenttype

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.

Opmerking:

Ondersteuning voor WebGL is alleen beschikbaar als voorbeeld. Deze update van Animate bevat ondersteuning voor basisanimaties met gebruik van geluid en scripts, alsook een set met functies voor interactiviteit. In de toekomstige versies van Animate vindt u nog meer functies voor het WebGL-documenttype. Voor een volledige lijst met Animate-functies die worden ondersteund voor WebGL raadpleegt u dit KB-artikel.

Een WebGL-document maken

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

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 CC op Ctrl+Enter (Windows) en CMD+Enter (MAC). Hiermee wordt uw standaardbrowser gestart en de WebGL-inhoud gerenderd.
Animate CC vereist een webserver om WebGL-inhoud uit te voeren. Animate CC 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:

Uitvoerbestand

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.

HTML overschrijven

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

Verborgen lagen opnemen

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.

Tijdlijn herhalen

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.

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

Opmerking:

De maximale FPS-waarde die u kunt opgeven voor WebGL-inhoud die wordt uitgevoerd in browsers is 60 FPS.

De WebGL-uitvoer begrijpen

De gepubliceerde WebGL-uitvoer bevat de volgende bestanden:

Omvattend HTML-bestand

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.

JavaScript-bestand (WebGL-runtime)

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.

Structuuratlas

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.

Kopiëren

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.

importeren

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.

Werken

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

Scripts

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.

Inhoud wordt verwijderd

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

Filters

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

Filters
Vervagend filtereffect wordt verwijderd en wordt vervangen door Effen vulling.

Inhoud wordt gewijzigd naar een ondersteunde standaardwaarde

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

 

Radiaal verloop

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

Radial Gradient
Radiaal verloop wordt gewijzigd in Effen vulling 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).

CacheAsBitmap

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.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid