Problème de rafraîchissement sur un composant Horloge

Résolu
Venusx117 Messages postés 14 Date d'inscription mercredi 10 décembre 2003 Statut Membre Dernière intervention 19 juillet 2006 - 12 avril 2006 à 21:58
Venusx117 Messages postés 14 Date d'inscription mercredi 10 décembre 2003 Statut Membre Dernière intervention 19 juillet 2006 - 13 avril 2006 à 00:05
Bonjour,
Nouvel arrivant sur Flash8, je m'intéresse à la création de composants.
Ainsi, j'ai tenté de développer un composant Watch (montre) qui indique l'heure en temps réel (je sais, c'est évident)...
La version MovieClip ne me pose pas de problème ( quelques symboles, une boucle onEnterFrame, et le tour est joué ), mais en version composant, je ne vois pas comment implémenter le rafraîchissement dont bénéficie le MovieClip avec onEnterFrame.

Détail du composant: je me suis basé sur le didacticiel Dial de la documentation Flash...
Mon composant contient donc un WatchFinal, contenant lui même:
- le fond de ma montre (immobile et non-intéractive, je n'ai donc pas donné de nom d'instance)
- un MovieClip switchHour, un MovieClip switchMinute, un MovieClip switchSecond pour les aiguilles
- un MovieClip digit contenant une zone de texte "value" pour afficher l'heure... en version numérique

Mon code "Watch.as" est le suivant:

/* Importation du paquet pour référencer
* la classe directement */
import mx.core.UIComponent;

// Balise de métadonnées Event
[ Event( "change" ) ]
class Watch extends UIComponent {
/* Les composants doivent être déclarer pour être des
* composants à proprement parler dans la structure
* des composants */
static var symbolName:String = "Watch";
static var symbolOwner:Object = Watch;
var className:String = "Watch";

/* Les clips hourSwitch, minuteSwitch, secondSwitch et
* digit sont la représentation graphique du composant */
private var watch:MovieClip;
private var hourSwitch:MovieClip;
private var minuteSwitch:MovieClip;
private var secondSwitch:MovieClip;
private var digit:MovieClip;
private var boundingBox_mc:MovieClip;

/* _hour, _minute, et _second indique l'heure. La mise à jour
* de ces valeurs met à jour la position des aiguilles et le
* contenu de digit. */
private var __hour:Number = 0;
private var __minute:Number = 0;
private var __second:Number = 0;

/* Constructeur
* Lorsque cela est nécessaire pour toutes les classes, les
* composants v2 exigent que le constructeur soit vide avec des
* arguments zéro.
* L'initialisation a lieu dans une méthode d'initialisation
* requise init() une fois que l'occurence de classe a été
* construite. */
function Watch() {}

/* Code d'initialisation:
* La méthode d'initialisation init() est requise pour les
* composants v2. Elle doit également à son tour appeler sa méthode
* init() de classe parent avec super.init()
* La méthode d'initialisation init() est requise pour les composants
* étendant UIComponent. */
function init():Void {
super.init();
this.useHandCursor = false;
this.boundingBox_mc._visible = false;
this.boundingBox_mc._width = 0;
this.boundingBox_mc._height = 0;
}

/* Créez des objets enfants nécessaires au démarrage:
* La méthode createChildren() est requise pour les composants
* étendant UIComponent. */
public function createChildren():Void {
this.watch = createObject( "WatchFinal", "watch", 10 );
this.onEnterFrame = function() { trace( "yo" );this.updateTime(); };
this.size();
}

/* La méthode de dessin draw() est requise pour les composants v2.
* Elle est invoquée une fopis que le composant a été invalidé par une
* personneappelant invalidate(). Ceci est mieux que de redessiner depuis
* la fonction set() pour _hour, _minute, et _second, car s'il existe
* d'autres propriétés, il est préférable de rassembler les modifications
* dans un nouveau dessin plutôt que de les faire toutes individuellement.
* Cette approche fournit davantage d'efficacité et une meilleure centralisation
* du code. */
function draw():Void {
super.draw();
this.watch.secondSwitch._rotation = this.__second;
this.watch.minuteSwitch._rotation = ( this.__minute + this.__second / 60 ) * 6;
this.watch.hourSwitch._rotation = ( this.__hour + this.__minute / 60 + this.__second / 3600 ) * 30;
this.watch.digit.value.text = this.__hour + ":" + this.__minute + ":" + this.__second;
}

/* La méthode de rédimensionnement size() est invoquée lorsque la taille du
* composant change. Il s'agit d'une opportunité pour redimensionner les enfants et
* les graphiques de watch, hourSwitch, minuteSwitch, secondSwitch et digit.
* La méthode de dimensionnement size() est requise pour les composants étendant
* UIComponent. */
function size():Void {
super.size();
this.watch._width = this.width;
this.watch._height = this.height;
// Les différents éléments de watch sont redessinés si nécessaire
this.invalidate();
}

function setTime( hour:Number, minute:Number, second:Number ):Void {
this.__hour = hour;
this.__minute = minute;
this.__second = second;
invalidate();
}

function updateTime():Void {
/* if( ++this.__second == 60 ) {
this.__second = 0;
if( ++this.__minute == 60 ) {
this.__minute = 0;if( ++this.__hour 24 ) this.__hour 0;
}
}
*/
var myDate:Date = new Date();
this.setTime( myDate.getHours(), myDate.getMinutes() , myDate.getSeconds() );
invalidate();
}
}

3 réponses

Venusx117 Messages postés 14 Date d'inscription mercredi 10 décembre 2003 Statut Membre Dernière intervention 19 juillet 2006
13 avril 2006 à 00:05
C'est bon, j'ai trouvé.
A partir d'un code de tutorial Flex2 (http://www.macromedia.com/devnet/flex/articles/creating_comp.html ), j'ai pu corriger mon erreur
Je fournis le code si cela peut intéresser quelqu'un:
import mx.core.UIComponent;

class Watch extends UIComponent {
static var symbolName:String = "Watch";
static var symbolOwner:Object = Watch;
var className:String = "Watch";

private var watch:MovieClip;
private var hourSwitch:MovieClip;
private var minuteSwitch:MovieClip;
private var secondSwitch:MovieClip;
private var digit:MovieClip;
private var boundingBox_mc:MovieClip;

private var __hour:Number = 0;
private var __minute:Number = 0;
private var __second:Number = 0;

function Watch() {}

function init():Void {
super.init();
this.useHandCursor = false;
this.boundingBox_mc._visible = false;
this.boundingBox_mc._width = 0;
this.boundingBox_mc._height = 0;
}

public function createChildren():Void {
this.watch = createObject( "WatchFinal", "watch", 10 );
this.size();
}

function draw():Void {
super.draw();
this.watch.secondSwitch._rotation = this.__second * 6;
this.watch.minuteSwitch._rotation = ( this.__minute + this.__second / 60 ) * 6;
this.watch.hourSwitch._rotation = ( this.__hour + ( this.__minute + this.__second / 60 ) / 60 ) * 30;
this.watch.digit.value.text = this.__hour + ":" + this.__minute + ":" + this.__second;
}

function size():Void {
super.size();
this.watch._width = this.width;
this.watch._height = this.height;
this.invalidate();
}

[ ChangeEvent( "changeTime" ) ]
function updateTime():Void {
var myDate:Date = new Date();
this.setTime( myDate.getHours(), myDate.getMinutes() , myDate.getSeconds() );
this.__hour = myDate.getHours();
this.__minute = myDate.getMinutes();
this.__second = myDate.getSeconds();
invalidate();
}
}
3
Venusx117 Messages postés 14 Date d'inscription mercredi 10 décembre 2003 Statut Membre Dernière intervention 19 juillet 2006
12 avril 2006 à 22:03
oups, petit correctif... la fonction "
this.onEnterFrame = function() { trace( "yo" );this.updateTime(); };"

se trouvait initialement à la fin de la fonction init()

Désolé...
0
Venusx117 Messages postés 14 Date d'inscription mercredi 10 décembre 2003 Statut Membre Dernière intervention 19 juillet 2006
12 avril 2006 à 22:40
J'ai corrigé et raccourci le code... en testant j'ai remarqu" que la montre se met bien à jour quand on clique furieusement dessus... curieux

import mx.core.UIComponent;

class Watch extends UIComponent {

static var symbolName:String = "Watch";

static var symbolOwner:Object = Watch;

var className:String = "Watch";

private var watch:MovieClip;

private var hourSwitch:MovieClip;

private var minuteSwitch:MovieClip;

private var secondSwitch:MovieClip;

private var digit:MovieClip;

private var boundingBox_mc:MovieClip;

private var __hour:Number = 0;

private var __minute:Number = 0;

private var __second:Number = 0;

function Watch() {}

function init():Void {

super.init();

this.useHandCursor = false;

this.boundingBox_mc._visible = false;

this.boundingBox_mc._width = 0;

this.boundingBox_mc._height = 0;

}

public function createChildren():Void {

this.watch = createObject( "WatchFinal", "watch", 10 );

this.size();

}

function draw():Void {

super.draw();

this.watch.secondSwitch._rotation = this.__second * 6;

this.watch.minuteSwitch._rotation = ( this.__minute + this.__second / 60 ) * 6;

this.watch.hourSwitch._rotation = ( this.__hour + ( this.__minute + this.__second / 60 ) / 60 ) * 30;

this.watch.digit.value.text = this.__hour + ":" + this.__minute + ":" + this.__second;

}

function size():Void {

super.size();

this.watch._width = this.width;

this.watch._height = this.height;

this.invalidate();

}

function setTime( hour:Number, minute:Number, second:Number ):Void {

this.__hour = hour;

this.__minute = minute;

this.__second = second;

invalidate();

}

function updateTime():Void {

var myDate:Date = new Date();

this.setTime( myDate.getHours(), myDate.getMinutes() , myDate.getSeconds() );

invalidate();

}

function onEnterFrame() {

this.updateTime();

}

}
0
Rejoignez-nous