Forums Développement Multimédia

Aller au contenu

Horloge QlockTwo™

CODE Actionscript

10 réponses à ce sujet

#1 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 18 June 2013 - 13:16 PM

Bonjour,

Après l'agréable découverte des pendules QlockTwo, et au vu des prix pratiqués par ces designers, bien loin de mon budget actuel, je me suis lancé dans la création d'un AS3 pour recréer cette belle chose ...

Ci-dessous mon code et le swf correspondant.
Me direz-vous, pourquoi poster si cela fonctionne ?
  • Pour partager avec vous ce coup de coeur et le résultat en Flash
  • Pour avoir votre retour sur l'optimisation du code
En fait j'ai aussi une questions ... Est-ce que la gestion de l'arrondi vous paraît pertinente (affiche "ET QUART" de 14h13 à 14h17) ? Sinon comment verriez-vous le truc ?

Merci d'avance pour vos avis et critiques ... n'hésitez pas à tirer à vue :D je ne suis (pas trop) susceptible ...

Fichier(s) joint(s)


Modifié par Benzouye, 24 June 2013 - 13:14 PM.

Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#2 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 18 June 2013 - 13:43 PM

Bonjour Benzouye.

C'est une approche propre et précise, disons dans un esprit concret comme si on voulait l'exploiter en électronique. La beauté du rendu extérieur caché également à l'intérieur.


Mais… ;-)
Il y aurait une autre piste un peu opposée, qui serait de travailler les mots seuls à la charge de la vue de donner forme a ces mots.

(et il manque un T à Trois heures moins le quart)

#3 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 18 June 2013 - 14:13 PM

Voir le messagedldler, le 18 June 2013 - 13:43 PM, dit :

La beauté du rendu extérieur caché également à l'intérieur.
:oops: n'en fait pas trop ... mais merci !

Voir le messagedldler, le 18 June 2013 - 13:43 PM, dit :

travailler les mots seuls à la charge de la vue de donner forme a ces mots.
Pourrais-tu détailler un peu l'idée ?

Voir le messagedldler, le 18 June 2013 - 13:43 PM, dit :

(et il manque un T à Trois heures moins le quart)
Copié-collé dangereux ... c'est corrigé ;-)
Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#4 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 18 June 2013 - 16:07 PM

C'est la vision d'un graphiste, qui doit aussi avoir une certaine "beauté réaliste"
Je ferais des groupes de loupiotes, un groupe par mot.
Un cache très légèrement transparent avec les trous des lettres.

Avec ça, je pense qu'un genre de switch/case sur les minutes me permettrait d'allumer/éteindre les mots.
Un modulo de 5 sur les minutes me permettrait d'allumer les diodes dans les coins…
Si j'ai le temps…



- Afficher le SWF -
Fichier joint  clock.swf   16.9 Ko   28 téléchargement(s)

Fichier(s) joint(s)

  • Fichier joint  clock.fla   1.5 Mo   23 téléchargement(s)


#5 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 18 June 2013 - 18:20 PM

Yes !

Joindrais-tu le code pour les non équipés Adobe ? Siouplé ...

Je n'avais pas vu les diodes aux quatre coins sur les photos du site, puis je n'avais pas vu que des applis existent déjà pour iOS et Android ... toujours une guerre de retard ...
Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#6 dess.216

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 124 messages

Posté 18 June 2013 - 21:32 PM

pas mal ce truc !
après le souci c'est trouvé l'écran qui va bien.
t'as une idée ? gaffe au type de dalle, c'est les IPS qui ont les meilleurs angles de vision mais je crois qu'elle n'existe qu'a partir du 21 pouces 16/9

#7 Krevare

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 923 messages

Posté 18 June 2013 - 23:10 PM

Hello :)

Super sympa ces horloges !
Les vrais comme les virtuelles :)

Je me permets de coller le code de Didier à ta demande Benzouye, Je ne pense pas qu'il m'en voudra :)

var _date:Date;
var _heure:Array;
var _minute:Array;
var _diode:DisplayObject;
var _timer:Timer = new Timer(1,1);

var anciens:Array = [
          minuit,une,deux,trois,quatre,cinq,six,sept,huit,neuf,dix,onze,midi,
          moins,le_,dix_min,et,quart,pm,vingt,tiret,cinq_min,et,demie,am
        ];
                       
var heures:Array = [
         [minuit],[une,heure],[deux,heure,s],[trois,heure,s],
         [quatre,heure,s],[cinq,heure,s],[six,heure,s],
         [sept,heure,s],[huit,heure,s],[neuf,heure,s],
         [dix,heure,s],[onze,heure,s],[midi],
         [une,heure],[deux,heure,s],[trois,heure,s],
         [quatre,heure,s],[cinq,heure,s],[six,heure,s],
         [sept,heure,s],[huit,heure,s],[neuf,heure,s],
         [dix,heure,s],[onze,heure,s]
   ];

