Creare delle slide originali con effetto 3D

24 nov 2009 0 Commenti

by Davide Calignanoin Risorse, Tutorials Tags: 3d, flash, slideshow

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.

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=”0×000000″ />

</prev_button>

<prev_symbol>

<tweenOver tint=”0×000000″ />

</prev_symbol>

<next_button>

<defaults round_corners=”5,5,5,5″/>

<tweenOver tint=”0xFFFFFF”  scaleX=”1.1″ scaleY=”1.1″/>

<tweenOut tint=”0×000000″ />

</next_button>

<next_symbol>

<tweenOver tint=”0×000000″ />

</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

Post che ti potrebbero interessare

Creare un effetto di distorsione dinamica
Una Gallery in Drag & Drop
Creare un sorprendente annuncio infuocato in Photoshop

Previous I Migliori Tutorial Photoshop del 2009 Next Script spia per monitorare l’utente!