HTML5 Canvas-documenten maken en publiceren in Animate

Canvas is een nieuw element in HTML5 dat API's biedt waarmee u grafische afbeeldingen, grafieken, afbeeldingen en animatie dynamisch kunt genereren en renderen. De Canvas-API voor HTML5 maakt het HTML5-platform sterker door de aanvulling van tekenmogelijkheden in 2D. Deze mogelijkheden worden ondersteund door de meeste moderne besturingssystemen en browsers.

Canvas is in principe een renderengine voor bitmaps. De tekeningen zijn definitief en de grootte ervan kan niet worden aangepast. Bovendien maken objecten die in Canvas worden getekend geen onderdeel uit van het DOM van de webpagina.

U kunt op een webpagina Canvas-elementen toevoegen met de tag <Canvas>. U kunt deze elementen verbeteren met gebruik van JavaScript om interactiviteit toe te voegen. Zie deze koppeling voor meer informatie.

Het nieuwe documenttype HTML5 Canvas

Met Animate kunt u een HTML5 Canvas-document maken met rijke illustraties, grafische afbeeldingen, animaties enzovoort. Er is een nieuw documenttype (HTML5 Canvas) toegevoegd aan Animate dat native ondersteuning biedt voor het maken van rijke en interactieve HTML5-inhoud. Dit betekent dat u de traditionele tijdlijn, werkruimte en gereedschappen van Animate kunt gebruiken om inhoud te maken, en toch HTML5-uitvoer kunt maken. Met een paar eenvoudige klikken bent u klaar om een HTML5 Canvas-document te maken en een volledig functionele uitvoer te genereren. Met het oog hierop zijn de document- en publicatie-opties in Animate vooraf ingesteld op het genereren van HTML5-uitvoer.

Animate is geïntegreerd met CreateJS, een module die veelzijdige interactieve inhoud op open webtechnologieën mogelijk maakt via HTML5. Animate genereert HTML en JavaScript voor inhoud (inclusief bitmaps, vectoren, vormen, geluiden, tweens enzovoort) die in het werkgebied is gemaakt. De uitvoer kan worden uitgevoerd op elk apparaat of in elke browser met ondersteuning voor HTML5 Canvas.

Animate en de Canvas-API

Animate publiceert naar HTML5 door gebruik te maken van de Canvas-API. Animate zet objecten die in het werkgebied zijn gemaakt naadloos om in corresponderende Canvas-elementen. Dankzij de één-op-één toewijzing van de Animate-functies met de API's in Canvas kunt u in Animate complexe inhoud publiceren naar HTML5.

Een HTML5 Canvas-document maken

Ga als volgt te werk om een HTML5 Canvas-document te maken:

1. Selecteer Bestand > Nieuw om het dialoogvenster Nieuw document weer te geven. Selecteer het tabblad Geavanceerd boven in het scherm en klik op de optie HTML5-canvas. Er wordt dan een nieuwe FLA geopend waarin de Publicatie-instellingen zijn aangepast aan het produceren van HTML5-uitvoer.

U kunt nu starten met het maken van HTML5-inhoud met behulp van de gereedschappen in Animate. Wanneer u begint te werken met het HTML5 Canvas-document, merkt u dat bepaalde functies en gereedschappen niet worden ondersteund en zijn uitgeschakeld. Dit komt omdat Animate die functies ondersteunt die op hun beurt worden ondersteund door het Canvas-element in HTML5. 3D-transformaties, stippellijnen en schuine-kanteffecten worden bijvoorbeeld niet ondersteund.

Interactiviteit toevoegen in HTML5 Canvas-document

Animate publiceert HTML5-inhoud met behulp van de CreateJS-bibliotheken. CreateJS is een suite van modulaire bibliotheken en gereedschappen die veelzijdige interactieve inhoud op open webtechnologieën mogelijk maakt via HTML5. De CreateJS-suite bestaat uit: EaselJS, TweenJS, SoundJS en PreloadJS. CreateJS zet inhoud die in het werkgebied is gemaakt, om naar HTML5 met behulp van deze individuele bibliotheken om HTML- en JavaScript-uitvoerbestanden te produceren. U kunt dit JavaScript-bestand ook manipuleren om uw inhoud te verbeteren.

