How I Did It: scrivere un countdown in Flash

venerdì 14 settembre, 2007

Per la serie "How I Did It" (ovvero come lo feci) ecco come realizzare un countdown in Flash per visualizzare, partendo da un data, quanto giorni, ore, minuti e secondi mancano ad un evento! Nel filmato Flash qui sotto, ad esempio, vediamo quanti giorni mancano al primo dell'anno! Possono essere utilizzati i menu a tendina per selezionare un diversa data:

Loading Flash Player...

Creiamo tre combo day_cmb, month_cmb ed year_cmb e li inizializziamo:

Actionscript:
  1. // init combo
  2. import mx.controls.ComboBox;
  3. //
  4. for (var i = 1; i <32; i++) {
  5.     day_cmb.addItem(i, i);
  6. }
  7. var sm:Array = Array("Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre");
  8. for (var i = 0; i <12; i++) {
  9.     month_cmb.addItem(sm[i], i);
  10. }
  11. // potrei partire dall'anno attuale...
  12. for (var i = 2007; i <2020; i++) {
  13.     year_cmb.addItem(i, i);
  14. }
  15. // imposto la data al 1 gennaio 2008
  16. day_cmb.selectedIndex = 0; // -1
  17. month_cmb.selectedIndex = 0; // -1
  18. year_cmb.selectedIndex = 1;

Il cuore del sistema lo posizioniamo nell'evento onEnterFrame:

Actionscript:
  1. this.onEnterFrame = function() {
  2.     //
  3.     var today:Date = new Date();
  4.     var currentYear = today.getFullYear();
  5.     var currentTime = today.getTime();
  6.     //
  7.     var targetDate:Date = new Date(year_cmb.selectedItem.data, month_cmb.selectedItem.data, day_cmb.selectedItem.data);
  8.     var targetTime = targetDate.getTime();
  9.     //
  10.     var timeLeft = targetTime - currentTime;
  11.     //
  12.     var sec = Math.floor(timeLeft / 1000);
  13.     var min = Math.floor(sec / 60);
  14.     var hrs = Math.floor(min / 60);
  15.     var days = Math.floor(hrs / 24);
  16.     //
  17.     sec = String(sec % 60);
  18.     sec = (sec.length <2) ? "0" + sec : sec;
  19.     //  
  20.     min = String(min % 60);
  21.     min = (min.length <2) ? "0" + min : min;
  22.     //  
  23.     hrs = String(hrs % 24);
  24.     hrs = (hrs.length <2) ? "0" + hrs : hrs;
  25.     //  
  26.     days = String(days);
  27.     days = (days.length <2) ? "0" + days : days;
  28.     //
  29.     var counter:String = days + ":" + hrs + ":" + min + ":" + sec;
  30.     //
  31.     time_txt.text = counter;
  32. };

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

9 commenti a: “How I Did It: scrivere un countdown in Flash”

  1. 04 ott, 2007 Sam:

    Stavo cercando se ci sono bachi per quanto riguarda la gestione Date() di flash e Google mi ha portato qui. Stavo provando un contdown simile a questo e ho notato che sbagliava di un ora. Ma solo se di mezzo c'è un cambio mese; potete provarlo anche sopra. Aumentando di un mese (passando dall'attuale a quello successivo) non solo si incrementano i giorni (di 30 o 31 che sia) ma si incrementa anche l'ora di un unità... Baco o non baco?

  2. 10 ott, 2007 Sam:

    Ovviamente non ho calcolato il fuso orario... Errore mio...

  3. 13 ott, 2008 Una classe countDown in Javascript | Undolog.com:

    [...] post 3D CountDown con FIVe3D (vedi anche How I Did It: scrivere un countdown in Flash), veniva proposta una classe per la creazione di un oggetto CountDown in Actionscript, eccone una [...]

  4. 15 giu, 2009 Fabrizio:

    Salve, come faccio ad inserire la funzione ORA PRECISA dell'evento?
    Mi spiego:
    In questo countdown si puo' solo mettere una data GG/MM/HH come faccio a mettere l'ora precisa di quel giorno??

    Esempio:

    12 Gennaio 2009 ore 15,00

    Grazie

  5. 15 giu, 2009 Giovambattista Fazioli:

    @Fabrizio: nella riga 7 del secondo listato uso la new Date() per creare la data di arrivo del countdown. Come vedi, in questo esempio, vengono passati alla funzione costruttore l'anno, il mese e il giorno. Tuttavia la funzione costruttore di new Date(), come puoi verificare dall'Help di Flash, accetta ulteriori parametri (opzionali) come l'ora, minuti, secondi e millisecondi.

  6. 15 giu, 2009 Fabrizio:

    @Giovambattista Fazioli:
    Ok questo l'ho risolto, sono riuscito a mettere l'ora precisa, adesso mi servirebbe inserire un messaggio alla fine del countdown anzichè fare continuare il countdown, non so se sono stato chiaro.

    tipo alla fine del countdown mi piacerebbe che scrivesse OFFERTA SCADUTA.

    Grazie sempre

  7. 15 giu, 2009 Giovambattista Fazioli:

    @Fabrizio: anche questo è abbastanza semplice. Alla riga 10 viene valorizzata la variabile timeLeft, che rappresenta la differenza tra l'ora attuale e quella di destinazione. Quando questa variabile è uguale a zero (o è minore di zero) significa che il "tempo" è scaduto.

  8. 15 giu, 2009 Fabrizio:

    @Giovambattista Fazioli:

    perfavore potresti fare un esempio di come dovrebbe essere della riga 10 se alla fine del countdown volessi aggiungere OFFERTA SCADUTA.

    Grazie

    P.S. scusami ma sto iniziando ora ad usare flash..

  9. 17 giu, 2009 Fabrizio:

    @Giovambattista Fazioli:
    Non ci riesco proprio mannaggia a me.
    ascolta e se volessi fare fermare il countdown alla fine del conto alla rovescia che devo fare??

    Il mio attualmente quando raggiunge la fine del tempo continua a dare numeri con un segno meno che devo fare???

    Grazie sempre

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE:
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL