Outils pour utilisateurs

Outils du site


cours2010: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 le résultat suivant :
L'extension Adobe Flash est nécessaire pour afficher ce contenu.

Travail préalable

Réaliser l'horloge sous Illustrator comme vu en TD et l'exporter pour Flash (fichier ”fla”).

N'oubliez pas :

  • Créer les Symboles sous Flash.
  • Nommer les occurrences des Symboles.

Travail

Vous allez réaliser 3 versions de l'horloge animée sous Flash. Pour chaque version vous démarrez d'une copie de l'export original.

Les 3 versions donnent un résultat semblable, mais apportent chacun des concepts différents. Il est important de faire les 3 et dans l'ordre pour bien saisir les concepts abordés.

Concepts de base

Vous devez démarrer avec la situation suivante :

  • Les claques servent à organiser le contenu.
    • C'est une bonne pratique de n'avoir qu'une occurrence d'un symbole par calque.
  • Les images sont les étapes de l'animation : l'intersection du temps (TimeLine) avec les calques.
    • Une image clef est marquée d'un point : cela symbolise la présence de contenus et/ou paramètres différents.
  • Ici vous avez :
    • Chaque calque comporte une image clef.
    • Chaque image clef contient l'occurrence d'un symbole.
    • Chaque occurrence d'un symbole à un nom (pour plus tard la désigné dans le code).
    • Les symboles exportés par Illustrator sont visibles dans la bibliothèque.
      • La motivation de ce principe (bibliothèque de symboles) est de permettre d'afficher plusieurs fois le même contenu (symbole).
    • Chaque occurrence d'un symbole est affichée à des positions et transformations différentes.

Travail :

  • Retrouvez dans l'interface de Flash les différentes palettes et les contenus indiqués dans la capture d'écran.
  • Essayez de placer d'autres occurrences des symboles sur la scène (contenu affiché).

Animation basique

Le but va être de faire tourner les aiguilles en commençant par celle des secondes.

Seront abordé, les notions basiques de transformations et d'interpolations de mouvement.

Transformations

Le but est de voir comment faire tourner l'aiguille.

  • Sélectionnez l'aiguille des secondes avec “l'outil de sélection” (V).
  • Afficher la palette “Transformer”.
    • Modifier la valeur “Faire pivoter”

Vous devez constater que l'aiguille tourne. Mais pas comme on le désirait (autour de son “axe”).

Il est nécessaire de donner à Flash l'axe de rotation désiré. Il est figuré (dans Flash) par le point de transformation. Pour l'éditer, on utilise l'outil de transformation libre.

Vous devez maintenant pouvoir faire tourner l'aiguille des secondes comme désiré.

Cette manipulation est à faire pour chaque aiguille. Vous pouvez ajouter des guides pour figurer l'axe de l'horloge.

Conseil : recherchez dans l'aide “occurrence d'un symbole” et “point de transformation”. Les premiers résultats trouvés devraient vous permettre d'approfondir les concepts (et être un peu plus autonome…).

Animation

Le but est d'animer la rotation en utilisant une interpolation de mouvement.

Mise en place d'une interpolation de mouvement

Une interpolation de mouvement permet de varier, au fil du temps, les paramètres d'affichage d'une occurrence d'un Symbole.

On peut la mettre en place d'un simple clic droit sur une image clef contenant un symbole :

Profiter qu'elle est crée pour indiquer que vous faire pivoter l'aiguille une fois.

Tester l'animation par CMD+ENTRER.

Le fond et les autres aiguilles clignotent. C'est normal, ce problème sera adressé plus tard.

Ajuster la vitesse et la durée d'animation

Les durées et vitesses d'une animation sont déterminées par deux paramètres :

  • Le nombre d'images.
  • Le nombre d'images par seconde.

L'aiguille des secondes doit faire un tour en 60 secondes (une minute).

On peut donc utiliser les paramètres suivants :

  • 60 images.
  • Cadence de une image par secondes.

Étendre le nombre d'images de l'interpolation de mouvement en faisant glisser son extrémité :

La cadence se règle par le panneau Propriétés quand la scène est sélectionnée (cliquer sur le fond en dehors de tout objet).
{{:cours2010:multimedia:fixer-image-par-secondes.png|}}

Tester l'animation par CMD+ENTRER. Et vérifier que l'aiguille des secondes fait bien un tour en 60 secondes.

Manipulation de la TimeLine

Le fond et les autres aiguilles disparaissent après la première image. En fait elles ne sont affichées que sur la première image.

La solution consiste à ajouter des images sur la TimeLine. Un raccourci clavier très pratique est la touche F5.

Sélectionner l'image (vide) à l'intersection du temps 60 et du calque “cadran”. Puis appuyer sur F5.

Le fond doit maintenant être présent sur toute la durée de l'animation (actuellement 60 images à une image par seconde).

La touche F5 set aussi à dupliquer les images (de la TimeLine) qui sont sélectionnées.

Travail : Mettre en place l'animation des minutes et des heures. Remarque, la touche F5 peut aider à créer rapidement un grand nombre d'images.

Finir l'animation

Mettre en place l'animation pour les minutes et les heures.

  • Utilisez F5 pour étendre les animations.
  • On se limitera à animer l'aiguille des Heures sur une heure (3600 secondes). En effet le nombre d'images (temps) est limité par Flash.
    • En une heure, l'aiguille des heures avance de 1/12 de tour, soit 30° (360/12).

Animation imbriquée

Le but est d'animer chaque aiguille indépendamment en plaçant l'animation dans un symbole.

Repartir de l'export initial.

Les manipulations sont identiques au travail précédant. La seule différence consiste à placer l'animation dans le Symbole :

  • Double clic sur une aiguille (1) pour éditer la symbole (2) (et non l'occurrence).
  • Ajouter dans le symbole l'interpolation de mouvement (3).
    • Flash affichera un message disant qu'il faut convertir en Symbole : simplement valider OK (4).

Faire de même pour les minutes et les heures.

Vous pouvez remarquer que :

  • Il n'est pas besoin d'animer les secondes sur plus de 60 images.
    • L'animation dans le symbole se répète par défaut.
  • Le fond n'a pas besoin d'être affiché sur plus d'une image.
    • Il est toujours présent sur la seule image du scénario principal.

Animation par le code

En partant bien de l'export initial.

Faire un calque nommé “Actions” et placer dedans le code suivant.

  var t:Timer = new Timer(1000);
  t.addEventListener(TimerEvent.TIMER,bougeAiguilles);
  t.start();
 
  function bougeAiguilles(e:Event) {
  	// temps courant
  	var t:Date = new Date();
  	// rotation des secondes
  	seconde.rotation = t.seconds*360/60;
  }

Vous devez constater que l'aiguille des secondes ne tourne pas comme désiré. Changer le point de transformation est sans effet. La raison est que quand on anime par le code, le seul point pris en compte est l'origine du Symbole.

Vous devez :

  • Éditer les symboles pour aligner l'axe des graphismes des aiguilles avec l'origine du Symbole.
  • Changer la position des occurrences des Symboles pour les aligner avec le centre de l'horloge.

Adapter le code pour les minutes et les heures :

  • Un tour = 360°
  • En combien de temps l'aiguille fait-elle un tour ?

Écrire ces points sur une feuille de papier ! Aucune aide ne sera fournie à qui écrit du code sans réfléchir.

cours2010/multimedia/horloge.txt · Dernière modification: 2011/01/23 23:00 (modification externe)