Met Animate kunt u echter ook vanuit de toepassing zelf interactiviteit toevoegen aan objecten in het werkgebied die zijn gemaakt voor HTML5 Canvas. Dit betekent dat u JavaScript-code kunt toevoegen aan individuele objecten in het werkgebied in Animate zelf en dat u een voorbeeld ervan kunt weergeven tijdens het ontwerpen. Animate biedt op zijn beurt native ondersteuning voor JavaScript met nuttige functies in de code-editor om een efficiëntere workflow voor programmeurs te helpen maken.

U kunt individuele frames en keyframes op de tijdlijn kiezen om interactiviteit toe te voegen aan uw inhoud. Voor een HTML5 Canvas-document kunt u interactiviteit toevoegen met behulp van JavaScript. Zie deze koppeling voor meer informatie over het schrijven van JavaScript-code.

JavaScript-code kan nu rechtstreeks worden geschreven in het deelvenster Handelingen. De volgende functies worden ondersteund bij het schrijven van de JavaScript-code:

Hiermee kunt u snel en zonder fouten JavaScript-code invoegen en bewerken. Terwijl u tekens in het deelvenster Handelingen typt, wordt een lijst met mogelijkheden weergegeven die uw invoer mogelijk aanvullen.

Bovendien biedt Animate ondersteuning voor bepaalde functies die inherent zijn aan het deelvenster Handelingen wanneer u werkt met HTML5 Canvas. Deze functies helpen een efficiëntere workflow te maken bij het toevoegen van interactiviteit aan objecten in het werkgebied. Deze zijn:

Geeft code weer in verschillende lettertypen of kleuren afhankelijk van de syntaxis. Met deze functie kunt u code schrijven op een gestructureerde manier omdat u correcte code en syntaxisfouten visueel kunt onderscheiden.

Geeft code weer in verschillende kleuren afhankelijk van de syntaxis. Hiermee kunt u verschillende delen van een syntaxis visueel onderscheiden.

Voegt automatisch sluitende vierkante en ronde haakjes toe voor open haakjes wanneer u JavaScript-code schrijft.

U kunt interactiviteit toevoegen aan vormen of objecten in het werkgebied met behulp van JavaScript. U kunt JavaScript toevoegen aan individuele frames en keyframes.

1. Selecteer het frame waaraan u JavaScript wilt toevoegen.
2. Selecteer Venster > Handelingen om het deelvenster Handelingen te openen.

JavaScript-codefragmenten gebruiken

U kunt interactiviteit toevoegen met behulp van JavaScript-codefragmenten die beschikbaar zijn in Animate. Als u codefragmenten wilt openen en gebruiken, selecteert u Vensters > Codefragmenten. Meer informatie over het toevoegen van JavaScript-codefragmenten vindt u in dit artikel.

Verwijzingen naar de CreateJS-documentatie

Codes voor interactiviteit

JavaScript biedt u een aantal opties waarmee u de animatie interactief kunt maken. Wilt u leren hoe u interactieve bewegingen kunt toevoegen aan uw personage? Bekijk de zelfstudie aan het einde van dit voorbeeld en voer de volgende stappen uit.

Uw inhoud interactief maken met HTML5

Animaties publiceren naar HTML5

Ga als volgt te werk om de inhoud in het werkgebied te publiceren naar HTML5:

1. Selecteer Bestand > Publicatie-instellingen.
2. Geef de volgende opties op in het dialoogvenster Publicatie-instellingen:

Basisinstellingen

De map waarnaar de FLA is gepubliceerd. Dit is standaard dezelfde map als de FLA, maar u kunt dit wijzigen door te klikken op de knop Bladeren "...".

Als deze optie ingeschakeld is, wordt de tijdlijn herhaald. Zo niet, dan wordt het afspelen gestopt als het einde is bereikt.

Als deze optie niet is geselecteerd, worden verborgen lagen niet opgenomen in de uitvoer.

Hiermee kunnen gebruikers selecteren of het werkgebied horizontaal of verticaal moet worden gecentreerd (of beide). Het HTML Canvas-werkgebied wordt standaard in het midden van het browservenster weergegeven.

Hiermee geven gebruikers aan of de animatie kan reageren op de breedte of hoogte (of beide). De grootte van de gepubliceerde uitvoer wordt gebaseerd op verschillende vormfactoren. Het resultaat is responsief en scherper en de HiDPI-compatibele uitvoer is van hogere kwaliteit.

De uitvoer wordt uitgerekt zodat deze zonder randen op het volledige schermgebied wordt weergegeven. De oorspronkelijke hoogte-breedteverhouding blijft behouden, maar enkele onderdelen van het canvas passen mogelijk niet in de weergave.

• De opties Breedte, Hoogte of Beide zorgen ervoor dat de volledige inhoud omlaag wordt geschaald naar de grootte van het canvas en ook zichtbaar is op een klein scherm (zoals mobiele apparaten of tabletten). Als de scherm groter is het ontwerpwerkgebied, wordt het canvas in de oorspronkelijke grootte weergegeven.

Hiermee kunnen gebruikers kiezen of de animatie moet worden aangepast aan het volledige scherm, of moet uitgerekt om deze passend te maken. Deze optie is standaard uitgeschakeld.

Passend in weergave: toont de uitvoer in de modus Volledig scherm waarbij het gehele scherm wordt weergegeven en de hoogte-breedteverhouding behouden blijft.

Uitrekken om passend te maken: rekt het beeld zodanig dat de uitvoer geen randen bevat.

Hiermee kunnen gebruikers aangeven of ze de standaardvoorlader willen gebruiken, of zelf een voorlader willen kiezen uit de documentbibliotheek.

De voorlader is een visuele indicator in de vorm van een geanimeerd GIF-bestand dat wordt weergegeven wanneer de scripts en de elementen worden geladen die nodig zijn voor de weergave van een animatie. Nadat de elementen zijn geladen, wordt de voorlader verborgen en wordt de werkelijke animatie getoond.

De optie Voorlader is standaard uitgeschakeld.

• Gebruik Standaard om de standaardvoorlader te tonen, of kies
• Bladeren om de gewenste voorlader voor GIF-bestanden te gebruiken. De voorlader-GIF wordt gekopieerd naar de geconfigureerde afbeeldingenmap in Afbeeldingselementen exporteren.
• Gebruik de optie Voorvertoning om een voorvertoning weer te geven van het geselecteerde GIF-bestand.

Gebruik de schakelopties voor publicatie op hoofdmap- of submapniveau. Deze knop is standaard AAN. Als de knop UIT staat, wordt het mapveld uitgeschakeld en worden elementen naar dezelfde map geëxporteerd als het uitvoerbestand.

Document als structuur exporteren Hiermee kunt u vectoranimaties exporteren als een structuur om de prestaties van de animatie te verbeteren. Zie Publicatie van structuren voor meer informatie.

 Dit is alleen van toepassing wanneer de optie 'Afbeeldingen combineren in sprite-werkblad' is uitgeschakeld.

 U kunt alle geïmporteerde afbeeldingen (inclusief gecomprimeerde afbeeldingen) van het Canvas-document exporteren met behoud van de grootte. Schakel de opties 'Document als structuur exporteren' en 'Afbeeldingen combineren in sprite-werkblad' op het tabblad Basis uit. De afbeeldingen worden geëxporteerd en hun afmetingen blijven behouden.

De map waarin afbeeldingselementen worden geplaatst en van waaruit naar deze elementen wordt verwezen.

Combineren tot sprite-werkbladen: selecteer deze optie om alle afbeeldingselementen in een sprite-werkblad te combineren. Zie Bitmaps exporteren als sprite-werkbladen voor meer opties voor sprite-werkbladen.

De map waarin de geluidselementen in uw document worden geplaatst en van waaruit naar deze elementen wordt verwezen.

De map waarin de CreateJS-bibliotheken worden geplaatst en van waaruit naar deze bibliotheken wordt verwezen.

 Met de standaardinstelling worden bestanden gepubliceerd naar afzonderlijke en logische submappen.

Geavanceerde instellingen

