Creazione di componenti personalizzati: esempi

  1. Guida utente di Adobe Animate
  2. Introduzione ad Animate
    1. Novità di Animate
    2. Glossario visivo
    3. Requisiti di sistema per Animate
    4. Scelte rapide da tastiera di Animate
    5. Utilizzare diversi tipi di file in Animate
  3. Animazione
    1. Concetti di base sulle animazioni in Animate
    2. Come utilizzare i fotogrammi e i fotogrammi chiave in Animate
    3. Animazione fotogramma per fotogramma in Animate
    4. Come utilizzare le animazioni con interpolazione classica in Animate
    5. Strumento Pennello
    6. Guida di movimento
    7. Interpolazione di movimento e ActionScript 3.0
    8. L’animazione con interpolazione di movimento
    9. Animazioni con interpolazione di movimento
    10. Creazione di un’animazione con interpolazione di movimento
    11. Utilizzo dei fotogrammi chiave di proprietà
    12. Animare la posizione con un'interpolazione
    13. Come modificare le interpolazioni di movimento con l'Editor movimento
    14. Modifica del tracciato di movimento di un’animazione con interpolazione
    15. Manipolazione delle interpolazioni di movimento
    16. Aggiunta di andamenti personalizzati
    17. Creazione e applicazione di preimpostazioni di movimento
    18. Impostazione delle estensioni di interpolazione per l’animazione
    19. Operazioni con le interpolazioni di movimento salvate come file XML
    20. Interpolazioni di movimento e classiche a confronto
    21. Interpolazione di forme
    22. Utilizzare lo strumento di animazione Osso in Animate
    23. Utilizzare il rigging dei personaggi in Animate
    24. Come utilizzare i livelli maschera in Adobe Animate
    25. Come utilizzare le scene in Animate
  4. Interattività
    1. Come creare pulsanti con Animate
    2. Convertire progetti Animate in altri formati di tipi di documenti
    3. Creare e pubblicare documenti HTML5 Canvas in Animate
    4. Aggiungere interattività con gli snippet di codice in Animate
    5. Creazione di componenti HTML5 personalizzati
    6. Utilizzo dei componenti in HTML5 Canvas
    7. Creazione di componenti personalizzati: esempi
    8. Snippet di codice per componenti personalizzati
    9. Best practice - Pubblicità con Animate
    10. Creazione e pubblicazione di contenuti in realtà virtuale
  5. Area di lavoro e flusso di lavoro
    1. Creazione e gestione dei pennelli artistici
    2. Utilizzo di Google Fonts nei documenti HTML5 Canvas
    3. Utilizzo di Creative Cloud Libraries con Adobe Animate
    4. Utilizzare il pannello Strumenti e Stage per Animate
    5. Flusso di lavoro e area di lavoro di Animate
    6. Utilizzo di font Web nei documenti HTML5 Canvas
    7. Linee temporali e ActionScript
    8. Operazioni con più linee temporali
    9. Impostare le preferenze
    10. Uso dei pannelli di creazione di Animate
    11. Creare livelli della linea temporale con Animate
    12. Esportare animazioni per dispositivi mobili e motori grafici
    13. Spostamento e copia degli oggetti
    14. Modelli
    15. Trova e sostituisci in Animate
    16. Annulla, Ripeti e il pannello Cronologia
    17. Scelte rapide da tastiera
    18. Come utilizzare la linea temporale in Animate
    19. Creazione di estensioni HTML
    20. Opzioni di ottimizzazione per immagini e GIF animati
    21. Impostazioni per l’esportazione di immagini e file GIF
    22. Pannello Risorse in Animate
  6. File multimediali e video
    1. Trasformazione e combinazione di oggetti grafici in Animate
    2. Creazione e utilizzo di istanze di simboli in Animate
    3. Ricalco immagine
    4. Come utilizzare l’audio in Adobe Animate
    5. Esportazione di file SVG
    6. Creare file video da utilizzare in Animate
    7. Come aggiungere un video in Animate
    8. Operazioni con i cue point video
    9. Disegnare e creare oggetti con Animate
    10. Rimodellare linee e forme
    11. Tratti, riempimenti e gradienti con Animate CC
    12. Utilizzo di Adobe Premiere Pro e After Effects
    13. Pannelli per il colore in Animate CC
    14. Apertura di file Flash CS6 con Animate
    15. Utilizzare il testo classico in Animate
    16. Inserimento di grafica in Animate
    17. Bitmap importate in Animate
    18. Grafica 3D
    19. Utilizzo dei simboli in Animate
    20. Disegnare linee e forme con Adobe Animate
    21. Utilizzare le librerie in Animate
    22. Esportazione di suoni
    23. Selezione degli oggetti in Animate CC
    24. Utilizzare i file AI di Illustrator in Animate
    25. Applicare pattern con lo strumento Pennello spray
    26. Applicazione di metodi di fusione
    27. Disposizione degli oggetti
    28. Automazione delle operazioni con il menu Comandi
    29. Testo in più lingue
    30. Utilizzo della funzione Videocamera di Animate
    31. Utilizzo di Animate con Adobe Scout
    32. Operazioni con file di Fireworks
    33. Filtri grafici
    34. Suono e ActionScript
    35. Preferenze di disegno
    36. Disegno con lo strumento Penna
  7. Piattaforme
    1. Convertire progetti Animate in altri formati di tipi di documenti
    2. Supporto piattaforme personalizzate
    3. Creare e pubblicare documenti HTML5 Canvas in Animate
    4. Creazione e pubblicazione di un documento WebGL
    5. Come creare pacchetti di applicazioni per AIR per iOS
    6. Pubblicazione di applicazioni AIR for Android
    7. Pubblicazione per Adobe AIR per desktop
    8. Impostazioni di pubblicazione ActionScript
    9. Procedure ottimali - Organizzazione del codice ActionScript in un’applicazione
    10. Come utilizzare ActionScript con Animate
    11. Best practice - Linee guida per l’accessibilità
    12. Accessibilità dell’area di lavoro di Animate
    13. Creazione e gestione di script
    14. Abilitazione del supporto per piattaforme personalizzate
    15. Panoramica di Supporto piattaforme personalizzate
    16. Creazione di contenuto accessibile
    17. Operazioni con i plug-in di Supporto piattaforme personalizzate
    18. Debug di ActionScript 3.0
    19. Abilitazione del supporto per piattaforme personalizzate
  8. Esportazione e pubblicazione
    1. Come esportare i file da Animate CC
    2. Pubblicazione OAM
    3. Esportazione di file SVG
    4. Esportazione di elementi grafici e video con Animate
    5. Pubblicazione di documenti AS3
    6. Esportare animazioni per dispositivi mobili e motori grafici
    7. Esportazione di suoni
    8. Esportare i file video QuickTime
    9. Controllo della riproduzione dei video esterni mediante ActionScript
    10. Best practice - Suggerimenti per la creazione di contenuti per dispositivi mobili
    11. Best practice - Convenzioni per i contenuti video
    12. Best practice - Linee guida per la creazione di applicazioni SWF
    13. Best practice - Strutturazione dei file FLA
    14. Best practice per ottimizzare i file FLA per Animate
    15. Impostazioni di pubblicazione ActionScript
    16. Specificare le impostazioni di pubblicazione per Animate
    17. Esportazione di file proiettore
    18. Esportare immagini e GIF animati
    19. Modelli di pubblicazione HTML
    20. Utilizzo di Adobe Premiere Pro e After Effects
    21. Condividere e pubblicare rapidamente le animazioni

