In dit artikel leert u hoe u aangepaste componenten voor HTML5 Canvas maakt.

Animate CC wordt geleverd met een reeks standaardcomponenten. Deze zijn echter niet voldoende voor uw project. Dit onderwerp geeft u inzicht in hoe u aangepaste HTML5-componenten maakt voor Animate CC.

Een componentdefinitie bestaat uit drie belangrijke onderdelen:

  • Metagegevens: Bieden informatie over de component zoals de weergavenaam, versie, set met configureerbare eigenschappen, pictogram enzovoort. Dit alles wordt vastgelegd in een bestand met de naam components.js. U kunt de componenten als categorie groeperen en met dit bestand kunt u de metagegevens voor alle componenten in een categorie verstrekken.
  • Bron: Biedt informatie over de werkelijke componentbron. Dit wordt ingesloten bij uitvoering wanneer u een film voorvertoont of publiceert met behulp van componenten.
  • Elementen: Biedt informatie over runtimeafhankelijkheid zoals JavaScript-bibliotheek of CSS of elementen bij uitvoering en pictogrammen. De elementen kunnen in de Animate-ontwerpomgeving worden gebruikt.

Opmerking:

Een componentdefinitie bevat ook lokalisatiegerelateerde bronnen.

componentsJS
Configuratie van een voorbeeldmap voor een aangepaste componentcategorie

Animate CC controleert de volgende mappen op de aanwezigheid van aangepaste HTML5-componenten en laadt deze tijdens het starten:

• Windows:

<AppData>/Local/Adobe/Adobe Animate CC 2017/en_US/Configuration/HTML5Components

 

• MAC:

 

~/Library/Application Support/Adobe/Animate CC 2017/en_US/Configuration/HTML5Components/

Opmerking:

Het bovenstaande mappad is van toepassing voor Amerikaans Engels. Als u Animate in een andere taal gebruikt, gebruikt u de taalspecifieke mapnaam ter vervanging van en_US.

Voor elke map op de locatie waarin zich het bestand 'components.js' bevindt, maakt Animate CC een categorie waarin alle componenten worden geladen.

Metagegevens van componenten

De metagegevens van de component worden vastgelegd in een bestand met de naam components.js, dat wordt geplaatst in een map binnen de map HTML5Components

metadata-code
Voorbeeld van metagegevens voor een videocomponent.

Components.js

Components.js

is een JSON-bestand dat de volgende secties bevat:

  • Categorie: de naam in het deelvenster Componenten voor deze reeks componenten. Deze kan worden gelokaliseerd.
  • Componenten: een array waarbij elk item de metagegevens over een component bevat. In het bovenstaande voorbeeld heeft de array slechts één element. De metagegevens hebben de volgende secties:

Naam

Vereist

Beschrijving

Klassenaam

Ja

De klassenaam van de component die in het bronbestand is opgegeven. De klassenaam ondersteunt één naamruimteniveau. Bijvoorbeeld, Video.

 

Versie

Nee

Versienummer van de component. Dit wordt gebruikt voor toekomstige componentupgrades. De huidige flow wordt op dit moment echter niet gedefinieerd.

Bron

Ja

Relatief pad van het hoofdbronbestand van de component. In de volgende sectie vindt u meer informatie over wat in de bron is opgenomen.

Pictogram

Nee

Relatief pad voor het pictogram voor de component. Dit pictogram wordt gebruikt in het deelvenster Componenten en in het werkgebied wanneer er een instantie van de component samen met de naam wordt gemaakt. Als er niets is opgegeven, wordt er een standaardpictogram gebruikt.

U kunt de png-naam van het te laden pictogram opgeven (doorgaans 32x32). Als u ondersteuning wilt bieden aan verschillende pictogrammen voor een lichte gebruikersinterface en voor een donkere gebruikersinterface, geef dan twee png's op die aan de volgende naamgevingsregels voldoen:

 

custom_icon_N.png: pictogram voor donkere gebruikersinterface

custom_icon_D.png: pictogram voor donkere gebruikersinterface

 

en geef alleen de naam 'custom_icon' op als de waarde voor dit veld. De achtervoegsels worden automatisch toegevoegd op basis van de huidige gebruikersinstelling.

Afmetingen

