Fw

Wordpress Creative Developer

CU3ER: Fantastico SlideShow 3D Di Foto In Flash

  • Flash
  • -

In questo blog mi capita spesso e volentieri di segnalare gallerie di foto e slideshow in javascript, dato che ormai con questo framework si può fare veramente di tutto. Però probabilmente per gli utenti che si trovano alle prime armi con il codice non è sempre facile utilizzarle al meglio.

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.

slideshowflash3d

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=”0x333333″);
  • 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!

7 Commenti

  1. […] Pubblicato da fedeweb Non ci sono commenti 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. […]

  2. […] CU3ER: Fantastico SlideShow 3D Di Foto In Flash (prima parte | seconda parte); – Tutorial Jquery: Creare fantastici slideshow in 5 minuti; – Supersized – […]

  3. Chiededo se era possibile fare un tutorial in Italiano do come inseire Cu3er in wordpress, perchè in giro c’e’ ne sono pochi e poco chiari.
    Grazie

  4. Ciao Daniel e benvenuto nel blog 😉
    Ok vedrò cosa posso fare..hai dato un’occhiata a questo?

  5. Ho visto, ma è in inglese.Sono riuscito forse ad installarlo ma compare solo il logo cu3er e non girano le immagini.
    Grazie

  6. Ma sei riuscito a seguire la guida?

  7. ciao! scusa, ma come faccio a dargli un effetto dissolvenza normale?? ho provato a dare un’occhiata alla documentazione originale, ho messo il type=”2D” ma non funziona… ciao e grazie!!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *