Curiosando come al solito sul web, mi sono imbattuto nuovamente nell’ormai famosissimo PageFlip, trattato già sul mio Blog.

Ho scoperto per caso un forum dedicato interamente al PageFlip

Ho notato una bella implementazione per creare una sorta di zoom con il PageFlip:

PageFlip v2 Zoom

Analizziamolo insieme:

Lo zoom viene strutturato in modo tale da lasciare aree sensibili al fine di indirizzare lo zoom su quel determinato punto, ovviamente le aree sono un pò approssimative, ma il risultato è buono.

Ovviamente se volete avere uno zoom senza problemi di sgranatura di immagini o testo, vi consiglio di vettorializzare il tutto, per i testi potete provare anche a incorporare i caratteri anche se appesantirà parecchio.

Vettorializzare??

La grafica vettoriale, essendo definita attraverso equazioni matematiche, è indipendente dalla risoluzione, se viene ingrandita o viene visualizzata su un dispositivo dotato di una risoluzione maggiore di quella del monitor non perde di definizione.

Per vettorializzare un testo vi basta cliccare con il tasto destro del mouse e premere DIVIDI, la prima volta dividerete le singole lettere, la seconda volta di seguito l’intero testo.

Per le immagini invece oltre a vettorializzare, cercate di inserirle con una dimensione e qualità abbastanza alta per non avere problemi di sgranatura.

Scarica il sorgente
Guarda il Tutorial

Fonte [76design]

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

18 Commenti

  1. Ciao Julius avevo già visto in giro questo forum ma purtroppo di inglese non ci capisco una cifra.

    Che risoluzione consigli per queste immagini? Vorrei realizzare un book fotografico con questo libro, pensi che sia meglio usare 2 pagine per ogni foto? (le foto sono parecchie)

    Grazie ciao!!!

  2. Ciao gepi,

    Ti posso dire che la risoluzione dell’ultima pagina in cui c’è quella bella ragazza oltre essere stata “vettorializzata” ha dimensioni 908×1280 a 32 bit

    Come vedi nell’esempio io lo impostato al 100%, ma il contenuto essendo vettoriale non da fastidio.

    Per quanto riguarda le foto, ovviamente se ne hai a “prospettiva larga” (scusa ma non mi sovviene il termine professionale) userei benissimamente le due pagine.

    Ti ricordo che in questa versione puoi utilizzare un parametro nel file XML che si chiama isSpread per dividere un immagine jpg su 2 pagine automaticamente senza dover, con programmi di editing, tagliare l’immagine in due jpg separati.

    Cito dal mio articolo:

    Inoltre è possibile settare alcuni parametri come isSpread=”true” per dividere una pagina in 2

  3. ciao Julius, sto cercando di configurare questo pageflip ma non capisco due cose:
    1- come fare per implementare come ngli altri il drag della pagine, dato che qui funziona solo al click sull’angolino
    2- c’è una lista di comandi da potere usare? non la trovo?

    tnx

  4. In questa versione con zoom è stata disabilitatà la funzione di flip sulle pagine in quanto andava in conflitto con lo zoom..

    Per quanto riguarda le altre opzioni puoi inserirle confrontando un pageflip base

  5. mm io ho in efffetti il pf base ma vedo che gli xml sono nettamente differenti.. mi faresti un esempio?

  6. Tra l’altro Julius, non riesco a capire come ottene buoni swf.. mi spiego.. importo le jpg o provo ad esportare in swf da illustrator ma ottengo solo swf pensatissimi e dove i testi delle pagine sono sfuocatissimi.. sai darmi qualche dritta?

  7. Riccardo

    Ciao, complimenti per il blog.
    Scrivo perchè vorrei una informazione.
    Vorrei sapere se al pageflip con zoom è possibile aggiungere un indice.
    In pratica mi servirebbe un pulsante che mi apre l’indice e poi cliccando su un argomento di esso mi viene aperta la relativa pagina.
    Es. blablabla… pag 15—- clicco e mi apre la pagina 15.
    Grazie e ciao

  8. Alessandro

    Ciao Julius, ti ringrazio per questo post in cui ho trovato esattamente ciò che cercavo. Ora però volevo provare a espandere un pò il codice ma onestamente nn conosco bene actionscript e nn so bene dove mettere mano. Ho notato che se imposto hcover a true poi nn funziona il semplice corner quindi immagino che devo contemporaneamente prevedere dei pulsanti di gotopagex..
    Mi potresti per grandi linee indicare in quale parte di codice inserire queste modifiche e come strutturarle?
    Grazie a priori
    Alessandro

  9. Ciao Julius, perchè questo script se lo scarico così com’è e lo carico sul mio ftp per provarlo non funziona?
    Grazie

  10. Ciao Julius,

    Ho provato a utilizzare immagini jpeg per la creazione di un web book (con il componente da te censito a http://juliusdesign.wordpress.com/2007/07/26/pageflip-v2-zoom/), per alcune pagine (dalla 4 in poi) ho utilizzato immagini orizzontali con il parametro isSpread a true e il preload a false, ma mi carica solo la parte sinistra dell’immagine

    Poi ho tentato di dividere i file doppi in 2 immagini, ma carica sempre le pagine di sinistra, quelle di destra ci mette molto.

    E’ un problema del filmato o sbaglio io qualcosa???

    Grazie mIlle in anticipo

    L’esempio realizzato lo trovi all’indirizzo: http://www.juniorgiocattoli.net/CatalogoPlaymobil.aspx

  11. Ciao Julius… non riesco proprio a mettere un immagine con la risoluzione adatta…ho dei pdf..come potrei fare per vederli bene nello zoom!?

  12. Grande Julius,
    come è possibile che quando carico tramite loadmovie questo pageflip in un altro movieclip (usando poi il comando _lockroot) mi funziona in locale sul pc ma quando lo metto in rete no? è come se non trovasse il file…
    please help :)
    buona serata

  13. Ciao a tutti,

    Ho inserito il pageflip all’interno del mio sito http://www.juniorgiocattoli.net nella sezione cataloghi, ma quando lo vedo da explorer 7 e 8 mi carica solo le prime pagine (le altre sono bianche) mentre su firefox, chrome e opera sembra funzionare correttamente.

    Qualcuno sa indicarmi il problema? o come risolverlo?

    Grazie Mille a tutti.

  14. Dimenticavo di specificare che nella sezione cataloghi il page flip è inserito per playmobil.

    Grazie ancora

  15. Ciao Julius,

    Purtroppo non sono ancora riuscito a capire il problema del page flip come ti ho segnalato negli ultimi 2 post.
    Hai qualche suggerimento da darmi?

    Grazie Mille

  16. Alessandro

    Ciao Julius, complimenti per il lavoro svolto, complimenti davvero. Senti acrei un problema con PageFlipV2zoom cioè quando mi trovo sul flash la rotellina del mouse non mi permette di fare su e giù con il browser. Cosa devo andare a modificare dello script? Grazie, Ale.

  17. salve,
    ho pubblicato la page flip associandola ad una pagina principale che la richiama dentro se stessa con il comando pageflip.loadMovie(“pageflip_ok.swf”); come mai si perde la funzione zoom?

  18. Sabrina

    Ciao Julius, complimenti per il blog! il page flip funziona alla perfezione ho solo un problema: il mio cliente vorrebbe che le immagini iniziassero da sx quindi senza una copertina (diciamo così, già con due pag sx e dx appena lo carica) ho cercato di guardare il file di flash ma non ci capisco nulla… mi potresti aiutare?? grazie

Commenti