Skapa anpassade HTML5-komponenter

Sök

Senast uppdaterad den 24 maj 2023

Animate

Öppna appen

Användarhandbok om Adobe Animate

Introduktion till Animate

Animering

Interaktivitet

Arbetsyta och arbetsflöde

Multimedia och video

Plattformar

Exportera och publicera

Felsökning

Läs den här artikeln om du vill veta mer om hur du skapar anpassade komponenter för HTML5 Canvas.

Animate levereras med en uppsättning standardkomponenter. Det räcker dock inte för projektet. I det här avsnittet beskrivs hur du skapar anpassade HTML5-komponenter för Animate.

En komponentdefinition består av tre viktiga delar:

Metadata: Tillhandahåller information om komponenten som visningsnamn, version, uppsättning konfigurerbara egenskaper, ikon med mera. Det här registreras i en fil som heter components.js. Du kan gruppera komponenterna som en kategori och med den här filen kan du ange metadata för alla komponenter i en kategori.
Källa: Tillhandahåller information om den faktiska komponentkällan. Det här bäddas in vid körningstillfället när du förhandsvisar eller publicerar en film med komponenter.
Resurser: Tillhandahåller information om beroenden vid körningen, till exempel JavaScript-bibliotek, CSS eller körningsresurser och ikoner. Resurserna kan användas i Animates redigeringsmiljö.

En komponentdefinition har också resurser relaterade till lokalisering.

componentsJS — Exempel på mappkonfiguration för en anpassad komponentkategori

Animate kontrollerar om följande mappar innehåller anpassade HTML5-komponenter och läser då in dem vid start:

• Windows:

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

• MAC:

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

Ovanstående mappsökväg gäller för amerikansk engelska. Om du använder Animate på något annat språk letar du efter den språkspecifika mappen, som för svenska har sv_SE i sökvägen.

För varje mapp på den plats som innehåller filen components.js skapas automatiskt en kategori i Animate och alla komponenter i den läses in.

Komponentmetadata

Komponentens metadata registreras i en fil som heter components.js, som placeras i en separat mapp i mappen HTML5Components.

metadata-code — Exempelmetadata för en videokomponent.

Components.js

är en JSON-fil som innehåller följande avsnitt:

Kategori: Namn på komponentpanelen för den här uppsättningen komponenter och kan lokaliseras.
Komponenter: Array där varje post innehåller metadata om en komponent. I ovanstående exempel har arrayen bara ett element. Metadata har följande avsnitt:

Namn	Obligatoriskt	Beskrivning
className	Ja	Klass Namnet på komponenten som anges i källfilen. Klassnamnet har stöd för en nivå med namnutrymmen. Till exempel video.
Version	Nej	Version komponentens nummer. Detta används för framtida komponentuppgraderingar. Flödet är dock inte definierat än of time.
Källa	Ja	Relativ sökväg för komponentens huvudkällfil. Mer information om vad källan innehåller finns i nästa avsnitt.
Ikon	Nej	Relativ sökväg för komponentens ikon. Denna ikon används i komponentpanelen och på scenen när en instans skapas för komponenten tillsammans med dess namn. Om inget anges används en standardikon. Du kan ange PNG-namnet på den ikon som ska läsas in (oftast 32x32). Om du vill ha olika ikoner för det ljusa och det mörka användargränssnittet måste du använda två PNG-filer med följande namn: anpassad_ikon_N.png – Ikon för mörkt användargränssnitt anpassad_ikon_D.png – Ikon för ljust användargränssnitt och bara ange namnet ”anpassad_ikon” som värde för det här fältet. Suffixen läggs till automatiskt utifrån de aktuella användarinställningarna.
Dimensioner	Nej	Standard -storlek för komponentinstanserna. När användaren drar och släpper en komponent från komponentpanelen till scenen skapas en ny instans. Det här fältet anger den inledande standardstorleken för komponentinstansen. Värdet ska vara en array [bredd, höjd]. Om inget värde anges väljs automatiskt en standardstorlek. Storleken begränsas dessutom till intervallet [2,2] till [1 000, 1 000] i Animate.
Beroenden	Nej	Komponentens uppsättning med beroenden. Detta är en array där varje post anger den relativa sökvägen för en lokal källa (med nyckel = “src”) och CDN-sökvägen (med nyckel=’cdn’). CDN-sökvägen är inte obligatorisk. Den här sökvägen används när du använder hanterade bibliotek i publiceringsinställningarna. Annars används den lokala källan när du förhandsgranskar eller publicerar. Skriv upp den relativa sökvägen som används i exemplet ovan (video). Den läser in beroendena från en nivå upp, vilket gör det möjligt att dela vissa beroenden över flera komponentuppsättningar.
Egenskaper	Ja	Det här är en array med egenskaper. När du skapar en instans av den här komponenten på scenen visas den uppsättning med egenskaper som konfigurerats här automatiskt i egenskapsinspektören. Användare av den här komponenten kan konfigurera de egenskaperna i Animate och de konfigurerade egenskaperna görs tillgängliga under instansiering av komponenten vid körning. Varje egenskapspost innehåller följande nycklar: namn: Det namn som visas i egenskapsinspektören för den här egenskapen. Detta bör vara ett användarvänligt namn. Detta kan lokaliseras. variabel: Det interna namn som används för den här egenskapen. De konfigurerade värdena är tillgängliga med det här variabelnamnet vid körning. Mer information om detta finns i senare avsnitt. typ: Detta anger egenskapens typ. Följande typer stöds i Animate Boolesk – Kryssruta i egenskapsinspektören Nummer – Numerisk ruta i egenskapsinspektören String - Textruta i egenskapsinspektören Lista – Gör att användare kan konfigurera en array med värden. Samling – Används för att konfigurera en lista med <nyckel, värde>-par. (Mer information finns i kombinationsrutan.) Filsökväg – Används för att bläddra och välja en lokal fil. Strängvärdet anges vid körning. Filen kopieras automatiskt i publicerade utdata i mappen assets och den relativa sökvägen är tillgänglig under körning. Bildsökväg – Används för att bläddra och välja en bild. Filen kopieras automatiskt i publicerade utdata i mappen med konfigurerade bilder och den relativa sökvägen är tillgänglig under körning. Videoinnehållssökväg – Används för att bläddra och välja en videokälla i valfritt webbformat (mp4, ogg , ogv , webm ). Den konfigurerade resursen kopieras till mappen videos i publicerade utdata. Färg – Färgväljare i egenskapsinspektören Standard: Egenskapens standardvärde. Standardvärdet måste ha samma typ som egenskapen.

Komponentkälla

Varje komponent bör ha en associerad källfil som innehåller kod för att hantera följande:

Skapa komponentinstansen vid körning med den konfigurerade uppsättningen egenskapsvärden
Ansluta till och koppla loss från DOM.
Hantera egenskapsuppdateringar i varje bildruta

Det finns en basklass och ett verktyg i filen anwidget.js för att det ska vara enklare att utveckla anpassade komponenter. Det här gränssnittet kommer att förbättras i framtiden och kommer att vara bakåtkompatibelt. För närvarande stöds bara DOM-baserade komponenter, men stödet för Canvas-baserade komponenter kommer att utökas. För närvarande stöds bara widgetar, men ramverket kommer att förbättras med stöd för att koppla beteenden (inte användargränssnittskomponenter).

Filen anwidget.js finns i mappen HTML5Components/sdk i den första körningsmappen. Den innehåller en basklass, AnWidget, för anpassade komponenter och en verktygsmetod $.anwidget(<className>, {Object Prototype}) för att registrera en anpassad komponent. Den aktuella implementeringen använder jQuery, så jQuery läggs alltid till som ett beroende när du använder funktionerna i en widget. Men om du inte vill lägga till ett implicit beroende i jQuery kan du behöva implementera en komponentklass utan jQuery för att få samma gränssnitt som med en widget.

HTML-koden innehåller följande avsnitt (utom preloader div) som standard:

animation_container — HTML-standardavsnitt (utom preloader div)

Observera att föregående bild visar den ordning i vilken elementen läggs till i DOM. Därför visas div-taggen dom_overlay_container ovanför arbetsytan.

