Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

PageFlip - Livre interactif

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash 8. Cliquer pour en savoir plus sur les compatibilités.Par john_chab (jonathan)

Article écrit le 24/05/2007 09:47.
Par john_chab ( jonathan ).

Il s'agit d'un tutorial qui permet de réaliser en toute simplicité un livre intéractif.

Problèmatique

PageFlip est une animation flash programmable qui permet de réaliser des livres intéractifs, afin de les publier sur le net par exemple. C'est une solution parfaite pour les sites de VPC qui désirent donner à leurs utilisateurs un catalogue identique à celui papier. Voici donc un tutorial qui permet la modification de ces livres et la création de votre livre à vous. Evidemment il existe d'autre méthode pour faire cela ici nous nous interesseront au code source fournit par http://www.iparigrafika.hu/pageflip on peut donc remercier leur créateur.

[edit par Lilive] Le lien a changé. Voici celui vers la dernière version gratuite (2.25) de PageFlip, et celui vers la nouvelle version payante. Ce tutoriel n'est peut-être plus adapté pour la nouvelle version, et utilise la version open source 2.13. Le template est disponible en lien au paragraphe suivant.

Utiliser le template

Avant de commencer la création d’un catalogue interactif. Il vous faut le fichier template.fla. Template.fla est un fichier qui contient le minimum pour créer un catalogue. Ne le modifier pas, préférer enregistrer sous et créer un nouveau fla.

template.fla compressée sous zip

Le template.Fla est composé de plusieurs partie. Dans la bibliothèque vous avez un template de page droite et un de page gauche ainsi qu’une page blanche. Ne modifier jamais ces trois pages. Dans la time line vous pouvez voir les différent calque et point de code. Celui qui nous intéresse pour créer correctement un livre se situe dans le calque action image 5.

Définir la taille de notre livre :

La première chose à faire pour créer un livre est de fixé la taille de celui ci. Pour cela on va pouvoir régler la taille d’une page. Beaucoup de choses sont automatisées mais il reste tout de même quelque petite manipulation à faire.

Dans le code (calque : actions ; image 5) :

Vous trouverez deux variables appelées pw et ph . Ph correspond à la hauteur d’une page tandis que pw correspond à la largeur d’une page. Vous pouvez modifier les deux valeurs à votre guise. Une fois les deux valeurs fixées il ne reste plus qu’a faire une légère manipulation.

Physiquement :

Ouvrez les templates de pages et observer. La taille des pages n’as pas bouger il faut donc les ajuster à la main et les recentré par rapport au centre. Des fois lors d’un changement de taille l’ombre des pages se replace mal. Il est donc nécessaire de les placer correctement. Leur place est simple pour le template page droite l’ombre est a gauche et inversement.

Ajouter et supprimer des pages :

Il faut garder à l’esprit qu’une feuille est un ensemble de deux pages. En effet une feuille est toujours composé d’une page droite et d’une page gauche.

Physiquement :

La manipulation est très simple on commence toujours pas une page de droite. On duplique le template on l’appelle pageX X étant le numéro de la page et ainsi de suite jusqu'à atteindre le nombre de page voulu. Attention lors de la duplication, il faut coché dans les options avancé « Exporter pour Actionscript ». On peut modifier à souhait (sauf ombre et taille évidement) les pages dupliquées.

Astuce : Toute les pages de droite sont de nombre impaire et toute celle de gauche paires.

Dans le code ( calque actions ; image 5) :

Dans le code vous trouverez les lignes : addPage(“start”); addPage(“end”);

Bien placez vous entre les deux lignes et ajouter simplement vos pages ainsi : addPage(“pageX”);

Astuce : Il est obligatoire de groupé la page avec ce que vous ajouté pour cela faite la manipulation suivante. CTRL +A pour tout sélectionner. CTRL+B pour tout diviser. CTRL + SHIFT + G pour tout grouper. CTRL + B pour terminer.

