jeudi 20 septembre 2007

De l'art de perdre son temps

Le widget est à la mode. La pendulette personnalisée est en bonne place. Voici la mienne. En théorie, ce petit bidule ne devait me prendre que quelques minutes à programmer. Tu parles ! Plusieurs heures après et un code source de la taille d’une encyclopédie, je faisais moins le malin. Construire une application s’inspirant des horloges électriques en vogue dans les années soixante qui utilisaient des rouleaux pilotés en cascade posait plus de problèmes que d’afficher l’heure avec une simple ligne de code : get.Date().toString() ;

J’avais décidé de partir de bandeaux chiffrés verticaux parallèles synchronisés au timer du Pc avec comme challenge : créer un effet de rotation fluide de l'affichage.

Premier écueil : la fonction appelant le timer vous sort des valeurs brutes omettant les zéros du chiffre des dizaines. On peut travailler sur la fonction transformant l’heure en chaîne de caractères qui les affiche mais cela alourdit le code. Bon, j’ai trouvé le subterfuge en utilisant l’opérateur modulo (%) qui fournit le reste d’une division. Ainsi, 8(heures) 7 (minutes) 5 (secondes) peut se transformer facilement en 08 07 05 : le second chiffre des couples est le modulo du nombre et le premier est obtenu en divisant le nombre auquel on soustrait le modulo puis qu’on divise par 10. On récupère ainsi les zéros manquants.

Deuxième écueil : que faire quand la bande arrive en bout de défilement. Il faut créer une fonction d’ajustement qui la remet en position zéro. Les bandeaux de deux kilomètres de long sont une solution de butor !

Le troisième "chmilblic", celui qui m’a poussé dans mes derniers retranchements : créer un défilement fluide. Les machines actuelles sont furieusement véloces. Soit le bandeau avait déjà disparu, soit il se trouvait mal calé, soit j'obtenais un mouvement saccadé comme sur mon exemple ou j’ai conservé le déclic des secondes, présent sur ma pendulette de table de nuit de l’époque évoquée!

L’astuce qui a heureusement réduit la taille du code source à quelques lignes était : à 59 secondes timer faire tourner le ou les rouleaux nécessaires pendant une seconde et recaler les chiffres au bout de ce laps de temps. Le mouvement fluide est apporté par la fonction " onEnterFrame" qui contrôle un clip en continu tant que celui-ci est présent à l’écran. Quand les secondes sont à 0, on appelle la fonction d’ajustement des chiffres du cadran. Ce dernier sert de masque aux bandeaux.

Belle illustration de comment perdre son temps !

Le code et la démonstration sans masque sur cette page qui vous propose en sus le téléchargement d'un zip incluant code source et fichier SWF que vous pouvez utiliser pour vos pages. Ceci est une ébauche à modifier à votre convenance si vous programmez en Flash.

3 commentaires:

  1. je suis fan, tu imagines ;)
    belle idée aussi de n'afficher que les multiples de 5 secondes. C'est très troublant...

    RépondreSupprimer
  2. Et pour l'âge du capitaine ?

    RépondreSupprimer
  3. Proc> Pô pôssible. Tu as abandonné la grange jurassienne de l'ermite? Content de ton message. Ma pendulette orange fluo des sixties affichait effectivement les "5" et berçait mon endormissement du feulement des rouleaux. Le grand spectacle se déroulait quand les 4 rouleaux couinaient ensemble pour une rotation magestueuse imparable affichant 4 chiffres identiques. Cette application peut servir de base à un bandit manchot en plus !
    Ali> Comme d'hab on divise par racine de 2... Suis allé faire un tour sur le site du lycée Malraux de Rabat. J'attends avec impatience les améliorations du futur webmaster. A voir quelques photos ensolleillées, j'imagine que le ciel bas lorrain te manque déjà.

    RépondreSupprimer

Commentaire de :