PageFlip v2 Dinamico

- Letture: 9.881

Da un po’ di tempo mi ero dedicato alla prima versione di PageFlip, ovvero quella non dinamica, il “Libro che si sfoglia” come tutti ormai lo hanno battezzato.

Girovagando per il web ho trovato un’altra versione, Opensource, che si interfaccia con un file XML, rendendo il PageFlip assolutamente dinamico e agevole.


Esaminiamo il file XML

<page src='pages/page1.jpg' canTear='false' />
<page src='pages/page2.jpg' canTear='false' />
<page src='pages/page3.jpg' canTear='false' />
<page src='pages/page4.jpg' canTear='false' />

Come vedete il codice è molto semplice nel tag content troviamo altezza e larghezza delle pagine la trasparenza e la possibilità di rendere la copertina rigida o flessibile (hcover) come tutte le altre pagine.

Le pagine esterne possono essere .jpg oppure .swf, per quanto riguarda le jpg non ce niente da dire, basta creare un immagine di dimensioni della pagina è verra caricata, tramite Xml, come una delle nostre pagine.

Per quanto riguarada invece le pagine esterne .swf, ricordo che vi è una ampia scelta di utilizzo, infatti possiamo inserire audio, video e animazionidi qualsiasi tipo.

Inoltre è possibile settare alcuni parametri come isSpread=”true” per dividere una pagina in 2 e preLoad=”true” per effettuare, come dice il termine, un preloading della pagina esterna.

Andando avanti… nel tag page troviamo ovviamente src ossia la directory della nostra pagina esterna ( .jpg o .swf), e poi un tag canTear ovvero la possibilità di poter strappare la pagina, si avete capito bene strappare in tutti i sensi la pagina!!

Non chiedetemi l’utilità, ma essendo un opzione del PageFlip v2, perchè tenerla all oscuro?? :D

Ho notato che ora è disponibile, in versione demo, il Pageflip v 3.26 in cui sono stati realizzati opzioni nuove, come lo zoom delle pagine, la stampa, il controllo del suono e la visualizzazione delle varie pagine a tutto schermo.

) Scarica i File source esempio con video
) Scarica i File source esempio senza video
) Guarda il Tutorial

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