Questo articolo descrive un componente HTML5 personalizzato di esempio.

Questo articolo descrive come creare componenti personalizzati. Il primo esempio è un componente immagine (fornito con Animate CC), per meglio comprendere la struttura e i passaggi di sviluppo necessari. Il secondo esempio descrive come effettuare il wrapping di un componente di interfaccia utente esistente (ad esempio, jQueryUI) e importarlo in Animate CC.

  1. Creazione di un componente immagine DOM

    Crea la categoria My Components

    a. Create una cartella denominata mycomponents all’interno della cartella <HTML5Components> nella prima esecuzione

    b. Scaricate il file allegato myimage.zip ed estraetene il contenuto all'interno della

        cartella mycomponents.

    Scarica

    c. Riavviate Animate.

Struttura di directory nella cartella mycomponents
Struttura di directory nella cartella mycomponents

Ora dovrebbe essere visibile la nuova categoria “My Components” nella cartella dei componenti, e al suo interno il nuovo componente “My Image”. Puoi trascinarlo sullo stage, impostare la proprietà di origine dell’immagine e pubblicare il filmato per vedere il componente personalizzato in azione. 

Metadati del componente - components.js

Codice Components.js
Components.js

La categoria è impostata su CATEGORY_MY_COMPONENTS. Anche i nomi delle proprietà usano chiavi simili. Questa è la chiave per la stringa localizzata per il nome della categoria. Se apri il file strings.json dalla cartella “locale”, trovi le seguenti voci.

