ActionScript 3: Picture klasse med indbygget load, brightness, contrast, saturation og hue

Det fede ved at alle deler med alle, er at man har mulighed for at “stå på andres skuldre” som det så populært hedder, og det er netop grundlaget for min nyeste klasse: Picture.

For ikke så lang tid siden havde jeg en post om hvordan man nemt kan konvertere et billede til sort/hvid.
I den post kom der en kommentar fra Thonbo som viste en anden måde at gøre det på, nemlig ved hjælp af ColorMatrixFilter, som jeg hidtil har afholdt mig fra at bruge, da det er en anelse tungt at sætte sig ind.

Men, det fik mig til at søge lidt rundt, hvorefter jeg fandt en ColorMatrix klasse fra Grant Skinner, hvor man kan inputte de normale værdier for brightness, contrast, saturation og hue, som man kender dem fra f.eks. filtrene i selve Flash, såvel som Photoshop.

Stadigvæk synes jeg dog at det var lidt bøvlet at man skulle hen og lave et nyt objekt hver gang man skulle stille på en enkelt værdi, og derudover gør den fremgansmåde det særdeles svært at tweene værdierne.
Så, for at gøre det endnu nemmere, i hvert fald i forhold til der hvor jeg skulle bruge funktionen, så har jeg wrappet den klasse i min egen, nemlig Picture klassen.

Den nye klasse har to funktioner:
load(url:String)
setColors(brightness:int, contrast:int, saturation:int, hue:int)

Og 4 properties man kan stille på:
- brightness
- contrast
- saturation
- hue

Og nogle properties som man kan aflæse:
- bytesLoaded
- bytesTotal
- bytes Percent
- loadingComplete

Samt 2 events man kan lytte på:
- Event.COMPLETE
- ProgressEvent.PROGRESS

Ønsker man kun at ændre en enkelt ting ved billedet, så er det nemmest blot at opdate den specifikke property, men skal man ændre mange ting på en gang, så er det smartere (og mindre performance krævende) at kalde funktionen setColors.

Et ekstremt simpelt eksempel kunne se sådan her ud:

var picture:Picture = new Picture();
picture.addEventListener(Event.COMPLETE, loadCompleted);
picture.load("test.jpg");
addChild(picture);

function loadCompleted(_e:Event):void {
	picture.saturation = -100;
}

Download
For at gøre det nemt at komme igang, så er alt det nødvendige, inklusive en CS3 fla-fil med et simpelt eksempel, samlet til download her:
Download picture.zip

Forslag til forbedringer eller nye funktioner modtages som altid gerne :-)



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

3 kommentarer

  1. Martin Bjeld siger: (29. august 2008 kl. 00:07 )

    Hej Mads, Super cool.
    Mit lille forslag er kun at give din klasse et andet navn end kun “Picture” da den jo kan mere et loade et “picture” - Kald den fx EnhancedPicture eller lign.

    Mvh
    Bjeld

  2. Mads Buch Stage siger: (29. august 2008 kl. 08:58 )

    Hej Bjeld,

    Tak for det, det vil jeg lige tænke over - kaldte den mest picture fordi at der jo ikke allerede findes sådan en standard klasse i AS3, så derfor ikke så meget at enhance på, men skal nok lige overveje det :-)

    Om ikke andet, så kan det jo være at der senere kommer mere funktionalitet på, så den fortjener et bedre navn.

    /Mads

  3. Nye klasser i Flash CS4 · omFlash(); siger: (8. oktober 2008 kl. 10:18 )

    […] AdjustColor Jeg har åbenbart ikke været den eneste som synes at det var lidt besværligt at ændre saturation, hue og brightness gennem ColorMatrixFilter, for den nye AdjustColor klasse åbner nemlig op for lige præcis det, dejligt! […]

Skriv en kommentar