• D
    User •

    Formato banner animati

    Ciao. Abbiamo la necessità di inserire dei banner animati all'interno del nostro blog in Wordpress. I banner sarebbero creati da noi e servirebbero sia per promuovere cose nostre, ma anche per clienti che ci chiedono spazio per pubblicizzare loro materiale. Il problema è in che formato realizzare tali banner. Con Adobe Animate ho provato a creare dei file GIF, ma i banner risultano troppo pesanti o di bassa qualità. Non vorremmo utilizzare plugin esterni, ma capire qual è il formato migliore per inserire i banner nei post o nella sidebar del blog. Un formato video MP4 è forse più fattibile? O ci sono altre soluzioni?

    0
  • H
    User Attivo •

    Ciao, una gif animata è composta da tante immagini per quanti sono i fotogrammi, quindi è normale che ottieni un file pesante. Puoi ottimizzarla eliminandone qualcuna ogni tot fotogrammi, e anche comprimendole però dovrai mediare molto tra resa visiva e peso e "scattosità" dell'animazione.

    Visto che usi Adobe Animate ti consiglio di costruire il banner usando il Canvas HTML5. I vantaggi sono moltissimi per esempio l'interpolazione di movimento di un oggetto non verrà generata su una sequenza di fotogrammi ma dallo spostamento di questo, quindi puoi immaginare che il peso si ridurrà notevolmente. Un altro vantaggio è che a differenza di una gif animata puoi anche esportare eventi come l'apertura di un link, l'interazione con l'utente e mille altri eventi. E le animazioni che ottieni sono molto più fluide.

    In Adobe Animate crea un nuovo file, qui devi selezionare il tab Avanzato e selezioni la voce HTML5 Canvas, regola frequenza fotogrammi, dimensioni dell'area, ma puoi farlo anche dopo.
    Vedrai che l'area di lavoro sarà molto simile all'area che hai usato per esportare la gif, per prendere dimestichezza crea una semplice animazione, usa gli strumenti vettoriali o importa nello stage un'immagine, converti in oggetto Movieclip, se usi un'immagine accertati che il posizionamento inziale e finale nello stage abbia coordinate Y e X senza decimali, se lavori con forme vettoriali è una cosa ma con le immagini le vederesti leggermente sfocate.
    Quando hai finito vai su File e Pubblica e ti genera tutto il set di file JavaScript, cartella immagini e un file HTML con funzioni, il codice. Dai un'occhiata a cosa c'è nella cartella immagini, vedrai un'immagine sprite cioè se nello stage caricherai più immagini Animate ne esporterà una sola che le contiene tutte, uno sprite appunto, e anche questo è un grande vantaggio in termini di peso.

    Poi deciderai tu come gestire i vari script se in file separati o meno, puoi implementare l'animazione dove vuoi anche in WordPress usando un blocco HTML, qui userai l'elemento <canvas>

    Guarda l'esempio qui sotto:

    
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:400px">
		
         <canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		
         <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:400px; position: absolute; left: 0px; top: 0px; display: block;">
         </div>
</div>
    0
  • D
    User •

    Grazie. Facendo così però dovrò caricare in qualche cartella tutti file necessari per poi richiamarli in Wordpress? Quindi è questa la soluzione migliore per i banner?

    0
  • H
    User Attivo •

    In questo contesto non esiste una soluzione migliore ma il meno peggio, i limiti sono tanti e poi dipende da com'è fatto questo banner.
    Se esporti in SWF sai bene lo vedrebbero in pochi. La gif animata ti garantisce piena compatibilità ma in base all'animazione può essere molto pesante.
    Esportare un video potresti peggiorare le cose e qui zero interazioni o gestione eventi.
    Usare HTML5 è la scelta meno peggio ma più professionale, quella che ti permette di mostrare animazioni molto fluide con piena interazione, hai meno compatibilità per esempio chi usa Windows XP e Explorer 8 avrà difficoltà a vedere il banner ma questo lo trovo un problema che può essere trascurato.

    Per le cartelle e i file, sicuramente devi creare nella root della tua installazione una cartella che potresti chiamare "banner", dentro ne crei altre per i file .js, immagini e eventuali .css.

    Nel file functions.php del tuo tema attivo, meglio se un child theme, chiami i file che occorrono a far funzionare l'animazione. In WordPress, nella pagina o articolo, crei un nuovo blocco HTML e incolli la parte <canvas> come nell'esempio sopra.

    Ti consiglio nuovamente di creare una semplice animazione e usare come base di test un normale articolo, usa l'Inspector di Chrome se non dovesse funzionare per capire se ci sono conflitti o percorsi sbagliati, una volta compresa questa parte sarà facilissimo inserire il progetto definitivo.

    0
  • D
    User •

    OK. Grazie proverò così 😉

    0
  • H
    User Attivo •

    Chiedi pure se in una di quste fasi hai delle difficoltà.

    0
Effettua l'accesso per rispondere