Presentation av blandningsmetoder i Flash

Jag ska lära dig hur du använder varje blandningsläge i Flash. Enkelt uttryckt används blandningslägen för att ändra färgvärden eller transparens i bilder. Precis som namnet antyder används blandningslägen för att blanda bilder tillsammans. Blandningslägen används ofta för speciella effekter eller kompositioner i spel, filmer och bildredigerare. Från explosioner, skärmövergångar, maskering och belysning har blandningslägen många applikationer i flashprojekt.


Snabb förhandsvisning

Ändra blandningsläget med användargränssnittet i det övre hörnet och dra bilderna runt för att skapa olika effekter?


Titta på Screencast?


? eller läs Tut

Blandningslägen gör en sammansatt bild och skapar intressanta effekter genom att blanda pixlar i överlappande bilder eller filmklipp. Blandningslägen påverkar pixelfärgen och genomskinligheten. Du kan använda blandningslägen för att betona höjdpunkter eller skuggor, eller för att ändra färger i en bild.

Du kanske märker att vissa blandningslägen är lite lika, men de är inte samma. Vissa blandningslägen är direkta motsatser till varandra, men du behöver veta vilken som ska användas i en given situation.


Hur fungerar de?

Blandningslägen använder ett bakgrundslag och ett blandningsskikt ovanpå för att ge dig ett slutligt modifierat lager. Varje pixel från bakgrunden ses på och modifieras av blandningsbilden ovanpå, vilket ger dig den sammansatta bilden. Färger och transparens tas in i ekvationen när pixlarna behandlas. Alla visningsobjekt - inklusive Sprites, Bitmaps och MovieClips - har en blendMode-egenskap som du kan ändra för att få en effekt du letar efter. Du kan ställa in egenskapen blendMode till de konstanter som definieras i klassen flash.display.BlendMode, eller du kan använda de aktuella strängvärdena i citat istället.

Blandningslägen ändrar ofta färgerna på det lag som du bifogar blandningsläget till, så du måste experimentera med olika färger och blandningslägen för att se hur resultaten ser ut. Experimentera med olika blandningslägen kan ge dig en uppfattning om hur de fungerar. Du bör notera att olika färger ofta spelas in med olika blandningslägen, och du kanske inte får samma resultat beroende på dina bakgrundsbilder och de blandade bilderna som används. Du bör också vara medveten om den ordning du tillämpar dina blandningslager, eftersom olika order ger olika resultat.


Snabbt exempel:

displayObject.blendMode = BlendMode.ADD;

eller

displayObject.blendMode = 'add';

Det är upp till dig! Men för det första alternativet, se till att du importerar flash.display.BlendMode.

Många kommer bara att glida genom varje blandningsläge tills de får en effekt som ser bra ut, men jag vill förklara för dig hur varje blandningsläge fungerar, och visa några exempel eller scenarier där blandningslägen kan vara användbara. Som spelutvecklare använder jag exempel på blandningslägen i en spelkontext. Generellt använder jag blandningslägen för saker som dimma, explosioner, partiklar och belysning, men blandningslägen har oändliga användningsområden och funktioner som du måste komma på med!

Jag ska prata om dessa blandningslägen i par eller grupper. De flesta blandningslägena kommer med en liknande eller direkt motsatt partner. Idag täcker jag blandningslägena som anges nedan.

  • VANLIGT
  • LAGER
  • ALFA
  • RADERA
  • LÄGG TILL
  • SUBTRAHERA
  • LÄTTA
  • MÖRKNA

Blandningsläge: NORMAL

Beskrivning och exempel på användning

NORMAL applicerar färg normalt, utan interaktion med basfärgerna.

Det första blandningsläget som jag behöver prata om är NORMAL-blandningsläget. Det är i grunden standardblandningsläget som inte tillämpar någon blandning på bakgrundsbilden.

När du experimenterar med olika blandningslägen använder du NORMAL-blandningsläget för jämförelse.
Användning av NORMAL-blandningsläget är detsamma som att du inte använder ett blandningsläge alls. Att veta att blandningslägen kräver bearbetning och ofta påverkar resultatet av ditt Flash-projekt, bör du försöka begränsa blandningsläge om du kan.

50 objekt med NORMAL blandning är mycket snabbare än 50 objekt med OVERLAY eller HARDLIGHT blandningslägen.

Teknisk beskrivning

Visningsobjektet visas som normalt ovanpå bakgrunden. Inga färgvärden eller växelkursändringar ändras.

Exempel:

displayObject.blendMode = BlendMode.NORMAL;

eller

displayObject.blendMode = 'normal';

Blandningsläge: LAYER

Beskrivning och exempel på användning

LAYER-blandningsläget liknar NORMAL-blandningsläget, eftersom det inte ändrar färger. LAYER-blandningsläget tvingar dock skapandet av en transparensgrupp eller en alfakanal. Det ställer väsentligen lagrets opacitet till 100%.

NOTERA: Detta krävs för att komposera med ALPHA eller ERASE blandningslägen, som jag kommer att prata om nästa.

Teknisk beskrivning

Gjorde på samma sätt som NORMAL-blandningsläget med 100% opacitet. Skapandet av alfakanalen tillåter att lagret modifieras av andra blandningslägen som påverkar genomskinlighet, som ALPHA eller ERASE.

