Disegnare su maschera stile gratta e vinci

[spaturnoz]

Ciao a tutti,

Sto usando questo codice per disegnare su stage:

MouseMov = new Array();
this.isDrawing = false;
this.createEmptyMovieClip("disegno", this.getNextHighestDepth());
//
var tracciaMouse:Object = new Object();
//
tracciaMouse.onMouseDown = function () { 
    if (!this.isDrawing) {
    	this.isDrawing = true;
		//this.createEmptyMovieClip("disegno", this.getNextHighestDepth());
    	disegno.lineStyle(15, 0x000000, 100);
    	disegno.moveTo(_xmouse, _ymouse);
		MouseMov.push({thex:_root._xmouse, they:_root._ymouse});
	}
};
//
tracciaMouse.onMouseMove = function() {
    if (this.isDrawing) {
        disegno.lineTo(_xmouse, _ymouse);
		MouseMov.push({thex:_root._xmouse, they:_root._ymouse}); 
    }
    updateAfterEvent();
};
//
tracciaMouse.onMouseUp = function () { 
    this.isDrawing = false;
	for (i = 0; i < MouseMov.length; i++) {
		trace ("xyelem. "+i+": "+MouseMov[i].thex+" / "+MouseMov[i].they);
	}
};

Vorrei però poter disegnare su maschera, ottenendo l'effetto gratta e vinci, quindi invece di disegnare su sfondo vorrei usare il mouse per "cancellare" lo sfondo e mostrare ciò che c'è sotto.

Sapete come si può fare partendo da questo script, o c'è bisogno di tutt'altro?
Grazie mille ragazzi

[Sleter]

Non è possibile disegnare su una maschera.
La maschera è un elemento grafico di copertura invisibile, che permette la visualizzazione dell'immagine sottostante.

Per ottenere un effetto del tipo "gratta e vinci" dovresti adottare un'altra logica ovvero:
Disegnare in run time una bitmap che riproduce l'immagine che vuoi visualizzare sopra.
In pratica l'utente avrà l'impressione di cancellare un immagine ma in realtà ne stà disegnando un'altra sopra quella che c'è.

Potrei farti un esempio in AS3

[spaturnoz]

esatto Sleter, una cosa del genere sarebbe perfetta.
Se qualcosa mastico in AC2 in AC3 non ho proprio idea... ma se non c'è altro modo magari è la volta buona che inizio a capirci qualcosa.

Grazie mille del tuo aiuto

[Sleter]

Allora, in AS3
1. Crea un nuovo documento delle dimensioni dell'immagine che vuoi visualizzare.
2. Importala sullo stage e convertila in un MovieClip a cui dai nome istanza: immagine_mc
3. Crea un secondo livello e importa la seconda immagine che farà da "copertura" all'immagine sul livello 1.
4. Converti anche questa seconda immagine in un MovieClip e dai nome istanza: sfondo_mc
5. Crea un altro livello in cui inserire il codice:

var img_data:BitmapData;
var matita:MovieClip;
var dimensione_matita:Number = 20;

inizializza();

function inizializza():void
{
    matita = new MovieClip  ;
    addChild(matita);
    img_data = new BitmapData(immagine_mc.width,immagine_mc.height,true,0xFFFFFFFF);
    img_data.draw(immagine_mc);
    matita.graphics.lineStyle(dimensione_matita);

    matita.graphics.lineBitmapStyle(img_data);
    matita.graphics.moveTo(mouseX,mouseY);
    aggiungiAscoltatori();
}
function aggiungiAscoltatori():void
{
    stage.addEventListener(MouseEvent.MOUSE_DOWN,avviaDisegna);
    stage.addEventListener(MouseEvent.MOUSE_UP,stopDisegna);
}
function avviaDisegna(evt:MouseEvent):void
{
    matita.graphics.moveTo(mouseX,mouseY);
    matita.removeEventListener(Event.ENTER_FRAME,disegna);
    matita.addEventListener(Event.ENTER_FRAME,disegna);
}
function disegna(evt:Event):void
{
    matita.graphics.lineTo(mouseX,mouseY);
}
function stopDisegna(evt:MouseEvent):void
{
    matita.removeEventListener(Event.ENTER_FRAME,disegna);
} 

In pratica, si crea un MC che sarà la "matita" e a cui si danno le dimensioni del segno che dovrà tracciare in relazione alle coordinate mouseX e mouseY.
Si crea una bitmapData delle dimensioni del MC sul primo livello livello dello stage, quello che abbiamo nominato con "immagine_mc".
Con il metodo .graphics.lineBitmapStyle applicato al clip "matita" stabiliamo il contenuto (dati/pixel) che saranno disegnati ovvero, i dati bitmap dell'immagine presente sul livello 1.

ciao

[spaturnoz]

Grazie mille Sleter, funziona alla perfezione!
Ho solo una domanda, in questo modo l'effetto gratta e vinci me lo da su tutta l'area dello stage, mentre io devo metterlo solo su una parte dello stage. L'immagine sfondo me la fa vedere delle dimensioni corrette... mentre poi quando vado a "cancellare" l'immagine_mc la mostra grande quanto tutto lo stage. Ho provato a modificare la dimensione all'immagine, e non al mc, ma niente.
Devo darlo da codice le dimensioni dell'area interessata?
Per il resto è davvero fatto bene e molto fluido, grazie mille

[Sleter]

Si in effetti la bitmap viene ripetuta e disegnabile su tutto lo stage e anche oltre (se si allarga la finestra del Player.

Sicuramente si può risolvere in qualche modo ma se vuoi fare una specie di cartella del "gratta e vinci" con molti riquadri da "grattare", la soluzione più semplice che mi viene in mente è questa:

Creare dei filmatini .swf separati, uno per ogni riquadro del "gratta e vinci" e importarli in un unico file.swf che farà da contenitore.

Ogni filmatino (riquadro) dovrà comunque essere "mascherato" per evitare che sia visibile la bitmap al di fuori del filmato stesso:


A questo punto, quando avrai il numero di filmatini.swf (riquadri) che ti servono li metti in una cartella nella directory che contiene il filmato caricatore.

Per fare in modo che il filmato caricatore carichi tutti i file.swf ti serve un ciclo for che lavora in base al numero dei filmati presenti nella cartella e che andiamo a definire in un Array in questo modo:

var numeroLoadRiga:uint = 3;

var filmati:Array = new Array("filmati/gratta1.swf", "filmati/gratta2.swf", "filmati/gratta3.swf", "filmati/gratta4.swf", "filmati/gratta5.swf", "filmati/gratta6.swf")

attachLoader()

function attachLoader():void
{
    
    for (var i:uint = 0; i < filmati.length; i ++)
    {
        var carico:Loader = new Loader  ;
        carico.load(new URLRequest(filmati[i]));

        carico.x = 10+(i%numeroLoadRiga)* 150;
        carico.y = 10 + Math.floor(i / numeroLoadRiga) * 150;
        addChild(carico);
    }
} 

In questo esempio, dopo aver caricato i 6 filmati, la formula matematica alla fine del ciclo li posiziona a griglia su 2 righe di 3 elementi ciascuna (puoi cambiare questo valore modificando il contenuto della variabile "numeroLoadRiga"
Poi dovrai vedere tu e lavorare sulle distanze in relazione all'altezza e larghezza dei tuoi filmati.

ciao