Understanding AS3 ColorMatrixFilter class

Do you want to apply color correction to images into your Flash movies on the fly?

Then ColorMatrixFilter is the class you need.

The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the RGBA color and alpha values of every pixel in the input image to produce a result with a new set of RGBA color and alpha values.

The color matrix filter separates each source pixel into its red, green, blue, and alpha components as srcR, srcG, srcB, srcA.

To calculate the result of each of the four channels, the value of each pixel in the image is multiplied by the values in the transformation matrix.

It allows saturation changes, hue rotation, luminance to alpha, and various other effects.

For more information visit the official Adobe docs page.

Around the web you can find a lot of examples of photos loaded with Flash and sliders to change colors, but I want to explore this feature from a coding point of view.

I will make some experiment on this photo I found on Flickr

The first thing is creating a MovieClip with the image inside. I called it cats, so with this simple code I display the cats on the stage:

package {
	import flash.display.Sprite;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
		}
	}
}

nothing new… now it’s time to add the filter.

Now let’s try this script:

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([0.5,0.5,0.5,0,0]);// red
			matrix=matrix.concat([0.5,0.5,0.5,0,0]);// green
			matrix=matrix.concat([0.5,0.5,0.5,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

multiplying all values by 0.5, we have a standard (and not so interesting) black and white photo.

While with this script

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([1,0,0,0,0]);// red
			matrix=matrix.concat([0,1,0,0,0]);// green
			matrix=matrix.concat([0,0,1,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

we have no changes. Why not? because the matrix is an identity matrix.

An identity matrix or unit matrix of size n is the n-by-n square matrix with ones on the main diagonal and zeros elsewhere.

Changing the saturation

To change the saturation of an image, simply boost red component on red channel, green component on green channel and blue component on blue channel, while decreasing the other ones.

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([2,-1,0,0,0]);// red
			matrix=matrix.concat([-1,2,0,0,0]);// green
			matrix=matrix.concat([0,-1,2,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

Adding contrast

To add contrast, increase red component on red channel, green component on green channel and blue component on blue channel and decrease all offset values, this way

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([1.5,0,0,0,-40]);// red
			matrix=matrix.concat([0,1.5,0,0,-40]);// green
			matrix=matrix.concat([0,0,1.5,0,-40]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

Changing the hue

To change the hue, swap red, green and blue values

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([0,1,0,0,0]);// red
			matrix=matrix.concat([0,0,1,0,0]);// green
			matrix=matrix.concat([1,0,0,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

Obviously you must finetune your matrix in order to achieve the best effect, but now you know how to change colors on the fly.

Download the source code and play with the values.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers