Tutorials » Sviluppo » Internet » Flash » ActionScript

StageExt Class: filmati ridimensionabili in Flash

martedì 16 ottobre, 2007

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:

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

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

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

Nell'esempio le dimensione dello Stage originali sono 320x256. 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".

Post correlati

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

Tags: , , , , , , ,

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

  1. getAvatar 1.0
    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. getAvatar 1.0
    14 dic, 2008 Larry:

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

    Grazie,
    G.

    Rispondi Quota
  3. getAvatar 1.0
    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.

    Rispondi Quota

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