De relatieve URL's waarnaar afbeeldingen, geluiden en ondersteunende CreateJS JavaScript-bibliotheken worden geëxporteerd. Als het selectievakje rechts niet is ingeschakeld, worden deze elementen niet geëxporteerd uit de FLA, maar wordt het opgegeven pad nog steeds gebruikt voor het samenstellen van hun URL's. Het versnelt het publiceren vanaf een FLA met verschillende media-elementen, of vermijd het overschrijven van gewijzigde JavaScript-bibliotheken.

Met de optie Alle bitmaps exporteren als sprite-werkbladen kunt u alle bitmaps in een Canvas-document inpakken in een sprite-werkblad, waardoor het aantal serververzoeken wordt beperkt en de prestaties verbeteren. U kunt de maximale afmetingen van het sprite-werkblad opgeven door de waarden voor de hoogte en breedte op te geven.

Standaard gebruiken: publiceer uw HTML5-uitvoer met de standaardsjabloon.

Nieuw importeren: importeer een nieuwe sjabloon voor uw HTML5-document.

Exporteren: exporteer uw HTML5-document als een sjabloon.

Als deze optie is ingeschakeld, worden kopieën gebruikt van de bibliotheken die worden gehost op de Create JS CDN op code.createjs.com. Zo kunnen de bibliotheken in de cache worden opgeslagen en door meerdere sites worden gebruikt.

Als deze optie niet is geselecteerd, worden verborgen lagen niet opgenomen in de uitvoer.

Als deze optie ingeschakeld is, worden vectorinstructies in compacte vorm uitgevoerd. Schakel deze optie uit om leesbare verbale instructies te exporteren (handig voor leerdoeleinden).

Als deze optie ingeschakeld is, bevatten tijdlijnsymbolen een eigenschap frameBounds met een array van Rectangles die overeenkomen met de grenzen van elk frame in de tijdlijn. Multiframegrenzen vergroten de publicatietijd aanzienlijk.

Als u JavaScript opnemen in HTML hebt geselecteerd, wordt het selectievakje HTML-bestand overschrijven bij publiceren ingeschakeld en is deze niet meer beschikbaar (grijs). Als u het selectievakje HTML-bestand overschrijven bij publiceren uitschakelt, wordt de optie JavaScript opnemen in HTML uitgeschakeld en is deze niet meer beschikbaar (grijs).

3. Klik op Publiceren om uw inhoud te publiceren naar de opgegeven locatie.

 Het is niet mogelijk een animatie te herhalen die is ontworpen met gebruik van geneste tijdlijnen met één frame.

HTML-sjabloonvariabelen

Wanneer u een nieuwe aangepaste HTML-sjabloon importeert, worden de standaardvariabelen tijdens het publiceren vervangend door aangepaste codefragmenten die zijn gebaseerd op de onderdelen van uw FLA-bestand. 

De volgende tabel bevat de huidige sjabloonvariabelen die door Animate worden herkend en vervangen:

De volgende tokens uit eerdere versies zijn afgekeurd in de huidige versie:

 Dit token worden gemodulariseerd en vervangen door andere tokens.

JSAPI-ondersteuning voor het importeren en exporteren van HTML-sjablonen voor Canvas-documenten

De volgende JSAPI's bieden ondersteuning voor het importeren en exporteren van HTML-sjablonen voor Canvas-documenten:

• Hiermee exporteert u de HTML5 Canvas-publicatiesjabloon voor een bepaald document naar de opgegeven locatie:

bool document::exportCanvasPublishTemplate(pathURI)

• Voorbeeld:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Sjabloon kon niet worden geëxporteerd”);

• Hiermee importeert u de HTML5 Canvas-publicatiesjabloon voor een bepaald document vanuit de opgegeven pad-URI van de locatie, en stelt u deze sjabloon in:
  

bool document::importCanvasPublishTemplate(pathURI)

• Voorbeeld: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Sjabloon kan niet worden geïmporteerd”);

JavaScript insluiten in HTML

Animate introduceert de mogelijkheid om een JS-bestand op te nemen in het HTML-bestand tijdens publicatie van het canvas.