243 Commenti

  1. Ciao,

    avrei una domanda. Sto utilizzando pageflip e mi trovo bene, nonostante le scarse conoscenze di flash.

    Ho un problema, io carico le pagine in formato swf. Fin qui tutto bene. Queste pagine hanno dei bottoni che lanciano delle azioni. Il problema è che il bottone si vede anche sulla pagina precedente…….in pratica a pagina 6 c’è un bottone, io lo vedo anche da pagina 5.

    Non sono se sono stato chiaro, come posso fare?sono nelle vostre mani

    Grazie

  2. Mi correggo, il pulsante è solo su una pagina,ma l’azione (collegata al pulsante) si ripete anche sulla pagina precedente…..nello stesso punto in cui è localizzato il pulsante…

    AIUTO

  3. btn.enabled = (_root.getPN(2)==_root.page);

    btn nome istanza del pulsante

    in poche parole il pulsante verrà attivato quando la pagina 2 e top quindi aperta…

    se si ha più pulsanti

    btn0.enabled = btn1.enabled = btn2.enabled = btn3.enabled = (_root.getPN(2)==_root.page);

  4. Ciao Julius,

    ti ringrazio per la risposta. Scusa ma non sono molto esperto di Flash.

    Oggi ci provo e spero funzioni perchè altrimenti perso tutttp il lavoro fatto finora.

    Una domanda, forse stupida, ma dove lo metto questo codice? nell’azione del pulsante? devo fare cosi per ogni pagina?

    Grazie ancora per l’aiuto

  5. Ciao, e complimenti per il blog, bello ed interessante.
    Avrei una domanda su questo componente:

    ho impostato tutto il modulo con le mie foto e qualche pulsante per lo skip, ma arrivato all’ultima pagina, ho ancora la possibilità di ‘sfogliarne’ un’ultima, però è una pagina trasparente che io nn ho inserito e con nessuna utilità.

    Come faccio a rimuoverla ? Oppure come posso fare a fermare la possibilità di poter sfogliare ancora, un avolta giunto alla mia ultima immagine ?

    grazie 1000

  6. … continuo:

    ho provato seguendo un esempio precedente :

    btn.enabled = (_root.getPN(2)==_root.page);

    inserendo canflip = false;

    funziona ma a quel punto non posso più sfogliare per tornare indietro

    :)

  7. Ciao franco in teoria l’ultima pagina dovrebbe finire alla tua sinistra

    se non è cosi controlla bene le ultime pagine, forse hai inserito una pagina in più

    fammi sapere

    ciao

  8. Ciao Julius,

    scusa se rompo, ma proprio non funziona.

    Ho provato ma rimane tutto come prima. Il pulsante (anche se non si vede) è cliccabile anche dalla pagina precedente (praticamente dalla pagina 1 io posso cliccare il pulsante sulla pagine 3……dalla pagina 3 aziono il pulsante della pagina 5………)

    Non so, forse non sono molto chiaro.

    Grazie comunque

  9. grazie per la risposta julius,

    io ho rimpiazzato tutte le pagine esistenti con degli swf contenenti altrettante img, però come numero è uguale all’originale …

    Una possibilità sarebbe quella di poter disattivare il flip dell’ultima pagina di dx verso sx, in modo che il libro resti aperto, ma come ho detto nel post precedente, riesco a bloccare il flip in entrambi i sensi con _root.getPN().

    C’è un modo per richiamare solo una delle 2 pagine attive ?

    grazie ancora

  10. @blaze appena riesco ti faccio un esempio scaricabile…ciao

    @Franco ciao,

    Ti dirò, con questa versione non so se è fattibile, forse si mettendosi a studiare il codice e inventando qualcosa

  11. Ti ringrazio veramente. Sto impazzendo, ho cercato in rete ma non sono riuscito a trovare nulla.

    Spero di non dover buttare tutto il lavoro fatto finora.

    Grazie ancora per l’aiuto.

  12. Ciao Julius,
    ne approfitto della tua gentilezza per chiederti come si fa una cosa che non so fare.
    Io ho una libro di 100 pagine e quindi con il preload iniziale il caricamento è troppo lungo.
    Come faccio per farsì che all’inizio si carichino solo le prime 2-3 pagine e poi si carichino quelle successive man mano che il visitatore le sfoglia?

    Grazie per quello che fai.

  13. ciao Julius, ho risolto mettendo un controllo hittest quando è visibile l’ultima pagina ed associando canflip su false;

    sembrava tutto ok, ma ho ancora un ultimo (spero) problema:

    volevo far caricare diversi swf contenenti il pageflip, all’interno di un swf contenitore;
    li carico tramite altrettanti pulsanti, tutti nello stesso livello (in modo da non dover impostare unloadmovienum).
    FInchè vengono caricati per la prima volta (, va tutto ok,
    ma se riclicco su un pulsante che richiama un swf già richiamato (caricato),
    non riesco + a sfogliare tramite click o drag del mouse: quando mi avvicino col mouse l’angolo si piega correttamente ma al click, torno in posizione iniziale senza sfogliare … :(

    Se ci hai capito qlcosa, a che può essere dovuto il prblema ?

    Ho provato anche impostando unloadmovienum, variando anche i livelli, caricarlo dentro un mc, ma senza risultato.

    grazie cmq

  14. ok, ho risolto caricando i filmati solo nel primo frame ed al momenti di richiamarli dai pulsanti ho impostato visible true o false.

    ma nn era l’ultimo problema.

    Come dicevo prima io vorrei caricare diversi pageflip all’interno di un unico swf contenitore, ma non riesco in quanto tutto il filmato sembra considerare solo il prima file xml,ed anche duplicando tutti i files e cambiando i relativi nomi, nn rieco a farlo funzionare.
    C’è un modo per caricare diversi pageflip esterni ? cosa dovrei modificare ?

    grazie e resto in attesa anche di una risposta negativa.

  15. Ciao Franco,

    una domanda, ma hai risolto il problema del pageflip che non funziona se richiamato una seconda volta?

    Mi potresti spiegare come hai fatto? Purtroppo non sono un esperto, sto impazzendo ma non riesco proprio a capire come fare.

    Grazie mille

  16. Blaze, ho fatto così:

    carico una volta solamente i vari swf in livelli separati che imposto subito su _visible=0 (nascosti),
    sul pulsante per richiamarli rendo solamente quel livello visibile (1), e gli altri nascosti (0)

    Ciao

  17. Ciao Franco,

    ti ringrazio per l’aiuto. Purtroppo sono un po ignorante in materia.

    Io ho caricato le pagine (swf) direttamente nel file xml, senza toccare i livelli del file (pageflip). Cosa dovrei modificare esattamente?

    Grazie mille ancora!!!!

  18. Bello script davvero!
    Complimenti…
    apprezzato e utilizzato.
    Inoltre essendo appoggiato a un xml è semplicissimo da rendere dinamico.

    Piccola pecca: a volte non ha un perfetto gioco di ombre… ad esempio quando le pagine sono in spread.

  19. ciao Julius….
    bhe direi che guardando il tuo sito sei davvero un genietto!!e pensare che hai un anno in più di me!!!ti invidio per qllo che sai fare!
    COMPLIMENTONI DAVVERO!
    nn ti hanno ancora chiamato…non so…dalla NASA magari….
    …hihihi….
    cmq….passiamo al tuo miglior passatempo…
    vorrei personalizzare il page flip…ho provato sia con zoom sia qllo senza video…
    nulla..nn riesco a capire bene dove sta l’intrigo….
    devo avere un file con queste dimensioni 949 x 540 e le immagini quindi devono essere (singole) 475 x 540…..aiutino???se vuoi contattami anche via mail!no problem!

  20. VOLEVO FARE LA STESSA DOMANDA CHE HA FATTO FRANZCiao Julius,
    ne approfitto della tua gentilezza per chiederti come si fa una cosa che non so fare.
    Io ho una libro di 100 pagine e quindi con il preload iniziale il caricamento è troppo lungo.
    Come faccio per farsì che all’inizio si carichino solo le prime 2-3 pagine e poi si carichino quelle successive man mano che il visitatore le sfoglia?

    CIAO

  21. @Manu dal file XML imposti la larghezza e altezza

    @Gae In questa versione non è stato ancora introdotto, infatti è uno degli svantaggi.
    Per mia esperienza ti consiglio quest’altra versione, a pagamento (che comunque si trova in giro) ma che ti da una gestione ottimale del preloader e di tutto il resto: FlippingBook

  22. Ciao, mi succede una cosa strana, quando carico il movie contenente il pageflip tramite un pulsante da una schermata di menu con loadmovienum sul livello 1 per mantenere la compatibilità con il fullscreen su mac, la prima volta che lo carico riesco a sfogliare il “libro” agendo sia sui pulsanti freccia sia con il mouse direttamente sulle pagine. Tramite un pulsante con loadmovienum, sul livello 1 esco dal “libro” per ritornare al menu dal quale faccio partire una seconda volta il movie del pageflip e la seconda volta che rientro mi è possibile sfogliarlo solo con i pulsanti, non funziona più il mouse direttamente sulle pagine. Ci ha lo stesso problema? Help please! Ciao e GRAZIE

  23. francesca

    Ciao Julius,
    anche se hai risposto a Carolina sulla stessa domanda volevo chiederti come faccio ad aggiungere pagine al libro? Ho seguito il tuo suggerimento ma il risultato è che la page7.jpg diventa traspasparente, e non mi visualizza le altre sucessive. Come mai? Devo cambiare anche qualche parametro nelle action del movie?

  24. @Francesca ciao si esattamente come ho detto a carolina, entri nel file XML e aggiungi il percorso della tua pagina swf o jpg

    <page src='pages/page1.jpg' canTear='false' />

  25. francesca

    Si julius, ho fatto come mi hai detto e le pagine effettivamente vengono aggiunte. L’unico problema è che l’ultima pagina che dovrebbe essere la copertina che chiude il libro diventa trasparente. COme mai?

  26. francesca

    allora quando arriva all’ultima pagina io la copertina che chiude la vedo…. poi se clikko per chiudere il libro il retro della copertina diventa trasparente. Il risultato è che vedo il libro chiuso ma con l’immagine caricata prima della copertina (la penultima per intenderci)

  27. francesca

    scusami se ti stresso ma davvero non riesco a trovare la soluzione. C’è la possibilità che tu possa vedermelo?

  28. francesca

    Ciao julius,
    hai ricevuto la mia mail? non ho avuto più tue notizie riguardo al mio problema con l’ultima pagina del libro.

  29. Ciao,

    mi ero dimenticato :P

    Ho guardato ora la mail, allora non c’è nessun errore.

    Se vuoi che la copertina venga vista solo alla fine quando viene girata l’ultima foto, le foto devono essere pari non 15 ma 16.

    Invece se vuoi che affianco alla 15esima foto ci sia una delle due facce della copertina aggiungi un foglio nel file XML prima di inserire fine.jpg ( esempio: inserisci due volte fine.jpg e vedrai cosa intendo)

    saluti

  30. Carla Ravelli Rossi

    Ciao Julius, SPETTACOLARE!
    una domanda se puoi aiutarmi, se metto una pagina con delle news caricate da un file esterno (txt con loadvariables) la pagina mi appare, ma non appare il contenuto caricato, credo per un problema di percorsi… quale è il percorso normale in cui caricare le variabili dal file di testo?

  31. Ciao Carla,

    tu inserisci una news da dati esterni in una pagina swf, poi quando la inserisci nel pageflip non vengono presi in considerazione i percorsi esatto?

    Verifica che il percorso del file esterno sia corretto…

    Se vuoi inviami la singola pagine SWF con il relativo file esterno di testo che lo testo di persona…

    ciao

  32. Veronika

    ciao jiulius, sto cercando di fare un catalogo PageFlip di 90 pagine circa…quindi mi servirebbe un preload che carichi ogni immagine di volta in volta che si “sfogliano” le pagine! Poi vorrei mettere lo zoom perchè lo scritto nelle varie pg è troppo piccolo!Sono partita dal sorgente che metti a disposizione tu…ho modificato la grandezza delle pagine, il file xml per inserire le pagine …ma queste altre cose proprio non riesco a farle!
    Potresti aiutarmi?
    Ti ringrazio anticipatamente e ti faccio i complimenti per i contenuti di questo sito oltre che per la tua disponibilità non comune in questo settore!
    Veronica

  33. Alessandro

    ciao Julius
    quando si carica l’swf nella pagina “X” è possibile passargli una variabile attraverso xml?

  34. Si è possibile, devi inserire il parametro dentro il file XML e richimarlo nella pagina swf desiderata…

    Ma visto che la variabile viene usata solo per una pagina ti consiglio di non intervenire sull’XML generico ma di creare un altro file XML o di altri formati…

    saluti

  35. Alessandro

    no e che praticamente io volevo richiamare lo stesso swf più volte ma ke inizi da diversi frame. quindi
    kome li mando la variabile con xml? come si scrive il codice?

  36. Ciao Julius, a proposito della versione “2 Dinamica” io dovrei inserire l’immagine delle pagine destra e sinistra in formato .gif come facevo nella versione non dinamica… però vedo che non è possibile…. come mai? dipende dall’uso di xml (ke è la prima volta ke uso) o c’è qualke codice o altro formato che permette la strasparenza a parte .sfw? Cioè se faccio ogni pagina in formato .swf non si appesantisce troppo il libro rendendolo lento in lettura da parte degli utenti?

    Ti kiedo questo perkè ho connessione fastweb… core 2duo… 2GB di ram.. scheda grafica dedicata e non riesco ad avere una visone obbiettiva della fluidità su sistemi con prestazioni inferiori!

    Ciao e grazie!

    PS. Online c’è ancora la prova con la versione non dinamica

  37. Ciao……sto cercando di linkare le immagini del “Page Flip dinamico”,
    per aprire una pagina html con l’ immagine ingrandita…
    …..come fare????????
    certa di una tua gentile risposta ti saluto……..
    Monica

  38. Complimenti Julius per questo mitico libro!!!

    Ma perchè non c’è il suono quando sfoglio le pagine??? Non potevano lasciarlo com’era?!?!?! Qualcuno può dirmi come fare!?!?!?!

  39. Krashnet ciao,

    secondo me se realizzi tutte le pagine in swf non c’è problema, per le immagini utilizza le png, avrai la trasparenza è un ottima qualità sempre non esagerando.

    Monica ciao,

    se le immagini le inserisci dal file xml direttamente JPG, non ci puoi fare niente.
    Invece se crei delle pagine swf e all’interno ci sono le immagini, puoi inseirre un pulsante trasparente sopra con il collegamento alla pagina html

    Mara ciao,

    in questa versione mi sa che l’hanno tolta…

  40. Julius grazie della risposta… ma nn sai dirmi come si può fare per ripristinare il suono? Ti supplico di aiutarmi…..

  41. Ciao Julius e grazie per il prezioso consiglio….
    Ti pongo un’altro paio di skleri….

    Ho settato le dimensioni delle pagine .SWF a 340x440px —> l’immagine reale di ogni pagina è di 300x440px —> quindi ho un po di spazio vuoto su 3 lati per poter giocare con l’effetto di foto ke sbordano dai bordi del libro.

    PROBLEMA 1]
    Dato che sfogliando le pagine, quelle precedenti si nascondono automaticamente, rendendo invisibili anche gli angolini in eccedenza delle foto ke invece vorrei lasciare visibili per tutto il tempo —> sto cercando un modo per ovviare a questo sklero.
    Ho provato ad attaccare gli angolini nelle pagine successive a quella con la foto —> ma quando sfoglio il libro mi fa vedere gli angolini anche durante il FLIP, invece dovrebbe materializzarso solo a pagina completamente aperta!

    Come faccio?!?!?!
    Esiste una strada migliore da prendere? uno scriptino?

    OK non voglio abusare della tua pazienza, il prossimo sklero lo posto + avanti! :-)
    Ciao e grazie ancora!

  42. @Mara ora controllo…

    @ Krashnet gli angolini in eccedenza li vedrai sempre in quanto sono riferiti alla pagina, quindi vedrei sempre l’effetto di una velina sotto le foto…

  43. grazie Julius dell’interessamento…. non è che mi sapresti dire o meglio passare qualcosa che fa si che le pagine vengano caricate solo quando sono viusalizzate… siccome devo provare a fare un catalogo con più di 50 pagine e alcune hanno al suo interno delle animazioni se lascio così com’è (cioè le pagine vengono caricate tutte in un botto) ci vuole nà vita per scaricare il tutto….

    spero di essermi spiegata…spero…

Commenti