Indubbiamente le animazioni hanno il loro fascino: hanno il grande pregio di riuscire ad attirare l’attenzione e, se fatte e implementate bene, rendono le pagine dei siti più interessanti.

Con un software come WebAnimator, creare una bella animazione è un compito alla portata di tutti: non richiede la scrittura di alcun codice, utilizza Timeline e keyframe, propone effetti e Live Animation pre-impostate ed è ricco di funzioni che consentono di raggiungere degli ottimi risultati. Ma l’aspetto più interessante è che WebAnimator crea animazioni utilizzando HTML5, CSS e JavaScript non ricorrendo a Flash, le animazioni risultano più leggere e soprattutto compatibili con qualsiasi browser e dispositivo mobile, incluso iPhone e iPad.

Se ancora non lo avete fatto, il consiglio è di scaricare la versione trial di WebAnimator: avrete 14 giorni di tempo per metterlo alla prova. Trovate il link per il download sul sito ufficiale: http://www.webanimator.com

Una volta creata un’animazione con WebAnimator, come possiamo inserirla all’interno delle pagine del nostro sito Web realizzato con WebSite X5?

La procedura è piuttosto semplice ed è stata dettagliatamente illustrata nella FAQ “Come inserire un’animazione HTML5 di WebAnimator in WebSite X5” [ https://helpcenter.websitex5.com/post/107026 ], ma adesso, grazie all’introduzione di un nuovo Oggetto opzionale rilasciato con la release 11.0.2.13 di WebSite X5, l’integrazione è diventata ancora più facile e veloce.

Predisporre l’animazione in WebAnimator

Avviamo WebAnimator e creiamo l’animazione che ci interessa inserire nel nostro sito Web. Salvato il progetto con un nome (es: WA_Animation), clicchiamo sulla voce Esportain HTML5 presente nella barra del menu e scegliamo la cartella in cui esportare l’animazione. Clicchiamo su Ok per avviare l’esportazione.

WebAnimator salva nella cartella di destinazione definita sia il file HTML generato contenente l’animazione (es: WA_Animation.html), sia una cartella separata contenente le risorse come immagini, script, ecc. (es: WA_Animation_resources).

Integrare l’animazione in WebSite X5

Prima di procedere, sinceratevi di lavorare con l’ultima versione aggiornata di WebSite X5. Ricordate che se è disponibile un aggiornamento, vedrete un avviso direttamente della Start Page che visualizzate aprendo il programma. In alternativa potete sempre trovare gli eseguibili aggiornati nella pagina “I miei Download” del vostro profilo su Answers.

Fatta questa verifica, apriamo il nostro progetto e, al Passo 3, posizioniamoci nella pagina in cui ci interessa inserire l’animazione realizzata con WebAnimator.

Clicchiamo sul pulsante in modo da accedere alla finestra Gestione degli Oggetti: qui selezioniamo l’Oggetto WebAnimator Animation incluso nella categoria Widget. Clicchiamo sul pulsante Gratis/Installa e inseriamo la password che utilizziamo per fare il login su Answer. A questo punto l’Oggetto è installato: tornando nella finestra Creazione della Pagina, lo possiamo trovare nell’elenco degli Oggetti disponibili selezionando la categoria Widgets.   

Selezioniamo l’Oggetto WebAnimator Animation e trasciniamolo in una cella della griglia di impaginazione, quindi facciamo doppio clik per accedere alla finestra delle impostazioni.

Clicchiamo sul pulsante Aggiungi e selezioniamo i file presenti nella cartella delle risorse dell’animazione esportata con WebAnimator (nel nostro esempio: WA_Animation_resources) quindi specifichiamo le dimensioni dell’animazione. Fatto questo, non ci rimane che confermare cliccando sul pulsante Ok e visualizzare l’Anteprima in locale per verificare la resa grafica del nostro operato.

L’Oggetto WebAnimator Animation è uno degli ultimi Oggetti Opzionali che abbiamo realizzato, con il tempo ne svilupperemo e proporremo degli altri: controllate sempre quelli che si andranno ad aggiungere alla lista e installate quelli utili per sviluppare i vostri progetti. Buon lavoro!

---------------------------------------------------------

Su questo argomento vedi anche:

• Come inserire un'animazione HMTL5 di WebAnimator in WebSite X5 [ https://helpcenter.websitex5.com/post/107026 ]
• Come inserire un’animazione HTML5 di WebAnimator nell’intestazione/piè di pagina di un sito realizzato con WebSite X5 [ https://helpcenter.websitex5.com/post/108789 ]