Handboek Annuleren

Aangepaste HTML5-componenten maken

Zoeken

Laatst bijgewerkt op 11 feb. 2022

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

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

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.

Een componentdefinitie bevat ook lokalisatiegerelateerde bronnen.

componentsJS — Configuratie van een voorbeeldmap voor een aangepaste componentcategorie

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

• Windows:

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

• MAC:

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

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

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	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 echter niet op dit moment gedefinieerd.
Bron	Ja	Relatief pad van het hoofdbronbestand van de component. Meer details over wat de bron bevat vindt u in de volgende sectie.
Pictogram	Nee	Relatief pad voor het pictogram voor de component. Dit pictogram wordt gebruikt in het componentendeelvenster en op het werkgebied wanneer een willekeurige instantie voor de component wordt gemaakt, samen met de bijbehorende naam. 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 willekeurige 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 configureren en de geconfigureerde eigenschappen worden gedurende runtime tijdens de instantiëring van de component beschikbaar gemaakt. Elk eigenschapitem bevat de volgende sleutels: naam: de naam die wordt weergegeven in de eigenschapcontrole voor deze eigenschap. Dit kan een gebruikersvriendelijke naam zijn. Deze kan worden gelokaliseerd. 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. Type: dit is het eigenschaptype. Animate staat de volgende typen toe: Boolean - Selectievakje in eigenschapcontrole Aantal - Numeriek vak in eigenschapcontrole Tekenreeks - Tekstvak in eigenschapscontrole Lijst - Hiermee kan een gebruiker een array van waarden configureren. Verzameling - Hiermee kunnen de gebruikers een lijst met sleutel-waardeparen configureren. (Zie keuzelijst met invoervak) 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. Pad naar afbeelding - Hiermee kan de gebruiker naar een willekeurige afbeelding bladeren en deze 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. Video-inhoudpad - Hiermee kan de gebruiker naar elke videobron in een webindeling (mp4, ogg , ogv , webm) bladeren en die selecteren. Het geconfigureerde element wordt gekopieerd naar de map 'videos' in de gepubliceerde uitvoer. Kleur - de kleurkiezer in eigenschapcontrole 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.

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.

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

De componentinstantie wordt gemaakt wanneer de DOM voor de container wordt samengesteld.
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.
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.
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: this._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.

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.

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

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

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:

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.

Downloaden

Bestand ophalen
Download een voorbeeld van een abc.mxi-bestand.
Voeg uw MXI-componentenbestand toe aan een map, samen met andere bijbehorende bestanden.
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.
```
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:
```
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.

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

Gedistribueerde componenten installeren

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

Verwante informatie

Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?