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;
    }
}

Tramite questa classe diventa semplice riposizionare MovieClip all’interno dell’area di Stage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var se:StageExt = new StageExt(320,256);
//
Stage.scaleMode = "noscale";
Stage.addListener(this);
//
MovieClip.prototype.move = function(x:Number, y:Number) {
  this._x = x; this._y = y;
}
//
function onResize() {
  trace("Custom Resize "+this+" - "+se.Left);
  //clip_mc._x = se.Left;
  //clip_mc._y = se.Top;
  clip_mc.move(se.Left, se.Top);
}

Nell’esempio le dimensione dello Stageoriginali sono 320×256. Queste vanno inserite e considerate in quanto Flash in modalità noScale centra il filmato all’interno del browser. Inoltre nel codice HTML bisogna impostare come dimensioni 100%, si aper la width che per l’heght; OBJECT ed EMBED.

Inoltre bisogna organizzare la gerarchia dei MovieClip in modo opportuno e considerare sempre che la posizione di un MovieClip diventra ora “relativa”.

3 commenti a: “StageExt Class: filmati ridimensionabili in Flash”

  1. 12 dic, 2007 undolog » Blog Archive » Fullscreen in Flash dal browser:

    [...] Il codice necessario per impostare il fullscreen è semplicissimo e sfrutta l’oggetto Stage discusso su questo Blog in StageExt Class: filmati ridimensionabili in Flash: PLAIN TEXT Actionscript: [...]

  2. 14 dic, 2008 Larry:

    Ciao,
    una domanda: dove dovrei inserire questi 2 script?

    Grazie,
    G.

    RispondiQuota
  3. 15 dic, 2008 Giovambattista Fazioli:

    @Larry:

    Ciao,
    una domanda: dove dovrei inserire questi 2 script?Grazie,
    G.

    Il primo “sorgente” è una classe che puoi inserire in qualsiasi punto del tuo codice tramite l’istruzione include. Il secondo sorgente è un’esempio del suo uso. Vedi Actionscript 3.0 for beginners: lesson #1 su come impostare un semplice progetto in Flash.

    RispondiQuota

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
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA