Oggi vi segnalo un progetto che riguarda Flash completamente gratuito,il suo nome è cu3er. Cu3er è un visualizzatore di slide e immagini molto originale. Direi molto semplice da usare si base per la personalizzazione su xml. Ma vediamo come configuralo. Non è difficile da installare è praticamente composto da un cartella che contiene le immagini, un xml dove indichiamo il percorso e la transazione, e un file .swf che contiene le nostre slide visualizzate con un effetto 3D.
[download id=”16″ format=”2″]
Prima di tutto procediamo al download del pacchetto a questo indirizzo http://www.progressivered.com/cu3er/download/ una volta scaricato scompattiamolo in una cartella. Troviamo i seguenti file:
Images
Js
Config
Cu3er
Demo
Adesso non dovrete fare altro che creare delle slide andandole ad inserire nella cartella images. Una volta caricate le immagini nella cartella bisognerà dichiararle nel file xml. Vi troverete davanti questo tipo di codice
<?xml version=”1.0″ encoding=”utf-8″ ?>
<cu3er>
<settings>
<prev_button>
<defaults round_corners=”5,5,5,5″/>
<tweenOver tint=”0xFFFFFF” scaleX=”1.1″ scaleY=”1.1″/>
<tweenOut tint=”0x000000″ />
</prev_button>
<prev_symbol>
<tweenOver tint=”0x000000″ />
</prev_symbol>
<next_button>
<defaults round_corners=”5,5,5,5″/>
<tweenOver tint=”0xFFFFFF” scaleX=”1.1″ scaleY=”1.1″/>
<tweenOut tint=”0x000000″ />
</next_button>
<next_symbol>
<tweenOver tint=”0x000000″ />
</next_symbol>
</settings>
<slides>
<slide>
<url>images/slide_1.jpg</url>
</slide>
<!– changing transition beetween first & second slide –>
<transition num=”3″ slicing=”vertical” direction=”down”/>
<slide>
<url>images/slide_2.jpg</url>
</slide>
<!– changing transition beetween second & third slide –>
<transition num=”4″ direction=”right” shader=”flat” />
<slide>
<url>images/slide_3.jpg</url>
</slide>
<!– transitions properties defined in transitions template –>
<slide>
<url>images/slide_4.jpg</url>
</slide>
<transition num=”6″ slicing=”vertical” direction=”up” shader=”flat” delay=”0.05″ z_multiplier=”4″ />
<slide>
<url>images/slide_5.jpg</url>
</slide>
</slides>
</cu3er>
Ma non vi preoccupate non è difficile da capire, la parte che vi interessa maggiormente è il pezzo di codice che sta tra i tag <slides> </slides> precisamente:
<slide>
<url>images/slide_2.jpg</url>
</slide>
Dove a slide_2.jpg andrete a sostituire il nome della vostra imagine, e diventerà:
<slide>
<url>images/mia_grafica.jpg</url>
</slide>
Se volte far scorrere le slide in modo automatico dovrete aggiungere nei tra i tag setting il seguente pezzo di codice:
<auto_play>
<defaults symbol=”circular” time=”3″ />
<tweenIn x=”500″ y=”50″ width=”35″ height=”35″ tint=”0xFFFFFF” />
</auto_play>
Vi riporto a questa guida ufficiale per ulteriori personalizzazioni:
http://www.progressivered.com/cu3er/docs/
Articolo scritto da: Giuseppe Ferraro Fano