In particolare vediamo la prima parte del file config.xml, quella compresa tra i tag <settings>, che ti permetterà di gestire al meglio l’interfacca dello slideshow.

Gli elementi che potrai inserire, e sui quali ti consiglio di leggere la documentazione per usarli al meglio, sono:

autoplay: aggiungendo questo nodo potrai impostare l’autoplay dello slideshow;

description: questo nodo servirò per aggiungere una descrizione;

preloader: questo nodo ti permetterà di inserire un preloader tra le slide;

next button:  inserisce lo sfondo del pulsante per passare alla prossima slide;

prev button: inserisce lo sfondo del pulsante per passare alla slide precedente;

next symbol: inserisce il simbolo (frecce di vario tipo che trovi nella documentazione) per passare alla slide successiva;

prev symbol: inserisce il simbolo  per passare alla slide precedente;

Per ogni elemento potrai gestire il suo aspetto e i comportamenti all’entrata, uscita e al passaggio del mouse sopra i controlli dell’interfaccia.

In particolare dovrai definire i tag defaults, tweenIn, tweenOut e tweenOver.

defaults

questo nodo è fondamentale per impostare le caratteristiche dell’elemento che andrai a inserire.

tweenIn

questo nodo è molto importante in quanto definirai come appariranno i controlli. Quindi potrai definire posizione, dimensioni, colore ecc. Gli elementi quindi entreranno alla fine della transizione di una slide.

tweenOut

con questo elemento potrai gestire il comportamento dell’uscita dei pulsanti dalla foto.

tweenOver

qui imposterai il comportamento al passaggio del mouse sopra gli elementi dell’interfaccia.

Quindi avrai una situazione di questo genere (dove al posto di xxxxx c’è l’elemento di cui si è parlato poco fa):

<cu3er>
<settings> <xxxxx*>
<defaults .../>
<tweenIn ... />
<tweenOut ... />
<tweenOver ... />
</ xxxxx*>
</settings>
</cu3er>

Poi per tweenIn, tweenOut e twinOver potrai utilizzare questi attributi:

- time (numero)
- delay (numero)
- x (numero)
- y (numero)
- width (numero)
- height (numero)
- rotation (numero da 0 a 360)
- tint (colore nel formato 0×000000)
- alpha (numero da 0 a 1)
- scaleX (numero da 0 a 1)
- scaleY (numero da 0 a 1)

Vediamo un esempio concreto:

<prev_button>
<defaults round_corners="5,5,5,5"/>
<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
<tweenOut tint="0x000000" />
</prev_button>

Come vedi puoi personalizzare in tantissimi modi lo slideshow. Prova a giocare un po’ con il codice, così potrai capire quali sono le impostazioni più adatte alle tue esigenze.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Ecco perchè oggi voglio segnalarti CU3ER, un fantastico slideshow di foto in flash gratis da poter utilizzare liberamente per qualsiasi tuo progetto. Un esempio lo puoi vedere proprio nella home page del sito CU3ER.

Nel sito c’è anche un’ampia documentazione in inglese su come personalizzare lo slideshow, però dato che non tutti l’inglese lo masticano bene, voglio spiegarti come adattarlo alle tue esigenze.

Una volta scaricato i file necessari, dovrai fare alcune semplici modifiche ad alcuni di essi:

- la cartella images contenenti le foto;
- demo.htm;
- config.xml.

Cartella images

In questa cartella dovrai mettere le foto che faranno parte dello slideshow, che dovranno essere tutte della stessa dimensione. Nell’esempio le immagini sono grandi 600×300 pixel.

demo.htm

Se le foto avranno una dimensione diversa rispetto a quelle nell’esempio, dovrai modificare questa linea di codice, tra i tag head:

swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);

dove al posto di 600 e 300 dovrai mettere le dimensioni delle immagini che hai scelto per lo slideshow.

config.xml

In questo file potrai configurare a piacimento la gallery. Le parti importanti di questo file sono due: quella compresa tra i tag settings e quella compresa tra i tag slides. Dato che spiegare tutto è molto lungo, oggi vediamo come modificare la parte relativa alle slide, mentre lunedì vedremo come modificare l’altra parte.

Ogni slide è caraterizzata da queste righe di codice:

<slide>
<url>percorso_dell_immagine_.jpg</url>
<link target="_self"/>link_alla_pagina.html</link>
<description>
<link target="_self">altro_link.html</link>
<heading>Titoletto della descrizione</heading>
<paragraph>Testo per la descrizione</paragraph>
</description>
</slide>

dove l’unico tag necessario è url dove bisogna mettere l’indirizzo dell’immagine. Gli altri tag sono opzionali.

Subito dopo ogni slide, trovi il tag transition si possono impostare moltissimi parametri (è più facile provarli che spiegarli) e sono:

• num: numero di pezzettini in cui verrà spezzata l’immagine nella transizione (metti il numero che vuoi);
• slicing: direzione della rotazione che può essere horizontal o vertical (es. slicing=”vertical”);
• direction: senso di rotazione dei singoli pezzettini, che può essere up, down, left o right (es. direction=”up”);
• shader: aggiungerà un’ombra sopra l’immagine; i valori possono essere none,flat o phong (es. shader=”phong”);
• light_position: se l’attributo shader ha un valore diverso da none, potrai decidere la posizione della luce, settando x,y e z per posizionare la luce (es. light_position=”0, 0, -100″);
• cube_color: durante la transizione tra le due slide, per un istante vedrai altre facce del cubo a cui potrai cambiare il colore (es. cube_color=”0×333333″);
• z_multiplier: più è alto questo valore più  i vari pezzetti andranno in profondità (es. z_multiplier=”5″);
• duration: durata della transizione, in secondi (es. duration=”3″);
• delay: tempo di permanenza di ogni slide (es. delay=”3″).

Tutti questi parametri sono opzionali, ma se dovessimo metterli tutti, ad esempio potremmo avere:

<transition num="6" slicing="vertical" direction="up" shader="flat" light_position="0, 0, -100" cube_color="0x96ff00"  z_multiplier="4" duration="3" delay="2"/>

Come vedi hai un’ampia possibilità di personalizzazione della gallery, e tutto questo senza dover conoscere nulla di flash!

Se qualcosa non ti è chiaro chiedi pure nei commenti! E non dimenticarti di abbonarti ai feed RSS per non perderti la seconda parte dell’articolo!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Oggi la raccolta avrà come programma di riferimento Adobe Flash, con il quale si possono realizzare animazioni eccezionali, facendo vivere al visitatore un’esperienza indimenticabile.

Cominciamo:

HTML.it

Credo che non abbia bisogno di presentazioni. Qui troverai guide di ogni genere, come la realizzazione di un sito web in flash, l’utilizzo di action script, l’utilizzo della tecnologia AIR ecc. Sicuramente è il posto giusto per iniziare a imparare flash.

Web Master Point

Il noto sito offre una guida dettagliata su flash, ideale per chi è alle prime armi e non sa bene dove mettere le mani. Questa raccolta parte dalle basi, fino ad arrivare ad animazioni sempre più complesse.

Julius Design

Ebbene si, di nuovo lui…Una settimana fa lo avevo segnalato per quanto riguarda i migliori tutorial riguardo photoshop, ma anche con flash non scherza, anzi si può dire che tra tutti è l’argomento più discusso nel suo blog con numerosi tutorial, uno dei più forniti in Italia.

Colorville

In questo sito potrai trovare alcuni tutorial dove potrai imparare a realizzare gallerie fotografiche, preloader, creare dei pulsanti ecc.

Giorgio Tave

Nel forum di Giorgio Tave una sezione è dedicata a flash, dove imparerai a muovere i primi passi nel mondo dell’animazione.

Adobe

Nel sito di Adobe troverai molti video tutorial riguardo la suite CS3 di Adobe, flash ovviamente compreso.

E’  inutile dire che in inglese si trova molto più materiale, ma comunque questa raccolta può essere un inizio per entrare nel mondo di flash. Io stesso ho realizzato dei tutorial. Non sono molti, ma tra li utenti hanno destato molto interesse, dove si è visto come far interagire Flash con Lightbox, Thickbox e Lightview.

Come al solito, se tu conosci altre risorse in italiano dove trovare tutorial e video tutorial per flash, citale nei commenti!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Una delle caratteristiche dello script lightview è la possibilità di raggruppare delle immagini in base a una categoria e poterle vedere in sequenza tramite uno slideshow.

Per ottenere questo da una gallery fatta in flash, dovete procedere come segue.

A ogni miniatura, convertita in un pulsante, assegnate il seguente codice:

on (release) {
getURL(“javascript:Lightview.show(’1′);”);
}

Se avete 10 miniature, l’ultima avrà il numero 10, al posto dell’1.

Poi nella pagina html, che contiene il filmato swf, scrivete il seguente codice:

<div class=”invisible”>
<a href=’image1.jpg’ id=’1′ class=’lightview’ rel=’gallery[natura]‘>1</a>
<a href=’image2.jpg’ id=’2′ class=’lightview’ rel=’gallery[natura]‘>2</a>
<a href=’image3.jpg’ id=’3′ class=’lightview’ rel=’gallery[natura]‘>3</a>
</div>

In pratica inserite un div, nel quale mettete le immagini che saranno presenti nella gallery in flash, assegnando a ciascuna un id e la categoria (rel) che deve essere uguale per tutte (gallery[natura]).

Nel foglio di stile css associato alla pagina dovrete fare in modo di non visualizzare il div “invisibile”, in questo modo:

.invisibile {
display:none;
}

L’installazione dello script lightview e tutto il resto, sono spiegati nell’articolo flash e lighview.

Guarda la demo

Scarica il sorgente

Scarica il sorgente AS3

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Molti di voi conosceranno lo script lightbox, che permette di aprire le immagini con degli effetti speciali. Però appunto solo immagini. Alan Curtis e juliusdesign hanno proposto delle soluzioni per far interagire i filmati flash con lightbox, però avendo sempre la limitazione sopra citata.

Lo script thickbox, invece permette di aprire non solo immagini, ma iframe, pagine all’interno della stessa finestra in cui si naviga ecc. E allora con poche modifiche sono riuscito ad adattare thickbox ai filmati flash.

In particolare, in questo articolo, spiego come poter aprire un altra pagina (che conterrà qualsiasi cosa vogliate), all’interno della finestra thickbox.

Per prima cosa associate al pulsante flash il seguente codice:

on (release) {
getURL("javascript:tb_show('gallery','gallery.html?KeepThis=true&TB_iframe=true&height=600&width=810')");
}


Nella funzione tb_show impostate il titolo della finestra (‘gallery’), e la pagina che dovrà essere aperta, specificando le dimensioni in altezza e larghezza della finestra.

Nella pagina HTML che contiene il filmato flash dovrete inserire, tra i tag <head> e </head> queste tre righe di codice che “installano” lo script:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/thickbox.js"></script>
<link rel="stylesheet" href="script/thickbox.css" type="text/css" media="screen" />

Infine, nel tag object, che vi servirà per inserire il filmato swf dovrete inserire fra le altre, queste righe di codice:

<param name="allowScriptAccess" value="sameDomain" />

E nel tag embed

allowScriptAccess="sameDomain"

Guarda la demo

Scarica il sorgente AS2

Scarica il sorgente AS3

Vedi anche Flash e lightview

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

In questo articolo, di makeusof.com,  avrai la risposta.

Troverai una spiegazione dettagliata su come ottenere ciò che desideri per i browser firefox, internet explorer e opera.

Poi, una volta scaricati, li potrai convertire, utilizzare in un sito web o in una presentazione, risparmiando un sacco di lavoro.

Inoltre è possibile passare dall’animazione (file swf), al file di progetto vero e proprio fla! Questo però è possibile solo con dei programmi a pagamento, come ad esempio swf decompiler

Se c’è qualcosa che non ti è chiaro chiedimi pure nei commenti!

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Questi e molti altri articoli li potete trovare nella sezione tutorial del blog.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Vista l’esigenza di Maldor e magari di qualcun’altro che ha bisogno di utilizzare lightbox in action script 3, propongo la mia soluzione, prendendo spunto dal lavoro di Alan Curtis, che vi invito a leggere perchè io spiegherò le modifiche da applicare al suo esempio per ottenere lo stesso risultato in action script 3.

