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

Flash CS4 Tutorial : Using the drawTriangles method to render 3D objects

I’d like to say hello and welcome to those of you reading my feeds via MXNA. In this tutorial, we are going to use Flash Player 10’s 3D capabilities to render a cube. The drawTriangles method added to the Graphics class is used to render 3D objects in FP10. Lets get started.

First up,create a new document class. Here we’re going to name it Cube3D. Open the Cube3D.as file and type in the following code.

 

package    
{     
    import flash.display.*;     
    import flash.events.*;     
    import flash.geom.*; 
  
    public class Cube3D extends Sprite    
    {     
        private var matrix3D:Matrix3D;     
        private var vertices:Vector.<Number>;     
        private var projectedVertices:Vector.<Number>;     
        private var UVData:Vector.<Number>;     
        private var indices:Vector.<int>;     
        private var cube:Sprite; 
  
        public function Cube3D()    
        {     
            matrix3D = new Matrix3D();     
            vertices = Vector.<Number>([50,-50,50,     
                                         50,-50,-50,     
                                        -50,-50,-50,     
                                        -50,-50,50,     
                                        50,50,50,     
                                        50,50,-50,     
                                        -50,50,-50,     
                                        -50,50,50     
                                        ]);     
            projectedVertices = new Vector.<Number>;     
            UVData = new Vector.<Number>;     
            indices = Vector.<int>([3,1,0, 3,2,1, 5,7,4, 5,6,7, 1,4,0, 1,5,4, 2,5,1, 2,6,5, 3,6,2, 3,7,6, 7,0,4, 7,3,0]); 
  
            cube = new Sprite();    
            addChild(cube); 
  
            addEventListener(Event.ENTER_FRAME, onEnterFrame);    
        } 
  
        private function onEnterFrame(e:Event):void    
        {     
            cube.x = cube.y = 200; 
  
            matrix3D.appendRotation(1,Vector3D.X_AXIS);    
            matrix3D.appendRotation(1,Vector3D.Y_AXIS);     
            matrix3D.appendRotation(1,Vector3D.Z_AXIS);            
  
            Utils3D.projectVectors(matrix3D,vertices,projectedVertices,UVData); 
  
            cube.graphics.clear();    
            cube.graphics.beginFill(0x0066FF);     
            cube.graphics.lineStyle(1,0x0000FF,1);     
            cube.graphics.drawTriangles(projectedVertices, indices);     
            cube.graphics.endFill();     
        }     
    }     
}
  

Now lets take a look at the code:

Now we can use the Vector class to store data instead of Arrays. Vectors are similar to arrays but allow you to store only one type of data. The vertices vector stores the xyz co-ordinates of the 8 vertices of the cube. In order to draw a 3D object, we use the drawTriangles method. The syntax for this method is

drawTriangles(vertices:Vector.<Number>, indices:Vector.<int> = null, uvtData:Vector.<Number> = null, culling:String = “none”)

For the indices parameter, we have to split the cube into triangles. A good way for that is to take 1 side of a cube, and split it into 2 triangles. Read the drawTriangles section of this post by senocular for better understanding of splitting an object into triangles. A section from the post:

As you can see, a square can be split up into 2 triangles.For the square, the indices are 0,1,2 and 1,2,3. Similarly using the same technique for the cube’s 6 sides, we can calculate the indices.

Look at the following code:

matrix3D.appendRotation(1,Vector3D.X_AXIS);

matrix3D.appendRotation(1,Vector3D.Y_AXIS);

matrix3D.appendRotation(1,Vector3D.Z_AXIS);

This is equivalent to rotating through the X,Y&Z axes by 1 degree. Hence this code is executed in every frame. Now take a look at the next line :

Utils3D.projectVectors(matrix3D,vertices,projectedVertices,UVData);

The syntax for the projectVectors method is projectVectors(m:Matrix3D, verts:Vector.<Number>, projectedVerts:Vector.<Number>, uvts:Vector.<Number>)

This method, using a projection Matrix3D object, projects a Vector of three-dimensional space coordinates ( verts ) to a Vector of two-dimensional space coordinates ( projectedVerts ). This method gives us the 2D vertices (projectedVertices) to use in the drawTriangles method.

Here is the final cube :

And with a little experimenting, here is a pyramid :

Feel free to drop a comment if you want to kknow anything.
Happy experimenting