Creare MovieClip modali in TopMost
Lunedì 12 Novembre, 2007Illustrerò una tecnica per realizzare simboli (MovieClip) modali da usare similmente ai componenti Alert e Window di Flash. L'obiettivo è quello di mostrare un MovieClip sopra tutti gli altri, disabilitando - anche - l'accesso all'area sottostante e qualsiasi altro oggetto/componente presente. Ad essere sincero ho realizzato tutto ciò eseguendo un po' di reverse engineering dai codici Adobe, che sono in chiaro! Non ho proprio resistito 
L'artefizio che si usa, per disabilitare qualsiasi interfaccia presente al di sotto del nostro MovieClip, è quella di creare un MovieClip trasparente che prenda tutta l'area dello stage. A questo MovieClip, che non sarà praticamente visibile, si aggancia un metodo "nullo" sull'evento onRelease, stando attenti ad impostare la proprietà useHandCursor a false.
Prima di tutto creiamo un filmato con una qualsiasi interfaccia nello stage principale:
Questa è composta da un TextField, un TextInput e un bottone usato aprire il nostro MovieClip modale: il nostro popUp personalizzato.
Quando andremo ad aggiungere il nostro simbolo tramite attachMovie() quello che vedremo sarà:
Ho lasciato in rosso (alpha=10) il MovieClip fantasma che blocca l'interfaccia sottostante, così da essere visto. Il nostro simbolo può essere fatto in qualsiasi modo, basta impostare nelle proprietà un identificatore (ad esempio moviemodal) e la classe 2.0 a MovieClipModal:
Ecco la classe MovieClipModal:
-
/*
-
**
-
** file : MovieClipModal.as
-
** Author : Giovambattista Fazioli (g.fazioli@undolog.com)
-
** Web : http://www.undolog.com
-
** Email : g (dot) fazioli (at) undolog (dot) (com)
-
** Created : 08/11/2007 23.57
-
** Modified : 08/11/2007 23.57
-
**
-
**
-
*/
-
import mx.managers.DepthManager;
-
//
-
class MovieClipModal extends MovieClip {
-
//
-
private var __release:String = "1.0";
-
//
-
private var __modal_mc:MovieClip;
-
//
-
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 = 0;
-
//
-
function MovieClipModal() {
-
Stage.scaleMode = "noscale";
-
Stage.addListener(this);
-
//
-
onLoad = _onLoad;
-
onUnload = _onUnload;
-
//
-
__movieWidth = Stage.width;
-
__movieHeight = Stage.height;
-
}
-
/*
-
** _onLoad() - wrap onLoad MovieClip
-
*/
-
private function _onLoad() {
-
//Key.addListener(this);
-
//
-
__modal_mc = _root.createEmptyMovieClip("__modal_mc", DepthManager.kTopmost);
-
__modal_mc.clear();
-
__modal_mc.beginFill(0xff0000, 100);
-
__modal_mc.moveTo(0, 0);
-
__modal_mc.lineTo(100, 0);
-
__modal_mc.lineTo(100, 100);
-
__modal_mc.lineTo(0, 100);
-
__modal_mc.endFill();
-
//
-
__modal_mc.setDepthBelow(this);
-
__modal_mc._alpha = 10;
-
//_global.style.modalTransparency;
-
__modal_mc.tabEnabled = __modal_mc.useHandCursor = false;
-
//
-
__modal_mc.onRelease = function() {};
-
//
-
onResize();
-
}
-
/*
-
** _onUnload() - wrap onUnload MovieClip
-
*/
-
private function _onUnload() {
-
__modal_mc.removeMovieClip();
-
}
-
/*
-
** onKeyDown - wrap Key
-
*/
-
private function onKeyDown() {
-
if (Key.getCode() == Key.TAB) {
-
//Selection.setFocus();
-
}
-
}
-
/********************************************************************************************
-
** onResize() event
-
********************************************************************************************/
-
private function onResize() {
-
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);
-
//
-
__modal_mc._x = -Math.floor(((sw - ow) / 2));
-
__modal_mc._y = -Math.floor(((sh - oh) / 2));
-
__modal_mc._width = Stage.width;
-
__modal_mc._height = Stage.height;
-
}
-
}
Questa classe è solo a titolo di esempio e può essere espansa e migliorata. Tuttavia così com'è funziona egregiamente. Di particolare interesse l'uso del DepthManager per il posizionamento a livello di profondità del nostro MovieClip modale, grazie alla costante kTopmost (righe 43 e 52).
Notare anche la presenza (commentata in questa versione) alle righe 41 e 70 di un aggiuntivo gestore per la tastiera. Il nostro popUp, infatti, contiene un bottone che elimina un possibile imprevisto in questo sistema. L'aggiunta del MovieClip fantasma (righe dalle 43 alla 57) e l'artefizio legato all'evento onRelease(), non impediscono alcuni movimenti da tastiera come la pressione del tasto TAB. In alcuni casi, quindi, potrebbe essere necessario intercettare preventivamente attività da tastiera per dirottarle in altri luoghi, come ad esempio ristabilire il fuoco ad un controllo interno al nostro MovieClip modale.
upnews.it ha detto:
undolog » Blog Archive » Creare MovieClip modali in TopMost…
Illustrerò una tecnica per realizzare simboli (MovieClip) modali da usare similmente ai componenti Alert e Window di Flash. L’obiettivo è quello di mostrare un MovieClip sopra tutti gli altri, disabilitando - anche - l’accesso all’area sottosta…