Tra le tante novità del FlashMX, una di quelle che lasciano spazio alle più interessanti prospettive di utilizzo, è l'aggiunta di tutta una serie di metodi dei movieclip, per il disegno, durante la riproduzione di un filmato, di linee, forme e riempimenti. I cosidetti Drawing Methods sono otto in tutto, e ne vediamo qui, a grandi linee, il funzionamento.
Premessa: essendo metodi dei movieclip, è conveniente creare un movieclip vuoto a cui appoggiarsi per l'applicazione dei metodi. Possiamo crearne uno via script con:
_root.createEmptyMovieClip(nomeMC,profondità);
e quindi, ad esempio:
_root.createEmptyMovieClip("clip",1);
1. lineStyle
nomeMC.lineStyle(spessore,colore,alpha);
Con questo metodo, stabiliamo le caratteristiche delle linee che verranno disegnate dal nostro movieclip. Spessore è un intero che ne stabilisce lo spessore, e va da 0 a 255 ( 0 è l'hairline ), mentre i valori eccedenti in un senso o nell'altro, vengono riportati a quelli limite. Colore è il colore della linea, in formato esadecimale, ad esempio 0xFF0000 per ottenere una linea rossa. Alpha, invece, è la proprietà di trasparenza della linea, e va da 0 a 100.
Ad esempio, per avere una linea spessa 10 punti, di colore blu, e con trasparenza al 50%, scriveremo:
_root.createEmptyMovieClip("clip",1);
clip.lineStyle(10,0x0000FF,50);
2. moveTo
nomeMC.moveTO(coordinataX,coordinataY);
Con questo metodo, spostiamo la posizione di disegno alle coordinate indicate da coordinataX e coordinataY, prese in relazione al punto di registrazione della timeline che contiene il movieclip. In questo modo, ad esempio:
_root.createEmptyMovieClip("clip",1);
clip.moveTo(100,100);
spostiamo la posizione di disegno alle coordinate 100,100 della _root (timeline che contiene il movieclip clip).
3. lineTo
nomeMC.lineTo(coordinataX,coordinataY);
Con il lineTo, spostiamo la posizione di disegno alle nuove coordinate, tracciando una linea congiungente i due punti, e con le caratteristiche indicate dal lineStyle
Mettendo assieme i tre metodi visti finora, tracciamo una linea di colore blu, spessore 10, alpha 50, dal punto di coordinate 100,100 della _root, al punto di coordinate 300,100.
_root.createEmptyMovieClip("clip",1);
clip.lineStyle(10,0x0000FF,50);
clip.moveTo(100,100);
clip.lineTo(300,100);
che per comodità cambieremo, con l'uso del with
_root.createEmptyMovieClip("clip",1);
with(clip){
lineStyle(10,0x0000FF,50);
moveTo(100,100);
lineTo(300,100);
}
ottenendo:
Naturalmente, è possibile usare il lineTo più volte, all'interno dello stesso script, creando così, ad esempio, un quadrato:
_root.createEmptyMovieClip("clip",1);
with(clip){
lineStyle(1,0x000000,100);
moveTo(10,10);
lineTo(90,10);
lineTo(90,90);
lineTo(10,90);
lineTo(10,10);
}
Lo stesso vale per il lineStyle, variando il tipo di tratto. Potremo creare un quadrato con i lati di colore e spessore diverso, ad esempio con:
_root.createEmptyMovieClip("clip",1);
with(clip){
moveTo(10,10);
lineStyle(1,0x000000,100);
lineTo(90,10);
lineStyle(2,0xFF0000,100);
lineTo(90,90);
lineStyle(4,0xFFCC00,100);
lineTo(10,90);
lineStyle(6,0xCCCCCC,100);
lineTo(10,10);
}
Cambiando dinamicamente i parametri usati con questi metodi, possiamo cambiare anche il disegno finale. Guardiamo questo filmato:
La funzione con cui gestire il movimento e la modifica della linea, è molto semplice:
function disegna(){
for(i = 1; i < 3; i++){
this["x" + i] = this["circ" + i]._x;
this["y" + i] = this["circ" + i]._y;
}
this.createEmptyMovieClip("clip", 1);
with(clip){
lineStyle(thi,col,alp);
moveTo(x1,y1);
lineTo(x2,y2);
}
}
Al richiamo della funzione, vengono create con un ciclo for 4 variabili: x1 e y1, che rappresentano le coordinate del primo punto (circ1), e x2 e y2, coordinate del secondo punto (circ2). Quando abbiamo le coordinate dei due punti, creiamo il movieclip vuoto, e tracciamo una linea che va dal primo punto al secondo punto.
Quindi, basta richiamare la funzione ogni volta che si sposta uno dei due punti (anche con uno startDrag), perchè la linea venga ritracciata, dando l'impressione di muoversi.
Allo stesso modo, si può notare come i prametri del metodo lineStyle, siano tre variabili, thi per lo spessore, col per il colore, alp per l'alpha. Cambiando le tre variabili, cambia lo stile della linea: quindi, per aggiornare il tutto, quando si clicca su uno dei pulsanti che regolano queste caratteristiche, viene impostata la variabile relativa, e richiamata la funzione.
A titolo d'esempio, lo script associato al pulsante per rendere la linea di colore blu, è:
on(release){
col = 0x000099;
disegna();
}
oppure:
blu.onRelease = function (){
col = 0x000099;
disegna();
};
sfruttando i nuovi metodi del FlashMX (blu è il nome di istanza del pulsante).
4. curveTo
nomeMC.curveTo(controlloX,controlloY,coordinataX,coordinataY);
Con questo metodo, tracciamo una linea curva dalla posizione di disegno al punto indicato dalla coordinataX e dalla coordinataY. Le curve sono di tipo bezier, quindi necessitano di un punto di controllo, indicato dalle coordinate controlloX e controlloY. Tutte le coordinate, come per il lineTo e il moveTo, sono date in relazione al punto di registrazione della timeline che contiene il movieclip a cui si appoggiano i metodi.
Ad esempio, tracciamo una linea curva dal punto 10,10 al punto 90,90 con controllo sul punto 80,20:
_root.createEmptyMovieClip("clip",1);
with(clip){
lineStyle(0,0x000000,100);
moveTo(10,10);
curveTo(80,20,90,90);
}
Lasciando invariati i punti di partenza e di arrivo, cambiando il punto di controllo, si cambia l'ampiezza e la forma della curva. Inoltre, è possibile utilizzare più curveTo esattamente come più lineTo all'interno dello stesso script.
In questo filmato, riutilizziamo la stessa funzione vista per il lineTo, aggiornata per tracciare la curva con il trascinamento di tre punti: circ 1 è la posizione di disegno, circ 2 il punto finale della curva, circ 3 il punto di controllo.
la funzione è:
function disegna(){
for(i = 1; i < 4; i++){
this["x" + i] = this["circ" + i]._x;
this["y" + i] = this["circ" + i]._y;
}
this.createEmptyMovieClip("clip", 1);
with(clip){
lineStyle(1,col);
moveTo(x1,y1);
curveTo(x3,y3,x2,y2);
}
}
Da notare: nell'ActionScript Reference della Macromedia, viene incredibilmente riportato il seguente script con questa didascalia, come esempio per la creazione di un cerchio con il curveTo.
"The following example draws a circle with a hairline-point, solid blue line and a solid red fill. "
_root.createEmptyMovieClip( "circle", 1 );
with ( _root.circle ){
lineStyle( 0, 0x0000FF, 100 );
beginFill( 0xFF0000 );
moveTo( 500, 500 );
curveTo( 600, 500, 600, 400 );
curveTo( 600, 300, 500, 300 );
curveTo( 400, 300, 400, 400 );
curveTo( 400, 500, 500, 500 );
endFill();
}
Questo è quello che si ottiene (leggermente rimpicciolito):
che con il cerchio ha non troppo da spartire. Infatti, non è possibile ottenere una simil-circonferenza con sole 4 curve bezier: ne servono almeno 8 (che poi sono le curve che usa il flash stesso per disegnare un cerchio). Un ottimo esempio di come creare qualcosa di molto simile ad un cerchio (lo stesso un'approssimazione, uno vero non si può ottenere con curve quadratiche) è il seguente, da una funzione di Den Ivanov:
MovieClip.prototype.drawCircle = function(x,y,radius, startAngle, endAngle, segments) {
Math.rad = Math.PI/180;
lineStyle(1, 0x000000, 100);
var segm = (endAngle-startAngle)/segments;
this.moveTo(x+radius*Math.cos(startAngle*Math.rad),
y+radius*Math.sin(startAngle*Math.rad));
for (var s = startAngle+segm; s<=endAngle+1; s += segm) {
var c_x = radius*Math.cos(s*Math.rad);
var c_y = radius*Math.sin(s*Math.rad);
var a_x = c_x+radius*Math.tan(segm/2*Math.rad)*Math.cos((s-90)*Math.rad);
var a_y = c_y+radius*Math.tan(segm/2*Math.rad)*Math.sin((s-90)*Math.rad);
this.curveTo(a_x+x, a_y+y, c_x+x, c_y+y);
}
}
// creazione del cerchio
this.drawCircle(200,200,100,0,360,8);
Decisamente meglio. Un'altra funzione dello stesso Ivanov, fa la stessa cosa con un trucco molto particolare: disegna una linea con il tratto molto grosso, lunga poche frazioni di pixel, e all'interno di essa un'altra linea, simulando un cerchio.
function drawCircle(x, y, radius, cWidth) {
mc = _root.createEmptyMovieClip("circle", 1);
mc.lineStyle(radius, 0x000000, 100);
mc.moveTo(x, y);
mc.lineTo(x, y+.15);
mc.lineStyle(radius-cWidth, 0x999999, 100);
mc.moveTo(x, y);
mc.lineTo(x, y+.15);
}
this.drawCircle(80,80,140,2)
Il risultato è praticamente identico. Per capire meglio cosa fa, allunghiamo la linea da 0.15 a 20.
5. beginFill
nomeMC.beginFill(RGB,alpha);
Con il beginFill, indichiamo il colore (RGB) in formato esadecimale, e la trasparenza del riempimento della porzione di filmato compresa tra le linee tracciate con il lineTo o il curveTo
6. endFill
nomeMC.endFill();
Con il richiamo di questo metodo, viene tracciata una linea tra il punto di arrivo del disegno e il punto iniziale, se non coincidono, e viene riempito lo spazio compreso tra le linee. Uniamo i due metodi, usando la funzione per il quadrato, creandone uno colorato:
_root.createEmptyMovieClip("clip",1);
with(clip){
lineStyle(1,0x000000,100);
beginFill(0xFFCC00, 100); // inizio riempimento
moveTo(10,10);
lineTo(90,10);
lineTo(90,90);
lineTo(10,90);
lineTo(10,10);
endFill(); // fine riempimento
}
7. beginGradientFill
nomeMC.beginGradientFill(tipo,colori,alpha,ratio,matrice< /i>);
Esattamente come per il beginFill, questo metodo stabilisce una serie di parametri relativi al riempimento della figura, solo che in questo caso si tratta di un gradiente, lineare o radiale. Per chiudere il riempimento, si usa lo stesso endFill().
- tipo: una stringa indicante il tipo di riempimento, che sarà o "linear", o "radial"
- colori: un array dei colori che compongono il gradiente, in formato esadecimale. Ad esempio, se vogliamo una sfumatura dal bianco al nero, avremo colori = [ 0xFFFFFF, 0x000000 ]; se vogliamo una sfumatura dal bianco al nero e poi al rosso, avremo: colori = [ 0xFFFFFF, 0x000000, 0xFF0000];
- alpha: un array contenente i valori di trasparenza dei colori appartenenti all'array precedente. Gli elementi dell'array, devono essere lo stesso numero di quello dei colori, quindi: alpha = [ 100, 100 ]; ad esempio nel primo caso, e alpha = [ 60, 80, 100 ]; nel secondo.
- ratio: un array contenente le proporzioni di distribuzione dei colori. Il valore, che va da 0 a 255, indica il punto dove il colore è al 100%.
Considerando un gradiente di tre colori, se ratio è: ratio = [ 0, 127, 255 ]; i tre colori saranno distribuiti uniformemente, uno a sinistra, uno al centro, una destra. In altro modo, ad esempio: ratio = [ 50, 220, 255 ]; i colori saranno tutti spostati verso destra, e i secondi saranno molto più vicini. Più che parole:
- matrice: il metodo può usare due tipi di matrice, alquanto diversi.
1° tipo:
matrice = { matrixType:"box", x:X, y:Y, w:W, h:H, r:R };
questo tipo è molto chiaro ed intuitivo.
matrixType = può essere solo "box".
X, Y= le coordinate dell'angolo superiore sinistro del gradiente, rispetto al punto di registrazione della timeline che contiene il movieclip.
W = larghezza del gradiente
H = altezza del gradiente.
R = angolo di rotazione del gradiente, espresso in radianti.
sia che si tratti del riempimento radiale, che di quello lineare. Ad esempio:
matrice = { matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI };
Mettendo assieme tutti i pezzi, creiamo un quadrato:
fillType = "radial";
colors = [ 0x000000, 0xEEEEEE ];
alphas = [ 100, 100 ];
ratios = [ 0, 255 ];
matrix = { matrixType:"box", x:0, y:0, w:150, h:100, r:0 };
_root.createEmptyMovieClip("clip", 1);
with(clip){
moveTo(0,0);
lineStyle(0,0x000000,0);
beginGradientFill(fillType, colors, alphas, ratios, matrix);
lineTo(150,0);
lineTo(150,150);
lineTo(0,150);
lineTo(0,0);
endFill();
}
// assegniamo a fillType il valore "radial" (tipo di gradiente)
fillType = "radial";
// creiamo l'array "colors", composto dai valori esadecimali dei
// due colori che comporranno il gradiente
colors = [ 0x000000, 0xEEEEEE ];
// creiamo l'array "alphas", contenente il livello di trasparenza
// dei due colori
alphas = [ 100, 100 ];
// creiamo l'array "ratios", contenenti la percentuale di
// distribuzione dei due colori
ratios = [ 0, 255 ];
// creiamo l'oggetto "matrix", contenente i valori per la
// posizione del gradiente, le sue dimensioni e rotazione
matrix = { matrixType:"box", x:0, y:0, w:150, h:100, r:0 };
// creiamo il movieclip vuoto
_root.createEmptyMovieClip("clip", 1);
// con il movieclip
with(clip){
// spostiamo la posizione di disegno al punto di coord. 0,0
moveTo(0,0);
// stabiliamo lo stile della linea, spessore 0 (hairline),
// colore nero, alpha 0
lineStyle(0,0x000000,0);
// iniziamo il riempimento, con i paramentri impostati prima
beginGradientFill(fillType, colors, alphas, ratios, matrix);
// creiamo il quadrato con il lineTo
lineTo(150,0);
lineTo(150,150);
lineTo(0,150);
lineTo(0,0);
// chiudiamo il riempimento
endFill();
}
Il risultato è questo:
Con il seguente filmato, impostiamo dinamicamente i valori appena visti:
7. beginGradientFill
2 ° tipo di matrice:
matrice = { a:A, b:B, c:0, d:D, e:E, f:0, g:G, h:H, i:1 };
Questo tipo di matrice per il metodo beginGradientFill
| a | b | c |
| d | e | f |
| g | h | i |
A = larghezza del gradiente, o coseno del radiante per le rotazioni
B = seno del radiante per le rotazioni
C = 0, non usata se non per le operazioni di rotazione e traslazione
D = altezza del gradiente, o coseno del radiante per le rotazioni
E = seno negativo del radiante per le rotazioni
F = 0, non usata se non per le operazioni di rotazione e traslazione
G = posizione orizzontale del centro del gradiente
H = posizione verticale del centro del gradiente
I = 1, non usata se non per le operazioni di rotazione e traslazione
matrice = { a:200, b:0, c:0, d:0, e:200, f:0, g:200, h:200, i:1 };
Questo si evince vagamente da alcuni prototipi pubblicati assieme ai FlashMX Sample della Macromedia, dal momento che la documentazione, in relazione al significato degli elementi, è alquanto lacunosa: alquanto, nel senso che non vengono assolutamente spiegati. E le possibili combinazioni di valori, anche considerando i due tipi di gradiente, radiale e lineare, non sono così facili da tracciare.
È interessante notare come rotazioni, in un senso o in un altro, provochino una deformazione del gradiente, che comunque rimane all'interno dei limiti verticali o orizzontali, a seconda dei casi (modificando il valore di B, il gradiente ruota in senso orario, schiacciandosi verticalmente, ma rimanendo all'interno delle parallele verticali imposte dal valore di A).
Mettiamo a confronto i due tipi di matrice per creare lo stesso riempimento, lineare e radiale.
Il codice è questo:
_root.createEmptyMovieClip("clip",1);
with (clip){
colors = [ 0xFFCC00, 0x0000FF, 0xFF0000 ];
alphas = [ 100, 100, 100 ];
ratios = [ 0, 127, 0xFF ];
lineStyle( 1, 0x000000 );
// in questa riga la matrice dei dati
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(0,0);
lineTo(100,0);
lineTo(100,100);
lineTo(0,100);
lineTo(0,0);
endFill();
}
Nel primo caso, alla riga commentata sostituiamo questa: matrix = { matrixType:"box", x:0, y:0, w:100, h:100, r:0 }; e nel secondo caso: matrix = { a:100, b:0, c:0, d:0, e:100, f:0, g:50, h:50, i:1};
Stessa cosa per il riempimento radiale:
Da notare come nel nel caso del riempimento lineare, le coordinate siano quelle dell'angolo superiore sinistro, del gradiente, mentre quelle del centro nel caso del riempimento radiale.
8. clear
nomeMC.clear();
Semplicemente, cancella linee e riempimenti associati al movieclip. Ad esempio:
Il codice del filmato è un semplice:
_root.createEmptyMovieClip("clip", 1);
clip._x = clip._y = 10
function draw(){
with ( clip){
lineStyle( 1, 0x000000 );
beginFill(0xFFCC00,100);
moveto(0,0);
lineto(100,0);
lineto(100,100);
lineto(0,100);
lineto(0,0);
}
}
function clean(){
clip.clear();
}
disegna.onRelease = function(){
draw();
}
cancella.onRelease = function(){
clean();
}
Alcuni semplici di cosa si può fare con i Drawing Methods.
1° esempio
this.createEmptyMovieClip("clip", 1);
this.oldX = this.newX = 200
this.onEnterFrame = function(){
x = _root._xmouse;
y = _root._ymouse;
if(y>0 && y<100){
oldX = newX;
newX = x;
disegna()
}
}
function disegna(){
with(clip){
if(Math.abs(x-oldX) < 100){
lineStyle(1,0x000000,(Math.abs(newX-oldX)))
moveTo(newX,1);
lineTo(oldX,99);
}
}
}
Sottoponiamo al this.onEnterFrame, la definizione di due variabili, "newX", la posizione del puntatore del mouse sull'asse delle X, e oldX, la posizione del puntatore nel rilevamento precedente.
Se la distanza è inferiore a 100, e se il mouse è all'interno del filmato, viene richiamata la funzione disegna(). La funzione, traccia la linea che attraversa lo stage e va da un punto all'altro, stabilendo anche l'alpha del tratto in base alla distanza.
2° esempio
// "flashguru" http://ww.flashguru.co.uk/
this.createEmptyMovieClip("draw",1);
draw.lineStyle(0,0x000000)
draw.onMouseDown = function(){
this.down = true;
this.begin = {x:this._xmouse,y:this._ymouse};
this.moveTo(this._xmouse,this._ymouse);
this.beginFill(0xEEEEEE,100)
}
draw.onMouseUp = function(){
this.lineTo(this.begin.x,this.begin.y);
this.down = false;
}
draw.onMouseMove = function(){
if(this.down){
this.lineTo(this._xmouse,this._ymouse);
}
}
3° esempio
Con una semplice funzione, creiamo un poligono inscritto in un cerchio, cambiando solo il numero dei lati:
k = 8;
Button.prototype.useHandCursor = false
Movieclip.prototype.rad = function(angolo){
return (Math.PI/180) * angolo;
};
Movieclip.prototype.zero = function(a){
return (a>9) ? a : "0" + a;
};
mio.createEmptyMovieClip("clip", 1);
Movieclip.prototype.poligono = function(lati,raggio){
ang = 360/lati;
with(mio.clip){
clear()
moveTo(raggio,0);
lineStyle(0,col);
beginFill(0xFFCC00,100);
for(i = 1; i < lati; i++){
cat1 = raggio*(Math.cos(rad(i*ang)))
cat2 = raggio*(Math.sin(rad(i*ang)))
lineTo(cat1,cat2);
}
endFill();
_rotation = -90
}
}
poligono(k,75)
giu.onRelease = function (){
if(k>3){
num = zero(--k);
poligono(k,75);
}
}
su.onRelease = function (){
if(k<30){
num = zero(++k);
poligono(k,75);
}
}
k = 8;
// disabilitiamo la manina su tutti i pulsanti
Button.prototype.useHandCursor = false
// creiamo una funzione che, dato un angolo, ce ne
// restituisce il corrispondente in radianti
Movieclip.prototype.rad = function(angolo){
return (Math.PI/180) * angolo;
};
// creiamo una funzione che, dato un numero, ce lo
// restituisce con uno zero davanti quando è inferiore
// a 10 (per il numero dei lati)
Movieclip.prototype.zero = function(a){
return (a>9) ? a : "0" + a;
};
// creiamo un movieclip vuoto, "clip", dentro il
// movieclip "mio"
mio.createEmptyMovieClip("clip", 1);
// creiamo la funzione per il poligono
// dati il numero dei lato e il raggio (fisso, in questo
// caso), stabiliamo l'ampiezza degli angoli corrispondenti
Movieclip.prototype.poligono = function(lati,raggio){
ang = 360/lati;
// con il movieclip mio.clip
with(mio.clip){
// cancelliamo le forme
clear()
// spostiamo la posizione di disegno alle coordinate
// corrispondenti al raggio e a 0
moveTo(raggio,0);
// settiamo lo stile della linea come "hairline" nero
lineStyle(0,0x000000);
// iniziamo il riempimento giallo
beginFill(0xFFCC00,100);
// con un ciclo for che va da 1 al numero dei lati
for(i = 1; i < lati; i++){
// assegniamo a cat1, cioè un cateto, il valore dato dalla
// formula cateto = ipotenusa*coseno(angolo adiacente),
// mentre a cat 2 secondo la formula
// cateto = ipotenusa*seno(angolo opposto)
cat1 = raggio*(Math.cos(rad(i*ang)))
cat2 = raggio*(Math.sin(rad(i*ang)))
// tracciamo la linea verso il punto dato dalle coordinate
lineTo(cat1,cat2);
}
// terminiamo il riempimento
endFill();
// ruotiamo il movieclip di -90° (per avere un
// vertice verso l'alto)
_rotation = -90
}
}
// tracciamo il primo poligono di lati 8, e raggio 75
// (k è definito all'inizio)
poligono(k,75)
// al pulsante "giu" associamo una funzione, al rilascio del tasto
// sinistro del mouse, per diminuire il valore di k (lati),
// aggiornare il valore nel campo di testo, e richiamare la funzione
// del poligono con i nuovi dati, se il valore di k è maggiore di 3
giu.onRelease = function (){
if(k>3){
num = zero(--k);
poligono(k,75);
}
}
// stessa cosa per il pulsante "su", solo che k deve essere minore di
// 30, e il valore viene aumentato
su.onRelease = function (){
if(k<30){
num = zero(++k);
poligono(k,75);
}
}
4° esempio
Button.prototype.useHandCursor = false
n = 1;
_root.createEmptyMovieClip("host", 1);
logoMX.setMask(host);
_root.onMouseDown = function(){
crea(_root._xmouse,_root._ymouse);
};
_root.onMouseUp = function(){
premuto = false;
};
_root.onEnterFrame = function (){
if(premuto)disegna();
};
_root.onMouseMove = function (){
if(premuto){
host["clip"+n]._x = _root._xmouse;
host["clip"+n]._y = _root._ymouse;
}
updateAfterEvent();
};
function crea(x,y){
i = 0;
n++;
host.createEmptyMovieClip("clip"+n, n);
host["clip"+n]._x = x;
host["clip"+n]._y = y;
host["clip"+n].createEmptyMovieClip("cube", 1);
premuto = true;
}
function disegna(){
with(host["clip"+n].cube){
_rotation = i++;
lineStyle(0, 0x000000, 0);
beginFill(0xFFFFFF,100)
moveTo(-i, -i);
lineTo(i, -i);
lineTo(i, i);
lineTo(-i, i);
lineTo(-i, -i);
endFill()
}
logoMX.setMask(host)
}
reset.onRelease = function (){
while(n-- > 2){
host["clip"+n].removeMovieClip()
}
};
Creiamo un movieclip vuoto, "host", che verrà posizionato alle coordinate 0,0 della root (in alto a sinistra). Quando clicchiamo sullo stage, dentro "host" creiamo un nuovo movieclip, "clip", che posizioneremo in coordinate variabili a seconda della posizione del puntatore del mouse. Con "cube", creato dentro "clip", disegniamo un quadrato con lato crescente di misura, a seconda del tempo premuto. Allo stesso tempo, ruotiamo "clip", e settiamo il movieclip "host" come maschera del movieclip "logoMX".
// disabilitiamo la manina su ogni pulsante
Button.prototype.useHandCursor = false
// assegniamo a "n" (profondità dei movieclip),
// il valore di 1 (aumenterà via via)
n = 1;
// creiamo nella root il movieclip "host"
_root.createEmptyMovieClip("host", 1);
// settiamo il movieclip "host" come maschera del
// movieclip logoMX (che sarà invisibile, dato che
// "host", per ora, è vuoto)
logoMX.setMask(host);
// alla pressione del mouse sullo stage, richiamiamo
// la funzione "crea", passando come parametri le
// coordinate del puntatore del mouse sullo stage
_root.onMouseDown = function(){
crea(_root._xmouse,_root._ymouse);
};
// al rilascio del pulsante del mouse, settiamo la
// variabile "premuto" come falsa
_root.onMouseUp = function(){
premuto = false;
};
// ad ogni riproduzione della root, se la variabile
// "premuto" è vera, richiamiamo la funzione disegna()
_root.onEnterFrame = function (){
if(premuto)disegna();
};
// ad ogni movimento del mouse, se la variabile "premuto"
// è vera, posizioniiamo il movieclip con il nome formato
// dalla stringa "clip" + il valore di "n", alle coordinate
// date dalla posizione del mouse ( e quindi i quadrati si
// sposteranno con il puntatore
_root.onMouseMove = function (){
if(premuto){
host["clip"+n]._x = _root._xmouse;
host["clip"+n]._y = _root._ymouse;
}
updateAfterEvent();
};
// definiamo la funzione "crea", che riceve x e y come
// parametri (posizione del puntatore)
function crea(x,y){
// settiamo i come 0 (i è la lunghezza del
// lato del quadrato
i = 0;
// aumentiamo "n" (la profondità dei movieclip)
n++;
// dentro "host" creiamo il movieclip "clip"+ n, con
// profondità "n"
host.createEmptyMovieClip("clip"+n, n);
// spostiamo il movieclip alle coordinate del puntatore
host["clip"+n]._x = x;
host["clip"+n]._y = y;
// dentro clip, creiamo il movieclip "cube" con
// profondità 1
host["clip"+n].createEmptyMovieClip("cube", 1);
// settiamo la variabile "premuto" come vera
premuto = true;
}
// definiamo la funzione "disegna"
function disegna(){
// con il movieclip "cube" dentro "clip" + n dentro "host"
with(host["clip"+n].cube){
// assegniamo come rotazione il valore di i
// aumentato di una unità
_rotation = i++;
// settiamo lo stile di linea come trasparente
lineStyle(0, 0x000000, 0);
// iniziamo il riempimento, di colore bianco
beginFill(0xFFFFFF,100)
// creiamo il quadrato di "i" di lato
moveTo(-i, -i);
lineTo(i, -i);
lineTo(i, i);
lineTo(-i, i);
lineTo(-i, -i);
endFill()
}
// settiamo il movieclip "host" come maschera di "logoMX"
logoMX.setMask(host)
}
// alla pressione del pulsante del mouse sul pulsante "reset"
reset.onRelease = function (){
// con un ciclo while che riporta "n" al valore di 1
while(n-- > 2){
// rimuoviamo tutti i movieclip costruiti dentro host
host["clip"+n].removeMovieClip()
}
};
