Använda en skuggning som blandningsläge

Du använder en skuggning som blandningsläge på samma sätt som andra blandningslägen. Skuggningen definierar utseendet som bildas från två visningsobjekt som blandas ihop visuellt. Om du vill använda en skuggning som blandningsläge tilldelar du Shader-objektet till egenskapen blendShader för visningsobjektet i förgrunden. Om du tilldelar ett annat värde än null till egenskapen blendShader anges visningsobjektets blendMode -egenskap automatiskt till BlendMode.SHADER . I exemplet nedan visas hur du använder en skuggning som blandningsläge. Observera att det här exemplet förutsätter att det finns ett visningsobjekt med namnet foreground i samma överordnade objekt i visningslistan som annat visningsinnehåll, där foreground överlappar annat innehåll:

foreground.blendShader = myShader;

När du använder en skuggning som blandningsläge måste skuggningen definieras med minst två punkter. Så som exemplet visar ska du inte ställa in indatavärdena i koden. I stället används de två blandningsbilderna automatiskt som skuggningsindata. Förgrundsbilden ställs in som den andra bilden. (Detta är visningsobjektet som blandningsläget används på.) En bakgrundsbild skapas genom att alla pixlar bakom förgrundsbildens begränsningsram sätts samman. Den här bakgrundsbilden ställs in som den första indatabilden. Om du använder en skuggning som förväntar fler än två indata, anger du ett värde för alla indata utöver de första två.

I exemplet nedan visas hur du använder en skuggning som blandningsläge. I det här exemplet används ett ljusare blandningsläge som baseras på luminiscens. Resultatet från blandningen blir att det ljusaste pixelvärdet från något av de blandade objekten blir pixeln som visas.

Den viktiga ActionScript-koden finns i dessa två metoder:

• init() : Metoden init() anropas när programmet läses in. I den här metoden läser koden in skuggningens bytekodfil.

• onLoadComplete() : I metoden onLoadComplete() skapar koden Shader-objektet med namnet shader . Sedan ritas tre objekt. Det första, backdrop , är en mörkgrå bakgrund bakom de blandade objekten. Det andra, backgroundShape , är en grön övertoningsellips. Det tredje objektet, foregroundShape , är en orange övertoningsellips.

  foregroundShape -ellipsen är blandningens förgrundsobjekt. Blandningens bakgrundsbild utgörs av den del av backdrop och den del av backgroundShape som överlappas av foregroundShape -objektets begränsningsram. Objektet foregroundShape är det objekt som finns längst fram i visningslistan. Det överlappar delvis backgroundShape och överlappar helt backdrop . På grund av den här överlappningen visas den orange ellipsen ( foregroundShape ) helt och hållet och en del av den gröna ellipsen ( backgroundShape ) döljs av den, om inget blandningsläge används:

  

  När blandningsläget används lyser den ljusare delen av den gröna ellipsen emellertid igenom, eftersom den är ljusare än den del av foregroundShape som överlappar den:

  

Nedan finns ActionScript-koden för det här exemplet. Använd den här klassen som huvudprogramklass för ett ActionScript-projekt i Flash Builder, eller som dokumentklass för FLA-filen i Flash Professional:

package 
{ 
    import flash.display.BlendMode; 
    import flash.display.GradientType; 
    import flash.display.Graphics; 
    import flash.display.Shader; 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.geom.Matrix; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class LumaLighten extends Sprite 
    { 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        public function LumaLighten() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("LumaLighten.pbj")); 
        } 
         
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            var backdrop:Shape = new Shape(); 
            var g0:Graphics = backdrop.graphics; 
            g0.beginFill(0x303030); 
            g0.drawRect(0, 0, 400, 200); 
            g0.endFill(); 
            addChild(backdrop); 
             
            var backgroundShape:Shape = new Shape(); 
            var g1:Graphics = backgroundShape.graphics; 
            var c1:Array = [0x336600, 0x80ff00]; 
            var a1:Array = [255, 255]; 
            var r1:Array = [100, 255]; 
            var m1:Matrix = new Matrix(); 
            m1.createGradientBox(300, 200); 
            g1.beginGradientFill(GradientType.LINEAR, c1, a1, r1, m1); 
            g1.drawEllipse(0, 0, 300, 200); 
            g1.endFill(); 
            addChild(backgroundShape); 
             
            var foregroundShape:Shape = new Shape(); 
            var g2:Graphics = foregroundShape.graphics; 
            var c2:Array = [0xff8000, 0x663300]; 
            var a2:Array = [255, 255]; 
            var r2:Array = [100, 255]; 
            var m2:Matrix = new Matrix(); 
            m2.createGradientBox(300, 200); 
            g2.beginGradientFill(GradientType.LINEAR, c2, a2, r2, m2); 
            g2.drawEllipse(100, 0, 300, 200); 
            g2.endFill(); 
            addChild(foregroundShape); 
             
            foregroundShape.blendShader = shader; 
            foregroundShape.blendMode = BlendMode.SHADER; 
        } 
    } 
}

Nedan finns källkoden för LumaLighten-skuggningskärnan, som används för att skapa Pixel Bender-filen med bytekod, ”LumaLighten.pbj”:

<languageVersion : 1.0;> 
kernel LumaLighten 
< 
    namespace : "com.quasimondo.blendModes"; 
    vendor : "Quasimondo.com"; 
    version : 1; 
    description : "Luminance based lighten blend mode"; 
> 
{ 
    input image4 background; 
    input image4 foreground; 
 
    output pixel4 dst; 
     
    const float3 LUMA = float3(0.212671, 0.715160, 0.072169); 
 
    void evaluatePixel() 
    { 
        float4 a = sampleNearest(foreground, outCoord()); 
        float4 b = sampleNearest(background, outCoord()); 
        float luma_a = a.r * LUMA.r + a.g * LUMA.g + a.b * LUMA.b; 
        float luma_b = b.r * LUMA.r + b.g * LUMA.g + b.b * LUMA.b; 
         
        dst = luma_a > luma_b ? a : b; 
    } 
}

Mer information om blandningslägen finns i Använda blandningslägen .

Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.