Exempel:

displayObject.blendMode = BlendMode.LAYER;

eller

displayObject.blendMode = 'lager';

Blandningsläge: ALPHA

Beskrivning och exempel på användning

ALPHA-blandningsläget ändrar transparensen i bakgrundsskiktet, vilket gör det genomskinligt om olika områden, beroende på blandningsskiktets genomskinlighet.

Teknisk beskrivning

ALPHA-blandningsläge applicerar en alfaskarm där de transparenta bildpunkterna i blandningsskiktet påverkar bakgrundsskiktets transparens. Vanligtvis använder du ett andra bakgrundslag med detta blandningsläge, som visas genom den första bakgrunden när den görs transparent.

LAYER-blandningsläge måste tillämpas på det överordnade visningsobjektet, vilket fungerar som den första bakgrunden som ska göras transparent.

Exempel:

displayObject.blendMode = BlendMode.ALPHA;

eller

displayObject.blendMode = 'alfa';

Blandningsläge: ERASE

Beskrivning och exempel på användning

ERASE-blandningsläget är motsatsen till ALPHA-blandningsläget, men ändrar ändå övergångsvalet för bakgrundsskiktet, vilket gör det genomskådligt om olika områden beroende på blandningsskiktets genomskinlighet.

Teknisk beskrivning

ERASE-blandningsläget fungerar som ALPHA-blandningsläge, men applicerar en inverterad alfaskerm, där de opaka pixlarna i blandningsskiktet påverkar bakgrundsskiktets transparens, vilket gör de pixlarna transparenta. Vanligtvis använder du ett andra bakgrundslag med detta blandningsläge, som visas genom den första bakgrunden när den görs transparent.

LAYER-blandningsläge måste tillämpas på det överordnade visningsobjektet, vilket fungerar som den första bakgrunden som ska göras transparent.

Exempel:

displayObject.blendMode = BlendMode.ERASE;

eller

displayObject.blendMode = 'radera';

Blandningsläge: ADD

Beskrivning och exempel på användning

ADD-blandningsläget används för att stärka vita och lätta överlappande färger. Färgerna i blandningsskiktet ovanför mittområdet lätta bakgrundsskiktet, medan mörkare färger är transparenta, vilket gör att bakgrundsskiktet är orört.

Teknisk beskrivning

ADD-blandningsläge lägger bokstavligen till hexfärgvärdena för blandningsskiktet till bakgrundsskiktet. Det kan inte gå högre än vitt.

Exempel:

displayObject.blendMode = BlendMode.ADD;

eller

displayObject.blendMode = 'add';

Blandningsläge: SUBTRACT

Beskrivning och exempel på användning

SUBTRACT-blandningsläget mörker bakgrundsskiktet och kan betraktas som motsatsen till ADD-blandningsläget. Vita områdena i blandningsskiktet gör bakgrundsskiktet svart, medan svarta områden i blandningsbilden inte påverkar bakgrundsskiktet.

SUBTRACT-blandningsläget används för att stärka svarta och mörkare överlappande färger. Färgerna på blandningsbilden över mittområdet är mörkare, medan ljusare färger är transparenta, vilket gör att bakgrundsskiktet är orört.

Teknisk beskrivning

SUBTRACT-blandningsläget subtraherar hex-färgvärdena för blandningsskiktet till bakgrundsskiktet. Den kan inte gå lägre än svart.

Exempel:

displayObject.blendMode = BlendMode.SUBTRACT;

eller

displayObject.blendMode = 'subtrahera';

Blandningsläge: LJUS

Beskrivning och exempel på användning

LIGHTEN använder de ljusare färgade pixlarna från varje lager. På samma sätt som ADD-blandningsläget används den för att stärka lättare områden i de överlappande skikten. Varje pixel från varje lager ses och ljuset på de två pixelvärdena hålls.

Teknisk beskrivning

LIGHTEN ersätter bakgrundspixlar som är mörkare än pixlarna för blandningsskiktet. Bakgrundspixlar lättare än pixlarna för blandningsskiktet ändras inte.

Exempel:

displayObject.blendMode = BlendMode.LIGHTEN;

eller

displayObject.blendMode = 'lighten';

Blandningsläge: DARKEN

Beskrivning och exempel på användning

DARKEN använder de mörkare färgade pixlarna från varje lager. Det är motsatsen till LIGHTEN-blandningsläget och används för att stärka mörkare områden i de överlappande skikten. Varje pixel från varje lager tittas på och den mörkare av de två pixelvärdena hålls. Detta kan användas för att lägga till olika textureffekter till vårt bakgrundsskikt.

Teknisk beskrivning

DARKEN ersätter bakgrundspixlar som är ljusare än pixlarna för blandningsskiktet. Bakgrundspixlar som är mörkare än pixlarna för blandningsskiktet ändras inte.

Exempel:

displayObject.blendMode = BlendMode.DARKEN;

eller

displayObject.blendMode = 'darken';

Nästa steg

Den andra delen av denna handledning (kommer snart) kommer att täcka de återstående blandningslägena:

  • MULTIPLICERA
  • SKILLNAD
  • INVERTERA
  • SKÄRM
  • TÄCKA ÖVER
  • HÅRT LJUS

Håll dig igång!