.: Livre avec page tournante :.
Dans ce tutoriel on va apprendre à réaliser un livre en flash, avec des pages que l'on peut tourner avec la souris . Cette réalisation génial est rendu possible grâce à Christophe_d, un très expérimenté de E-anim qui a réalisé cette excellente ressource. Et grâce à la toute nouvelle version de E-anim (la 8.02), la création du livre se fait encore plus simplement
. Alors commençons sans plus attendre
.
I)Préparatifs
Tout d'abord il faut s'assurer que toutes vos pages aient la même taille, ça évitera des bugs. Pour l'exemple qui sera utilisé pour le tutoriel la taille d'une page sera de 325px de largeur et 500px de hauteur .
Ensuite il faut avoir un nombre paire de pages, c'est un peu logique vu qu'un livre ne peut avoir un nombre impaire de pages (dans le tutoriel je ne prendrai que 4 pages ).
Enfin on doit posséder une version de E-anim supérieur ou égale à la version 8.02. Pour connaître la version de E-anim qu'on a, ouvrons E-anim est allons dans Aides>Au sujet de 'e-anim'. Une fenêtre s'ouvre dans laquelle est indiqué la version en gros .
Voilà une fois ces vérifications faites, nous sommes prêts à débuter .
II)Livre avec le sprite de E-anim
1)Commençons par modifier la taille de l'animation:
-La largeur doit être égale à deux fois la taille d'une page, avec une certaine marge en plus.
-La hauteur doit être égale à la hauteur d'une page avec une certaine marge en plus.
Exemple:
Ma page fait 325px de largeur et 500px de hauteur, donc:
-La largeur de l'animation sera égale à (325x2)+une marge de 50px, donc on aura 700px de largeur.
-La hauteur de l'animation sera égale à 500+une marge de 200px, donc on aura 700px pour la hauteur.
Il faut toujours penser à la place que prendrait le livre ouvert avec une page tirée vers le haut/bas. Donc la taille de l'animation doit être assez grande pour que le livre ne soit pas coupé.
Donc cliquons sur le bouton "écran de base" et entrons les dimensions:
2)Allons maintenant dans Objets-dynamiques>Objets clefs en main>Bibliothèque de sprites.
3)Choisissons Livre dans la fenêtre des sprites.
4)On se retrouve dans un "groupe composé de pages":
1-On a le numéro de la page à laquelle on est, ainsi que les boutons "+" et "-" qui permettent d'ajouter ou de supprimer une page .
2-Un petit mémo de ce qui faut faire pour créer le livre .
5)Le système de page marche à l'envers, c'est à dire il faut commencer par ajouter l'image de la dernière page du livre dans la page 0 du groupe. Pour ma part mon livre étant composer de 4 pages, je commence par ajouter l'image de la 4ème page.
6)Nous devons ensuite mettre la page à la position x:0 et y:0. Cette position correspond à l'croix à l'écran:
3 possibilités s'offrent à nous:
-Soit on déplace avec la souris l'image de manière à ce que le coin haut-gauche de celle-ci se superpose avec la croix.
-Soit on tape directement les coordonnées dans les champs en haut à droite de la fenêtre (s'ils ne sont pas présents, il faut cliquer deux fois sur les coordonnées de l'objet situées à côté de la barre des temps cf. image).
-Soit on va dans Objet>Utilitaires>Reinit>Déplacer en 0,0
7)Donc pour ajouter chaque page il faut:
1-Ajouter une page au groupe en cliquant sur le bouton "+".
2-Ajouter l'image toujours dans l'ordre inverse. Exemple si on a 4 pages, on aura:
#page 0 du groupe=image page 4
#page 1 du groupe=image page 3
#page 2 du groupe=image page 2
#page 3 du groupe=image page 1
3-Déplacer le groupe en position x:0;y:0.
8)Une fois fait retournons à l'écran de base en cliquant sur bouton écran de base et positionnons le groupe-page du livre de façon à ce qu'une fois le livre ouvert il ne soit pas coupé.
Voilà c'est fini il ne reste plus qu'à enregistrer le fichier .phi et de générer le fichier .html.
Une version modifiée par mes soins du script sera bientôt disponible avec quelques effets en plus (le temps que je demande l'autorisation de l'auteur du script d'origine ).
Si vous avez des questions n'hésitez pas à les poser sur le forum .
Hors ligne
Posté le 12-06-2008 20:52:22