Sunday, September 11, 2005

Using Flash Player 8 filters for good

I am pretty sure that a lot of code purists out there will doubt that Flash Player 8 brings anything useful to the table apart from fancy new graphics. But some of the filters can be used for much more important things which become critical when you try to deploy Flash applications to large audiences.

We've had many discussion internally of how we could make the Flash Player more accessible for disabled users and I can already tell you that there are plenty of ideas which will eventually make their way into the player. The list of things to do is really long. But for the time being let me show you a little example of how a filter can make something which used to be difficult very easy now. If you ever had to deal with accessibility for the visually impaired you might know that Flash does not follow the high contrast settings of Windows. This is a real problem and prevents the deployment of Flash applications in many cases. While native integration is still missing in Flash Player 8 you can offer clients a way of enabling this, using the ColorMatrixFilter.

Here is a little example. Click on the "High Contrast & Scale" checkbox and you should see right away what's going on. This was simply not possible in previous releases without writing complex code to handle color schemes. With enough end user controls (allowing to set saturation, contrast & brightness) it can be extended to apply to any type of Flash application, not matter how weird the colors might be, including video. I think this is very powerful. In this particular example the ColorMatrixFilter setup looks like this:

var highContrastFilter = new flash.filters.ColorMatrixFilter ();
highContrastFilter.matrix = new Array (
-2, -2, -2, 0, 768*2,
-2, -2, -2, 0, 768*2,
-2, -2, -2, 0, 768*2,
0, 0, 0, 1, 0);

If you use your imagination I am sure that you will find many more useful applications for the new Flash Player 8 features which are not only designer oriented.

10 Comments:

Blogger Rajat Paharia said...

Tinic - I love that you're posting all this stuff. It's fantastic. Thanks.

Sunday, September 11, 2005 9:47:00 PM  
Blogger cosmin said...

yeah, this looks like real usability.
nice one :)

Monday, September 12, 2005 12:51:00 AM  
Anonymous Daniel Gasienica said...

Great example, great thoughts, just as your other posts! Although one thing I noticed was, that if you enable high contrast mode and you zoom in more than once with the context menu, all filters disappear and the SWF looks just like unmodified? Any explanation for this? Are filters & blend modes disabled in a certain zoom level?

Best regards,
Daniel Gasienica

Monday, September 12, 2005 7:24:00 AM  
Anonymous Anonymous said...

once the source image gets too large, like over 2500 pixels, the actionscript image processing stops taking effect.

Tuesday, September 20, 2005 5:44:00 AM  
Anonymous Svetoslav said...

Love you're blog and was wandering if you can explain why if you apply a change in transofrmation matrix using action script to a tween created through the IDE it renderes the tween un-usable? The tween simply stops working.

Tuesday, September 27, 2005 4:44:00 AM  
Anonymous Anonymous said...

hi, great site and good work on the new player!!

quick one, what is happening here?

import flash.filters.BlurFilter;

var a = new BlurFilter;
var b = [a];
trace(b[0] == a) // true

this.filters[0] = a;
// alt:
// this.filters = [a];
trace(this.filters[0] == a) // false <--- ??

why is the reference broken / identity lost?

thanks for your time and keep up the good work! kimba [A7] dieselprint . com

Wednesday, September 28, 2005 3:19:00 PM  
Anonymous Jason Kringen said...

about the reference getting broken/lost on teh BlurFilter...

That is interesting. Although it appears that the 'filters' array is making a new copy of the array passed into it. The '==' equality operator compares only memory location when comparing to objects. So if the 'filters' array makes a new copy of the data given to it, this would be the reason.

Another interesting bit seems to be that you cannot view the 'filters' object on any clip when using the debugger or even dumping all of the variables in memory. So it must be doing something behind the scenes that we can't see. If you really need to compare them you could write a custom 'compareFilters' method or something that will actually compare all the properties and variables of each filters and not their memory location (just like you would do in Java with the equals() method.) =)

-Jason Kringen
jason@kringen.org
http://www.kringen.org

Friday, December 16, 2005 1:18:00 PM  
Anonymous Anonymous said...

How do you adjust the figures so that the contrast is just a bit more than origional. For example. I need to have a contrast adjustment button that when clicked up's the contrast by 10% each time.

Thursday, August 17, 2006 12:03:00 PM  
Anonymous Anonymous said...

This gives more detail on how to adjust the ColorMatrix Filter values for Contrast, Brightness, Satuation and Hue.

http://www.adobe.com/devnet/flash/articles/matrix_transformations_04.html

Thursday, August 17, 2006 12:54:00 PM  
Anonymous <a href="http://drugscenterhere.com">ShopMan</a> said...

I like articles like this. Thanks!

Sunday, August 26, 2007 12:38:00 AM  

Post a Comment

<< Home