Pubblicato il 02/06/15e aggiornato il

Come creare un video SWF con un collegamento a una pagina.

Come pubblicare nel sito un video SWF che ri ripete all'infinito per creare una campagna pubblicitaria o di sensibilizzazione verso un tema cui teniamo molto.
Il formato di video Shockwave Flash è stato realizzato dalla azienda Adobe e serve per quei video tipici degli annunci pubblicitari che si ripetono senza soluzione di continuità.  

Questo formato si presta quindi benissimo a creare un annuncio pubblicitario fatto in casa per poi linkare una pagina specifica del nostro blog oppure anche una pagina esterna. Forse è il caso di mostrare in modo analitico come procedere per creare un video di questo tipo, per caricarlo su un hosting gratuito, come ottenerne il link diretto e come pubblicarlo in una pagina del nostro blog in modo che i lettori che ci cliccano sopra siano indirizzati in una data pagina.

CREARE IL VIDEO


Possiamo creare il video con uno dei tanti strumenti gratuiti che ci offre la rete. I tool ci permettono di usare foto, spezzoni di filmati e anche file audio. Ricordo però che per pubblicare nel nostro sito un video dobbiamo esserne i legittimi proprietari anche per quello che riguarda un eventuale audio. Nel senso che se si inserisce un sottofondo musicale questo deve essere di pubblico dominio oppure dobbiamo avere il consenso dell'autore per il suo utilizzo. 

CONVERTIRE IL VIDEO IN SWF


Il video così realizzato non deve essere molto lungo, meglio se di 5-10 secondi, al massimo di 30 secondi perché per durate superiori avremo problemi di una eccessiva lentezza nel caricamento del sito. Per la conversione del video in SWF si può usare iWisoft Free Video Converter in cui come formato di uscita si deve scegliere appunto SWF

free-video-converter-swf

 

CARICARE IL VIDEO SWF SU UN HOSTING


Se siete i proprietari di un sito o se avete un blog Wordpress self-hosting non avete certo problemi. Vi basterà accedere al Pannello di Controllo e caricare il file SWF in una cartella specifica per esempio upload o addirittura nella Radice di archiviazione. Il link diretto o URL o hotlink o se si vuole l'indirizzo del file SWF sarà

http://www.miodominio.com/upload/nomefile.swf

che dovrà poi essere usato nel codice di incorporamento. Se non avete un dominio di vostra proprietà e volete implementare il video in un blog del tipo Blogspot.com potete usare Google Sites. Se invece avete un dominio personalizzato allora c'è la possibilità che il link su Google Sites non funzioni. In questo caso si può essere usata la cartella Public di Dropbox o meglio ancora Google Drive che ci permette di avere il link diretto al nostro file swf e che sarà di questo tipo

https://googledrive.com/host/ID_CARTELLA/nomefile.swf

 

CREAZIONE DI UN FILE IMMAGINE TRASPARENTE


Per poter linkare una pagina bisogna usare un escamotage che è quello di creare una immagine trasparente da posizionare sopra al video e che non ci impedirà di visualizzarlo in modo perfetto ma che è un oggetto HTML in cui può essere aggiunto un collegamento senza problemi. Ovviamente dobbiamo creare questo file trasparente delle stesse dimensioni di quelle del video.

Si può usare un programma di grafica come Photoshop ma anche uno gratuito come Gimp o il semplicissimo ma semiprofessionale Paint.NET. Nel test che ho realizzato ho creato un video SWF di dimensioni 400x300 pixel Photoshop 12 Elementi. Sono andato su File > Nuovo  > File nuovo, ho dato un nome al file quindi ho scelto le dimensioni 400x300 e l'opzione trasparente
 
crere-file-immagine-trasparente

Dopo che si è creato il banner si va su File > Salva con nome e si salva il file in formato PNG. Tale file dovrà essere caricato su Picasa e se ne dovrà ottenere il link diretto che avrà questa struttura

https://lh3.googleusercontent.com/-B77gvjlmfF0/VWzNV6mMa_I/AAAAAAAAtO8/XvSu42-OPcA/s400/Banner400-300.png

Dovremo creare un banner per ogni dimensione dei video.  

CODICE DA IMPLEMENTARE IN UNA PAGINA WEB


Acquisiti i link diretti del file SWF e del banner trasparente possiamo configurare il codice

<div style="contenitore">
<div style="position: absolute">
<a href="LINK_PAGINA_COLLEGATA" target="_blank" ><img src="URL_DIRETTO_BANNER_TRASPARENTE"> </a></div>
<div><object type='application/x-shockwave-flash' data='URL_DIRETTO_FILE.swf' width='400' height='300'>
<param name='flashvars' value='clickTag=&clickTarget=_self' /> <param name='allowScriptAccess' value='always' />
<param name='movie' value='URL_DIRETTO_FILE.swf' />
<param name='wmode' value='transparent' >
</object>
</div>
</div>

dove al posto degli URL colorati di rosso debbono essere inseriti i link diretti rispettivi di immagine trasparente e file SWF. Si devono anche inserire le dimensioni del video e l'URL della pagina di destinazione quando qualcuno cliccherà sul filmato. Il tag target="_blank" serve per aprire la pagina in un'altra scheda. Ecco un esempio banalissimo di un video SWF di infimo aspetto creato per una semplice esigenza euristica collegato sempre come test alla pagina della Cookie Info mai così citata come in questi giorni di Maggio in attesa della Cookie Law.  

Questa procedura può servire per creare una campagna pubblicitaria virale mostrando ai lettori una textarea con il codice da copiare e incollare nei loro siti per condividere la campagna. Questo aspetto della condivisione del codice lo vedremo nel prossimo post.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.