PageFlip v2 Dinamico

- Letture: 9.810

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. please can you help me to have the flash file: but only the navigationbar with the goto – button..

    => I am also searching for a standard value into the inputbox: a 3 digit number.. so I can link to 001.jpg .. 002.jpg … … 312.jpg

    Thanks a lot

  2. Ciao Julius!
    complimenti per il sito e per la tua preparazione!!!
    ho 2 problemi:
    1) stò utilizzando il page fip dinamico per un catalogo che ha 500 pagine…quindi capirai che, come in molti ti hanno chiesto, mi sarebbe molto utile farle caricare man mano che si sfogliano. Saresti così gentile da inviare anche a me la mail per risolvere la questione?
    2) quando lo carico on line mi dice che “uno script contenuto in questo filmato sta rallentando l’esecuzione di Adobe flash player 10. Se lo script non viene interrotto il computer potrebbe cessare di rispondere ai comandi”. C’è un odo per risolvere questa cosa?

    un’altra cosa strana che accade :
    quando provo il file in locale mi compare la finestra di output dove mi dice che non trova tutte le pagine dalla 15 alla 500…anche se me le fa vedere lo stesso. Poi se lo stesso file lo metto on line mi fa vedere tutte le pagine ma mi dice il problema numero 2…
    Ti prego aiutami
    ho preparato tutti i file e a causa di queste 2 cosette non posso concludere!
    grazie mille

  3. cibernella

    @zippomaker se posso permettermi di risponderti, visto che passavo per caso ;-) ,devi intervenire sul file xml. Metti tante stringhe tipo quante sono le tue pagine. Nel tuo caso dovrebbero essere 5 se usi la prepage.
    Ciao.

  4. zippomaker

    @cibernella si grazie ho risolto proprio nel modo che dici… pensavo peggio :) Ciao

  5. Pierluigi

    Ciao Alida puoi dirmi cosa hai modificato nel file import_xml.as perchè ho il tuo stesso problema. Grazie

  6. Salve Ragazzi,

    Non vorrei essere ripetitivo, ma ho pubblicato 2 post e nessuno mi ha risposto.

    Ho pubblicato un catalogo su http://www.juniorgiocattoli.net nella sezione cataloghi Playmobil.

    Se visualizzo la pagina con Opera, Firefox o Google Chrome tutto OK.
    Se visualizzo la pagina con Explorer (7) mi fà vedere solo le prime pagine e il resto non funziona bene.

    Non è capitato a nessuno?

    Grazie Mille

  7. cibernella

    @Carlo non saprei bene come aiutarti ma ho notato una cosa strana e cioè che quando carica il pageflip arriva al numero di pag 5 su 5, in realtà ce ne sono molte di più. Sono queste prime 5 pagine che ti fa vedere?
    ciao

  8. Ciao Cibernella,

    e grazie della risposta.
    In pratica per le prime 5 pagine ho attivato il preload, credo che sia per questo che nel caricamento attente il 5 su 5.
    Se avessi attivato il preload su tutte le immagini (cosa che ho provato) prima di riuscire a vedere il catalogo ci sarebbe voluto troppo tempo a causa del caricamento di tutte le immagini.
    Il problema, quindi, si genera quando sfoglio una pagina di cui non ho fatto il preload (dalla 6 in poi).
    La cosa strana è che con Firefox, ma anche con altri browser, funziona correttamente.

    Spero che queste info ti possano essere utili per darmi un suggerimento.
    Cmq grazie Mille per l’interessamento.

    Carlo

  9. ciao a tutti,
    potete darmi una mano?
    vorrei disattivare l’impostazione scaleContent solo per determinate pagine
    e lasciarla attivata per le altre ,
    come posso fare?

    grazie

  10. Caro Julius,
    io non ho nessun problema col preload (le immagini sono poche e leggere) e tutto mi è molto chiaro….
    se non fosse per il fatto che……
    MI SI STRAPPANO LE PAGINE! :-O
    a me la cosa sembrava anche tanto carina, ma quello a cui sto facendo il sito dice che è inaccettabile :-O
    ho cercato di spiegargli che accade anche con i libri, se si tira troppo forte.
    ma lui non vuole sentire ragioni… :-O
    mi aiuti? perpiacere…

  11. hello is it possible to create the keys and mousescrollwheel into the flashfile.. i found some code but couldn’t integrate it. Please can you send me the code for it

    Thanks

  12. giovanni

    @ Inverse:inverse come hai risolto il problema di caricare diversi pageflip?cosa hai modificato nel file import_xml.as? non riesco a risolvere ti ringrazio se mi mi puoi dare la soluzione ciao

  13. giovanni

    Julius ”inverse” dice che ha risolto il problema relativo al caricamento di diversi pageflip con contenuti diversi modificando qualcosa in import_xml.as.Mi potresti dare una mano tu?ho un bisogno urgente non riesco a far richiamare i diversi swf dai diversi pulsanti in un swf contenitore(precedentem. ho anche cambiato di nome sia i file.xml che gli stessi swf). te ne sarei grato

  14. giovanni

    julius come posso fare per far caricare più diversi pageflip senza che al richiamo dei pulsanti mi carichi solo il 1 xml?

  15. @giovanni: ciao! devi impostare nel fla il nome diverso del file XML altrimenti richiamerà sempre lo stesso.

  16. giovanni

    @ Julius:
    julius l’ho fatto , ho rinominato anke gli swf.
    Ti spiego:

    sto sviluppando un sito ad un fotografo:devo caricvargli 4 foto album di 4 categorie diverse.Ognuna di queste cn foto diverse.

    Ho specificato e cambiato i nomi degli swf e degli xml,cambiato ad ogni fla il nome del xml da richiamare.

    Ma nel swf contenitore mi appare sempre il 1 pageflip che richiamo inizialmente…come devo fare? INVERSE UN UTENTE SU QUESTO FORUM MI DICEVA CHE AVEVA RISOLTO IL PROBLEMA CAMBIANDO QUALCOSA NEL FILE IMPORT_XML.AS MA COSA?

  17. ciao,
    prova ad aprire il file import_xml.as e modifica questa riga:

    // load the XML into the flooring object
    pageXML.load(_level0.xmlFile);

    mettici xmlFile1, xmlFile2 etc.. a seconda di quanti pagebook hai.. es:
    pageXML.load(_level0.xmlFile1);

    poi apri il file fla del pageflip e su questa riga metti il loadxml che deve richiamare:

    if(_level0.xmlFile==undefined) {
    _level0.xmlFile = “xml/pages.xml”;
    }

    es:

    if(_level0.xmlFile1==undefined) {
    _level0.xmlFile1 = “xml/pages.xml”;
    }

    prova e fammi sapere, mi pare che io abbia risolto così :D

  18. giovanni

    @ inverse:Ciao inverse.Grazie infinite per il tuo suggerimento davvero prezioso

    solo che ora riscontro il problema che i vari page flip in remoto si bloccano…sono 30 jpg più o meno da caricare… oltretutto nel momento in cui in locale carico un swf due volte la seconda volta non mi fa sfogliare più il libro….ho letto che franco risolse questa cosa con un visible=0 ma non capisco dove inserire la stringa”._visible=0”

    se mi potere dare qualche diritta—

  19. cristina

    ciao il tutorial è bellissimo peccato che io di flash e di programmazione ne capisca poco, io devo fare una cosa semplissima di 4 pagine con solo foto che si sfogliano ma non riesco a capire dove inserire le foto… nel codice non ce nè traccia… qualcuno mi aiuta…

    Ciao

  20. sara13 ha scritto:

    Caro Julius,
    io non ho nessun problema col preload (le immagini sono poche e leggere) e tutto mi è molto chiaro….
    se non fosse per il fatto che……
    MI SI STRAPPANO LE PAGINE! :-O
    a me la cosa sembrava anche tanto carina, ma quello a cui sto facendo il sito dice che è inaccettabile :-O
    ho cercato di spiegargli che accade anche con i libri, se si tira troppo forte.
    ma lui non vuole sentire ragioni… :-O
    mi aiuti? perpiacere…

    Nel file xml devi impostare canTear=”false” per non far strappare le immagini.

  21. Federico

    ciao a tutti, una domandina: vorrei poter impostare dei pulsanti all’interno delle pagine esterne (swf) per passare direttamente a una determinata pagina…ho provato a copiare e incollare il codice del pulsante “goto” preso dalla barra di navigazione di PageFlip, opportunamente modificando il nome istanza e settando un numero di pagina statico ma non funziona.
    pagina5Btn.onRelease = function() {
    _parent.gotoPage(Number(5));
    }
    Immagino sia perchè la funzione gotoPage() non trova nessun riferimento di codice nella pagina esterna vero? Come posso fare per fargli capire che la funzione sta scritta nel movie principale (PageFlip) e che è li che deve andarsela a “leggere”?
    grazie a tutti in anticipo e cercate di perdonare le mie potenti lacune di programmazione…
    ;-)

  22. Ciao julius, girando per la rete ho trovato il tuo articolo e ho deciso di usare questo pageFlip in un sito che sto realizzando, il problema è che in locale mi funziona ma in remoto mi si blocca su caricamento delle pagine… mica hai qualche risposta al mio problema? AVVISO: in remoto ho caricato tutti i file che utilizza il PageFlip e quindi non riesco a capire il motivo del non funzionamento…

    questo è il link: vai al sito

    Grazie anticipatamente

  23. Francè ha scritto:

    Ciao julius, girando per la rete ho trovato il tuo articolo e ho deciso di usare questo pageFlip in un sito che sto realizzando, il problema è che in locale mi funziona ma in remoto mi si blocca su caricamento delle pagine… mica hai qualche risposta al mio problema? AVVISO: in remoto ho caricato tutti i file che utilizza il PageFlip e quindi non riesco a capire il motivo del non funzionamento…

    questo è il link: vai al sito

    Grazie anticipatamente

    Ragazzi cortesemente qualcuno ha una soluzione al mio problema… sto da ieri cercando di risolvere ma non riesco…

  24. Salvatore

    Mi chiedevo se era possibile inserirlo “il libro che si sfoglia” all’interno di moodle per fare creare ai miei allievi il loro libro di matematica.
    Grazie, Salvatore

  25. ma se dovessi caricare due video: fatto!!!
    come devo fare per settare l’audio del secondo ?
    ho copiato il fla video e rinominato per creare il secondo video
    ma come faccio a far riconoscere quella specifica pagina per l’audio?
    please please please

  26. Ciao Julius volevo chiederti una cosa, ma se volessi implementare una funzione per fare lo “Zoom” (con un click ad esempio” sulle pagine, è molto difficile da realizzare?
    Graizie
    Ciao

  27. Ciao Julius..anzitutto complimenti per i tuoi lavori e tutorial..
    volevo chiederti, per chi non ha flash cs2 e cs3 ma soltanto flash mx non potrà mai visionare i tuoi file sorgente?
    Mi sarebbe tanto piaciuto poter realizzare quella slideshow che hai fatto, o questo pageflip dinamico, ma avendo flash mx non riesco ad aprire i fla.
    Potresti salvare il sorgente fla in flash mx?

    Grazie
    Ciao Sara

  28. Salvatore ha scritto:

    moodle

    Se ho capito bene è un CMS? Comunque essendo un oggetto Flash ti basta incollare nel codice HTML il codice di embed di un qualsiasi SWF.

    ilgorgo ha scritto:

    ma se dovessi caricare due video: fatto!!!
    come devo fare per settare l’audio del secondo ?
    ho copiato il fla video e rinominato per creare il secondo video
    ma come faccio a far riconoscere quella specifica pagina per l’audio?
    please please please

    Inserisci un file video con relativo player per configurare e impostare audio e stato.

    zippomaker ha scritto:

    Ciao Julius volevo chiederti una cosa, ma se volessi implementare una funzione per fare lo “Zoom” (con un click ad esempio” sulle pagine, è molto difficile da realizzare?
    Graizie
    Ciao

    Ti consiglio di usare versioni che hanno gia lo zoom implementato in quanto sarebbe lungo integrare una funzionalità non predisposta.

    ti segnalo questi Pageflip Tool Online

    sara ha scritto:

    Ciao Julius..anzitutto complimenti per i tuoi lavori e tutorial..
    volevo chiederti, per chi non ha flash cs2 e cs3 ma soltanto flash mx non potrà mai visionare i tuoi file sorgente?
    Mi sarebbe tanto piaciuto poter realizzare quella slideshow che hai fatto, o questo pageflip dinamico, ma avendo flash mx non riesco ad aprire i fla.
    Potresti salvare il sorgente fla in flash mx?
    Grazie
    Ciao Sara

    Purtroppo questi pageflip usufruiscono di classi per Flash AS2 superiore…

    ramlan ha scritto:

    salve julius, è possibile collegare il page flip in una pagina html?

    Il pageflip è un file swf, quindi basta integrare l’swf in una pagina html.

  29. grazie della risposta avevo già provato ad inserire semplicemente swf in dreamweaver ma nel momento della pubblicazione nn si visualizza il pageflip.che problema potrei avere?:)

  30. @ramlan: Controlla dia ver caricato tutti i file necessari per la visualizzazione del pageflip, pagine e calssi incluse..

    Se hai ancora problemi pubblicami il link che controllo..

  31. scusami nn sono molto pratica:)nel codice di programmazione devo inserire qualche script ?
    non posso mandarti il link poichè il progetto non è in rete

  32. ci sono riuscita mi mancava un file :) grazie mille julius utilissimo sito :)

  33. Ciao julius, posso chiederti come togliere la scritta “this page is before the rest”? grazie

  34. Ciao Julius,
    grazie per tutte le preziosissime informazione che condividi!
    Ho un piccolo problemino con l’audio del page Filp v2.
    Premetto che per la parte audio non ho toccato il codice, ma ho aggiunto circa 36 pagine, si vedono tutte e funzionano perfettamente, ma…. fino a pagina 10 si carica l’ audio dello sfogliamento quando clicco sulla pagina… dopo il silenzio più totale!
    Qualche consiglio?

    Ti ringrazio!
    Claudia

Commenti