Nee

Standaardgrootte voor de componentinstanties. Wanneer de gebruiker een component met slepen-en-neerzetten verplaatst van het deelvenster Component naar het werkgebied, wordt er een nieuwe instantie gemaakt. Dit veld bepaalt de oorspronkelijke standaardgrootte voor de componentinstantie. De waarde moet een array zijn [width, height]. Als er geen waarde is opgegeven, kiest Animate een standaardgrootte. Animate beperkt ook de grootte om binnen het bereik [2,2] tot [1000, 1000] te blijven.

Afhankelijkheden

Nee

De reeks afhankelijkheden voor de component. Dit is een array waarbij elk item het relatieve pad voor een lokale bron (met sleutel='src') en CDN-pad (met sleutel='cdn') biedt. Het CDN-pad is niet verplicht. Dit pad wordt gebruikt wanneer u gehoste bibliotheken gebruikt in de publicatie-instellingen. Als u dit niet doet, wordt de lokale bron gebruikt wanneer u een voorvertoning weergeeft of publiceert.

 

Bekijk het relatieve pad dat in het voorbeeld (video) hierboven wordt gebruikt. Hierin worden de afhankelijkheden van één niveau hoger geladen, waardoor wij enkele afhankelijkheden over meerdere componentreeksen kunnen delen.

 

Eigenschappen

Ja

Dit is een array van eigenschappen. Wanneer u een instantie van deze component in het werkgebied maakt, wordt de hier geconfigureerde reeks eigenschappen automatisch weergegeven in de eigenschapcontrole. Gebruikers van deze component kunnen deze eigenschappen in Animate CC configureren en de geconfigureerde eigenschappen worden gedurende runtime tijdens de instantiëring van de component beschikbaar gemaakt.

 

Elk eigenschapitem bevat de volgende sleutels:

  1. naam: de naam die wordt weergegeven in de eigenschapcontrole voor deze eigenschap. Dit kan een gebruikersvriendelijke naam zijn. Deze kan worden gelokaliseerd.
  2. variabele: de interne naam die voor deze eigenschap wordt gebruikt. De geconfigureerde waarden zijn samen met deze variabelenaam tijdens runtime beschikbaar. Meer informatie hierover wordt in latere secties besproken.
  3. Type: dit is het eigenschaptype. Animate CC staat de volgende typen toe:
    1. Boolean - Selectievakje in eigenschapcontrole
    2. Aantal - Numeriek vak in eigenschapcontrole
    3. Tekenreeks - Tekstvak in eigenschapcontrole
    4. Lijst - Hiermee kan de gebruiker een array van waarden configureren.
    5. Verzameling - Hiermee kunnen de gebruikers een lijst met sleutel-waardeparen configureren. (Zie keuzelijst met invoervak)
    6. Bestandspad - Hiermee kan de gebruiker naar een lokaal bestand bladeren en dit selecteren. De tekenreekswaarde wordt tijdens runtime geleverd. Het bestand wordt automatisch gekopieerd in de gepubliceerde uitvoer in de map 'assets' en het relatieve pad wordt tijdens runtime beschikbaar gemaakt.
    7. Pad naar afbeelding - Hiermee kan de gebruiker naar een afbeelding bladeren en er een selecteren. Het bestand wordt automatisch gekopieerd in de gepubliceerde uitvoer in de map met geconfigureerde afbeeldingen en het relatieve pad wordt tijdens runtime beschikbaar gemaakt.
    8. Video-inhoudpad - Hiermee kan de gebruiker naar elke videobron in een webindeling (mp4, ogg, ogv of webm) bladeren en die selecteren. Het geconfigureerde element wordt gekopieerd naar de map 'videos' in de gepubliceerde uitvoer.
    9. Kleur - de kleurkiezer in eigenschapcontrole

4. Standaard: de standaardwaarde van de eigenschap. De standaard moet van hetzelfde type zijn als het type van de eigenschap.

Componentbron

Elke component moet een gekoppeld bronbestand hebben dat code levert om het volgende te verwerken:

  • Componentinstantie maken tijdens runtime met een geconfigureerde reeks eigenschapswaarden
  • Koppelen aan en loskoppelen van de DOM.
  • Eigenschapupdates in elk frame

In het bestand anwidget.js wordt een basisklasse geleverd en een hulpprogrammafunctie, zodat aangepaste componenten gemakkelijker zijn te ontwikkelen. Deze interface wordt in de toekomst uitgebreid, maar is wel achterwaarts compatibel. Momenteel worden alleen op DOM gebaseerde componenten ondersteund. Ondersteuning voor op canvas gebaseerde componenten wordt in de toekomst mogelijk. Momenteel worden alleen widgets ondersteund. Het framework wordt echter uitgebreid en biedt dan ook ondersteuning voor het toevoegen van gedrag (componenten die geen gebruikersinterface zijn).

Het bestand anwidget.js is aanwezig onder de map HTML5Components/sdk in de map voor eerste uitvoering. Hierin bevinden zich een AnWidget -basisklasse voor aangepaste componenten en een $.anwidget (<klassenaam>, {Prototype van object})-hulpprogrammamethode voor het registreren van een component. Bij de huidige implementatie wordt gebruikgemaakt van jQuery, dus jQuery wordt altijd toegevoegd als een afhankelijkheid wanneer u de services gebruikt die door een widget worden geleverd. Als u echter geen impliciete afhankelijkheid aan jQuery wilt toevoegen, kunt u een componentklasse zonder jQuery implementeren die dezelfde interface biedt als een widget.

 

AnWidget
HTML-sjabloon

De HTML-pagina bevat standaard deze gedeelten (met uitzondering van de voorlader-DIV):

animation_container
Standaard-HTML-gedeelten (met uitzondering van de voorlader-DIV)

Houd er rekening mee dat de vorige afbeelding de volgorde aangeeft waarin de elementen aan de DOM worden toegevoegd. De dom_overlay_container-div wordt boven het canvas weergegeven.

Opmerking:

Verander de id van de dom_overlay_container-div niet zoals in onze eerste versie het geval was. Er zijn namelijk enkele functies, zoals codefragmenten, die van deze id afhankelijk zijn.

Zoals in de vorige afbeelding wordt geïllustreerd, wordt de dom_overlay_container-div als laag weergegeven boven op het canvas. Om ervoor te zorgen dat de muisgebeurtenissen juist aan het onderliggende canvas worden doorgegeven, gebruiken we de CSS-eigenschap {pointer-events: none} voor deze div, zodat muisgebeurtenissen aan het onderliggende canvas worden doorgegeven. Alle componentinstanties die in Animate CC in uw project worden geconfigureerd, worden geïnstantieerd en als een onderliggend item van deze dom_overlay_container-div toegevoegd. De relatieve volgorde van de componentinstanties blijft behouden tijdens runtime, maar momenteel worden alle componentinstanties altijd weergegeven als overlay. We stellen{pointer-events: all} voor alle instanties van de component tijdens runtime in, zodat zij ook de muisgebeurtenissen ontvangen.

Levenscyclus van componenten

component_lifecycle
Levenscyclus van componenten

  1. De componentinstantie wordt gemaakt wanneer de DOM voor de container wordt samengesteld.

  2. De instantie wordt vervolgens toegevoegd aan de DOM wanneer de afspeelknop het frame bereikt waar de instantie van de component wordt gebruikt. Er wordt vervolgens een updatehandler toegevoegd die tijdens runtime bij elke Tick wordt aangeroepen. De component activeert op dat moment ook een 'attached'-gebeurtenis met de volgende gebeurtenisgegevens {id: id_of_the_instance} bij het bovenliggende element.

  3. De eigenschappen worden bijgewerkt in elke updatecallback. Alle eigenschapsupdates worden in een cache geplaatst en eenmaal toegepast tijdens een tickhandler. Momenteel worden aangepaste eigenschaptweens niet ondersteund. Alleen de standaardeigenschappen zoals transformatie en zichtbaarheid worden bijgewerkt.

  4. Wanneer de afspeelkop een frame bereikt waarvan de componentinstantie is verwijderd, wordt deze losgekoppeld van de DOM. Een ‘losgekoppelde’ gebeurtenis wordt ditmaal geactiveerd op het bovenliggende element.

De standaardklasse wordt $.AnWidget genoemd en het volgende wordt overschreven:

Naam

Verplicht

