Livre avec des pages
Par -Alexandre LEGOUT aka LAlex- le mardi, juin 13 2006, 13:37 - Divers - Lien permanent
... oui bon, les livres sans pages ca existe pas, mais je trouvais pas de titre! ![]()
Il m'a été demandé recemment d'améliorer un livre dont les pages se tournent. Le script utilisé jusqu'à maintenant était celui dont j'ai déjà parlé sur ce blog, le fameux pageFlip. Il est vrai que le mouvement des pages est admirable de souplesse, mais il posait quelques problèmes que j'avais à résoudre:
- Déjà, divers bugs
- Il fallait pouvoir appliquer un effet (Flash
au livre
- Le livre devait se centrer automatiquement lors de la première ou de la dernière page
- Il fallait donner la possibilité d'inclure un zoom sur les pages
- Il fallait pouvoir charger un SWF externe à l'animation
- Il fallait pouvoir lancer un diaporama (déjà possible avec pageFlip, mais plus galère)
Si, comme je l'ai dis, le mouvement de pageFlip est admirable, il faut bien avouer qu'il n'en est pas de même pour la lisibilité du code! :\ Autant le dire, rajouter ce type de fonctionnalité au code existant, c'était mission impossible. J'ai donc recodé le moteur de A à Z, replongeant pour l'occasion dans les calculs de vecteurs, intersections de droites, et autres considérations du programme de maths de 1ere... Le calcul des matrices pour les dégradés des ombres (dont je ne m'étais jamais servis) m'a aussi pas mal accaparé. Sans compter le fait de redessiner systématiquement les contours du livre pour pouvoir appliquer des effets, étant impossible de le faire sur un composant....
Une autre problèméatique était aussi de rendre le composant "accessible", étant donné que c'est un graphiste pas codeur pour un sou qui devra s'en servir.
Bref, voilà mon resultat (sans preloading, pour moins de 700Ko):
Les images sont d'un dessinateur Chilien que j'ai découvert sur deviantart: pyromaniac
Le site auquel est destiné ce livre sera bientôt en ligne, je ferais une mise à jour à ce moment là ![]()
Commentaires
Il manque le petit effet easeOut quand tu relache les pages.
J'ai bossé moi aussi récemment sur un projet analogue, avec plein d'options à rajouter. Ca c'est plutot pas mal passé avec le pageFlip existant. Je n'y ai pas trop trop touché, j'ai plutot rajouter des options loupe, diaporama etc. Le résultat n'est pas encore en ligne, je reviendrai le poster.
Pas mal du tout ! Y a une espèe de bug quand on tire la page vers l'exterieur.
Sinon, il me semble que pageFlip permettait aussi d'arracher les pages, je trouvais ça rigolo.
ouais mais la ya pas trop d'interet a l'arrachage.
Je me permet des critiques.
Quand l'on tourne en utilisant les boutons c'est un peut trop droit pour faire naturelle, il faudrait faire partir le mouvement du coin inférieurs.
De même quand on utilise les boutons, il serait mieux je pense que le recentrage du bouquin ne ce fasse pas pendant la rottion de la page, mais avant ou après.
Quand on zoom on a envie de passer d'une image a l'autre avec , mais on est coincé.
Je trouve la zoon de zoom trop petite également, du coup ça ne permet pas (à mon goût) de profité de la photo.
Si on clique deux fois de suite sur le zoom le cadre noir disparait.
Lorsque l'on voit la 3 eme de couverture, et qu'on la tourne, l'ombre dessous est etrange,
je pense que c'est parcequ'elle est enfermée dans un rectangle aux bord net, un effet de dégradé, avec un filtre flou sur le clip, rendrais mieux je pense.
Sinon il manque une ombre
l'ombre qu'il y a sur la face qui apparait lorsque l'on tourne une page, a la pliure, ça donnerais plus de volume.
voila ^^
Le final est plutôt pas mal, ca mériterais de devenir un composant pour blog comme le player de neolao ^^
Bravo a pyromaniac ^^
@grand-mister > En effet, je n'ai pas implémenté les features non-necessaires à mon client: arrachage de page et couverture rigide...
@klee> Merci de ces remarques...
Quand on tourne avec les boutons, en effet c'est droit. Dur de faire différemment, d'ailleurs pageFlip faisait la même chose...
L'ombre également reprend le comportement de pageFlip, je n'ai pas pris la peine de l'etoffer. Ca viendra peut-être?
Il faut savoir que vous voyez ici les paramètres par défaut. Plein d'options sont disponibles dans le composant:
- taille de la zone réactive: la taille des carrés faisant réagir les coins, également celle de la "bande" de chaque coté du livre a partir de laquelle on peut faire un drag&drop sur la page
- vitesse: nombre de frames utilisé pour le tween (Penner-like, mais maison grace à l'utilitaire de Timothe Groleau)
- attenuation des ombres: un pourcentage permettant d'avoir des ombres (sur et sous la page) plus ou moins accentuées
- clip d'effet: nom d'un clip sur la scene, au même niveau que le livre, et dont les filtres seront appliqués au livre. Pratique pour un graphiste qui veut appliquer un ensemble de filtres à un composant (on ne peut pas appliquer de filtres directement sur un composant). Ce clip est rendu invisible au lancement du livre.
- taille de la loupe: taille du côté du carré représentant la loupe
- zoom: Coefficient multiplicateur de la loupe
- clip d'effet de la loupe: Même principe que le clip d'effet du bouquin, mais pour le carré de la loupe
De prochaines versions pourraient directement intégrer un paramètre pour la liste des pages (plutôt que de multiplier les 'addPage').
Mais pour un v2, pourquoi pas? 
Pour le rendre utile sur un blog, c'est malheureusement impossible pour l'instant: je l'ai développé sur mesure pour un client, j'imagine mal sa réaction s'il le voit rendu disponible gratuitement...
++ ^^
@klee>Alors là, tu peux toujours t'amuser: c'est un authentique galère à faire (pas impossible certes)!
ouaip je m'en doute mais j'ai une idée ^^
tu fait une copie(bitmapData) du clip livre entier, et tu balade t'on zoom dans ce clip.
et pour faire tourner les pages avec les boutons,
tu utilise le moteur de base, mais a la place des coordonées de souris,
tu balance une suite de chiffre qui represente une petite hyperbol d'un coin a l'autres.
Ensuite cette suite de chiffre n'est pas obliger d'amener le coin de la page jusqu'au bout,
il peut le lacher en cour de route laissant la fonction qui gère la chute de la page faire le reste.
@klee> Le BitmapData pixeliserait les données vectorielles, ce qui provoquerait une perte de qualité... Ici c'est pas le cas quoi qu'il arrive parcequ'on utilise du bitmap à la base, mais dans d'autres situations ca peut etre gênant...
La solution consisterait plutôt a récupérer les identifiants de liaison et à créer un clip zoomé au dessus du livre (masqué) et a appliquer le même système que celui actuel... Le problème est que les images non-fixes (les animations dans l'element de la bibliothèque) seraient remises à zero, en partant de la première frame... :\
Pour l'hyperbole, c'est assez tiré par les cheuveux, mais pourquoi pas... :p
Bien symathique ce petit composant, même si c'est sûr qu'il peut être amélioré encore...
Au passage je découvre ça : Pas de filtres pour les composants ! Ah oué c'est balo ça ?
Sinon une question quand même : Est-ce-que ça vaut vraiment le coup de partir surla base de dév PageFlip pour développer son propre PageFlip. J'entend, pour un développeur n'ayant pas trop de problème avec la physique/trigo necessaire à ce genre d'appli.
Je te demande ça parceque j'ai eu justement une demande de devis y'a un moment ou le client me demandais si je pouvais réutiliser PageFlip, et donc j'ai matté les sources, et ça m'a parru pas terrible j'ai donc reffusé le projet.
Alors toi qui a mis le nez profondément dedans, qu'en penses-tu ? Si c'était à refaire, partirais tu encore sur une base PageFlip ?
Merci !
si tu trace le bitmapData au moment du zoom tu n'as qu'à utiliser le paramètre matrix de draw pour tracer à la taille qui convient sans perte de qualité tant que le bitmapdata n'est pas redimmensionné par la suite non?
@foxy> Je suppose que tu t'adresse à glorb, étant donné que moi j'ai tout redéveloppé..
Ca devrait être largement faisable pour toi de le refaire également... 
starmonkey> j'y ais bien pensé (après le dernier poste de lalex) mais ça régle pas les problèmes pour les animations...
une autre posibilité serait de créer la clip zoomé en même temps que la page , pour ne pas avoir de décalage temporaire, mais c'est un peut plus lourd, ca fait créer un clip qui ne cera pas forcement utile.
foxy> moi perso je le referais de zéro, quand on aime on ne compte pas
Lalex > , autant pour moi, donc en effet t'as eu la même réaction que moi en voyant le code..... je me disais bien aussi...
Oui le faisable, j'en doute pas, c'est le "rentable" qui m'interesse
klee > Ah oué, moi je compte pas... (mes clients eux comptent un peu malheureusement)
Mais bon OK, le code source de PageFlip est pas forcéement une super base donc...
hey bien sympa !
y a juste un p'tit bug d'affichage lorsqu'on sort de l'anim avec le curseur toujours pressé
(à l'époque j'avais commencé à faire un livre aussi, j'avais eu le même bug à cause des divisions par zéro si ça peut aider)
C'est sympa!!
J'ai vu un petit bug pas très important.
Petit screen pour illustrer le problème (le point bleu représente la souris)
Lorsqu'on passe la souris de droite à gauche comme sur le screen (image 1 vers image 2), ca fait un truc bizarre
Autant pour moi c'étais déjà dit dans les commentaires. (ca m'apprendra)
@michael> Je connais ce bug, je vais le résourdre incessamment sous peu...
Merci, et a part ca, joli site! 
Autre bug que tu connais surement : il reste possible de tourner les pages pendant un diaporama, donc si tu maintiens la page "en état de tourner" entre les deux morceaux du livre, le diaporama continu et la page reste "attachée" à la souris.
Foxy > moi ce que j'en ai vu, c'est sûr que ça fait une base un peu lourde à manier pour rajouter des choses. Ca peut être plus simple de tout recoder. Rentable par contre c'est pas dit.
Disons que tout dépend de la demande du client. Au fur et à mesure de mon dev je me suis un peu retrouvé à mettre des bouts de scotchs à droite à gauche dans le code de base, ce qui n'est pas très sain.
Bonjour à vous!
Je suis tombé sur ce site par Google en cherchant "pages qui tournent", pas mal votre Script!! Ma question est la suivante, l'année prochaine, ma petite chérie et moi, nous nous marions, et je cherche justment un petit script qui permet de commencer une histoire genre "il était une fois...". Les couleurs du livre sont exactement nos couleur en html plutôt "#800000" et ocre j'ai oublié le code. Peut-êter est ce impoli de demander une aide ou un code permettant de tourner ces pages racontant notre petite vie en ces quelques pages, serait il possible de me procurer ceci?
Un grand merci (même si c'est un refus total)
Très sympa ton anim'
(Et tes créas
).
Oups j'ai parlé trop vite, bravo à ce dessinateur chilien alors
(pyromaniac)
bonjour
je viens vers vous afin de savoir comment nous pouvons utilisé votre script pour metre notre magazine mensuel en ligne sur notre site
merci de nous contacter rapidement
cordialement
sebastien guillalmon
bonjour
je viens vers vous afin de savoir comment nous pouvons utilisé votre script pour metre notre magazine mensuel en ligne sur notre site
merci de nous contacter rapidement
cordialement
sebastien guillalmon
Bonjour à tous
je trouve vos commentaires sur PageFlip magnifiques; même si j'ai beaucoup de mal à tout comprendre car je débute avec Flash.
Je suis entrain d'utiliser PageFlip sur un cd-interactif.
J'aimerai vraiment votre aide pour faire le fameux zoom sur les pages
(Il fallait donner la possibilité d'inclure un zoom sur les pages).
J'ai téléchargé un exemple pertinent à l'adresse : (http://www.spotbit.com/main/get_fil...)
MERCI
Salut,
Je ne vais pas porter de commentaire sur ton travail.
Par contre, je souhaite savoir s'il faut obligatoirement créer une page Web ou avoir un blog pour créer un document où les pages tournent un peu comme le tient ?
Aussi, j'ai lu ailleur sur le Web que pour faire tourner des pages comme avec un livre, on pouvait utiliser Flash. C'est quoi le plus simple ?
Merci de me répondre !!!
Et bravo pour ton livre !!!
Butterfly
Fil des commentaires de ce billet