S'inscrire |

 
TEAM
Avatar de Smike
Smike est déconnecté Smike est un Homme 05/02
XP de Smike 3 419 Nombre total de messages de Smike
Voir le profil Facebook de Smike Voir le compte Twitter de Smike Voir le compte DeviantART  de Smike
Administrateur
  #1 (permalink)  
Vieux 16/11/2010, 18h25
Wink Un Compte à rebours pour 2011 (AS3)

Ce tuto vous permet de réaliser un compte à rebours qui vous souhaitera la bonne année une fois le décompte achevé ! Comme vous pouvez le voir ci-dessous :



Etape 1
Créer un nouveau fichier flash (ActionScript 3.0) et l'enregistrer-sous : countdown.fla.

Etape 2
Sur la première image, créez 4 textes dynamiques qui permettront d'afficher les Jours, heures, minutes et secondes restants.

Donnez-leur le nom d'occurrence : "day_txt", "hour_txt", "min_txt", "sec_txt".

Etape 3

Sur la 2ème image, créer une image-clé vide et mettre le contenu ce que vous voulez afficher lorsque le compte à rebours est terminé.
Ici je ne met qu'une "Bonne anneé 2011 !!!"

Sur la première image sélectionnée Ouvrez le panneau Actions (F9).
Mettre un stop(); et nous allons initialiser les 3 variables Mois,Jours et heures.
Puis la Date de fin du compte à rebours avec finalDate
Notez que les Mois en AS3 commence par 0, c'est pourquoi nous mettons mois - 1.

Ensuite, créez un Timer et réglez ses paramètres à 1000 (1000 ms = 1s). Ajouter un écouteur d'événements minuterie et appelez la méthode start ().

ActionScript Code:
  1. var year:Number = 2010;
  2. var month:Number = 1;
  3. var day : Number = 1;
  4.  
  5. var finalDate:Date = new Date(year,month-1,day);
  6.      
  7. var timer:Timer = new Timer(1000);
  8. timer.addEventListener(TimerEvent.TIMER, updateTime);
  9. timer.start();

Etape 4
Dans la fonction updatetime qui gère l'événement Timer, créer un objet nouvelle date, pour stocker la date du jour qui sera mis à jour chaque seconde.
Pour calculer le temps restant, nous nous contentons de faire la différence entre la date de clôture et la date actuelle.

ActionScript Code:
  1. function updateTime(e:TimerEvent):void{
  2.  
  3. var now:Date = new Date();
  4. var remainTime:Number = finalDate.getTime() - now.getTime();
  5.  
  6. }

Etape 5

Toujours à l'intérieur de la fonction updatetime, nous vérifions si le temps restant est supérieur à 0. Si oui, nous faisons une série de calculs pour récupérer les jours, heures, minutes et secondes restantes.
En outre, nous vérifions si les numéros sont 2 chiffres afin que nous puissions ajouter un 0 avant ceux à 1 chiffre.
Enfin nous affichons les 4 blocs des 4 textes dynamiques respectifs.

ActionScript Code:
  1. if (remainTime >0) {
  2.  
  3. var secs:Number = Math.floor(remainTime/1000);
  4. var mins:Number = Math.floor(secs/60);
  5. var hours:Number = Math.floor(mins/60);
  6. var days:Number = Math.floor(hours/24);
  7.  
  8. var secsText:String = (secs%60).toString();
  9. var minsText:String = (mins%60).toString();
  10. var hoursText:String = (hours%24).toString();
  11. var daysText:String = days.toString();
  12.  
  13. if (secsText.length < 2) {secsText = "0" + secsText;}
  14. if (minsText.length < 2) {minsText = "0" + minsText;}
  15. if (hoursText.length < 2) {hoursText = "0" + hoursText;}
  16. if (daysText.length < 2) {daysText = "0" + daysText;}
  17.  
  18. day_txt.text = daysText;
  19. hour_txt.text = hoursText;
  20. min_txt.text = minsText;
  21. sec_txt.text = secsText;
  22. }

Etape 6

Si le temps restant est <= 0 on enlève l'écouteur, On arrêter le chronomètre et on afficher la deuxième image pour vous souhaiter une "Bonne anneé 2011 !!!

Voici le code final, tester votre film pour le voir en action (Ctrl+ENTRER).

ActionScript Code:
  1. stop();
  2.  
  3. var year:Number = 2011;
  4. var month:Number = 1;
  5. var day : Number = 1;
  6.  
  7. var finalDate:Date = new Date(year,month-1,day);
  8.  
  9. var timer:Timer = new Timer(1000);
  10. timer.addEventListener(TimerEvent.TIMER, updateTime);
  11. timer.start();
  12.  
  13. function updateTime(e:TimerEvent):void{
  14.    
  15.     var now:Date = new Date();
  16.     var remainTime:Number = finalDate.getTime() - now.getTime();
  17.    
  18.     if (remainTime >0) {
  19.        
  20.         var secs:Number = Math.floor(remainTime/1000);
  21.         var mins:Number = Math.floor(secs/60);
  22.         var hours:Number = Math.floor(mins/60);
  23.         var days:Number = Math.floor(hours/24);
  24.        
  25.         var secsText:String = (secs%60).toString();
  26.         var minsText:String = (mins%60).toString();
  27.         var hoursText:String = (hours%24).toString();
  28.         var daysText:String = days.toString();
  29.        
  30.         if (secsText.length < 2) {secsText = "0" + secsText;}
  31.         if (minsText.length < 2) {minsText = "0" + minsText;}
  32.         if (hoursText.length < 2) {hoursText = "0" + hoursText;}
  33.         if (daysText.length < 2) {daysText = "0" + daysText;}
  34.        
  35.         day_txt.text = daysText;
  36.         hour_txt.text = hoursText;
  37.         min_txt.text = minsText;
  38.         sec_txt.text = secsText;
  39.     }
  40.    
  41.     else {
  42.         timer.removeEventListener(TimerEvent.TIMER, updateTime);
  43.         timer.stop();
  44.         gotoAndStop(2);
  45.     }
  46.    
  47. }

Télécharger la source en .fla : ici
Réponse avec citation
TEAM
Avatar de Exta
Exta est déconnecté Exta est un Homme 10/04
XP de Exta 504 Nombre total de messages de Exta
Super Moderateur
  #2 (permalink)  
Vieux 16/11/2010, 20h43
tres bon tuto même si je comprend pas tout
En vidéo ca pourrait être super
Réponse avec citation
Réponse

Tags
compte a rebours, flash, tutoriel

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 06h15.