Invoking the Flex Compiler via Native Process API in AIR 2.0

AIR 2.0 comes with the ability to interact with native processes. This means we can launch a process from the AIR application and communicate with its standard input/output. However, applications using the native process api must be packaged into native installer. Therefore, you must compile it separately in Windows, Mac and Linux to get 3 files as compared with 1 AIR file for all platforms.

Working the Native Process API is fairly easy. All the operations are performed using the NativeProcess class. To start a native process, you have to call the start method. The parameter passed to the start method is of type NativeProcessStartupInfo. This basically is used to represent the location of the process to be started and also to specify arguments(if any) for the process. I've created a very simple application which uses the Flex compiler (mxmlc) to compile an application.

First off, according to the Developer FAQ at Adobe Labs , bat files cannot be directly launched. Instead we launch the command prompt and then pass the command as input. Once a native process has started, we can write to its input and read from its output by using the standardInput and standardOutput objects. Here is a little screenshot of the application :



We get the location of the Flex SDK directory, the main application file and the output file. When the compile button is clicked, we create a compilation command using the three data (eg : /bin/mxmlc /app.mxml /app.swf) and execute the command. When the output is received, we use the file.openWithDefaultApplication() property to run the SWF file.

Note:
While running the application from the native installer, the command prompt also opens up beside it (which does not occur when you run from within Flash Builder).
Also note that this example assumes your application file has no errors. This is just a proof-of-concept to show how easy it is to build an application like this.

Resources :
AIR 2 (Adobe Labs)
Interacting with a native process (Adobe AIR Developer Center)

Here are the source files for the application :
The FXP file
The compiled native installer .exe file (Windows only)

There are still concerns about updating applications using native installers as the update framework will not work with this. I'm definitely looking forward to more cool demos from the community.

Squiggly - Spell Check Engine Example

We've been waiting for a spell check engine in Flash for a long time. Now, Adobe has released Squiggly. From Adobe Labs :

Squiggly is a spell checking engine for Adobe® Flash® Player and Adobe AIR®. The Squiggly library allows you to easily add spell checking functionality in any Flex 3 based text control.
While the included UI class requires the Flex SDK, the core spell checking engine can be used in pure Flash applications without any dependency on Flex packages.

Currently, only English dictionary is available but you can create your own dictionaries with a bundled AIR app.

The 3 main classes we'll be using are SpellChecker, SpellingDictionary and SpellUI all of which belong to the com.adobe.linguistics.spelling. package. There are several sub packages but they need not be used directly.

Usage :

If we are using the Flex SDK, then we can use the SpellUI class to spell check any Flex component like ,

SpellUI.enableSpelling(textArea, "usa.zwl");

where usa.zwl is the dictionary file.

However, if you are not using the Flex SDK, then the SpellUI class cannot be used. In that case, we can use the SpellChecker class directly to perform spell checking. Here's a sample demo class i've put together.

Hope that's useful for anyone. Happy coding :D

Alchemy Tutorial : Sending data to Alchemy and back

Following up on my previous post on getting started with Alchemy, today, we're going to see how to send a variable from Flex to a C method as arguments. In this example, we're just going to pass an integer from Flex to a C function which will return the square of the integer value. Ok, lets get to the code.
The C code : square.c

#include "AS3.h"

static AS3_Val sqre( void* self, AS3_Val num )
{
 int a;
 a = AS3_IntValue(num);
 int square = a*a;
 return AS3_Int(square);
}

int main()
{
 AS3_Val cMethod  = AS3_Function( NULL, sqre );
 AS3_Val result = AS3_Object( "sqre : AS3ValType" , cMethod);
 AS3_Release( cMethod );
 AS3_LibInit( result );
 return 0;
}

As you can see, the main function is still pretty much the same. When passing arguments to a C method, that method should always return an AS3_Val object and always accept a pointer in addition to the other parameter.The rest of the code is very simple.
Compile the C code into a swc using
gcc square.c -O3 -Wall -swc -o square.swc
Now, we create an ActionScript project in Flex and import the swc. Type the following code :

package {
 import flash.display.Sprite;
 import cmodule.square.CLibInit;

 public class Squaring extends Sprite
 {
  public function Squaring()
  {
      var loader:CLibInit = new CLibInit; 
      var lib:Object = loader.init(); 
         trace(lib.sqre(5));//Output : 25   
  }
 }
}

Now save and debug. You should get the output as 25. Now that we know how to send and receive data from Alchemy and Flex, we can move on to some real world applications.Hope this post was useful. Happy experimenting :D

Getting Started with Alchemy : Hello World tutorial in Flash CS4 and Flex 3

Today, we are going to do a hello world example for Adobe Alchemy. For those, who don't know what Alchemy is,

Alchemy is a research project that allows users to compile C and C++ code that is targeted to run on the open source ActionScript Virtual Machine (AVM2). The purpose of this preview is to assess the level of community interest in reusing existing C and C++ libraries in Web applications that run on Adobe Flash Player and Adobe AIR.

First up, we have to set up alchemy. You can find the setup instructions in Adobe Labs. InsideRIA also have an article about setting up alchemy. You can find that here.

Now that you have setup Alchemy, lets do the traditional Hello World example with it. First up the C code - helloWorld.c :

#include "AS3.h"

static AS3_Val returnString()
{
  char* text = "Hello World";
  return AS3_String(text);
}

int main()
{
  AS3_Val cMethod  = AS3_Function( NULL, returnString );
  AS3_Val result = AS3_Object( "returnString : AS3ValType" , cMethod);
  AS3_Release( cMethod );
  AS3_LibInit( result );
  return 0;
}

Some code explanations:

• AS3_Val is the data type Alchemy uses to represent ActionScript objects.
  
• All functions visible to ActionScript have to declared with AS3_Val as the return type.
• The first step in main() is to declare all methods for ActionScript as AS3_Function instances.
• Next, create an AS3_Object which will hold references to all these functions.
• "Release" the unwanted methods by calling AS3_Release.
• Finally, notify the runtime that the library has been initialized by using AS3_LibInit. Pass the object containing all the functions visible to ActionScript. Note : This should be called last.
  

Now that we have written our C code, we have to compile and convert it into a SWC. Open Cygwin, turn on Alchemy using the alc-on; command and navigate to the folder where you have saved your C program. Then type the following command :
gcc helloWorld.c -O3 -Wall -swc -o helloworld.swc
This should create the SWC file with the filename helloworld.swc in that folder.If there were any errors in the C program, it will be shown here.

Now that you have the SWC file, we can use it in Flash or Flex to call its functions.

Using the SWC file in Flash CS4 :

1. Open Flash CS4 and create a new ActionScript 3 document.
2. In the Properties panel, click on the Edit profile and click on ActionScript 3 Settings.
3. In the Library path tab, navigate to the SWC file and add it.
4. In the Actions panel, type the following code :
   

   
   //CLibInit is the Alchemy bridge to the C/C++ methods.
   import cmodule.helloworld.CLibInit;
   
   var loader:CLibInit = new CLibInit;
   var library:Object = loader.init();
   trace(library.returnString());
   

5. Save and run the file. The text "Hello World" should be displayed in the Output panel.

Using the SWC file in Flex Builder 3 :

1. Start Flex Builder 3 and create a new ActionScript project.
2. Right-click the project, select Properies and select ActionScript Build Path. In the Library path tab, add the SWC file.
3. Add the following code : (My ActionScript project's name is HelloWorld )
   

   
   package
   {
    import flash.display.Sprite;
    
    import cmodule.helloworld.CLibInit;
   
    public class HelloWorld extends Sprite
    {
     public function HelloWorld()
     {
      var loader:CLibInit = new CLibInit;
      var lib:Object = loader.init();
      trace(lib.returnString());   
     }
    }
   }

4. Save and debug the application. You should see the "Hello World" in the Console.

Congratulations, you have written a function in a C program and called that function in ActionScript using Adobe Alchemy. Hope this post was useful to you. I'll post more in the coming days. Have fun :D

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>

Pixel Blender Tutorial : Using Pixel Blender in Flex

Pixel Blender Toolkit is a new graphics programming language being developed by Adobe. Pixel Blender Toolkit can be used to create Pixel Blender filters and effects. You can find a lot of sample filters in the Gallery in Adobe Labs and in the Pixel Blender Exchange.  The Pixel Blender reference(which is in the docs folder inside your Pixel Blender Toolkit Folder with the name “PixelBenderLanguage10“) explains the basics of the language. Start the Adobe Pixel Blender Toolkit and click on “Create a new Filter” button. You’ll see that a small program is automatically generated. Type the following code and save it with any filename.

 
<languageVersion : 1.0;>

kernel RGBAEdit <
    namespace : "My Filters";
    vendor : "Pradeek";
    version : 1;
    description : "Editing RGBA values of an image";
>
{
 input image4 image;
 parameter float4 color
 <
        minValue:float4(0, 0, 0, 0);
        maxValue:float4(1, 1, 1, 1);
        defaultValue:float4(1, 1, 0, 1);
 >;
 output pixel4 result;

    void evaluatePixel()
    {
     result = sampleNearest(image,outCoord());
     result *= color;
    }
}

Press Run. You will be prompted to load a image. Load it and run. You will see the image and the parameters on the side with which you can change the red,blue,green colors and the alpha of the image.Click File and “Export Kernel Filter for Flash Player“. This creates a Pixel Blender Byte Code file (.pbj file) which we can use in flex.

Now, create a Flex project and create a folder named assets inside the src folder and copy paste the .pbj file that you generated and a sample image into the assets folder. Now type in the following code in your mxml file. I have named the byte code file as RBGAEdit.pbj and the sample image file as test.png.

<?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;
        
        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];
        }
        
        ]]>
    </Script>
    
    <mx:Image id="img" source="@Embed('assets/test.png')"/>

</Application>

This is just a basic usage of the Pixel Blender Toolkit. You can use it as

• a filter (ShaderFilter)


• a blend mode


• a fill and


• a number cruncher

Happy experimenting :D