Beschrijving

getCreateOptions()

Nee

Retourneert de opties waarvan de component wil dat die tijdens componentinstantiëring worden toegepast. Dit wordt bij een typisch geval van overschrijven gebruikt om een unieke id toe te wijzen aan elke instantie door de variabele _widgetID te gebruiken. In het voorbeeld in de volgende sectie wordt het gebruik duidelijk.

getCreateString()

Ja

Retourneert de tekenreeks voor het maken van uw DOM-instantie. Deze tekenreeks wordt doorgegeven aan jQuery om het werkelijke DOM-element te maken dat later aan de basis-DOM wordt toegevoegd.

 

Een voorbeeld: voor een afbeeldingcomponent moet dit '<image>' retourneren.

 

Het element wordt tijdens runtime gemaakt en de verwijzing naar de jQuery-wrapper wordt als volgt opgeslagen in de instantie van de component:

 

._element =  $(this.getCreateElement())

 

// this._element – jQuery-wrapper voor het onderliggende DOM-element dat wordt gemaakt.

 

We kunnen ook samengestelde elementen maken. De details hiervan worden in een sectie met voorbeelden besproken.

getProperties()

Nee

Hiermee wordt een array met configureerbare CSS-eigenschapnamen geretourneerd. Doorgaans komt deze overeen met alle eigenschappen die u hebt geconfigureerd in components.json

 

Een voorbeeld: voor de videocomponent bevat deze array de volgende items:

 

["left", "top", "width", "height", "position", "transform-origin", "transform"]

getAttributes()

Nee

Hiermee wordt een array van configureerbare kenmerken geretourneerd. Doorgaans komt deze overeen met alle kenmerken die u mag configureren in components.json

 

Een voorbeeld: voor de videocomponent bevat deze array de volgende items:

 

["id", "src", "controls", "autoplay", "loop", "class"]

attach(parent)

Nee

Deze functie wordt aangeroepen wanneer de componentinstantie op het punt staat te worden gekoppeld aan het bovenliggende DOM-element.

 

De standaardimplementatie doet het volgende (en nog enkele andere dingen):

 

// Voegt het element toe aan de bovenliggende DOM

$(parent).append(this._element);

 

//Slaat de ref op in ._$this

this. _$this = $(this._element);

 

//Roept gedwongen update aan om alle eigenschappen toe te passen

this.update(true);

this. _attached = true;

 

//Activeert de gekoppelde gebeurtenis op het bovenliggende niveau

$(parent).trigger("attached", this.getEventData("attached"))

 

U hoeft deze functie niet te overschrijven. Het kan echter zijn dat samengestelde elementen wel moeten worden overschreven. Meer details worden besproken in de sectie met voorbeelden.

 

Opmerking: u kunt dit gebruiken._superApply(arguments) gebruiken om een basisklassemethode van een overschrijving aan te roepen.

detach()

Nee

Deze functie wordt aangeroepen wanneer de componentinstantie op het punt staat om uit de DOM te worden verwijderd. De standaardimplementatie doet het volgende:

 

//Verwijdert het element uit de DOM

this. _$this.remove();

//Activeert de losgekoppelde gebeurtenis op het bovenliggende niveau

$(parent).trigger("detached", this.getEventData("detached"));

setProperty(k,v)

Nee

Deze functie wordt gebruikt om een eigenschap voor de instantie in te stellen. Deze wijzigingen worden in de cache opgeslagen en in één keer toegepast tijdens de aanroep om elk frame bij te werken voor elke eigenschap die niet up-to-date is.

update(force)

Nee

Deze functie wordt telkens aangeroepen wanneer de component deel uitmaakt van de DOM en zichtbaar is. Bij de standaardimplementatie worden alle CSS-eigenschappen en kenmerken toegepast die zijn gewijzigd of als de parameter force waar is.

show()

Nee

Hiermee wordt de elementeninstantie weergegeven. In het algemeen hoeft u dit niet te overschrijven, maar dit kan wel nodig zijn voor samengestelde elementen.

hide()

Nee

Verbergt de elementinstantie. In het algemeen hoeft u dit niet te overschrijven, maar dit kan wel nodig zijn voor samengestelde elementen.

getEventData(e)

Nee