Option : Il est possible de faire en sorte que les pages puissent être déchirées. Pour cela c’est très simple il suffit de mettre : addPage(“pageX”,true);

Option2 : Il est possible de rendre des pages invisibles ( ou une partie) La encore c’est pas très compliquez. Il suffit de faire des trous dans les pages ( une feuille est une page droite et gauche) Les trou se transformeront en transparent..

Ajouter et supprimer un sommaire :

Un sommaire sont des zones de certaines pages cliquables qui permettent de se rendre plus rapidement à une page donnée. Tout est prévue pour mettre ça en place grâce à la fonction gotoPage.

Physiquement (prenez la page sur la quel vous voulez insérez le sommaire) :

Sur votre page pas beaucoup de travail il vous suffit juste d’ajouter des boutons simples ( par dessus le contenu ou dessous à votre guise) et leur donner des nom d’occurrence.

Dans le code de la page :

La principale difficulté de l’opération est d’avoir un ciblage propre afin de pouvoir exporter à notre guise le catalogue dans d’autre animation. Pour cela vous l’aurez compris il ne faut pas utiliser le _root. Il faut donc regarder le nombre de couche que nous traversons sur une simple page de savoir ou se situe la racine du programme. Pour cela une méthode simple : bt_test.onRelease = function(){trace(this);}

Résultat : _level0.pages.p4.page.pf.ph.pic.bt_test

Donc depuis la racine _level0 nous passons par pages puis p4 puis page et ainsi de suite jusqu’à notre bouton. Petit rappel This indique ou on se trouve. _parent nous permet de remonter d’un cran dans l’arborescence. Pour cibler correctement la racine proprement nous devons donc écrire :

this._parent._parent._parent._parent._parent._parent._parent

Maintenant que nous savons pointer sur la racine il est très simple d’utiliser les fonctions fourni par le template. Ici nous allons utilisez GotoPage mais ce serais la même chose pour nextPage() ou prevPage() (respectivement page précédente et page suivante). Pour allez à la page numéro 12 il suffit donc d’écrire :

bt_test.onRelease =function()
      {this._parent._parent._parent._parent._parent._parent._parent.gotopage(12);}

En écrivant cela nous allons parcourir et donc voir défiler toutes les pages jusqu’à la page numéro 12. Si vous voulez allez directement à la page numéro 12 gotopage possède un second paramètre qu’il suffit de mettre à true. Donc gotopage(12,true) nous amènera directement en page 12.

Modifier la couverture :

En fonction du type du livre qu’on veut montrer la couverture peut être entièrement paramétrée. En effet la couverture possède des attribut différent que les pages normal. Tout d’abord par défaut elle est rigide contrairement au page. Elle est aussi plus haute et plus large. Une feuille est composé de deux pages tandis qu’une couverture est composé de la première feuille de la dernière feuille ainsi que de d’un élément appeler center. Il faut penser à harmoniser la couleur de center avec votre couverture.

Passer de mode rigide à mode souple :

La encore rien de plus simple il suffit d’allez dans le code du calque action image 5. Vous trouverez la variable hcover initialement mise à true. Il suffit de la mettre a false pour que la couverture soit souple. Hcover = false ;

Régler la taille de la couverture par rapport au reste des pages :

La encore rendez vous sur le calque action image 5, vous trouverez cette liste de variable : lcover = true; lcaddx = 10; lcaddy = 10;

  • lcover veut dire si la couverture est plus grande que le reste initialement true.
  • Lcaddx veut dire si la couverture est plus large, le nombre de pixel a droite et à gauche.
  • Lcaddy veut dire si la couverture est plus haute, le nombre de pixel en bas et en haut.

Maintenant nous allons voir comment intégrer ce catalogue au sein d’autre animation flash.

Charger votre livre dans une animation :

Maintenant que nous avons réussi à avoir un catalogue, on va l’utiliser et donc l’intégrer dans toute sorte d’animation.

