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.

PageFlip e LightBox

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

Annunci

10 thoughts on “PageFlip e LightBox

  1. PERFETTO!metti da parte…
    p.s-A volte mi stupisci..e non mi riferisco ai tuoi lavori…per quanto sei bravo a quelli pian piano mi ci sto abituando…ma mi riferisco allo stupore di come ancora tu non abbia capito alcune cose di noi…appena ti becco in messenger devo rifarti un’ulteriore romanzina…ogni tanto ne hai bisogno tu…

  2. Ciao Julius. Volevo chiederti una info posso con page flip caricare dei pdf invece che delle immagini o dei swf??? Se si Come posso fare???

  3. ciao Julius volevo farti i miei complimenti per il blog!
    e chiederti se era possibile ingrandire le pagine di PageFlip e come si fa io ci ho provato ma niente da fare potresti aiutarmi
    ciao grazie Daniela

  4. Quando vuoi ridimensionare le pagine di un PageFlip dinamico v2 devi cabiare le dimensioni all’interno del file XML pages.xml e di conseguenza adattare le pagine .swf

    saluti

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...