Ming à la rescousse du SlideShow perdu

Bonjour à tous,

Quoi qu’un peu burlesque, le titre vous annonce directement la couleur: nous allons parlez de Ming afin de réaliser un SlideShow.
Sachez que si vous ne vous savez pas exactement ce qu’est Ming, vous pouvez aller consulter la courte présentation que j’en avais fait ici même: « A la découverte de Ming »

L’idée

Concevoir un pseudo diaporama avec un fondu d’entrée et de sortie pour chaque photographie

Les astuces

  • J’ai chargé ma class image afin de gérer plus facilement le chargement et la miniaturisation des images.
  • J’utilise une temporisation de sortie pour récupérer la source de ma miniature sous la forme d’un ‘flux’ gérable par Ming.
  • J’utilise des transitions non-linéaires (d’où le recours à des fonctions différentes) entre les images
  • J’incorpore un peu de AS afin de contrôler facilement la mise en pause/play de l’animation

Le code

  1. span class= »co1″>//Chargement de ma class image pour les miniatures
  2. ‘image.class.php’);
  3.  
  4. //Variables relatives à l’animation
  5. //Sélection des images à afficher
  6. "./math/*.jpg");
  7.  
  8. //Fonctions nécessaires (voir: http://www.robertpenner.com/easing/easing_demo.html)
  9. // Un peu d’AS pour jouer/stopper l’animation à tout moment
  10. $strAction="
  11. if(!init){
  12.     init=true;
  13.     stopped=false;
  14.     controls = {
  15.         onMouseDown: function () {
  16.             if(!stopped){
  17.                 stop();
  18.                 stopped=true;
  19.             }else{
  20.                 play();
  21.                 stopped=false;
  22.             }
  23.         }
  24.     };
  25.     Mouse.addListener(controls);
  26. }
  27. "// Ajout des images successives avec un fade in/out
  28. ‘tailles’‘Content-type: application/x-shockwave-flash’

La visualisation

J’espère que cela vous a plu! 🙂

Tags: , , ,