In fondo all’articolo troverete un esempio e il sorgente da scaricare per Flash CS3.

Nella spiegazione, riporterò le righe di codice da moficare, cominciamo:

1. la prima modifica che dovete apportare al codice di Alan Curtis è nella dichiarazione dell’array pics, da fare in questo modo:

2. Ora passiamo alla gestione degli eventi associati alle miniature delle immagini da aprire con lightbox.
Nella versione AS2, gli eventi sono associati direttamente ai vari pulsanti/miniature, cosa che non è possibile in AS3.

Date un nome di istanza a ogni miniatura, ad esempio pic1, pic2, pic3 ecc. e aggiungete questo codice su un altro livello, nel primo frame.

Questo codice lo dovete ripetere tante volte quante sono le foto che fanno parte della gallery.
Se avete 10 foto, avremo 10 ascoltatori: addEventListener(MouseEvent.CLICK, foto1..foto10), con 10 function foto1…foto10.

L’unica cosa che cambierà in ogni funzione sarà la riga 7 dove, nella funzione show, lo 0 corrisponde alla prima foto, l’1 corrisponderà alla seconda……il 9 corrisponde alla decima foto.

Spero che questo tutorial possa esservi utile per i vostri progetti. Credo che si possa fare di meglio a livello di codice (si accettano suggetimenti), però penso sia comunque un buon inizio…

Infine ricordo che nella sezione tutorial, ci sono altri articoli che potrebbero interessarvi, come flash e thickbox, o flash e lightview.

Scarica il sorgente (se avete problemi nel scaricare il sorgente segnalatelo nei commenti…)

Guarda l’esempio

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Prendete una qualunque foto e apritela con gimp, poi:

1. Andate nel menu, alla voce Immagine – Modalità – Scala di grigi;
2. Ora andate su Filtri – Rilevamento margini – Spigoli, e impostate la finestra come in figura;

3. Andate su Colori – Inverti;
4. Infine andate su Colori – Soglia e scegliete un valore adatto per ottenere un effetto fumetto.

Ora non vi resta che effettuare questi passaggi per le foto che faranno parte dell’album, e tramite il programma Picasa unirle , scaricando il template pageflip e seguendo queste istruzioni.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Il mio intento all’inizio era quello di scrivere un articolo su flash e lightwindow, solamente che ho riscontrato dei problemi con internet explorer (che strano….comunque ci lavorerò sopra…).

Allora ho trovato un’alternativa equivalente, cioè lightview, basato su Prototype e Scriptaculous, scaricabili a parte, ma comunque presenti nel file che ho messo a disposizione alla fine dell’articolo.

Ecco come procedere:

Nel file fla, al pulsante dovete associare il seguente codice (va esattamente scritto come nell’esempio);

on (release) {
getURL("javascript:Lightview.show({ href: 'http://fedeweb.wordpress.com', rel: 'iframe', title: 'quello_che_vuoi', options: { width: 800, height: 500 }});");
}

dove:

- in href potete mettere un collegamento a una pagina web, un’immagine, un filmato swf, ecc.;
- in rel dovete mettere ‘iframe’ se dovete caricare una pagina web, ‘flash’ se dovete caricare un swf;
- in title mettere il titolo della finestra, che comparirà in alto nel caso in cui aprirete una pagina web, oppure in basso se si tratta di un’immagine o di un filmato swf.

Nella pagina HTML che contiene il filmato flash dovrete inserire, tra i tag <head> e </head> queste righe di codice che “installano” lo script lightview:

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/lightview.js'></script>

Infine, nel tag object dovrete inserire:

<param name=”allowScriptAccess” value=”sameDomain” />

E nel tag embed, aggiungere l’attributo:

<allowScriptAccess=”sameDomain”/>

Un’osservazione: nel vostro foglio di stile, in corrispondenza di body, mettete height:100%, altrimenti in firefox, lo schermo diventerà scuro fino alla fine della vostra pagina.

Nel prossimo articolo spiegherò come creare una galleria di immagini con la possibilità di attivare lo slideshow, sempre con lo script lighview.

Guarda la demo

Scarica il sorgente

Scarica il sorgente AS3

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!