Leggi questo articolo per ulteriori informazioni su come utilizzare i componenti personalizzabili.

Un componente fornisce una funzione o un gruppo di componenti correlate personalizzabili e riutilizzabili che migliorano la produttività per gli utenti che si occupano della creazione di annunci pubblicitari. In precedenza, Animate CC supportava i componenti Flash utilizzati con destinazioni basate su Flash. A partire da questa versione, Animate supporta HTML5 Canvas. 

  1. Selezionate File > Nuovo.

    Scegliete Avanzate tra le schede nella parte superiore della schermata nella finestra di dialogo Nuovo documento, quindi selezionate l’opzione HTML5 Canvas.

    Nuovo documento
    HTML5 Canvas
  2. Seleziona Finestra > Componenti.

    Componenti predefiniti
    Componenti predefiniti

  3. Seleziona Componenti > Video. Trascina i componenti associati sull'area di lavoro. 

  4. Seleziona l’istanza del componente Video sullo stage, quindi visualizza e modifica i relativi parametri nella finestra di ispezione Proprietà. Il parametro Source (origine) consente di selezionare il file video da una posizione locale o di fornire un URL da cui riprodurre il video (formato mp4, ogg, ogv o webm). 

    components_drag_drop
    Trascinare i componenti

  5. Seleziona Adatta a dimensioni originali per ridimensionare il lettore video in base alle dimensioni del video di input. Questa funzione è disponibile solo per i video mp4. Per altri tipi di video, ridimensiona manualmente l’istanza del video sullo stage avendo cura di rispettare le proporzioni originali.

  6. Premi Ctrl + Invio (Windows) o Comando + Invio (Mac) per visualizzare in anteprima il filmato. Il video viene riprodotto nel browser predefinito. I controlli sono visibili per impostazione predefinita e vengono visualizzati quando passate il cursore sul video nel browser.

    Puoi usare questa stessa procedura per utilizzare altri componenti.

    components_preview
    Anteprima dell’output di un componente

Nota:

I componenti vengono aggiunti al documento HTML come elementi DOM, in modo da fare riferimento agli snippet di codice Componenti (Snippet di codice > HTML5 Canvas > Componenti) per aggiungere interattività ai componenti.

Aggiunta di interattività ai componenti mediante snippet di codice

  1. Seleziona Finestra > Componenti.

  2. Per aggiungere interattività ai componenti, seleziona Finestra > Snippet di codice. Puoi visualizzare la mappatura del comportamento dei vari componenti disponibili.

  3. Nella schermata Snippet di codice, seleziona HTML5 Canvas > Componenti.

    component_snippets
    Snippet di codice predefiniti

  4. A seconda del componente selezionato, fai doppio clic sullo snippet di codice corrispondente per visualizzarlo nel pannello Azioni. Per informazioni su come aggiungere interattività agli snippet di codice, consulta Aggiungere interattività con gli snippet di codice in Animate CC.

Esempio

Il seguente esempio illustra come usare gli snippet di codice per la riproduzione di un video controllata tramite codice.

  1. Seleziona l’istanza del video sullo stage e disattiva l’impostazione Esecuzione automatica nella finestra di ispezione Proprietà. 

  2. Fai doppio clic due volte sul componente Button (Pulsante) nel pannello Componenti per creare due istanze sullo stage e posizionate i pulsanti. Puoi anche trascinarli direttamente dal pannello Componenti allo stage.

    Component_example_7
    Posizionare i pulsanti

  3. Seleziona la prima istanza del pulsante e imposta l'etichetta su Riproduci nella finestra di ispezione Proprietà e il secondo pulsante su Pausa. 

  4. Fai clic su Finestra > Snippet di codice per aprire il pannello Snippet di codice. Passa a HTML5 Canvas > Componenti ed espandi la sezione Interfaccia utente. 

  5. Seleziona il pulsante Riproduci sullo stage, fai doppio clic su Evento clic su pulsante, nel pannello Snippet di codice, e fai clic su OK. Animate CC assegna un nome di istanza al pulsante selezionato. Puoi osservare il codice appena aggiunto nel pannello Azioni.

    Component_example_4
    Aggiunta di snippet di codice

  6. Seleziona il video sullo stage ed espandi la sezione Video nel pannello Snippet di codice. Fai doppio clic su Riproduci video. Il codice necessario per riprodurre il video viene aggiunto al pannello Azioni.

    Component_example_5
    Codice aggiunto al pannello Azioni

  7. Per riprodurre il video quando si fa clic sul pulsante, inserisci il codice nella sezione compresa fra <Inizio del codice personalizzato> e <Fine del codice personalizzato>. 

    Component_example_6
    Inserisci il codice all’interno dei tag

  8. Per aggiungere un codice per mettere in pausa il video, fai clic sul pulsante Pausa, assegna il nuovo gestore di pulsante, quindi aggiungi il codice per mettere in pausa il video.

  9. Visualizza un’anteprima del filmato. Fai clic sul pulsante Riproduci per riprodurre il video e sul pulsante Pausa per interromperlo. 

Nota:

Puoi visualizzare l’attributo className per ciascun componente nella finestra di ispezione proprietà. Usa questi nomi di classi per associare uno skin ai componenti tramite CSS. Utilizza il componente CSS per caricare il CSS personalizzato. Il componente CSS consente di selezionare un file CSS locale incluso nel filmato.

Installare i componenti condivisi

I progettisti o gli sviluppatori Animate possono installare il componente condiviso del file ZXP usando l'utility Gestisci estensioni.

Prerequisito

Utility Gestisci estensioni. Per le istruzioni di download, fai clic su Guida > Gestisci estensioni in Animate CC.

Installazione dei componenti

Per installare i componenti condivisi puoi effettuare le operazioni seguenti: 

  1. Fai doppio clic sul file ManageExtensions.exe. Viene visualizzata la finestra di dialogo Gestisci estensioni.

    ManageExtensions
  2. Fai clic su Installa un'estensione e seleziona l'estensione (file .zxp) desiderata.

  3. Per visualizzare il componente installato in Animate CC, fai clic su Finestra > Componente. Viene visualizzata la finestra a comparsa Componenti.

  4. Fai clic sull'icona ad hamburger nell'angolo in alto a destra e fai clic su Ricarica componenti.

    reloading-components

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online