Een WebGL-document maken en publiceren

  1. Adobe Animate-handboek
  2. Inleiding tot Animate
    1. Nieuw in Animate
    2. Visuele verklarende woordenlijst
    3. Systeemvereisten voor Animate
    4. Animate-sneltoetsen
    5. Werken met meerdere bestandstypen in Animate
  3. Animatie
    1. Grondbeginselen voor animaties in Animate
    2. Frames en hoofdframes gebruiken in Animate
    3. Frame-voor-frame-animaties in Animate
    4. Werken met klassieke tween-animaties in Animate
    5. De tool Penseel
    6. Hulplijnen voor bewegingen
    7. Bewegings-tween en ActionScript 3.0
    8. Informatie over animaties met bewegings-tween
    9. Animaties met bewegings-tweens
    10. Een animatie met bewegings-tween maken
    11. Eigenschapshoofdframes gebruiken
    12. Een positie animeren met een tween
    13. Bewegings-tweens bewerken in de Bewegingseditor
    14. Het bewegingspad van een tween-animatie bewerken
    15. Bewegings-tweens manipuleren
    16. Aangepaste versnellingen toevoegen
    17. Voorinstellingen voor beweging maken en toepassen
    18. Animatietween-reeksen instellen
    19. Werken met als XML-bestanden opgeslagen bewegings-tweens
    20. Bewegings-tweens en klassieke tweens
    21. Vormen tweenen
    22. De tool Bone-animatie gebruiken in Animate
    23. Werken met structuren voor personages in Animate
    24. Maskeerlagen gebruiken in Adobe Animate
    25. Werken met scènes in Animate
  4. Interactiviteit
    1. Knoppen maken met Animate
    2. Animate-projecten converteren naar andere documentindelingen
    3. HTML5 Canvas-documenten maken en publiceren in Animate
    4. Interactiviteit toevoegen met codefragmenten in Animate
    5. Aangepaste HTML5-componenten maken
    6. Componenten in HTML5 Canvas gebruiken
    7. Maken van aangepaste componenten: Voorbeelden
    8. Codefragmenten voor aangepaste componenten
    9. Tips en trucs: Adverteren met Animate
    10. Ontwerp en publicatie van virtual reality
  5. Werkruimte en workflow
    1. Penselen maken en beheren
    2. Google-lettertypen gebruiken in HTML5 Canvas-documenten
    3. Creative Cloud Libraries en Adobe Animate gebruiken
    4. Het werkgebied en het deelvenster Tools voor Animate gebruiken
    5. Workflow en werkruimte in Animate
    6. Weblettertypen gebruiken in HTML5 Canvas-documenten
    7. Tijdlijnen en ActionScript
    8. Werken met meerdere tijdlijnen
    9. Voorkeuren instellen
    10. Deelvensters voor ontwerp in Animate gebruiken
    11. Tijdlijnlagen maken met Animate
    12. Animaties exporteren voor mobiele apps en game-engines
    13. Objecten verplaatsen en kopiëren
    14. Sjablonen
    15. Zoeken en vervangen in Animate
    16. Ongedaan maken, Opnieuw en het deelvenster Historie
    17. Sneltoetsen
    18. De tijdlijn gebruiken in Animate
    19. HTML-extensies maken
    20. Optimalisatieopties voor afbeeldingen en geanimeerde GIF-bestanden
    21. Exportinstellingen voor afbeeldingen en GIF-bestanden
    22. Deelvenster Elementen in Animate
  6. Multimedia en video
    1. Grafische objecten transformeren en combineren in Animate
    2. Symboolinstanties maken in Animate en ermee werken
    3. Afbeeldingen overtrekken
    4. Geluid gebruiken in Adobe Animate
    5. SVG-bestanden exporteren
    6. Videobestanden maken voor gebruik in Animate
    7. Een video toevoegen in Animate
    8. Werken met videoactiepunten
    9. Objecten tekenen en maken met Animate
    10. Lijnen en vormen omvormen
    11. Streken, verlopen en vullingen met Animate CC
    12. Werken met Adobe Premiere Pro en After Effects
    13. Deelvensters voor kleuren in Animate CC
    14. Flash CS6-bestanden openen met Animate
    15. Werken met klassieke tekst in Animate
    16. Illustraties opnemen in Animate
    17. Geïmporteerde bitmaps in Animate
    18. 3D-afbeeldingen
    19. Werken met symbolen in Animate
    20. Lijnen en vormen tekenen met Adobe Animate
    21. Werken met bibliotheken in Animate
    22. Geluiden exporteren
    23. Objecten selecteren in Animate CC
    24. Werken met Illustrator AI-bestanden in Animate
    25. Patronen toepassen met het sproeipenseel
    26. Overvloeimodi toepassen
    27. Objecten rangschikken
    28. Taken automatiseren met het menu Opdrachten
    29. Meertalige tekst
    30. De camera gebruiken in Animate
    31. Animate gebruiken met Adobe Scout
    32. Werken met Fireworks-bestanden
    33. Grafische filters
    34. Geluid en ActionScript
    35. Tekenvoorkeuren
    36. Tekenen met de pen
  7. Platforms
    1. Animate-projecten converteren naar andere documentindelingen
    2. Ondersteuning voor aangepaste platforms
    3. HTML5 Canvas-documenten maken en publiceren in Animate
    4. Een WebGL-document maken en publiceren
    5. Toepassingen verpakken voor AIR voor iOS
    6. AIR voor Android-toepassingen publiceren
    7. Publiceren voor Adobe AIR voor desktop
    8. Publicatie-instellingen voor ActionScript
    9. Tips en trucs: ActionScript organiseren in een toepassing
    10. ActionScript gebruiken met Animate
    11. Tips en trucs: Richtlijnen voor toegankelijkheid
    12. Toegankelijkheid in de Animate-werkruimte
    13. Scripts schrijven en beheren
    14. Ondersteuning voor aangepaste platforms inschakelen
    15. Overzicht van ondersteuning voor aangepaste platforms
    16. Toegankelijke inhoud maken
    17. Werken met plug-in voor ondersteuning voor aangepaste platforms
    18. Foutopsporing in ActionScript 3.0
    19. Ondersteuning voor aangepaste platforms inschakelen
  8. Exporteren en publiceren
    1. Bestanden exporteren uit Animate CC
    2. OAM-publicatie
    3. SVG-bestanden exporteren
    4. Afbeeldingen en video's exporteren met Animate
    5. AS3-documenten publiceren
    6. Animaties exporteren voor mobiele apps en game-engines
    7. Geluiden exporteren
    8. QuickTime-videobestanden exporteren
    9. Afspelen van externe video met ActionScript beheren
    10. Tips en trucs: Tips voor het maken van inhoud voor mobiele apparaten
    11. Tips en trucs: Videoconventies
    12. Tips en trucs: Richtlijnen voor het ontwerpen van SWF-toepassingen
    13. Tips en trucs: Structuur geven aan FLA-bestanden
    14. Beste werkwijzen voor het optimaliseren van FLA-bestanden voor Animate
    15. Publicatie-instellingen voor ActionScript
    16. Publicatie-instellingen opgeven voor Animate
    17. Projectorbestanden exporteren
    18. Afbeeldingen en geanimeerde GIF-bestanden exporteren
    19. HTML-publicatiesjablonen
    20. Werken met Adobe Premiere Pro en After Effects
    21. Snel uw animaties delen en publiceren

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

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.

  1. Klik in Eigenschappen op Publicatie-instellingen.

  2. Typ een naam in het tekstvak Uitvoernaam.

  3. Selecteer GLB of GLTF in de optie Indeling.

  4. Geef een decimaalnummer op binnen het bereik 3 in het tekstvak Afbeeldingsresolutie.

  5. Schakel de optie Witruimtes verwijderen in JSON-bestand in om de omvang van het bestand te verminderen.

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.

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 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:

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.

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

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.

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

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.
Adobe-logo

Aanmelden bij je account