PageFlip v2 Dinamico

- Letture: 9.912

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 Julius. Una info. In page flip ho visto che hai inserito i pulsanti next prev e goto. Li trovo molto utili, me credo che il limite di flash in questo progetto siano la mancanza dei comandi “Print”, “Zoom”, “Save Image”(Nel caso di immagini)

  2. Ciao Dora,

    Più che limiti del progetto direi che sono proprio opzioni mancanti in questa versione.
    Come puoi vedere nella versione del PageFlip 3.26 i comandi per “Print”, “Zoom”, “Save Image” ci sono, ma essendo demo non ho la possibilità di verificare la loro funzione all’interno del pageflip.

  3. Sono sempre io. guardando qualche altro tuo tutorial ( galleria dinamica con miniature ) ho visto che dai un modo molto semplice per prendere l’immagine e fare il popup su un file php

    Stavo pensado di realizzare la stessa cosa anche per page flip, ma non ci riesco.

  4. Ottimo. Ma come mai non si vedono le immagini nelle pagine del flash ma solo nei popup?? non si caricano nemmeno usando onClipEvent.

  5. julius il tuo sito è veramente carino , semplice e particolarmente utile, complimenti.
    Ho scaricato pageFlip pupup, e non capisco perchè i popup funzionano ma le immagini sul “libro” non si vedono.

  6. @edo ciao se riscarichi il file PageFlip popup nel commento precedente troverai una pagina con lo script per effettuare il popup, spiegato gia attraverso un Tutorial sul blog
    Inoltre se ri-guardi il Tutorial del pageflip, alla fine dell’articolo, ho inserito la stessa pagina per effettuare un popup.
    un saluto

  7. Julius ho riscaricato il file, è ho anche visto la modifica la tutorial. Fino a qui tutto ok, ma credo di non essermi spiegato bene.
    Io non voglio che la gente veda una skermata nera con il pulsante popup al centro, ma veda l’immagine caricata e con il pulsante popup mi sarà possibile caricare l’immagine alle dimensioni naturali.

    Spero di essermi spiegato!! Sei un grande grazie!!

  8. @edo ovviamente quello è un esempio, sul pulsante e nella pagina ci sono gli script per aprire una popup, spetterà a te modificare il pulsante e metterci quello che vuoi ^_^

  9. lo script per il popup è semplice, alla fine è uguale ad un qualsiasi script di popup che si trova sul web, ma non riesco veramente a caricare l’immagine invece dello sfondo nero!!!

  10. julius non voglio caricare un immagine statica, quello lo so fare basta un load movie. quello che voglio e mettere come sfondo la stessa immagine che verra caricata con il popup. e non so come passare la path corretta a loadMovie.

    Non puoi per favore modificare il file in modo che faccia questo??

  11. a ecco forse ora ti ho capito, comunque io aspetterei domani, e userei un altro modo per realizzare un anteprima delle immagini con il PageFlip, ci sarà un bel Tutorial a riguardo…

    Comunque se poi anche domani sei ancora dell’idea di utilizzare popup (che tra l’altro alcuni browser bloccano) vediamo di risolvere…

    Se ho capito bene fai un loadMovie dell’immagine piccola che verrà usata come pulsante per aprire una popup con l’immagine grande esatto?

    Crea un clip di nome istanza box

    nel primo frame dello stage

    loadMovie("immagine.jpg",_root.box);

    selezioni il box, entri nel codice, è inserisci il codice per la popup

    In questo modo avrai un clip contenitore utilizzato come pulsante, in cui al suo interno ci sarà caricata l’immagine piccola

  12. messere75

    Ciao Julius
    il tuo esempio crea un book 600×400…
    è possibile diminuire le dimensioni?
    Grazie.

  13. Si non ci sono problemi, ricorda solo che lo stage deve essere più grande del pageflip, oppure non avrai zona sensibile per sfogliare completamente il book

  14. messere75

    Il problema è che non so dove intervenire..
    Esempio: se volessi creare un book 400×200 (quindi 200×200 per ogni pagina) quali sono gli oggetti da ridimensionare?

  15. Ti direi di ridimensionare sia le pagine dal file XML tramite widht e hright.

    Il book aperto sarà 400×200 quindi il tuo stage non ti consiglio di farlo di uguali dimensioni bensì più grandi…poi questo spetta a te deciderlo.

    Come ti ho detto prima, fare lo stage un pò più grande serve al fine di lasciare quella parte sensibile durante lo “sfogliamento” del book, altrimenti vedrai che la pagina si blocca…

  16. messere75

    funziona!
    e non avevo alcun dubbio del resto!
    gentilissimo come sempre Julius. Grazie mille

  17. messere75

    Buon giorno Julius.
    è possibile passare ad una delle pagine del book (una animazione swf) che contiene un testo dinamico, il percorso del file txt da cui prendere il contenuto?
    Grazie

  18. Be la tua pagina è un swf, quindi ti basta creare un swf che legga i dati da un file esterno e poi usarlo come pagina…

  19. messere75

    Il fatto è che vorrei utilizzare la stessa pagina più volte, tipo un album descrittivo in cui ad esempio, a sinistra c’è la descrizione, ed a destra la foto.
    Nel file xml che ho scaricato dal tuo sito (e che riporto di seguito) c’è una parte che fa pensare a questa possibilità:
    src="pages/page4.jpg"
    afterTear="someFunction,param1,'param2','param3'"
    preLoad="true"

    ma invece di una funzione come faccio a passargli una variabile?
    Grazie Jiulius

  20. Sinceramente non ho mai provato a inserie parametri in quel modo, anche se mi sembra specifico nel momento in cui una pagina viene “strappata” – “afterTear”.

    Comunque prova a fare delle pagine che prendono un file esterno di testo, come vedrai nel Tutorial ho inserito una pagina per farti capire…

    Qui puoi scaricare la pagina

    NB: inserisci correttamente il percorso del file di testo nel .fla che scaricherai.

    saluti

  21. messere75

    Grazie Jiulius ma volevo utilizzare la stessa pagina più volte nel mio book.
    Ogni volta passando la chiave del file txt.
    Ora ci ragiono un po’ su e se ne cavo qualcosa te lo faccio sapere, per condividerlo con gli altri flasher del blog.
    Ciao

  22. Si ma in teoria puoi usare la stessa pagina anche col mio metodo, ti basterà cambiare per ogni pagina solo il link al file esterno di testo….

  23. messere75

    Hai ragione…
    infatti io già utilizzavo questo metodo…
    il fatto è che se devo modificare una parte della pagina dovrei farlo in tutte le altre…

  24. Bello.
    Ma c’è anche il componente per flash?
    Vorrei sapere come devo fare per aumentare le dimensioni (altezza e la larghezza )delle pagine del pageflip

  25. Ciao Ma83,

    premetto che questo non è un componente, per ridimensionare il pageflip in altezza e larcghezza, trovi i paramentri nel file .XML

    saluti

  26. Bello davvero! Complimenti!
    Ho effettuato delle prove e modificando il testo nella prepage non mi appare più nulla, ne deduco che se sostituisco il testo in altre pagine ne viene fuori la stessa cosa, cioè nulla! :(

    Sapresti indirizzarmi sullaquestione?

    Grazie

  27. Nel sorgente prepage.fla cè del testo (THIS PAGE IS BEFORE THE REST) se faccio una qualsiasi modifica al sorgente, in questo caso ci scrivo ad esempio (mio sito) non appare nessun testo dopo la pubblicazione.

  28. o.O ma li ho scaricati i sorgenti, sia quello con video che senza altrimenti non avrei potuto modificare i .fla. :))

  29. carolina

    ciao! complimenti x questo bell’ effetto, ke andro’ subito a mettere nel mio sito…. :)

    pikkola domandina…. quale è il modo piu semplice per aggiungere delle pagine in piu?

    grazie

    ciao

    p.s.: Julius rispondimi prestoooo :)

  30. Ciao carolina,

    ti basta usare il file XML, come descritto nell’articolo, e inserire il percorso della pagina…

  31. carolina

    ovvero devo solo scrivere questo per ogni pagina da aggiungere?

    grazie mille

  32. Si ovviamente avrai un swf nella cartella pages di nome page7

    e nel file xml aggiungerai

    <page src='pages/page7.swf' canTear='false' />

  33. Ciao, io lo zoom l’ho realizzato nella versione 2 di pageflip, è strutturato in modo tale da rispettare i margini delle pagine (il testo all’interno è stato inserito come tracciato in modo tale da poter essere leggibile anche al 200% di zoom).

    Saluti

  34. Pingback: links for 2007-08-19 | giancarlo.dimassa.net

  35. Ciao a tutti,

    sto provando questo splendido effetto ma vorrei fare in modo che il “libro” restasse aperto all’ultima img.,
    in pratica non vorrei che si possa sfogliare fino a vedere la copertina posteriore.

    Ho provato mettendo canflip = false, nel xml relativo all’ultima foto, ma nn succede nulla…

    Qualche idea ?

    Ciao e grazie per la condivisione ….

  36. ciao ancora,
    oltre al problema di cui sopra, ne ho un altro … :(

    è possibile impostare(o ricavare) una variabile che mi indichi il numero di pagina attualmente visualizzata, in modo da usarla per associare un evento diverso per ogni immagine … ?

    se nn sono stato abb chiaro vi posto il fla…

    resto in attesa.grazie

Commenti