1. Open het menu Publicatie-instellingen, ga naar het tabblad Geavanceerd en schakel de optie JavaScript opnemen in HTML in.
2. Selecteer OK in het dialoogvenster JavaScript in HTML-bestand opnemen bij publiceren om de inhoud die het HTML-bestand overschrijft, opnieuw te publiceren.
3. Hierdoor wordt het selectievakje HTML-bestand overschrijven bij publiceren uitgeschakeld, en wordt het HTML-bestand tijdens het publiceren gegenereerd, maar ook overschreven.
4. Selecteer OK bij de optie Stoppen met opnemen van JavaScript in HTML om de JavaScript-code niet op te nemen en het HTML-bestand opnieuw te publiceren.
5. Wanneer de optie HTML-bestand overschrijven tijdens publicatie niet is geselecteerd, wordt de optie JavaScript opnemen in HTML automatisch uitgeschakeld. 

 Als u het HTML-bestand niet wilt overschrijven, kunnen de opties 'HTML-bestand overschrijven bij publiceren' en 'JS insluiten in HTML' niet tegelijkertijd worden toegepast.

Globale scripts en scripts van derde partijen toevoegen

Animatoren gebruiken vaak JavaScript-code die van toepassing is op de volledige animatie. Met deze functie kunt u niet-framespecifieke, algemene scripts en scripts van derde partijen toevoegen die op de hele animatie kunnen worden toegepast in Animate. 

Globale scripts toevoegen en gebruiken: 

Scripts van derde partijen toevoegen

Animatoren gebruiken vaak JavaScript-bibliotheken van derde partijen, maar moeten de code die door Animate wordt gegenereerd, handmatig wijzigen. Met deze functie beschikken animatoren over meer flexibiliteit bij het gebruik van de meest recente bibliotheken of code van JavaScript voor hun animaties.

Scripts van derde partijen toevoegen: 

JSON-gegevens samenvoegen in JS

Op basis van klantenfeedback en omdat JSON-bestanden inherent instabiel zijn, hebben wij de relevante gegevens samengevoegd met het JS-bestand en wordt er geen afzonderlijk JSON-bestand gemaakt.

Optimalisatie van HTML5 Canvas-uitvoer

Animate optimaliseert de grootte van HTML5 Canvas-uitvoerbestanden en zorgt voor betere prestaties doordat:

• Bitmaps worden geëxporteerd als sprite-werkblad met de opties die zijn opgegeven in het tabblad Sprite-werkblad in Publicatie-instellingen.
• Verborgen lagen worden uitgesloten van gepubliceerde uitvoer (doordat het selectievakje Verborgen lagen opnemen wordt uitgeschakeld).
• Alle ongebruikte elementen zoals geluiden en bitmaps, en alle elementen op ongebruikte frames worden uitgesloten van het publicatiebestand (standaard).
• FLA-elementen niet automatisch worden geëxporteerd, aangezien de exportopties voor afbeeldingen, geluid en ondersteunende CreateJS JavaScript-bibliotheken standaard zijn uitgeschakeld en omdat de relatieve URL's worden toegepast bij het exporteren.
• HiDPI-compatibele HTML5 Canvas-uitvoer: Animate schaalt de uitvoer op basis van de pixelverhouding van het apparaat waarop u de inhoud bekijkt. Deze compatibiliteit zorgt voor een scherpere uitvoer bij in- en uitzoomen en biedt ook een oplossing voor pixelvormingsproblemen bij Canvas-documenten wanneer u de HTML Canvas-uitvoer op een High DPI-computer bekijkt.
   

Een transparante canvasachtergrond instellen

U kunt het canvas aanpassen aan verschillende kleuren en ook de weergavetransparantie wijzigen. Als u een transparant canvas maakt, kunt u de onderliggende HTML-inhoud weergeven tijdens het publiceren.

Opmerking: met deze instelling wordt de achtergrond ook transparant tijdens OAM-publicatie.

1. Selecteer het canvas dat u wilt wijzigen.
2. Selecteer Werkgebied in het deelvenster Eigenschappen.
3. Stel de percentagewaarden in voor Alpha in het werkgebied.

Ondersteuning voor 'Geen kleur'-staal

Met de optie Geen kleur kunt u de canvasachtergrond ook transparant maken:

1. Selecteer Wijzigen > Document > Werkgebiedkleur of ga naar de Eigenschapscontrole en selecteer Geavanceerde instellingen.
2. In Werkgebiedkleur, selecteert u Geen kleur.

Bitmaps exporteren als sprite-werkblad

