PageFlip e LightBox

- Letture: 3.442

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" canTear="false" />

Spero vi possa essere stato utile questo Tutorial :)

Scarica il sorgente
Guarda il Tutorial

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Managing Partner di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

24 Commenti

  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

  5. Michelangelo

    Ciao Julius,

    è possibile creare un catalogo con descrizioni del prodotto, scheda tecnica e foto?

    Grazie
    Michelangelo

  6. Ciao michelangelo più che darti delle dritte non posso fare molto…

    Se ti crei dei file XML di sicuro ti servirà interagire con flash quindi leggi la guida Flash & XML

    Inizia a fare qualcosa di semplice e piano piano crei il resto…

  7. ciao Julius,
    ho caricato questo lavoro come SWF esterno ma ovviamente non essendoci più la pagina HTML la funzione che richiama il JPG non funziona più. .. :-/

  8. Ciao Julius, per far aprire gli swf tu avevi messo un link che ora non è più valido, mi sai dire come si possono caricare degli swf invece che delle immagini o sei hai un altro link dal quale scaricarlo? Grazie mille

  9. certo…è un messaggio che hai scritto tu, te lo riporto
    “Julius

    9 Giugno 2007 alle 18:58 pm

    CIoa gepi, pdf puoi aprirli, certi browser te lo fanno scaricare e altri te lo visualizzano nel browser

    Per gli swf invece guarda qui
    :) Lightbox visualizza flash

    ciao”
    Grazie mille

  10. E si il dominio è scaduto

    diciamo che caricare direttamente pdf non puoi..o meglio si puo ma a pagamentro con dei tools

    per farlo in casa

    dovresti trasformare i pdf in jpg e utilizzare quelli

  11. ZerOCooL

    Ciao!
    Ti ringrazio in anticipo!

    In merito a quei page flip a pagamento di cui parli per caricare direttamente pdf
    me ne indichi uno… sto impazzendo a cercarlo!!!

    Grazie ancora!
    ZC

  12. Ciao Julius …
    complimenti veramente per il sito … geniale!
    Volevo chiederti se è possibile decompilare in qualche modo un file con estensione .mxp?
    Grazie Nicola.

  13. ciao julius
    e da diversi giorni che cerco di evitare il preload di tutte le pagine all’inizio…ma ancora nn ne sono venuto a capo…avresti qualche consiglio…
    grazie mille

  14. Ciao Julius, complimenti per il sito e gli articoli che pubblichi, volevo chiederti se è possibile inserire dei pulsanti in modo tale da saltare da una determinata pagina ad un’altra

  15. Ciao Julius,sto’ cercando di personalizzare il page flip mettendo alcune pagine con swf dinamici.
    Ovvero ad esempio una gallery xml.
    Trovo pero’ che non riesce mai a caricarmi i contenuti.
    Hai idea del perche’?
    grazie

Commenti