Physiquement :

Il n’y a rien à faire. A part évidemment avoir une idée de la ou l’on souhaite placer notre livre au sein de l’animation. Pour cela chercher les coordonnée du coin haut gauche de votre bouquin (une fois ouvert).

Dans le code de votre animation :

Au moment vous souhaitez faire apparaître votre livre vous allez devoir le load. Pour le load rien de compliquez :

   //Idem, on commence par créer le clip vide qui va contenir notre livre.
   this.createEmptyMovieClip("conteneur_mc", this.getNextHighestDepth());
   //on définit un écouteur pour écouter ce que le movieClipLoader dira (notamment, l'avancement du chargement)
   var mclListener:Object = new Object();
   //quand le chargement est fini, le movieClipLoader déclenche un événement loadInit qu'on va écouter et quand il surviendra
   //le MovieClipLoader renvoie aussi le clip dans lequel il fait le chargement (et on le récupère dans target_mc).
   mclListener.onLoadInit = function(target_mc:MovieClip):Void 
   {
   //ici on est sûr que notre livre est bien chargée, on peut la redimensionner et le masquer. 
   //On peut aussi accéder aux éléments de notre livre.
   // j’applique à mon livre ( target_mc) le masque (mask_mc)
   target_mc.setMask(mask_mc);
   //je place mon livre à 75 pixels du bord gauche.
   conteneur_mc._x = 75; 
   // je place mon livre à 20 pixels du haut
   conteneur_mc._y = 20;
   }
   // On définit le texte qui servira de loading.
   //on declare un nouveau style
   var format_1:TextFormat = new TextFormat();
   //ici on définit la couleur 
   format_1.color = 0x000000;
   //on centre le texte
   format_1.align = "center";
   //on défini la font sur "verdana"
   format_1.font = "Verdana";
   //à la taille 20
   format_1.size = 20;
   //si gras, mettre "true"
   format_1.bold = false;
   //si italique, mettre "true"
   format_1.italic = false; 
   //on crée un nouveau champs de texte vide
   var txt_chargement:TextField = this.createTextField("txt_chargement", 10, 0,  Stage.height/2, Stage.width, Stage.height);
   //le MovieClipLoader envoie aussi un événement loadProgress qui permet de  savoir où en notre chargement
   mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void{	
   //variable contenant le pourcentage de chargement.
      var complet:Number = Math.floor((bytesLoaded/bytesTotal)*100);
   //on fait apparaître le texte dès que le chargement commence (à 1% en fait)
   if (complet>=1) {
      //Texte qui sera affiché dans notre champs pendant le chargement
      this.txt_chargement.text = "Module chargé à "+complet+" %";
      //on applique les style que l'on a définit au début
      this.txt_chargement.setTextFormat(format_1);
   }
   //actions effectuées une fois le chargement fini                            
   if (complet>=100) {
      //On détruit notre champs de texte
      this.txt_chargement.removeTextField();
      //On détruit les variables
      delete this.complet;
      //on poursuit la lecture de l'animation
   ;
   };
   //on définit notre MovieClipLoader
   var mcl:MovieClipLoader = new MovieClipLoader();
   //on lui attache notre écouteur pour qu'il puisse entendre ce que le mcl émét
   mcl.addListener(mclListener);
   //on lance le chargement de notre livre. Remplacer NOMDULIVRE  par le nom de votre fichier swf
   mcl.loadClip("NOMDULIVRE.swf", conteneur_mc);

Définir des boutons à l’extérieur de l’animation :

Maintenant que nous avons réussi à charger un catalogue, on va chercher à le manipuler depuis une source extérieur Afin par exemple de mettre des boutons pour l’ensemble des pages.

Physiquement :

Bien il faut commencer par créer des boutons de la forme et couleur de votre choix et tous les nommées individuellement. Il est recommandé de faire apparaître les boutons en même temps que le livre. Afin de ne pas avoir des boutons sans rien.

Dans le code de votre animation :

Imaginons que nous venons de charger notre catalogue avec la méthode précédente. Que sur notre scène nous avons créée trois bouton qui s’appelle bt_suiv bt_prec bt_som qui sont respectivement un bouton page suivante un bouton page précédente un bouton allez au sommaire.

Vous allez commencer par vous placer à la suite de votre code de chargement. Puis pour chaque bouton :

   // bouton page suivante
   bt_suiv.onRelease = function(){
     this._parent.conteneur_mc.nextPage();
   }
   //bouton page précédente
   bt_prec.onRelease = function(){
      this._parent.conteneur_mc.prevPage();
   }
   /* bouton sommaire.(true permet d’aller directement d’aller au sommaire on peut mettre rien ou false si on veut parcourir les page avant)
   Le sommaire se situe page 3 (couverture/dos couverture/sommaire) */
   bt_sommaire.onRelease = function(){
      this._parent.conteneur_mc.gotoPage(3,true);
   }

Définir un zoom sur les pages du livre :

Il arrive très souvent que les pages ainsi créées soit peu lisible. Il faut donc avoir recours à un zoom afin que l’utilisateur puisse lire notre livre. Deux méthodes existent de traiter le problème. La première consiste à créer des zones de boutons sur les parties qu’on veut zoomer et faire un zoom pour chaque article ou chaque pages. Si vous désirez utiliser cette méthode non décrite ici il est conseillé de travailler en utilisant un xml afin de stocker texte et autres images zoomées. Nous allons voir une autre méthode qui consiste à zoomer tout simplement l’animation du livre et donc en l’occurrence aussi les pages. Nous allons aussi nous fixer une petite contrainte qui est la suivante. Un clic à pour effet de zoomer le clic suivant aura pour effet de dé zoomer.

Physiquement :

Il va falloir créer deux choses principalement la première est un cadre afin que notre livre une fois zoomer ne prenne pas toute la place et laisse place encore aux boutons créés. Et une zone de clic qui correspond à la zone réactive au zoom.

Dans le code de votre animation :

Imaginons que nous avons créée le cadre qu’on appelle Mask et la zone qu’on appelle ZoneZoom.

Tout d’abord, nous allons nous occuper du cadre. En effet, il sert uniquement de masque pour le catalogue. Dans le chargement du catalogue il suffit donc de mettre :

   // à insérer dans l’évènement OnLoadInit
   target_mc.setMask(Mask);

Ensuite il suffit de régler le zoom. Pour cela il faut attribué une action onRelease sur le movie clip ZoneZoom.

   // clic représente le fait qu’on clic pour zoomer (0) ou dezoomer (1)
   var clic:Number=0;
   bt_zoo.onRelease = function(){
if (clic == 0){
this._parent.conteneur_mc._x -=this._xmouse+75;
this._parent.conteneur_mc._y -=this._ymouse/1.7;
this._parent.conteneur_mc._xscale=170
this._parent.conteneur_mc._yscale=170
clic=1;}
else {
this._parent.conteneur_mc._x =75; // valeur initiale
this._parent.conteneur_mc._y =20; // valeur initiale
this._parent.conteneur_mc._xscale=100;
this._parent.conteneur_mc._yscale=100;
clic=0;
}
   }

Les valeurs du zoom peuvent être changées facilement dans l’action du clic == 0 en effet le _xscale et _yscale indique le pourcentage du zoom (ici on zoom a 170%). Les valeurs _x et _y sont là pour recadrer le livre correctement. Le dezoom n’est pas à modifier.

Conclusion

Comme vous pourrez le constater, certaines actions appliquées sur le livre proviennent d'autres tutoriaux. Je tiens donc à remercier leur auteur, et la communauté Médiabox qui m'a permis d'apprendre et me perfectionner en flash.