Nous allons voir comment créer des GIF animés en Php, via la librairie GD, et la class GIFEncoder.class.php, créée par László Zsidi, http://gifs.hu, et visible ici :
GIFEncoder.class.php
Donc tout d'abord, il faut que vous créiez un fichier nommé
GIFEncoder.class.php, contenant la class en question.
Ensuite, créez un nouveau fichier
.php et incluez-y la class grâce à la fonction
include(). Créez un tableau
$images, qui contiendra toutes les "frames" (les images constituant le gif) et un tableau
$temps, qui contiendra la durée d'affichage de chaque frame. En effet, elles ne durent pas forcément toutes le même temps : la première frame peut durer 1 seconde, la deuxième 0.2 seconde, etc...
Code : PHP
- <?php
- include "GIFEncoder.class.php"; //on inclut la class
-
- $images = array(); //on cree le tableau qui va contenir les frames
- $temps = array(); //et celui contenant les temps d'affichage
- ?>
Ensuite, il va falloir créer chacune des frames. Pour cela, c'est exactement la même méthode qu'en générant une simple image fixe avec GD. On créé des couleurs, on dessine des traits, des rectangles, on écrit du texte... tout ça avec les fonctions présentées
ici.
Dans cet exemple, je vais créer une image avec une barre horizontale descendant le long de l'image
(comment ça, c'est moche ? :D ) .
On va donc créer une nouvelle image toute noire, avec
imagecreatetruecolor(), une couleur blanche avec
imagecolorallocate(), et tracer une ligne horizontale blanche, à 5px du sommet de l'image, avec
imageline().
Code : PHP
- <?php
- include "GIFEncoder.class.php"; //on inclut la class
-
- $images = array(); //on cree le tableau qui va contenir les frames
- $temps = array(); //et celui contenant les temps d'affichage
-
- $image = imagecreatetruecolor(100, 100); //on cree l'image de base
- $blanc = imagecolorallocate($image, 255, 255, 255); //et la couleur blanc
-
- imageline($image, 0, 5, 100, 5, $blanc); //et on trace une ligne a 5px du haut
- ?>
Bien sûr, ce code n'a pas grand intérêt, étant donné qu'il faut plusieurs images pour faire un gif animé. On va donc devoir faire une
boucle, générant toutes nos images. Dans cet exemple, l'image faisant 100 pixels de haut, je vais faire 20 images, la ligne descendant de 5 pixels à chaque fois. Évidement, le nombre d'images à générer dépend de vos besoins et de vos envies.
Sachez que plus le nombre d'images est grand, plus l'animation sera fluide, mais plus le temps de rendu sera long. Attention à ne pas abuser, donc ;)
Entre chaque itération de la boucle, il faut bien penser à effacer l'image d'avant, sinon toutes les frames vont se superposer... On utilisera pour ça la fonction
imagefilledrectangle(), en créant un rectangle noir de la taille de l'image
(il faut donc créer la couleur noir).
Code : PHP
- <?php
- include "GIFEncoder.class.php"; //on inclut la class
-
- $images = array(); //on cree le tableau qui va contenir les frames
- $temps = array(); //et celui contenant les temps d'affichage
-
- $image = imagecreatetruecolor(100, 100); //on cree l'image de base
- $blanc = imagecolorallocate($image, 255, 255, 255); //la couleur blanc
- $noir = imagecolorallocate($image, 0, 0, 0); //et la couleur noir
-
- for($i = 0; $i <= 20; $i++){ //la boucle pour faire nos 20 images
- imagefilledrectangle($image, 0, 0, 100, 100, $noir); //on efface l'image d'avant en la remplissant de noir
- imageline($image, 0, 5*$i, 100, 5*$i, $blanc); //et on trace la ligne blanche a la hauteur voulue
- }
- ?>
- Mais là, il ne se passe rien !?
C'est normal. En effet, il faut encore
générer les images, avec
imagegif(). C'est là qu'est la partie technique de ce tutoriel (rien de bien compliqué, je vous rassure ^^ ) : il va falloir stocker le
rendu des images dans le tableau
$images, et attribuer un temps d'affichage, en
milli-seconde, dans le tableau
$temps, pour chaque images. Le mien sera toujours le même : 5 milli-secondes. Pour garder le rendu en mémoire, on va utiliser les fonctions
ob_start() et
ob_get_clean(). Si vous les connaissez, alors vous savez à quoi elles servent, sinon, ce n'est pas la peine de s'en soucier, c'est un peu compliqué. Sachez juste que ça sert à
bloquer l'envoi du résultat script vers le navigateur, pour pas qu'il n'affiche n'importe quoi.
Code : PHP
- <?php
- include "GIFEncoder.class.php"; //on inclut la class
-
- $images = array(); //on cree le tableau qui va contenir les frames
- $temps = array(); //et celui contenant les temps d'affichage
-
- $image = imagecreatetruecolor(100, 100); //on cree l'image de base
- $blanc = imagecolorallocate($image, 255, 255, 255); //la couleur blanc
- $noir = imagecolorallocate($image, 0, 0, 0); //et la couleur noir
-
- for($i = 0; $i <= 20; $i++){ //la boucle pour faire nos 20 images
- imagefilledrectangle($image, 0, 0, 100, 100, $noir); //on efface l'image d'avant en la remplissant de noir
- imageline($image, 0, 5*$i, 100, 5*$i, $blanc); //et on trace la ligne blanche a la hauteur voulue
-
- ob_start(); //on bloque l'envoie vers le navigateur
- imagegif($image); //on genere l'image
- $images[] = ob_get_clean(); //et on recupere ce que l'on vient de generer
- $temps[] = 5; //sans oublie le temps que la frame doit rester afficher, en milli-secondes
- }
- ?>
Là, le gros du problème est résolu. On a toutes nos images en mémoire, le temps qu'elles doivent être affichées, donc il ne reste plus qu'a générer le
Gif animé !
Pour cela, trois lignes suffisent :
- créer une nouvelle instance de la class GIFEncoder
- signaler au navigateur qu'on envoie une image, avec la fonction header(), comme d'habitude avec GD
- et envoyer l'image, bien sûr :-)
Code : PHP
- <?php
- include "GIFEncoder.class.php"; //on inclut la class
-
- $images = array(); //on cree le tableau qui va contenir les frames
- $temps = array(); //et celui contenant les temps d'affichage
-
- $image = imagecreatetruecolor(100, 100); //on cree l'image de base
- $blanc = imagecolorallocate($image, 255, 255, 255); //la couleur blanc
- $noir = imagecolorallocate($image, 0, 0, 0); //et la couleur noir
-
- for($i = 0; $i <= 20; $i++){ //la boucle pour faire nos 20 images
- imagefilledrectangle($image, 0, 0, 100, 100, $noir); //on efface l'image d'avant en la remplissant de noir
- imageline($image, 0, 5*$i, 100, 5*$i, $blanc); //et on trace la ligne blanche a la hauteur voulue
-
- ob_start(); //on bloque l'envoie vers le navigateur
- imagegif($image); //on genere l'image
- $images[] = ob_get_clean(); //et on reupere ce que l'on vient de generer
- $temps[] = 5; //sans oublie le temps que la frame doit rester afficher, en milli-secondes
- }
-
- $gif = new GIFEncoder ($images, $temps, 0, 2, 0, 0, 0, "bin"); //on cree une nouvelle instance de GIFEncoder
- header ("Content-type:image/gif"); //on signale au navigateur qu'on envoie une image
- echo $gif->GetAnimation(); //et on l'envoie :)
- ?>
En executant ce script, vous pouvez admirer quelque chose qui ressemble à ça, normalement :
Voilà, ce tutoriel est terminé, à vous les Gif animés via Php !