Come promesso, oggi finiamo di vedere come personalizzare CU3R, lo fantastico slideshow di foto 3D in flash. Mi raccomando prima di leggere questo articolo ti consiglio vivamente di leggere la prima parte.

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.

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Javascript: Slideshow con Effetti Speciali

Tornano i tutorial su javascript e oggi vediamo Floom, un bellissimo slideshow di foto che utilizza la libreria mootools. L'effetto è molto...

Slideshow Maker: Realizza Video Con Effetti Speciali In 5 Minuti!

Oggi vediamo Slideshow Maker, un programma gratis semplicissimo da utilizzare, dove in 5 passi riuscirai a realizzare dei video con effetti speciali...

Deformare I Soggetti Con Funpix Maker

Tempo fa ho fatto un semplice tutorial per gimp, dove spiegavo come deformare in modo divertente delle foto. Oggi voglio segnalarti un programma...