Door een aantal bitmaps dat u hebt gebruikt in uw HTML5 Canvas-document te exporteren als een enkel sprite-werkblad, zijn er minder serververzoeken en wordt ook het uitvoerbestand kleiner. Dit leidt tot betere prestaties. U kunt het sprite-werkblad exporteren als PNG (standaard), JPEG of beide.

1. Op het tabblad Sprite-werkblad schakelt u het selectievakje Afbeeldingselementen combineren tot sprite-werkbladen in.
2. Selecteer bij Indeling de optie PNG, JPEG of Beide.
   
3. Als u PNG of Beide hebt geselecteerd, geeft u de volgende opties onder PNG-instellingen op:
   • Kwaliteit: stel de kwaliteit van het sprite-werkblad in op 8-bits (standaard), 24-bits of 32-bits.
   • Max. grootte: geef de maximale hoogte en de breedte van het sprite-werkblad op, uitgedrukt in pixels.
   • Achtergrond: klik en stel de achtergrondkleur in voor het sprite-werkblad.   
4. Als u JPEG of Beide hebt geselecteerd, geeft u de volgende opties onder JPEG-instellingen op:
   
   • Kwaliteit: hiermee stelt u de kwaliteit in van het sprite-werkblad.
   • Max. grootte: geef de maximale hoogte en de breedte van het sprite-werkblad op, uitgedrukt in pixels.
   • Achtergrond: klik en stel de achtergrondkleur in voor het sprite-werkblad.   

Werken met tekst in een HTML5 Canvas-document

HTML Canvas biedt ondersteuning voor statische en dynamische tekst.

Statische tekst

Statische tekst is een rijkere optie waarbij alle elementen tijdens de publicatie worden geconverteerd naar contouren. Dit biedt een uitstekende WYSIWYG-gebruikerservaring. Aangezien de tekst wordt gepubliceerd als vectorcontouren, kunt u deze tijdens runtime niet bewerken.

Opmerking: te veel statische tekst kan leiden tot enorm grote bestanden.

Dynamische tekst

Met dynamische tekst kunt u tekst tijdens runtime wijzigen en is er weinig impact op de bestandsgrootte. Dynamische tekst biedt minder ondersteuningsopties dan statische tekst. Dynamische tekst biedt ook ondersteuning voor weblettertypen via Adobe Fonts.

Als u dynamische tekst gebruikt met lettertypen die niet beschikbaar zijn op de apparaten van eindgebruikers, wordt bij de uitvoer het standaardlettertype voor weergave toegepast. De WYSIWYG-gebruikservaring wordt hierdoor beperkt. Dergelijke problemen kunnen worden opgelost met behulp van weblettertypen.

Weblettertypen toevoegen aan uw HTML5 Canvas-document

Animate biedt weblettertypen voor dynamische tekst in HTML5 Canvas-documenten. Adobe Fonts biedt directe toegang tot duizenden hoogwaardige, professionele lettertypen van de beste lettertypeontwikkelaars. U kunt Adobe Fonts-lettertypen naadloos openen en toepassen in uw HTML5-uitvoer voor moderne browsers en mobiele apparaten, dankzij uw Creative Cloud-lidmaatschap.

Zie Weblettertypen gebruiken in HTML5 Canvas-documenten voor meer informatie over het gebruik van Adobe Fonts-weblettertypen in Animate.

Animate-versie 2015.2 verbetert de visuele beleving van dynamische tekst in een Canvas-document, zodat deze tekst er hetzelfde uitziet in het werkgebied en als gepubliceerde afbeelding.

Opmerking: Adobe Fonts-lettertypen zijn niet beschikbaar voor statische tekst.

De HTML5 Canvas-uitvoer begrijpen

De gepubliceerde HTML5-uitvoer bevat de volgende bestanden:

Bevat definities voor alle vormen, objecten en illustraties in het Canvas-element. Bovendien wordt de CreateJS-naamruimte opgeroepen om Animate om te zetten in HTML5 en het overeenkomstige JavaScript-bestand dat interactieve elementen bevat. 

Bevat speciale definities en code voor alle interactieve elementen van de animatie. In het JavaScript-bestand is ook code gedefinieerd voor alle typen tweens.

