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.
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.
Zorg ervoor dat u WebGL inschakelt op uw browser, omdat WebGL op sommige browsers standaard is uitgeschakeld.
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.
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.
Geef op basis van uw eisen de hoogte, breedte en eenheden op en klik op Maken.
Klik op Publicatie-instellingen in de Eigenschapcontrole.
Typ een naam in het tekstvak Output name (Naam uitvoer).
Selecteer GLB of GLTF in Indelingsoptie.
Geef een decimaalnummer op binnen het bereik 1-3 in het tekstvak Image Resolution (Afbeeldingsresolutie).
Schakel Remove white spaces in JSON file (Witruimtes verwijderden in JSON-bestand) in om de omvang van het bestand te verminderen.
De opties Tijdlijn herhalen en Verborgen lagen opnemen zijn standaard ingeschakeld U kunt deze uitschakelen om kleine fouten te vinden.
Klik op de knop Publiceren om het bestand te publiceren.
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 zelfstudie aan het einde van dit voorbeeld en voer de volgende stappen uit.
Klik in Eigenschappen op Publicatie-instellingen.
Typ een naam in het tekstvak Uitvoernaam.
Selecteer GLB of GLTF in de optie Indeling.
Geef een decimaalnummer op binnen het bereik 3 in het tekstvak Afbeeldingsresolutie.
Schakel de optie Witruimtes verwijderen in JSON-bestand in om de omvang van het bestand te verminderen.
Raadpleeg de volgende inhoud als u Animate 18.0 of een van de eerdere versies van Animate gebruikt.
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.
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.
In Animate kunt u met het WebGL-document snel inhoud maken en publiceren voor de WebGL-indeling. Zo maakt u een WebGL-document:
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:
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:
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. 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.
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.
De maximale FPS-waarde die u kunt opgeven voor WebGL-inhoud die wordt uitgevoerd in browsers is 60 FPS.
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.
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.
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 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.
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.
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.
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:
Aanmelden bij je account