Outils pour utilisateurs

Outils du site


cours2009:multimedia:horloge

Horloge

Sur le modèle d'une horloge en JavaScript / CSS 3.0 (nécessite un navigateur récent).

Le but est d'obtenir par étape le résultat suivant :
L'extension Adobe Flash est nécessaire pour afficher ce contenu.

Comme point de départ prendre les images de l'horloge servant de modèle.

Travail

Basique

  • Mettre en place les éléments en réfléchissant bien aux origines des symboles et points de transformation des occurrences.
  • Fixer la cadence à 1 image par seconde.
  • Animer les secondes avec une interpolation de mouvement.
  • Faire de même pour les minutes.
  • Essayer de le faire avec les heures…

Tirer parti de Flash

  • Refaire l'aiguille des secondes en graphisme vectoriel.
    • Ajouter une ombre.
    • Ajouter du relief.
  • Refaire le fond en graphisme vectoriel.
    • Idem, mais facultatif, pour les aiguilles des heures et des minutes.

Animer par le code

Remplacer l'animation de l'aiguille des secondes par le code suivant :

addEventListener(Event.ENTER_FRAME,bougeSeconde);
 
function bougeSeconde(e:Event):void {
  var t:Date = new Date();
  var secondes:uint = t.getSeconds();
  seconde_mc.rotation = secondes*6;
}

Adapter ce code pour les minutes et les heures.

Plus loin...

Changer la cadence à 60 images par seconde. Que constatez-vous ?

Réfléchir sur la façon d’obtenir l'effet de battement de l'aiguille des secondes. Si vous avez une idée, je vous conseillerais et aiderais à la mettre en oeuvre.

cours2009/multimedia/horloge.txt · Dernière modification: 2010/02/22 23:00 (modification externe)