Understanding JSFL
Posted on January 19th, 2008 in jsfl |
JSFL is Javascript Flash Language, the core language syntax is javascript but it has its own DOM or Document Object Model. To understand JSFL is to understand how you your mouse works when you are creating something within the flash IDE then in JSFL you translate those mouse movement/clicks into codes. What do i mean by this?
For example you wanted to open a file from flash and edit it on flash
Using the mouse you:
Either go to File –> Open –> Browse for the file OR Double Click on a file
Using JSFL you write
fl.openDocument("file:///Users/monmonja/Desktop/OpenFromJSFL.fla"); on a mac or
fl.openDocument("file:///C:/OpenFromJSFL.fla"); for windows
Ofcourse double clicking is a lot faster but take for example you have 10 fla to open in different folders coz you want to change something on them. Which is faster JSFL or manually going to each folder and opening them or going through file–>open step.
Another example is you wanted to create 3 rectangles of different colors, border, position, width and height
Using the mouse you:
Select Rectangle Tool, change the border, create a rectangle on the stage, select it, change the position, scale the width and height, change the fill color (repeat these steps for 3 times)
Using JSFL you write
function makeRect(color,border,x1,y1,x2,y2){
var bounds = {left: x1, top: y1, right: x2, bottom: y2};
fl.getDocumentDOM().addNewRectangle(bounds, border);
fl.getDocumentDOM().setSelectionRect(bounds);
fl.getDocumentDOM().setFillColor(color);
}
makeRect("#ff0000",0,0,0,40,40);
makeRect("#00ffff",2,20,40,50,50);
makeRect("#ff00ff",4,50,100,100,150);
Note: This is done in mac and Rectangle Tool is selected not the Rectangle Primitive Tool, in windows you can just add fl.getDocumentDOM().breakApart(); before applying the fill color if the fill color doesnt working
Let us map the mouse motion with JSFL codes:
Create the border radius, set the position of the rectangle, set width and the height too
var bounds = {left: x1, top: y1, right: x2, bottom: y2};
Select the rectangle tool, create a rectangle with the position, width, height and border
fl.getDocumentDOM().addNewRectangle(bounds, border);
Select the rectangle
fl.getDocumentDOM().setSelectionRect(bounds);
Change the fill color
fl.getDocumentDOM().setFillColor(color);
(repeat these steps for 3 times)
makeRect("#ff0000",0,0,0,40,40);
makeRect("#00ffff",2,20,40,50,50);
makeRect("#ff00ff",4,50,100,100,150);
I hope you understand JSFL after reading this article, i may have more article about JSFL in the future coz my company does flash based website and im starting to write a JSFL framework for them to make our prototype faster.
Thats all for now coz its 2:30am and i have to go to church tomorrow.