Nota:

L’errore più comunemente commesso quando si modifica questo file è l’aggiunta di una virgola finale dopo l’ultimo elemento dell’array.

Dettagli della categoria
Dettagli della categoria

Il valore del campo dell’icona è impostato su Sp_Image_Sm. Nella cartella delle risorse trovi i due seguenti file png, con il prefisso Sp_Image_Sm.

Valore del campo icona
Valore del campo icona

Si tratta delle icone per le modalità di interfaccia utente scura e chiara.

Il valore del campo ‘source’ in components.json è impostato su ‘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 CC
  // 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);

Il codice contiene dei commenti per facilitarne la comprensione. 

Dai un’occhiata al codice sorgente degli altri componenti forniti con Animate. Nella maggior parte dei casi, puoi utilizzare uno di tali componenti come punto di partenza, da configurare in base alle tue esigenze.

Wrapping di un componente jQuery-UI

Questa sezione descrive come eseguire il wrapping di un widget jQuery-UI e come utilizzarlo in Animate CC. Gli stessi concetti possono essere applicati al wrapping di qualsiasi altro componente esistente da altri framework di interfaccia utente.

Esaminiamo il componente Selettore data fornito con Animate CC come widget jQuery-UI. Scaricate ed estraete il contenuto del seguente archivio e utilizzatelo come riferimento.

Scarica

Struttura del contenuto estratto
Struttura del contenuto estratto

La cartella jquery-ui-1.12.0 è l’origine per il framework jQuery UI contenente il widget Selettore data originale e le relative risorse, come immagini e css, da includere nel wrapping e da utilizzare in Animate CC come qualsiasi altro componente HTML5. Questo è necessario solo per l’anteprima locale; se utilizzi “Librerie in hosting” nelle impostazioni Pubblicazione, puoi usare CDN per scaricare le origini dipendenti. 

Codice Components.js
Components.js

Esistono due dipendenze predefinite, jQuery e anwidget.js. Poiché anwidget.js non si trova sul CDN, non è presente alcuna voce CDN per lo stesso.

Il successivo set di voci riguarda le altre risorse richieste per il caricamento del widget Selettore data da jQuery UI. Se devi eseguire il wrapping di un widget da qualsiasi altra libreria, puoi specificare in modo analogo il relativo set di dipendenze. Queste dipendenze vengono scaricate prima dell’inizializzazione del componente.

Nella sezione proprietà, è stata esposta solo una proprietà denominata “label”, associata alla proprietà label del componente Selettore data. Allo stesso modo, è possibile esporre anche le altre proprietà, a seconda delle possibilità di configurazione che si desidera offrire all’utente nell’ambiente di authoring di Animate. In fase di runtime, ognuna di queste sarà disponibile come coppia chiave-valore nell’array delle opzioni per l’istanza. È possibile estrarre il valore configurato e applicarlo in fase di runtime.

File origine principale: src/datepicker.js.
File origine principale: src/datepicker.js.

Sezioni che differiscono dall’esempio

  1. getCreateString:

    Il widget Selettore data da jQuery-UI converte tale elemento di immissione testo in un elemento Selettore data in fase di runtime. Il DOM viene quindi inizializzato di conseguenza.

  2. attach:

    Dobbiamo escludere questa funzione per il widget. Questa API viene chiamata ogni volta che l’elemento viene allegato al DOM. Tuttavia, a causa del modo in cui funziona il runtime sottostante (in questo caso, createjs) l’API può essere chiamata più volte durante l’estensione di un fotogramma.

    Lo stato “attached” dell’elemento sottostante viene ricordato e viene quindi chiamata l’API attach della classe base (mediante this._superApply(arguments)). Se è la prima volta che si allega l’elemento al DOM di livello superiore, è necessario usare la chiamata del widget jQuery-UI sottostante per convertire il DOM del componente in un selettore data. Consulta https://jqueryui.com/datepicker/

    La maggior parte dei widget Javascript funziona in modo analogo. È possibile usare la stessa tecnica per effettuare il wrapping di qualsiasi componente e portarlo in Animate CC allo stesso modo.

  3. Aggiornamento: dobbiamo escludere la funzione update e applicare le proprietà css al div del contenitore e gli attributi all’elemento DOM effettivo.

    Nota:

    Quando si escludono le API quali attach, detach o update, occorre verificare l’implementazione predefinita della classe di base e chiamare l’implementazione di base al momento appropriato. In caso contrario l’inizializzazione componenti potrebbe non riuscire.

Logo Adobe

Accedi al tuo account