ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer un livre interactif (PageFlip)
Nous allons voir ici comment créer un livre interactif du type "pageFlip". Sur leur site, une version gratuite est disponible, mais uniquement en ActionScript 2. Nous allons donc voir comment réaliser ce même effet en ActionScript 3.
Le site http://demo.quietlyscheming.com/ a mit à disposition une démonstration très réussit, permettant de comprendre le principe pour réaliser cet effet de pages qui tournent.
Afin de réaliser cet effet, nous allons utiliser la class PageFlip développé par Didier Brun. C'est un OpenSource, donc il n'y a aucune raison de ce priver, surtout que c'est un travail excellent. Pour le compléter, notemmant au niveau des ombrages, nous utiliserons une version modifié de cette class par ma.tthi.eu.
- Dans votre bibliothèque, vous devez avoir 2 bitmaps, avec un nom de liaison (pag0 et pag1).



//Imports Flash
import flash.display.BitmapData;
import flash.display.Shape;
import flash.geom.Point;

//Import de la class PageFlip
import com.foxaweb.pageflip.*;

//Page recto/verso
var page0:BitmapData = new pag0(200,300);
var page1:BitmapData = new pag1(200,300);

//Zone d'affichage
var render:Shape = new Shape();
render.x = 50;
render.y = 50;
addChild(render);

//Paramètre du "flip" de la page
var livre:Object = PageFlip.computeFlip( new Point(60,190), //position du point de rotation
new Point(1,1), //point de rotation (1,1=bottom,right; 0,0=top,left)
200, //largeur
300, //hauteur
true, //rotation horizontale (false = verticale)
1); //fluidité

//Affichage du rendu
PageFlip.drawBitmapSheet( livre, //paramètres
render, //zone d'affichage
page0, //recto
page1); //verso

- Afin de créer une animation, il faut créer une fonction qui fait bouger le point de rotation (pts) dans le livre et une fonction qui actualise le livre en permanance :

//Imports Flash
import flash.display.BitmapData;
import flash.display.Shape;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Point;

//Import de la class PageFlip
import com.foxaweb.pageflip.*;

//Page recto/verso
var page0:BitmapData = new pag0(200,300);
var page1:BitmapData = new pag1(200,300);

//Point de rotation
var pts:MovieClip = new MovieClip();
pts.x = 200;
pts.y = 300;

//Zone d'affichage
var render:Shape = new Shape();
render.x = 50;
render.y = 50;
addChild(render);

//Affichage du livre
function affichage(e:Event):void
{
render.graphics.clear(); //Efface le rendu précédent

//Paramètre du "flip" de la page
var livre:Object = PageFlip.computeFlip( new Point(pts.x,pts.y), //position du point de rotation
new Point(1,1), //point de rotation (1,1=bottom,right; 0,0=top,left)
200, //largeur
300, //hauteur
true, //rotation horizontale (false = verticale)
1); //fluidité

//Affichage du rendu
PageFlip.drawBitmapSheet( livre, //paramètres
render, //zone d'affichage
page0, //recto
page1); //verso
}
stage.addEventListener(Event.ENTER_FRAME, affichage);

//Mouvement du point de rotation
function mouv(e:Event):void
{
pts.x = mouseX;
pts.y = mouseY;
}
stage.addEventListener(Event.ENTER_FRAME, mouv);

- Si vous souhaitez afficher des animations dans les pages, utiliser la méthode draw pour dessiner vos clip dans les bitmaps afficher par pageFlip. Ici, pag0 et pag1 sont 2 clips contenant des animations :



Modifiez juste ceci :

//Page recto/verso
var p1:MovieClip = new pag0();
var p2:MovieClip = new pag1();
var page0:BitmapData = new BitmapData(200,300);
var page1:BitmapData = new BitmapData(200,300);
function animePage(e:Event):void
{
page0.draw(p1);
page1.draw(p2);
}
stage.addEventListener(Event.ENTER_FRAME, animePage);

- Pour mettre des ombres et donner à l'animation plus de volume, remplacer le fichier "PageFlip.as" de Didier par celui de Matthieu. Ensuite modifiez le code de rendu de la manière suivante :

//Affichage du rendu
PageFlip.drawBitmapSheet( livre, //paramètres
render, //zone d'affichage
page0, //recto
page1, //verso
true, //ombres de face
true, //ombres de dos
true); //ombres d'arrière plan

Aperçus & Sources : (Flash CS4)
Commentaire(s)
Aucun.