FlipPages

Ce tutorial inspiré de ce walkthrough, propose de réaliser des pages tournantes en FlashPascal.

Ce "Book" possède 4 pages : A, B, C et D. Vous pouvez cliquez sur une page pour la faire tourner, mais dans cet exemple seules les pages B et C sont interactives.



Si vous avez regardé le walkthrough, vous avez compris que dans cette démo il n'est question que de rotations en 2 dimensions. Toute la difficulté réside dans la détermination de la position de la page évidemment.

Quatre coins égaux

Le traitement étant quasiment le même pour les 4 coins du livre, nous allons nous focaliser arbitrairement sur le coin en haut à droite pour la suite. Le traitement des 3 autres coins sera alors trivial.

La page cornée en triangle

La première chose à remarquer est que, quand on corne la page, la pliure triangulaire est déterminée par la perpendiculaire au segment qui va du coin à la position de la souris. Il y a en effet une parfaite symétrie entre la zone bleue et la zone verte.


Mais cette apparente simplicité n'est plus valide une fois qu'on tourne la page un peu plus.

La page pliée en quadrilatère

Pour obtenir la page pliée, il faut limiter la perpendiculaire au bas de page et ajouter un nouveau point pour former un quadrilatère. Ce nouveau point est facile à déterminer, la hauteur de page le sépare de la souris et il forme un angle droit à cet endroit.


Notez que ce principe reste valable quand la souris passe au dessus du livre; le point d'intersection est là encore avec le bas de page.


Quand ce quatrième point se retrouve sur la droite du livre, on retrouve en fait le premier cas de figure, deux points du quadrilatère sont confondus pour former un triangle.

Les contraintes physiques

Il me reste à préciser qu'il existe deux contraintes physiques à la rotation de la page. Quand la souris descend trop bas, la largeur de page vient limiter le mouvement. De même si la souris remonte trop haut, c'est la diagonale de la page qui vient restreindre ce déplacement. Si on n'appliquait pas ces contraintes, la page serait élastique ou se détacherait du livre.

Le calcul reste cependant le même, la position de la souris est simplement corrigée si nécessaire.

Le montage sous Flash

Pour réaliser tout cela sous Flash, j'ai utilisé le montage présenté ci-dessous.

Les différents éléments sont des classes dérivées de MovieClip.
- TBook occupe tout l'espace de la fenêtre. C'est lui qui gère les évènements souris; pour ce faire, il est parent de tous les autres éléments.
- TPage est une classe qui permet de dessiner une page du livre, on a donc 4 instances de TPage.
- TEffect est un MovieClip placé en haut de la pile pour dessiner la page qui tourne par dessus les TPage affichés.

Utilisation des BitmapData

Voici maintenant ce que donne ce système pour représenter la page cornée.

A partir du moment ou la page tourne, le TPage correspond est caché. Son image est copiée dans un bitmap (BitmapData sous Flash) qui est utilisé comme remplissage (beginFillBitmap) d'un dessin vectoriel sur TEffect. J'ai représenté en pointillés la taille réelle du bitmap, mais seule la partie colorée - qui correspond au quadrilatère déterminé ci-avant - est visible à l'écran. On aura évidemment appliqué une rotation au bitmap pour suivre le mouvement de la page.
On notera l'usage de deux bitmaps, un pour chaque face, la forme d'une face complétant celle de l'autre, aucun calcul supplémentaire n'est nécessaire.

Le code FlashPascal

Pour finir, voir le code FlashPascal de cet exemple.