var minutes:Array = [
         [],[cinq_min],[dix_min],[et,quart],[vingt],
         [vingt,tiret,cinq_min],[et,demie],[moins,vingt,tiret,cinq_min],
         [moins,vingt],[moins,le_,quart],[moins,dix_min],[moins,cinq_min]
   ];

_timer.addEventListener(TimerEvent.TIMER,up);
_timer.start();

function up(event:Event):void
{
   _date = new Date();
   _heure = heures [_date.minutes < 35 ? _date.hours : _date.hours + 1];
   _minute = minutes [int(_date.minutes / 5)];
 
   affichage(_heure.concat(_minute),_date.minutes % 5,_date.hours < 12);

   _timer.reset();
   _timer.delay = (60 - _date.seconds) * 1000;
   _timer.start();
}

function affichage(nouveaux:Array,minutes_sup:int,avant_midi:Boolean):void
{
  for each(_diode in anciens) _diode.visible = false;
  for each(_diode in nouveaux) _diode.visible = true;
  anciens = nouveaux;
  var i:int = 0;
  for each(_diode in [m1,m2,m3,m4]) _diode.visible = i++ < minutes_sup;
  am.visible = avant_midi;
  pm.visible = !avant_midi;
}

En revanche, il y'a un soucis je pense, "heure" est toujours affiché.
Ce qui donne par exemple :
-------------------------
IL EST
MINUIT
HEURES

CINQ
AM

----------------------

Il faudrait virer "AM" et "HEURE" non ?

Fred.

#8 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 19 June 2013 - 07:54 AM

Voir le messageKrevare, le 18 June 2013 - 23:10 PM, dit :

En revanche, il y'a un soucis je pense, "heure" est toujours affiché.

Oui, c'est pour cela que dans mon code j'ai rajouté :
if ( heure != 12 || heure != 0 ) afficheMot ( motHeure );

Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#9 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 20 June 2013 - 08:23 AM

Suite aux diverses remarques j'ai ajouté les 4 leds pour les minutes et amélioré un peu le code avec les apports de Didier (notamment sur l'arrondi).
Je vous joint la classe et le swf sur le premier message.

Merci pour ces échanges.
Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#10 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 20 June 2013 - 13:05 PM

Hello.

je suis entré un peu plus en avant dans ton code.
Et j'aurais 2 remarques :
1 point important
et quelques autres beaucoup moins.

Le premier : tu travailles sur l'enterFrame. Ça, ça consomme beaucoup, pour une horloge qui ne se met à jour qu'une fois par minute.
À 60 images/seconde, ça te fait 3600 événements + fonction de rappel quand une seule est utile.
Je sais, ce n'est pas un prog qui consomme beaucoup, mais pour l'esprit, ça me semblerait important d'y réfléchir.


Les autres points :
- une usage abondant des if… Généralement ça montre que l'on essaye de suivre une logique d'étude au cas par cas, quand parfois, on peut travailler sur la logique du processus qui est généralement plus constructive. C'est par exemple ce qui m'a amené à stocker les phrases sur 24 heures plutôt que 12. Ça occupe sans doute un peu plus de mémoire, par contre ça évite beaucoup de calculs ensuite.
- des fonctions que j'appelle "d'usage" qui devrait permettre une simplification d'écriture mais j'ai du mal à en suivre la logique. C'est peut-être juste une question de choix de nom des fonctions.

Si je trouve le temps je vais tenter une version tout code. Ce n'est pas mon habitude, mais ça permettrait de mieux voir ou on se rejoint et ou on diverge.
Dans l'idée je chercherais à faire :
1 - La construction
- la fabrication du plastique translucide et les lettres en défonce à l'aide d'un bitmapdata
- un autre bitmapdata pour une diode circulaire lumineuse
- puis des groupes de diodes pour chaque mot
2 - l'usage
- allumer les groupes de diodes ou les éteindre selon 24 entrées pour les heures et 12 entrées pour la minutes
- puis les détails : le am/pm et les minutes supplémentaires

A+

#11 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 24 June 2013 - 13:17 PM

J'ai corrigé un bug et reposté les fichiers corrigés sur le premier message ...
Lorsqu'il était plus de 23h34, au lieu d'afficher "minuit moins ..." mon code affichait "midi moins ..."

Cela boucle avec les commentaires de Didier sur le traitement par exception :

Voir le messagedldler, le 20 June 2013 - 13:05 PM, dit :

un usage abondant des if… Généralement ça montre que l'on essaye de suivre une logique d'étude au cas par cas, quand parfois, on peut travailler sur la logique du processus qui est généralement plus constructive. C'est par exemple ce qui m'a amené à stocker les phrases sur 24 heures plutôt que 12. Ça occupe sans doute un peu plus de mémoire, par contre ça évite beaucoup de calculs ensuite.

J'essaierais de m'attacher à recoder plus logiquement ... promis Didier :D
Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)