Sei sulla pagina 1di 3

[TIPS & TRICKS] Intestazioni con Animazioni Flash

Ottobre 2010

Come creare a inserire unAnimazione Flash nellintestazione del Sito Web


Come sappiamo, WebSite X5 Evolution 8 permette di scegliere fra oltre 1400 template preinstallati o di creare un proprio modello grafico da zero. In pi ha un pratico editor interno attraverso il quale possiamo lavorare su intestazione e pi di pagina del modello aggiungendo testi, immagini, collegamenti e tutto ci che serve per adattarlo al nostro gusto e alle nostre esigenze. Uno degli elementi che potrebbe rendere lintestazione del nostro modello pi accattivante lAnimazione Flash ma difficile riuscire a trovare gi pronta lanimazione che fa al caso nostro. Vediamo, dunque, come possiamo creare unAnimazione Flash grazie a un software veramente molto semplice, SWiSH Lite, e a inserirla nel nostro sito fatto con WebSite X5 Evolution 8.

SWISH LITE:
SWiSH Lite una versione semplificata di SWiSH Max3, software completo e professionale per la creazione di siti e Animazioni Flash. Con SWiSH Lite possibile creare piccole animazioni in cui si combinano testi e immagini contando su uninterfaccia estremamente intuitiva e una galleria di effetti prei mpostati. SWISH LITE IN OMAGGIO
CON GLI ORDINI FATTI USANDO IL

CODICE PROMO AWARDX5

SCENARIO:
Ipotizziamo di voler creare unanimazione in cui vengano visualizzati il logo, il nome del nostro sito e un breve slogan, da posizionare nellintestazione del sito stesso. Gli elementi dellanimazione dovrebbero presentarsi in questo modo:

CREARE LANIMAZIONE CON SWISH LITE:


Dopo aver installato e registrato la nostra copia di SWiSH Lite, lanciamo il programma. SWiSH Lite presenta due finestre: una con tutti i comandi, organizzati in sezioni omogenee, e una vuota dove verr visualizzata lanteprima dellanimazione creata. Nella sezione Generale, impostiamo la Larghezza e lAltezza del filmato rispettivamente a 430 px e a 100 px. Lasciamo la frequenza a 12 fotogrammi al secondo e come colore di sfondo il bianco. Passiamo alla sezione Linea Temporale: qui possiamo lavorare allo sviluppo dellanimazione fotogramma per fotogramma. Clicchiamo sul pulsante Inserisci Nuovo Oggetto Immagine e importiamo il file gif, jpg o png relativo al logo. Il logo viene aggiunto sulla Linea Temporale e viene visualizzato nella finestra di anteprima. Accertiamoci che sia selezionato loggetto immagine (Logo) e clicchiamo su Aggiungi Effetto in modo da visualizzare lelenco di tutti gli effetti disponibili. Possiamo scegliere, per esempio, leffetto Dissolvenza in entrata. Leffetto viene applicato alloggetto con delle impostazioni standard ma possiamo lavorare sulla Linea Temporale per modificarlo.

Incomedia S.r.l. | www.incomedia.eu |www.websitex5.com

[TIPS & TRICKS]

Ottobre 2010

Possiamo, per esempio, fare in modo che duri pi a lungo semplicemente trascinando il bordo del rettangolo blu che lo rappresenta sulla Linea Temporale fino al fotogramma desiderato. In pi, possiamo fare doppio click sullo stesso rettangolo blu per richiamare la finestra che permette di gestire tutte le opzioni relative alleffetto. Per visualizzare lanteprima delleffetto impostato, dobbiamo semplicemente cliccare sul pulsante Riproduci filmato. Per interrompere lanteprima, invece, e continuare a sviluppare lanimazione dobbiamo cliccare su Ferma filmato.

Clicchiamo, ora, sul pulsante Inserisci Nuovo Oggetto Testo: loggetto viene inserito sulla Linea Temporale e una scritta Testo compare al centro della finestra di anteprima, sovrapposto allimmagine del logo. Possiamo lavorare direttamente sulla finestra di anteprima per spostare gli elementi in modo da affiancarli correttamente. Apriamo la sezione Testo (per farlo possiamo anche fare doppio click sul testo visualizzato nella finestra di anteprima), digitiamo il nome del nostro sito e diamo le formattazioni del caso. Come abbiamo fatto per limmagine del logo, impostiamo anche per il testo un effetto: questa volta possiamo scegliere, per esempio, leffetto Schiaccia specificando attraverso la finestra delle impostazioni Schiaccia verso sinistra. A questo punto la Linea Temporale si presenta cos:

Clicchiamo di nuovo sul pulsante Inserisci Nuovo Oggetto Testo: digitiamo, formattiamo e posizioniamo la scritta relativa allo slogan. Anche sullo slogan impostiamo leffetto Schiaccia ma scegliendo Schiaccia verso destra. A questo punto, possiamo far scomparire tutti e 3 gli elementi contemporaneamente: per ciascuno di questi posizioniamoci al fotogramma 55 della Linea Temporale e inseriamo lEffetto Dissolvenza in uscita. A questo punto la Linea Temporale si presenta cos:

Incomedia S.r.l. | www.incomedia.eu |www.websitex5.com

[TIPS & TRICKS]

Ottobre 2010

Verificato che tutto funzioni correttamente possiamo esportare la nostra animazione. Apriamo la sezione Esportazione per verificare i parametri impostati e, quindi, clicchiamo sul pulsante Esporta in SWF scegliendo di salvarla, per esempio, come titolo.swf in una nostra cartella di lavoro.

IMPORTARE LANIMAZIONE IN WEBSITE X5 EVOLUTION 8:


Adesso che abbiamo creato la nostra Animazioni Flash non ci rimane che inserirla nellintestazione del template del nostro sito. 1. In WebSite X5 Evolution 8, apriamo il progetto del nostro sito e, nel Passo 1 apriamo la finestra Modifica del modello. 2. Clicchiamo sul pulsante Inserisci Animazione Flash e importiamo il file titolo.swf che abbiamo creato con SWiSH Lite. 3. Posizioniamo adeguatamente lanimazione e attraverso il riquadro Posizione e dimensioni impostiamo i valori corretti di Larghezza (430 px)e Altezza (100 px). 4. Verifichiamo che tutti funzioni correttamente e salviamo.

Con questo abbiamo concluso e abbiamo visto com semplice, grazie a SWiSH Lite, creare una semplice animazione Flash per impreziosire la grafica dei nostri siti. Visti e compresi questi semplici passaggi base, vale sicuramente la pena spendere un po di tempo per guardare gli effetti disponibili e fare pratica a lavorare sulla Linea Temporale per scoprirete tutto ci che possibile fare. Se poi scoprire che il mondo dellanimazione Flash vi affascina, allora vi consigliamo di approfondire il discorso con versioni pi complete e performanti come SWiSH Max3 o SWiSH miniMax3.
PER MAGGIORI INFORMAZIONI SUI SOFTWARE

SWISH

HTTP://WWW.SWISHZONE.IT

Incomedia S.r.l. | www.incomedia.eu |www.websitex5.com