PageFlip e LightBox

Oggi vedremo come inserire l’effetto LightBox nel PageFlip versione dinamica, il famoso “giornale che si sfoglia“, come ormai l’hanno soprannominato tutti.

Nel blog ho gia parlato del PageFlip e dell’effetto LightBox ora vediamo come farli interagire insieme.

La pagina HTML richiamerà, come di consueto, i files lightbox.js e lightbox.css, che serviranno per l’effetto anteprima e per personalizzare i vari oggetti di preloading.

• Creiamo la pagina swf da inserire nel PageFlip:

Le dimensioni dello stage in questo caso sono impostate nel file XML a 300×400.

Importiamo le anteprime delle immagini, che andremo a visualizzare nella pagina del PageFlip, possiamo usare un editor di immagini come photoshop per realizzarle.

Dopo averle importate le posizioneremo sullo stage, e le convertiremo in pulsanti [tasto rapido F8], a questo punto dopo aver impostato i vari stati del pulsante, Su – Già – Sopra – Premuto, torniamo sullo stage e selezioniamo uno per volta i pulsanti.

Entriamo nel codice [tasto rapido F9] e inseriamo il seguente codice:

on (release) {
getURL("javascript:flashLightbox('alessandra.jpg');");
}

Come vedete vi è la funzione getURL che alla pressione del pulsante richiamerà il js presente nella pagina HTML aprendo l’immagine originale, in questo caso nella stessa directory troveremo alessandra.jpg.

Qualora vogliate creare delle sottocartelle, ad esempio img vi basterà cambiare percorso in questo modo:

on (release) {
getURL("javascript:flashLightbox('img/alessandra.jpg');");
}

Realizzata la pagina swf, ci basterà andare a impostarla come tale nel file XML come una normale pagina swf, in questo caso:

<page src="pages/lightbox.swf" mce_src="pages/lightbox.swf" canTear="false" />

Spero vi possa essere stato utile questo Tutorial 🙂

Scarica il sorgente
Guarda il Tutorial