PDA

Volledige versie bekijken : png masker gebruiken


irowake
%Europe/Berlin %835 %2008, 21:02
Goedeavond,

Ik laad met actionscript een aantal png-images in. Hierop gebruik ik dezelfde images als masker zodat ik alleen maar over de niet-transparante delen kan gaan. Als ik hierover ga, worden de afbeeldingen geschaald tot 100%. Het lukt me echter niet om het masker erop te zetten.
Ik heb ook cacheAsBitmap op true gezet, maar dit lijkt geen effect te hebben. Wat doe ik verkeerd?

Hieronder mijn code:
myProduct_mc = _root.myProducts_mc.myImages_mc.createEmptyMovieCl ip("myProduct" + i, _root.myProducts_mc.myImages_mc.getNextHighestDept h());
myMask_mc = myProduct_mc.createEmptyMovieClip("myMask_mc", myProduct_mc.getNextHighestDepth());
myProduct_mc.num = i;
myProduct_mc._x = productChildNode.attributes.xpos;
myProduct_mc._y = productChildNode.attributes.ypos;
myImage = myProduct_mc.createEmptyMovieClip("myImage", myProduct_mc.getNextHighestDepth());
myMask = myMask_mc.createEmptyMovieClip("myMask", myMask_mc.getNextHighestDepth());
loadMovie("http://users.telenet.be/irowake/" + _root.gallery_path + productChildNode.attributes.url,myProduct_mc.myIma ge);
loadMovie("http://users.telenet.be/irowake/" + _root.gallery_path + productChildNode.attributes.url,myMask_mc.myMask);
myMask._xscale=94;
myMask._yscale=94;
myImage._xscale=94;
myImage._yscale=94;
myImage.cacheAsBitmap=true;
myMask.cacheAsBitmap=true;
myImage.setMask(myMask);
_root.myProducts_mc.myImages_mc["myProduct" + i].onRelease = function()
{

}
_root.myProducts_mc.myImages_mc["myProduct" + i].onRollOver = function()
{
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myImage._xscale=100;
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myImage._yscale=100;
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myMask_mc.myMask._xscale=100;
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myMask_mc.myMask._yscale=100;

}
_root.myProducts_mc.myImages_mc["myProduct" + i].onRollOut = function()
{
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myImage._xscale=94;
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myImage._yscale=94;
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myMask_mc.myMask._xscale=94;
_root.myProducts_mc.myImages_mc["myProduct" + this.num].myMask_mc.myMask._yscale=94;
}

Jan
%Europe/Berlin %865 %2008, 21:46
Ik denk dat je pas setMask kan gebruiken NADAT de afbeelding is ingeladen.
Daarom (en eigenlijk altijd) gebruik je beter de MovieClipLoader class (loadClip() ipv loadMovie() ) om externe grafische content in te laden. En dan kan je in de onLoadInit eventhandler (dan is je afbeelding helemaal geladen en staat deze op stage) 'setMasken'.

Verder zou je ten allen tijde _root moeten vermijden.
Indien je een bepaalde scope/tijdlijn wil targetten kan je beter combinaties van this en _parent gebruiken.
Maar aangezien je in de onLoad in de scope van je XML object zit (wat je beter zou tonen in plaats van slechts een stukje uit je hele script) en je dus met this naar dat xml object verwijst kan je niet this._parent._parent etc. Daarom moet je bovenaan in je script de _root opslaan in een variabele zodat je deze later kan gebruiken in de xml scope. Op deze manier vermijd je _root en blijven de verwijzingen allemaal relatief.
var rootScope:MovieClip=this
//...
myXML.onLoad=function()
{
rootScope.createEmptyMovieClip(//etc
}
Groeten,
http://users.telenet.be/jansurf/cwo.png Jan

irowake
%Europe/Berlin %753 %2008, 19:04
Ik heb vandaag de loadMovie vervangen door loadClip met MovieClipLoader en eventhandler. Het effect blijft jammer genoeg hetzelfde. Het ligt misschien aan iets anders. Misschien eens proberen met pixelvervanging en BitmapData.

Ook bedankt voor de tip over _root en this. Ik ga dat zeker aanpassen in mijn programma. De gehele onload posten zou wat veel zijn aangezien ik vanaf het begin al uit mijn XML lees. Zowat het hele programma steekt eronder. Waarschijnlijk zijn ook hiervoor betere oplossingen, maar zodanig veel ken ik niet van actionscript. Indien je een goed boek weet over actionscript from scratch, laat me dan zeker iets weten.

inge88
%Europe/Berlin %943 %2008, 23:38
Ik heb ditzelfde probleem...

Ik gebruik ook 2 movieclips waarin een url wordt geladen met png afbeelding, een is de mask en de ander wat gemaskeerd moet worden. Dit lukt gewoonweg niet.

Ik maak gebruik van loadClip. Verder worden de afbeeldingen wel gewoon beide ingeladen, maar zodra ik deze ga maskeren verdwijnt de masker afbeelding, maar maskeert niet wat hij hoort te maskeren; ik zie nog alles.

var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
mcLoader.addListener(listener);
listener.onLoadInit()
{
setMask();
}

mcLoader.loadClip(chosenCollarUrl, collar);
mcLoader.loadClip(chosenCollarUrl, mask_collar);

function setMask()
{
collar.cacheAsBitmap = true;
mask_collar.cacheAsBitmap = true;
collar.setMask(mask_collar);
}


Uiteraard is chosenCollarUrl een gedefinieerde waarde en zijn collar en mask_collar geattached.

Jan
%Europe/Berlin %984 %2008, 00:37
1) Je gebruikt best geen naam voor een functie die ook een bestaande method is in actionscript. Verander de benaming van je functie dus in masken oid.
2)Je maskt wanneer 1 van beide afbeeldingen geladen is. Je wacht best totdat beide afbeeldingen geladen zijn. (Bij de tweede keer dat het onLoadInit event wordt gedispatched dus)
3) Het nut of visuele effect van een afbeelding gebruiken als mask om exact dezelfde afbeelding te masken ontgaat me, en het logische gevolg lijkt me dat:
zodra ik deze ga maskeren verdwijnt de masker afbeelding, maar maskeert niet wat hij hoort te maskeren; ik zie nog alles.
var aantal:Number=0;
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
mcLoader.addListener(listener);
mcLoader.loadClip(chosenCollarUrl, collar);
mcLoader.loadClip(chosenCollarUrl, mask_collar);
listener.onLoadInit(target_mc:MovieClip)
{
target_mc.cacheAsBitmap = true;
aantal++;
if(aantal==2)
{
aantal=0;
masken();
}
}
function masken()
{
collar.setMask(mask_collar);
}

Groeten,
http://users.telenet.be/jansurf/cwo.png Jan

inge88
%Europe/Berlin %059 %2008, 02:25
Het werkte niet doordat ik de listener niet aangaf als functie, hij voerde dus ook nooit die listener uit. Het wil nu dus wel werken! :D

listener.onLoadInit = function()

De reden dat ik de masker zelf ook maskeer is, omdat dit de standaard waarde is zeg maar, indien er geen andere afbeelding is geselecteerd.

Dan had ik nog een vraagje met betrekking tot de event listener, ik laad een grote afbeelding in achter de masker, deze masker verandert wanneer je op een knop drukt, er wordt dan voor de huidige masker een nieuwe masker geplaatst, tijdens dat laden zie je dus even heel snel die grote afbeelding doordat er dus op dat moment niks kan worden gemaskeerd. Hoe kan ik dit oplossen? de alpha van die afbeelding op 0 zetten bij onloadStart maakt de tijd wel iets korter dat je die afbeelding ziet, maar je blijft een "flits" grote afbeelding zien.

Jan
%Europe/Berlin %065 %2008, 02:33
Het werkte niet doordat ik de listener niet aangaf als functie, hij voerde dus ook nooit die listener uit. Het wil nu dus wel werken!
Ow, stom van me dat ik er ook overheen keek.
tijdens dat laden zie je dus even heel snel die grote afbeelding doordat er dus op dat moment niks kan worden gemaskeerd. Hoe kan ik dit oplossen?
Laad het nieuwe masker in een nieuwe lege movieclip (createEmptyMovieClip)en verwijder de oude in de onLoadInit (removeMovieClip).

Groeten,
http://users.telenet.be/jansurf/cwo.png Jan