Dynamically changing Pixel Blender data at runtime

In my previous post, i had demonstrated the use of Pixel blender filters in Flex. In this post, we will be modifying the file that we did last time so that the user can change the red,blue and green channels and the alpha values at runtime.So if you haven’t done so , finish the previous tutorial. We can access the data of the Pixel Blender filter by the data property of the Shader class.The data property is an object of type ShaderData and it contains all the variables and parameters of the filter. The parameters are available as variables of type ShaderParameter. Here, we are going to use the same filter we used last time and we are going to allow the user to change the values of the color parameter at runtime with a Slider. Open the mxml file that you used for the previous tutorial and make the changes as :

<?xml version="1.0" encoding="utf-8"?>  
<Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:gumbo="library:adobe/flex/gumbo" xmlns:mx="library:adobe/flex/halo" applicationComplete="init()">  
    <Script>  
    <![CDATA[   
     import flash.display.*;  
     import flash.filters.ShaderFilter; 
     [Bindable]private var shader:Shader;  
     private var shaderFilter:ShaderFilter; 
     [Embed(source="assets/RGBAEdit.pbj", mimeType="application/octet-stream")]  
     private var ImgFilter:Class; 
        
     private function init():void  
     {   
      shader = new Shader(new ImgFilter());   
      shaderFilter = new ShaderFilter(shader);   
      img.filters = [shaderFilter];   
     } 
        
     private function apply(e:Event):void  
     {   
            shader.data.color.value[0] = rVal.value;   
            shader.data.color.value[1] = gVal.value;   
            shader.data.color.value[2] = bVal.value;   
            shader.data.color.value[3] = aVal.value;   
            shaderFilter = new ShaderFilter(shader);   
            img.filters = [shaderFilter];   
     } 
        ]]>  
    </Script>
    
    <mx:Panel id="panel" title="Pixel Blender Test"> <mx:Image id="img" source="@Embed('assets/test.png')"/>  
    
        <mx:HBox>   
        
            <mx:Label text="Red"/>   
            
            <mx:HSlider id="rVal" liveDragging="true" minimum="0" maximum="1" value="1" change="apply(event)"/>   
            
            <mx:Label text="Green"/>   
            
            <mx:HSlider id="gVal" liveDragging="true" minimum="0" maximum="1" value="1" change="apply(event)"/>   
        
        </mx:HBox>   
        
        <mx:HBox>   
        
            <mx:Label text="Blue"/>   
            
            <mx:HSlider id="bVal" liveDragging="true" minimum="0" maximum="1" value="0" change="apply(event)"/>   
            
            <mx:Label text="Alpha"/>   
            
            <mx:HSlider id="aVal" liveDragging="true" minimum="0" maximum="1" value="1" change="apply(event)"/>   
        
        </mx:HBox>
    
    </mx:Panel>
    
</Application>