StageExt Class: filmati ridimensionabili in Flash
Martedì 16 Ottobre, 2007La 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:
-
/**
-
*
-
* @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:
-
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 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".
Ho anke io un blog ==> Se ti va visitalo :...
undolog » Blog Archive » Fullscreen in Flash dal browser ha detto:
[...] 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: [...]
Larry ha detto:
Ciao,
una domanda: dove dovrei inserire questi 2 script?
Grazie,
G.
Giovambattista Fazioli ha detto:
@Larry:
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.