Outils pour utilisateurs

Outils du site


cours2009:multimedia:flip_clock_par_le_code

Flip Clock : "par le code"

L'extension Adobe Flash est nécessaire pour afficher ce contenu.

Attention : vérifier que vous avez bien vos notes de TD et l'animation de base faite par vos soins avant de commencer.

Plus bas dans la page, vous est fournis code pour la mise à jour de l'affichage en fonction de l'heure. Ne pas l'utiliser avant que cela soit clairement spécifié dans les consignes !

Travail

Faire chaque étape dans l'ordre et vérifier le résultat obtenu.

Organiser les Symboles

Organiser les symboles de la façon suivante :

  • Chiffre code : contiens le code pilotant l'animation (et une instance de Chiffre anim).
  • Chiffre anim : contient l'animation des quartes panneaux.
    • Pour le chiffre de départ : une instance de Chiffre bas et une de Chiffre haut.
    • Pour le chiffre d'arrivée : (idem) une instance de Chiffre bas et une de Chiffre haut.
  • Les symboles Chiffre bas et Chiffre haut comporte un champ texte dynamique pour que l'on puisse changer le chiffre affiché.

Nommer les occurrences

Pour pouvoir modifier les textes afficher sur les panneaux, vous devez nommer les occurrences des symboles comme montrer dans cet exemple :

Écrire du code pour modifier le texte affiché par l'animation de base et le tester (exemple) :

secondeUnitee_mc.animation_mc.departBas_mc.chiffre_txt.text = "1";
// ...

Faire des fonctions

Le but est de pouvoir changer le texte en appelant une fonction prenant un entier comme paramètre (exemple) :

function fixeDepart(n:uint):void {
	// ...
}
// ...

Placer ces fonctions sur le Symbole Chiffre code.

Tester ces fonctions en les appelant sur des occurrences :

secondeUnitee_mc.fixeDepart(1);
secondeUnitee_mc.fixeArrivee(2);
// ...

animVers(...)

Inclure la démarche de mise à jour dans le symbole en lui ajoutant une méthode animVers :

var depart:uint = 0;
var arrivee:uint = 0;
 
function animVers(n:uint):void {
	// ...
}

La tester :

secondeUnitee_mc.animVers(2);
// ...

Compléter l'horloge

Mettre en place les autres chiffres et tester le code qui suit.

Code utilisé pour afficher l'heure :

var unTimer:Timer = new Timer(1000);
unTimer.addEventListener(TimerEvent.TIMER, afficheHeure);
unTimer.start();
 
function afficheHeure(e:TimerEvent):void {
	var d:Date = new Date();
	var secondes:uint = d.getSeconds();
	var minutes:uint = d.getMinutes();
	var heures:uint = d.getHours();
	secondeUnitee_mc.animVers(unitee(secondes));
	secondeDizaine_mc.animVers(dizaine(secondes));
	minuteUnitee_mc.animVers(unitee(minutes));
	minuteDizaine_mc.animVers(dizaine(minutes));
	heureUnitee_mc.animVers(unitee(heures));
	heureDizaine_mc.animVers(dizaine(heures));
}
 
function unitee(n:uint):uint {
	return n % 10;
}
 
function dizaine(n:uint):uint {
	return n / 10;
	//return Math.floor(n / 10);
}

Optionnel

Utiliser un fichier de Classe

Version sous forme de Classe :
(à placer dans un sous dossier org/pracht/flipClock)

package org.pracht.flipClock {
 
	import flash.display.MovieClip;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	public class Horloge extends MovieClip {
 
		public var secondeUnitee:MovieClip;
		public var secondeDizaine:MovieClip;
		public var minuteUnitee:MovieClip;
		public var minuteDizaine:MovieClip;
		public var heureUnitee:MovieClip;
		public var heureDizaine:MovieClip;
 
		private var timer:Timer;
 
		public function Horloge() {
			timer = new Timer(1000/10);
			timer.addEventListener(TimerEvent.TIMER, afficheHeure);
			timer.start();
		}
 
		private function afficheHeure(e:TimerEvent):void {
			var d:Date = new Date();
			var secondes:uint = d.getSeconds();
			var minutes:uint = d.getMinutes();
			var heures:uint = d.getHours();
			secondeUnitee.animVers(unitee(secondes));
			secondeDizaine.animVers(dizaine(secondes));
			minuteUnitee.animVers(unitee(minutes));
			minuteDizaine.animVers(dizaine(minutes));
			heureUnitee.animVers(unitee(heures));
			heureDizaine.animVers(dizaine(heures));
		}
 
		private function unitee(n:uint):uint {
			return n % 10;
		}
 
		private function dizaine(n:uint):uint {
			return n / 10;
			//return Math.floor(n / 10);
		}
 
	}
}

Pour utiliser ce code, il est nécessaire de décocher l'option : “Déclarer automatiquement les occurrences de scène”.
Déclarer automatiquement les occurrences de scène

Transformer votre code en version Objet

Supprimer le Symbole Chiffre code et le remplacer par une Classe.

Faire ses propres objets

Faire un symbole Afficheur qui contient deux Chiffre.

Le doter d'une méthode ((affiche(…)) qui prend un nombre (à deux chiffres) et anime ses deux afficheurs en conséquence.

On doit pouvoir l'utiliser de la façon suivante :

var d:Date = new Date();
secondeAfficheur.affiche(d.getSeconds());
minuteAfficheur.affiche(d.getMinutes());
heureAfficheur.affiche(d.getHours());
cours2009/multimedia/flip_clock_par_le_code.txt · Dernière modification: 2010/03/29 22:00 (modification externe)