Hi,
working with designers one will always get into a problem of replication IDE based filters via code, it’s not a pleasant task nor quick as well, but what about if we could actually make it quick and pleasant? Well, that would be something.
To the rescue comes JSFL, namely document.getFilters(), this method returns list of Filter objects applied to the selected element.
var listOfFilters = document.getFilters(); fl.trace("//Filters found: "+listOfFilters.length); for(var i=0; i<listOfFilters.length; i++) { fl.trace("//----------------------------//"); fl.trace("//Filter#"+i); fl.trace("//----------------------------//"); for(var filterProperty in listOfFilters[i]) { fl.trace("//"+filterProperty + "=" + listOfFilters[i][filterProperty]); } }
Now because we know how to read filters and it’s values all we need to do:) is to write it as an ActionScript code, it is as easy as it sounds but to be honest it is lengthy as well. The only one problem was with Adjust Color filter where I had to use external library, to do this I have converted AS2 version of Grant Skinner‘s ColorMatrix class with his permission.
Below is the sample file with original and recreated filter stack, further below is the output generated by my JSFL script.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”copy_filters_example_swf” movie=”/blog/wp-content/uploads/2011/07/copy_filters_example.swf” width=”400″ height=”400″ targetclass=”flashmovie”]
[/kml_flashembed]
//Filters found: 3 //----------------------------// //Filter#0 //----------------------------// import flash.filters.BitmapFilterQuality; import flash.filters.ColorMatrixFilter; var f0:ColorMatrixFilter = new ColorMatrixFilter(); //brightness,contrast,hue,saturation var mat0:Array = [0.027595657749800967,-0.02451758146094174,0.9969219237111409,0,31,0.34847929546609796,0.8648610723428862,-0.21334036780898413,0,31.000000000000007,-0.5809541736616611,1.4046113011763652,0.1763428724852959,0,30.999999999999996,0,0,0,1,0] f0.matrix = mat0; //----------------------------// //Filter#1 //----------------------------// import flash.filters.DropShadowFilter; var f1:DropShadowFilter = new DropShadowFilter(); //angle,blurX,blurY,color,distance,hideObject,inner,knockout,quality,strength f1.angle = 45; f1.blurX = 5; f1.blurY = 5; f1.alpha = 1; f1.color = 0x000000; f1.distance = 5; f1.hideObject = false; f1.inner = false; f1.knockout = false; f1.quality = BitmapFilterQuality.LOW; f1.strength = 1; //----------------------------// //Filter#2 //----------------------------// import flash.filters.BitmapFilterType; import flash.filters.BevelFilter; var f2:BevelFilter = new BevelFilter(); //angle,blurX,blurY,distance,highlightColor,knockout,quality,shadowColor,strength,type f2.angle = 45; f2.blurX = 10; f2.blurY = 10; f2.distance = 5; f2.highlightAlpha = 0.5; f2.highlightColor = 0xffffff; f2.knockout = false; f2.quality = BitmapFilterQuality.HIGH; f2.shadowAlpha = 0.5; f2.shadowColor = 0x000000; f2.strength = 2; f2.type = BitmapFilterType.INNER; //.filters = [f0,f1,f2]; //----------------------------//
Once extracted from zip move the gd_copy_filter.jsfl and the gskinner_color_martix.jsfl files to the Commands folder in the configuration folder, you may find it here:
You can have JSFL scripts available within the Flash authoring environment by storing them in one of several folders within the Configuration folder. By default, the Configuration folder is in the following location:
- Windows® Vista™:
- boot drive\Users\username\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\
- Windows XP:
- boot drive\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\
- Mac OS® X:
- Macintosh HD/Users/username/Library/Application Support/Adobe/Flash CS4/language/Configuration/
Once copied the script will appear in the Flash IDE under commands menu, the zip contains also sample file, one more thing, the script comes “as is” but I would like to know your feedback,
happy coding