Maken van aangepaste componenten: Voorbeelden

Zoeken

Laatst bijgewerkt op 11 feb. 2022

Animate

App openen

Adobe Animate-handboek

Inleiding tot Animate

Animatie

Interactiviteit

Werkruimte en workflow

Multimedia en video

Platforms

Exporteren en publiceren

Problemen oplossen

Gebruik dit artikel om een voorbeeld van een aangepaste HTML5-component te begrijpen.

In dit artikel wordt beschreven hoe u aangepaste componenten maakt. Het eerste voorbeeld beschrijft de afbeeldingscomponent (die ook wordt geleverd met Animate ) en het proces om het framework en de stappen die nodig zijn bij de ontwikkeling, te begrijpen. In het tweede voorbeeld wordt beschreven hoe u een bestaande UI-component (zoals jQueryUI) kunt verpakken en importeren naar Animate.

Maken van een DOM-afbeeldingscomponent

Een categorie maken met de naam Mijn componenten.

a. Maak een map mycomponents onder de map <HTML5Components> die wordt aangeroepen bij de eerste uitvoering

b. Download het bijgevoegde bestand myimage.zip en pak de inhoud uit in de map

mycomponents.

Downloaden

Bestand ophalen
Klik hier om het bestand myimage.zip te downloaden.

c. Start Animate opnieuw.

U moet nu dan een nieuwe categorie zien met de naam „My Components” in de componentenmap en een nieuwe component met de naam My Image eronder. U kunt dit in het werkgebied slepen, de eigenschap van de bronafbeelding instellen en de film publiceren om de aangepaste componenten in actie te zien.

Metadata van component - components.js

Houd er rekening mee dat de categorie is ingesteld op CATEGORY_MY_COMPONENTS. De namen van elk van de eigenschappen gebruiken ook vergelijkbare sleutels. Dit is de sleutel voor de gelokaliseerde tekenreeks voor de categorienaam. Als u strings.json opent in de lokale map, worden de volgende items getoond.

De meest gangbare fout tijdens het bewerken van dit bestand is een komma na het laatste element in de array.

De waarde van het pictogramveld is ingesteld op Sp_Image_Sm. Als u naar de map assets gaat, kunt u de volgende twee png-afbeeldingen zien met het voorvoegsel Sp_Image_Sm.

Dit zijn de pictogrammen voor een donkere en lichte UI.

De waarde van het 'source'-veld in components.json is ingesteld op 'src/myimage.js'.

(function($) {

// Register a component with the className: my.Image,

// and prototype with the following overrides

// getCreateOptions

// getCreateString

// getProperties

// getAttributes

$.anwidget("my.Image", {

options: {

'visible': true,

'position': 'absolute'

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

_attrs: ["id", "src", "alt", "class", "border"],

// Return a unique ID with the prefix image

// _widgetID is a global declared in anwidget

// This id is used only if the user has not set any instance ID for the component in Animate

// Otherwise the user configured name is used

getCreateOptions: function() {

return $.extend(this.options, { 'id': "image" + _widgetID++ });

// Return the string for creating the DOM element

// For image we just need to create the <img> tag

getCreateString: function() {

return "<img>";

// Set of configurable properties

getProperties: function() {

return this._props;

// Set of configurable attributes

getAttributes: function() {

return this._attrs;

}

});

})(jQuery);

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

U kunt de opmerkingen in de code volgen om het gemakkelijk te begrijpen.

Kijk zeker ook eens naar de bron van de andere componenten die worden meegeleverd met Animate. In de meeste gevallen kunt u een daarvan gebruiken als beginpunt en vervolgens configureren volgens uw eigen vereisten.

Het verpakken van een jQuery-UI component

Dit gedeelte beschrijft hoe u een jQuery-UI-widget kunt verpakken en gebruiken in Animate. Dezelfde concepten kunnen worden gebruikt om een andere bestaande component uit eender welk ander UI-framework te verpakken.

Laten we eens kijken naar de verpakte DatePicker-component met Animate die een jQuery-UI-widget is. Download en extraheer de inhoud van het volgende archief en gebruik het ter referentie.

Downloaden

Bestand ophalen

Klik hier om het bestand datepicker.zip te downloaden.

De map met de naam jquery-ui-1.12.0 is de bron voor het jQuery UI-framework dat de originele DatePicker-widget en de bijbehorende bronnen, zoals afbeeldingen en css, bevat om te verpakken en gebruiken in Animate zoals elke andere HTML5-component. Dit is alleen vereist voor lokale voorvertoning. Als u “gehoste bibliotheken” gebruikt in de publicatie-instellingen, hebt u de optie om de cdn te gebruiken om de afhankelijke bronnen te downloaden.

Er zijn twee standaard afhankelijkheden, jQuery en anwidget.js. Aangezien anwidget.js niet in de CDN zit, hebben we er geen enkel CDN-item voor.

De volgende reeks items is voor de andere bronnen die vereist zijn voor het laden van het datepicker-widget uit de jquery ui. Als u een widget van een andere bibliotheek in een pakket opneemt, kunt u de set van afhankelijkheden ook opgeven. Deze afhankelijkheden worden gedownload voordat de component wordt geïnitialiseerd.

In het gedeelte eigenschappen hebben we slechts één eigenschap met de naam label beschikbaar gemaakt, die aan de label-eigenschap voor de date-picker component is verbonden. Op dezelfde manier kunnen we de andere eigenschappen ook beschikbaar maken, waarvan we willen dat de gebruiker ze kan configureren in ontwerpomgeving van Animate. Bij uitvoering wordt elk van deze beschikbaar als sleutelwaardepaar in de array opties voor de instantie. We kunnen de geconfigureerde waarde extraheren en deze toepassen bij uitvoering.

Secties die van het voorbeeld verschillen

getCreateString:

Het datepicker-widget van de jQuery-UI heeft een dergelijk invoertekstelement en zet dit om in een date-picker element bij uitvoering. Daarom wordt dienovereenkomstig DOM geïnitialiseerd.
attach:

We moeten deze functie voor deze widget overschrijven. Deze API wordt aangeroepen wanneer het element aan de DOM wordt gekoppeld. Vanwege de manier waarop de onderliggende runtime (in dit geval createjs) werkt, kan deze API meerdere keren tijdens een framereeks worden aangeroepen.

We onthouden de toegevoegde status van het onderliggende element en roepen de toegevoegde API aan van de basisklasse (door gebruik te maken van._superApply (argumenten)). Als dit de eerste keer is dat we het element aan de ouder DOM toevoegen, dan gebruiken we de onderliggende aanroep voor widget jQuery-UI om de DOM van onze component naar een datumkiezer te converteren. Zie - https://jqueryui.com/datepicker/

Het grootste deel van javascript-widgets werkt op een vergelijkbare manier. U kunt dezelfde techniek gebruiken om een willekeurige component van uw keuze te verpakken en op dezelfde manier in Animate te brengen.
Update: We overschrijven update en passen de css-eigenschappen toe op de container div en kenmerken op het echte DOM-element.

Wanneer u API's, zoals band toevoegt, weghaalt of bijwerkt, controleert u de standaard implementatie van de basisklasse en roept u de basisimplementatie op het gewenste moment op omdat de initialisatie component anders kan mislukken.

Verwante informatie

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?