Ändra inte ID:t på div-taggen dom_overlay_container eftersom det i vår första version finns ett par funktioner som är beroende av detta ID, till exempel kodfragment.

Som du ser i föregående bild visas div-taggen dom_overlay_container ovanpå arbetsytan som en övertäckning. För att försäkra oss om att mushändelserna sprids korrekt även till den underliggande arbetsytan använder vi CSS-egenskapen {pointer-events: none} för den här div-taggen. Alla komponentinstanser som har konfigurerats i Animate i ditt projekt instansieras och bifogas som underordnade till den här div-taggen dom_overlay_container. Komponentinstansernas inbördes förhållande bevaras vid körning, men för tillfället visas komponentinstanser alltid som övertäckningar. Vi anger {pointer-events: all} för alla komponentinstanser vid körning så att de också får mushändelserna.

Komponentlivscykel

component_lifecycle — Komponentlivscykel

Komponentinstansen skapas när DOM skapas för behållaren.
Instansen kopplas sedan till DOM när spelhuvudet når den bildruta där komponentinstansen används. Sedan kopplas en uppdateringshanterare som anropas vid varje tickning under körning. Komponenten utlöser också en attached-händelse här med följande händelsedata {id: id_of_the_instance} för det överordnade elementet.
Egenskaperna uppdateras vid varje uppdateringsåteranrop. Alla egenskapsuppdateringar cachelagras och utförs i en tickningshanterare. För tillfället stöds inte anpassade egenskapsinterpoleringar. Det är bara grundläggande egenskaper som omformning och synlighet som uppdateras.
När spelhuvudet når en bildruta där komponentinstansen tas bort kopplas den loss från DOM. En detached-händelse utlöses då för det överordnade elementet.

Basklassen kallas $.AnWidget och innehåller följande åsidosättningar:

Namn	Obligatoriskt	Beskrivning
getCreateOptions()	Nej	Returnerar alla alternativ som ska användas under komponentinstansieringen. En vanlig åsidosättning använder vanligtvis detta för att tilldela ett unikt ID till varje instans genom att använda den globala variabeln _widgetID. Exemplet i nästa avsnitt visar hur det används.
getCreateString()	Ja	Returnera strängen för din DOM-instansgenerering. Den här strängen skickas till jQuery för att skapa det DOM-element som senare kopplas till bas-DOM. För en bildkomponent bör detta till exempel returnera < image >. Vid körning skapas elementet och referensen till jQuery-inkapslingen sparas enligt följande i komponentinstansen: this._element = $(this.getCreateElement()) // this._element – jQuery-inkapsling till det underliggande DOM-element som skapats. Du kan också skapa sammansatta element. Mer om detta i exempelavsnittet.
getProperties()	Nej	Returnerar en array med konfigurerbara CSS-egenskapsnamn. Oftast matchar detta alla egenskaper som du har konfigurerat i components.json För videokomponenten innehåller arrayen till exempel följande poster: ["left", "top", "width", "height", "position", "transform-origin", "transform"]
getAttributes()	Nej	Returnerar en array med konfigurerbara attribut. Oftast matchar detta alla attribut som du kan konfigurera i components.json För videokomponenten innehåller arrayen till exempel följande poster: ["id", "src", "controls", "autoplay", "loop", "class"]
attach(parent)	Nej	Den här funktionen anropas när komponentinstansen ska kopplas till det överordnade DOM-elementet. Standardimplementeringen gör följande (och lite till): // Appends the element to the parent DOM $(parent).append(this._element); //Stores the ref in this._$this this._$this = $(this._element); //Calls force update to apply all properties this.update(true); this._attached = true; //Triggers the attached event on parent $(parent).trigger("attached", this.getEventData("attached")) Du behöver inte åsidosätta den här funktionen. Men för sammansatta element kan det behöva åsidosättas. Mer om detta i exempelavsnittet. Obs! Du kan använda this._superApply(arguments) för att anropa en basklassmetod från valfri åsidosättning.
detach()	Nej	Den här funktionen anropas när komponentinstansen ska kopplas loss från DOM. Standardimplementeringen gör följande: //Removes the element from the DOM this._$this.remove(); //Triggers the detached event on parent $(parent).trigger("detached", this.getEventData("detached"));
setProperty(k,v)	Nej	Den här funktionen används för att ange egenskaper för instansen. Dessa ändringar cachelagras och används samtidigt under update()-anropet för varje bildruta för varje egenskap som ändrats.
update(force)	Nej	Den här funktionen anropas vid varje bildruta när komponenten är en del av DOM och är synlig. Standardimplementeringen använder alla CSS-egenskaper och -attribut som har ändrats eller om force-parametern har värdet true.
show()	Nej	Visar elementinstansen. Du behöver vanligtvis inte åsidosätta detta, men för sammansatta element kan det behövas.
hide()	Nej	Döljer elementinstansen. Du behöver vanligtvis inte åsidosätta detta, men för sammansatta element kan det behövas.
getEventData(e)	Nej	Returnerar alla anpassade data för händelsen med namnet ”e”. Standardimplementeringen skickar data {id: instance_id} för kopplade och frikopplade händelser.
destroy()	Nej	Frigör minnet när komponentinstansen kopplas loss från DOM. Du behöver vanligtvis inte åsidosätta detta.
applyProperties(e)	Nej	Hjälp-API för att använda CSS-egenskaperna på jQuery-inkapslingen e.
applyAttributes(e)	Nej	Hjälp-API för att använda attributen på jQuery-inkapslingen e.

Lokalisering

Kategoristrängen, komponentens visningsnamn och egenskapsnamnet kan lokaliseras. Skapa en fil som heter strings.json i en mapp med namnet locale under komponentmappen. Ange nyckelvärdepar för alla strängar som ska lokaliseras och använd nyckeln i components.js. För andra språk måste du ange strängarna i motsvarande mappar i mappen locale.

Paketera och distribuera egna HTML5-komponenter

Animate-utvecklare och -designers kan ge animatörer möjlighet att installera och använda komponenter utan kodning genom att tillhandahålla färdiga och paketerade komponenter. Tidigare var animatörerna tvungna att lära sig om filstrukturer och programmering och de fick flytta filer manuellt till särskilda mappar för att aktivera HTML5-tilläggen.

Förutsättningar

En komponent som skapats av en utvecklare. Klicka här om du vill veta hur du skapar komponenter.
CC-verktyg för signering av tillägg.

Innan du paketerar komponenten skapar du en MXI-fil med metadata för komponenternas käll- och målsökvägar. Exempel:

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

Den här käll- och målfilsinformationen behövs för att aktivera tilläggsverktyget för korrekt installation av komponenten.

Paketera komponenter

Utför följande steg för att paketera anpassade HTML5-komponenter:

Skapa en MXI-fil genom att ange innehåll som liknar exemplet abc.mxi -filen i en textredigerare och spara den med filtillägget MXI.

Hämta

Hämta fil
Ladda ned en abc.mxi-exempelfil.
Lägg till din MXI-komponentfil och andra associerade filer i en mapp.
Skapa en zip-fil med filtillägget ZXP med hjälp av CC-verktyget för signering av tillägg (ZXPSignCmd.exe). Använd följande kommandon i ZXPSignCmd-verktyget för att skapa en ZXP-fil:

1. Skapa ett självsignerat certifikat med alternativet -selfSignedCert.

Du kan hoppa över det här steget om du redan har ett certifikat.
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
```
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
```
Filen FileName.p12 genereras i den aktuella mappen.

2. Signera tillägget genom att använda följande kommando:
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
```
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
```
projectName är namnet på tilläggsprojektet. En fil med namnet projectName.zxp genereras i den aktuella mappen.

Distribuera komponenter

Du kan distribuera denna paketerade komponentfil projectName.zxp till alla Animate-användare.

Du bör distribuera produkter via webbplatsen Adobe Add-ons. Du kan distribuera tillägg offentligt (gratis eller mot betalning) eller privat (gratis för namngivna användare).

Installera distribuerade komponenter

Animate-designers och -utvecklare kan installera den distribuerade ZXP-filkomponenten med hjälp av verktyget Hantera tillägg.

Liknande innehåll

Få hjälp snabbare och enklare

Ny användare?