[as3.0]Hue Saturation

[Sanity11]

Ik ben al de hele middag onderzoek aan het doen naar een manier om Hue en Saturation waarden aan te passen van een afbeelding middels een knop.

Hiervoor heb ik verschillende bronnen gevonden:
http://www.quasimondo.com/archives/000565.php
http://www.gskinner.com/b...05/09/flash_8_source.html
http://www.adobe.com/devn...x_transformations_04.html

Hieruit blijkt dat dit veel moeilijker is dan ik dacht. De voorbeelden die ik heb gevonden zijn ofwel in AS2.0 gemaakt of zijn veel te complex voor hetgeen ik nodig heb.

Ook de help functie heb ik doorgespit waar de ColorMatrixFilter wordt uitgelegd. Maar ik vind dit erg lastig om te vertalen naar een werkende code voor mijn veel eenvoudigere probleem.

Ik heb eenvoudig een afbeelding in een MovieClip geplaatst. Middels een knop wil ik de Hue waarde en de saturation aanpassen. Dit is een vaste waarde, dus het hoeft niet met tweens of sliders te gebeuren.

De code uit de documentatie heb ik proberen aan te passen maar ik krijg het niet werkend. Als ik de code van quasimondo wil gebruiken die je hier kan zien: http://www.quasimondo.com/colormatrix/ColorMatrix.as hang ik de code aan de document class maar dan krijg ik de volgende fout:

5000: The class 'ColorMatrix' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type.

Weet iemand wat ik niet goed doe?

[ Voor 74% gewijzigd door Sanity11 op 06-12-2008 19:11 ]

[voodooless]

Kijk eens op Wikipedia: HSL and HSV . Je zult een conversie moeten doen van RGB naar HSL of HSV, daar je draaiknoppen op loslaten, en dan weer een conversie terug maken naar RGB.

[Sanity11]

Hmmm, het lijkt me dat dit al geregeld is door flash zelf. Het gaat echt om de ColorMatrixFilter. Ik snap niet hoe ik die goed moet gebruiken.

[voodooless]

Zo te zien heb je weinig aan die matrix, die werkt namelijk puur op RGB. Verkeerde colorspace dus.

[Sanity11]

Hmmm, vergeeg mijn noob gehalte. Maar waar haal je uit dat ik geen rgb afbeelding gebruik dan?

[voodooless]

Nergens

Het probleem is juist dat je afbeelding RGB is. Wil je iets aan Hue of Saturation doen zul je de RGB waardes moeten omrekenen in de HSL of HSV color space. Daar kun je je wijzigingen doorvoeren. Daarna converteer je weer terug naar RGB.

[Sanity11]

Hmm, nou dit is in ieder geval de class die in het voorbeeld zit. Deze laat zien hoe ColorMatrix gebruikt wordt maar dan wel in AS2.0.

code:

/*
    ColorMatrix Class v1.0 Demo
    
    Author: Mario Klingemann
            http://www.quasimondo.com
            [e-mail]

*/

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
import com.quasimondo.geom.ColorMatrix;

var saturation:MovieClip;
var brightness:MovieClip;
var contrast:MovieClip;
var alpha:MovieClip;

var hue:MovieClip;
var threshold:MovieClip;
var enableThreshold:MovieClip;


var grid:Array=Array();

for (var y:Number=0;y<4;y++){
    for (var x:Number=0;x<4;x++){
        var n=grid.push(this["cb_"+y+""+x]);
        grid[n-1].addEventListener("click",this);
    }
    
}



saturation.addEventListener("change",this);
brightness.addEventListener("change",this);
contrast.addEventListener("change",this);
alpha.addEventListener("change",this);
hue.addEventListener("change",this);
threshold.addEventListener("change",this);
enableThreshold.addEventListener("click",this);
threshold.enabled=false;



var image_in:BitmapData = BitmapData.loadBitmap("demo");
var image:BitmapData = new BitmapData(image_in.width,image_in.height,true);

attachBitmap(image,1);


var fillMap:BitmapData = new BitmapData(10,10,false,0xffffff);
fillMap.fillRect(new Rectangle(0,0,5,5),0xcccccc);
fillMap.fillRect(new Rectangle(5,5,5,5),0xcccccc);

lineStyle();
beginBitmapFill(fillMap);
lineTo(image_in.width,0);
lineTo(image_in.width,image_in.height);
lineTo(0,image_in.height);
lineTo(0,0);
endFill();

show();



function show():Void
{
    image.draw(image_in);
    
    var mat:ColorMatrix = new ColorMatrix();

    mat.adjustHue(hue.value);
    
    mat.adjustSaturation(saturation.value/100);

    
    
    mat.adjustContrast(contrast.value/100);
    
    mat.adjustBrightness(255*brightness.value/100);
    
    mat.setAlpha(alpha.value/100);
    
    
    threshold.enabled=enableThreshold.selected;
    if(enableThreshold.selected){
        mat.threshold(threshold.value);
    }

    var cr:Number = (grid[0].selected ? 1:0) | (grid[1].selected ? 2:0) | (grid[2].selected ? 4:0) | (grid[3].selected ? 8:0);
    var cg:Number = (grid[4].selected ? 1:0) | (grid[5].selected ? 2:0) | (grid[6].selected ? 4:0) | (grid[7].selected ? 8:0);
    var cb:Number = (grid[8].selected ? 1:0) | (grid[9].selected ? 2:0) | (grid[10].selected ? 4:0) | (grid[11].selected ? 8:0);
    var ca:Number = (grid[12].selected ? 1:0) | (grid[13].selected ? 2:0) | (grid[14].selected ? 4:0) | (grid[15].selected ? 8:0);
    
    mat.setChannels(cr,cg,cb,ca);
    
    var cm:ColorMatrixFilter = new ColorMatrixFilter(mat.matrix);
    image.applyFilter(image,image.rectangle,new Point(0,0),cm);
}

function click(evt:Object):Void
{
    show();
}

function change(evt:Object):Void
{
    show();
}

Ik weet dus niet hoe ik dit kan toepassen. Er zijn enkele verschillen in mijn toepassing. Ten eerste is het as3.0. En ten tweede wordt er geen externe bitmap geladen maar zit de bitmap in een MC.

Dit is wat ik geprobeerd heb:

code:

package {
    import flash.display.*;
    import flash.geom.*;
    import flash.filters.*;
    import flash.events.KeyboardEvent;
    import com.quasimondo.geom.ColorMatrix;
    
    public class changeColor extends MovieClip {

        var image:BitmapData = new BitmapData(image_in.width,image_in.height,true);
        
        public function changeColor() {
            stage.addEventListener(KeyboardEvent.KEY_DOWN, changeColorAction);
        }
        
        public function changeColorAction(event:KeyboardEvent) {
            trace("Verander die stomme kleur nou eens!!");
            var mat:ColorMatrix = new ColorMatrix();
            mat.adjustHue(10);
        }
    }
}

Deze code doet dus helemaal niets. Maar kan iemand me uitleggen hoe ik de ColorMatrix Class kan gebruiken en vooral hoe ik in het vervolg kan uitzoeken hoe ik een class moet gebruiken.

[voodooless]

Zo te zien heb je dus al methodes on de Hue aan te passen.

Het enige dat je nu gedaan hebt is een matrix aangemaakt, maar je doet er verder niets mee. Net als in het voorbeeld zul nog een matrixfilter moeten maken en dat dan toepassen op je content.

Geen idee hoe dat moet, met Flash ben ik niet bekend

Hoe je classes gebruikt kun je meestal terug vinden in de api docs. Die zal Adobe toch vast wel ergens ter beschikking hebben...

[ Voor 17% gewijzigd door voodooless op 06-12-2008 22:19 ]