Articoli con Tag ‘Tutorials’


StageExt Class: filmati ridimensionabili in Flash

La tecnica del Fullsize (anticamera per il Fullscreen – di cui parleremo in seguito) era, fino a poco tempo fa, utilizzata soprattutto nelle applicazioni Flash (RIA), composte quindi da una più o meno complessa interfaccia utente, dove il contenitore (Adobe AIR, Browser o il Player stand-alone) ridimensionato dall’utente, costringeva ad un riposizionamento degli oggetti componenti il filmato. Al ridimensionamento del contenitore segue ovviamente una funzione di disegno o Refresh in grado di riposizionare i MovieClip o ridisegnare runtime l’interfaccia in base alle nuove dimensioni del contenitore. Oggi questa tecnica è utilizzata anche nei siti web più avanzati o articolati, rendondo l’interfaccia estremamente piì accattivante. L’implementazione di questa tecnica è abbastanza semplice e sfrutta sostanzialmente l’oggetto Stage nativo di Flash e introdotto con la versione MX. Per la sua implementazione ecco una classe che permette di ottenere le coordinate dell’area dello Stage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
 *
 * @file                StageExt.as
 * @author              Giovambattista Fazioli (g.fazioli@undolog.com)
 * @web                 http://www.undolog.com
 * @email               g.fazioli@undolog.com
 */
class StageExt {
    // release
    private var __release          :String = "1.0";
    // properties
    private var __movieWidth       :Number = 0;
    private var __movieHeight      :Number = 0;
    private var __left             :Number = 0;
    private var __right            :Number = 0;
    private var __top              :Number = 0;
    private var __bottom           :Number = 23;
    //
    function StageExt(w:Number, h:Number) {
        trace("StageExt::constructor");
        //
        __movieWidth = w;
        __movieHeight = h;
        //
        Stage.addListener(this);
    }
    /**
     * onResize() event
     */
    private function onResize() {
        trace("StageExt::onResize " + Stage.width + ", " + Stage.height);
        //
        var sw:Number = Math.round(Stage.width);
        var sh:Number = Math.round(Stage.height);
        var ow:Number = Math.round(this.__movieWidth);
        var oh:Number = Math.round(this.__movieHeight);
       
        // La coordinata x (in alto a sinistra)
       
        this.__left = -Math.floor(((sw - ow) / 2));
        this.__top = -Math.floor(((sh - oh) / 2));
       
        // La coordinata x (in alto a destra)
       
        this.__right = Math.round((sw + ow) / 2);
       
        // La coordinata y (in basso)
       
        this.__bottom = Math.round((sh + oh) / 2);
    }
    /**
     * Refresh()
     */
    public function Refresh() {
        onResize();
    }
    /**
     * Left - get
     */
    public function get Left():Number {
        return (__left);
    }
    /**
     * Top - get
     */
    public function get Top():Number {
        return (__top);
    }
    /**
     * Right - get
     */
    public function get Right():Number {
        return (__right);
    }
    /**
     * Bottom - get
     */
    public function get Bottom():Number {
        return (__bottom);
    }
    /**
     * MovieWidth - get/set
     */
    public function get MovieWidth():Number {
        return (__movieWidth);
    }
    public function set MovieWidth(v:Number) {
        __movieWidth = v;
    }
    /**
     * MovieHeight - get/set
     */
    public function get MovieHeight():Number {
        return (__movieHeight);
    }
    public function set MovieHeight(v:Number) {
        __movieHeight = v;
    }
}

Continua...

How I Did It: scrivere un countdown in Flash

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:

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

Il cuore del sistema lo posizioniamo nell’evento onEnterFrame:

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

Continua...

DatePicker con Prototype e Scriptaculous

image Un’interessante e utile libreria Javascript basata sull’accoppiata Prototype e Scriptaculous che permette di aggiungere la funzione di DatePicker (componente presente in ActionScript/Flash) in normali INPUT TEXT HTML.

La sua caratteristica Unobtrusive (non intrusiva) lo rende uno strumento ideale per espandere le funzionalità di un sito già precostituito. Per attivare la funzione di DatePicker basta aggiungere la classe “date” nel nostro TAG INPUT. Nel codice Javascript è possibile impostare una serie di parametri tra cui il suporto per la lingua italiana.

Ecco una porzione di codice esemplificativa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/scriptaculous.js"></script>
<script type="text/javascript" src="/datepicker.js"></script>
<style type="text/css">
@import("/css/datepicker.css");
</style>
<form>
  <input type="text" id="date-from" name="date-from" />
</form>
<script type="text/javascript">
     var dpck   = new DatePicker({
      relative  : 'date-from',
      language  : 'en'
      });
</script>

Continua...



Stop SOPA