Hiermee worden aangepaste gegevens geretourneerd voor de gebeurtenis met de naam 'e'. De standaardimplementatie geeft de {id: instance_id} voor gegevens door voor gekoppelde en niet-gekoppelde gebeurtenissen.

destroy()

Nee

Hiermee maakt u geheugen vrij wanneer de instantie van de component is losgekoppeld van de DOM. In het algemeen hoeft u dit niet te overschrijven.

applyProperties(e)

Nee

Helper-API voor het toepassen van de CSS-eigenschappen op de jQuery-wrapper 'e'.

applyAttributes(e)

Nee

Helper-API voor het toepassen van de kenmerken op de jQuery-wrapper 'e'.

Lokalisatie

De categorietekenreeks, de componentweergavenaam en de eigenschapsnaam kunnen worden gelokaliseerd. Maak een bestand genaamd strings.json in een map met de naam landinstelling onder de componentmap. Geef de sleutelwaardeparen voor alle te lokaliseren tekenreeksen op en gebruik de sleutel in de component.js. Voor andere landinstellingen moet u de tekenreeks in de bijbehorende mappen onder de map locale opgeven.

localization
.json-tekenreeks

Aangepaste HTML5-componenten verpakken en distribueren

Animate-ontwikkelaars of -ontwerpers kunnen ervoor zorgen dat animators componenten zonder codering kunnen installeren en gebruiken. Hiervoor bieden ze gebruiksklare, verpakte componenten aan. In vorige versies hadden animators kennis nodig van bestandsstructuren en programmeren. Ook moesten ze de bestanden handmatig verplaatsen naar specifieke mappen om de HTML5-extensies te activeren.

Vereisten

  • Elke component die door een ontwikkelaar is gemaakt. Klik hier voor instructies over het maken van componenten.
  • Toolkit voor CC Extensions-ondertekening. Download de toolkit hier

Voordat u uw component verpakt, maakt u een MXI-bestand met de metagegevens van het bron- en doelpad van de componenten. Bijvoorbeeld,

<file source="jquery-ui-1.12.0" destination="$FLASH\HTML5Components\jQueryUI\" file-type="ordinary" />

Deze informatie over het bron- en doelbestand is vereist zodat het extensiehulpprogramma uw component nauwkeurig kan installeren.

Componenten verpakken

Om de aangepaste HTML5-componenten te verpakken voert u de volgende stappen uit: 

  1. Om een MXI-bestand te maken, moet u inhoud die vergelijkbaar is met het voorbeeld abc.mxi-bestand invoeren met een teksteditor en opslaan met een MXI-extensie.

    Download

    Downloaden

  2. Voeg uw MXI-componentenbestand toe aan een map, samen met andere bijbehorende bestanden.

    Add-MXI-file-to-component
  3. Maak een gecomprimeerd ZXP-extensiebestand met het hulpprogramma voor CC Extensions-ondertekening (ZXPSignCmd.exe). Gebruik de volgende opdrachten in het hulpprogramma voor ZXP-ondertekening om een ZXP-bestand te maken:

    1. Maak een zelfondertekend certificaat door de optie - selfSignedCert te gebruiken.

    U kunt deze stap overslaan als u al een certificaat hebt.

    Self-signature
    ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12

    Het bestand FileName.p12 wordt in de huidige map gegenereerd.

    2. Onderteken de extensie met behulp van de volgende opdracht: 

    Create-ZXP-file
    ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password

    projectName is de naam van het extensieproject. In de huidige map wordt een bestand met de naam projectName.zxp gegenereerd.

Componenten distribueren

U kunt dit verpakte componentenbestand projectName.zxp distribueren naar elke Animate-gebruiker.

Opmerking:

Adobe adviseert dat u uw producten distribueert via de website Adobe Add-ons. U kunt invoegtoepassingen openbaar distribueren (gratis of betaald), of u kunt dit privé doen (gratis voor gebruikers op naam). Meer informatie over producten privé delen.

Gedistribueerde componenten installeren

Animate-ontwerpers of -ontwikkelaars kunnen de gedistribueerde ZXP-bestandscomponent installeren met het hulpprogramma Uitbreidingen beheren.

Zie Gedistribueerde componenten installeren voor meer informatie

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