Deze bestanden worden standaard naar dezelfde locatie gekopieerd als de locatie van de FLA. U kunt de locatie wijzigen door het uitvoerpad op te geven in het dialoogvenster Publicatie-instellingen (Bestand > Publicatie-instellingen).

Bestaande inhoud migreren naar HTML5 Canvas

U kunt bestaande inhoud in Animate migreren om HTML5-uitvoer te genereren. Met het oog hierop kunt u met Animate inhoud migreren door handmatig individuele lagen, symbolen en andere bibliotheekitems te kopiëren of importeren. Of u kunt de opdracht AS3 omzetten in HTML5 Canvas-document uitvoeren om automatisch bestaande ActionScript-inhoud te importeren naar een nieuw HTML5 Canvas-document. Zie deze koppeling voor meer informatie.

Als u echter in Animate met een HTML5-document werkt, ziet u dat bepaalde Animate-functies niet worden ondersteund. Dat komt doordat er voor deze functies in Animate geen corresponderende functies zijn in de Canvas-API. Daarom kunnen deze functies niet worden gebruikt in het HTML5 Canvas-documenttype. Dit kan van invloed zijn tijdens de migratie van inhoud, wanneer u het volgende probeert te doen:

van inhoud (lagen of bibliotheeksymbolen) van een traditioneel Animate-documenttype (zoals ActionScript 3.0, AIR for Android, AIR for Desktop enzovoort) naar een HTML5-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 het effect Verlopende schuine kant is toegepast. Animate verwijdert het effect.

met meerdere documenttypen tegelijk (bijvoorbeeld ActionScript 3.0 en HTML5 Canvas), 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 HTML5 Canvas met het gereedschap Lijn nog altijd geselecteerd. Bekijk de aanwijzer en de Eigenschapcontrole. Deze geven pictogrammen weer om aan te geven dat de stippellijn niet wordt ondersteund in HTML5 Canvas.

ActionScript-componenten worden verwijderd en de code is zonder opmerkingen. En als u JavaScript hebt geschreven in het opmerkingenblok (voor Toolkit for CreateJS met Animate 13.0), zorgt u ervoor dat u de opmerkingen van de code handmatig verwijdert.

Als u bijvoorbeeld lagen hebt gekopieerd die knoppen bevatten, worden deze verwijderd.

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 HTML5 Canvas-document.

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

• 3D-transformaties worden verwijderd
• ActionScript-code is zonder opmerkingen
• Video's worden verwijderd

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

• Overvloeimodus Bedekken wordt niet ondersteund en wordt gewijzigd in Normaal.
• Stippellijn wordt niet ondersteund en wordt gewijzigd in Effen.

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

Andere documenttypen converteren naar HTML5 Canvas-documenten

Met het conversieprogramma voor algemene documenttypen kunt u uw bestaande FLA-projecten (van elk willekeurig type) converteren naar een ander documenttype, zoals HTML5 Canvas, ActionScript/AIR, WebGL of een aangepast documenttype. Wanneer u een bestand converteert naar een bepaalde indeling, hebt u toegang tot alle bewerkingsfuncties die Animate biedt voor die indeling. 

Zie Converteren naar andere documentindelingen voor meer informatie

ActionScript 3-document omzetten in HTML5 Canvas-document met behulp van JSFL-script

Animate biedt een JSFL-script om een AS3-document om te zetten in een HTML5 Canvas-document. Als het JSFL-script wordt uitgevoerd, gebeurt het volgende:

• Er wordt een nieuw HTML5 Canvas-document gemaakt.
• Alle lagen, symbolen en bibliotheekitems worden gekopieerd naar het nieuwe HTML5 Canvas-document.
• Standaardwaarden worden toegepast op niet-ondersteunde functies, subfuncties of functie-eigenschappen.
• Er wordt een afzonderlijk FLA-bestand gemaakt voor elke scène, omdat een HTML5 Canvas-document geen ondersteuning biedt voor meerdere scènes.

1. Open het ActionScript 3-document in Animate.
2. Selecteer Opdrachten > AS3 omzetten in HTML5 Canvas-document.

 Dit is alleen van toepassing wanneer de optie 'Afbeeldingen combineren in sprite-werkblad' is uitgeschakeld.