Pre-release roundup!


I only have a few more classes to finish writing before I release the framework, so I thought I would write a post to quickly highlight some of the cool things you can look forward to.


xJSFL notes

  • The xJSFL core and libraries are around 9,000 lines of JavaScript, similar to jQuery which is around 8600. The Snippets module on top of that is about 1,300 lines
  • The xJSFL ActionScript source (UI and framework code) is about 10,000 lines of ActionScript 3

Installation and setup

  • Install to any folder
  • 1-click installation
  • Easy initialisation of all classes and functions via xjsfl.init(this);


  • Snippets panel to mange and run scripts
  • Console panel to quickly test JSFL code


  • Use Komodo IDE to manage projects and write larger JSFL scripts
  • core, user and module folders keeps code separate
  • assets, data, settings, templates, libraries, and scripts folders keeps things organised


xJSFL Core

  • settings - access to common settings such as folders and paths
  • utils - utility methods such as applyEach(), makeURI(), getValues(), unique(), parseValue()
  • output - such as warn(), output(), and error()
  • iterators - basic iteration for documents, items, layers, keyframes and elements
  • file - file finding and loading
  • Centralised management of all classes and modules

Stage / Library

  • Context - convenient access to the major DOM elements (DOM, timeline, layers, frames)
  • Collections - powerful Array-like classes for manipulating authoring-time elements, including:
    • ItemCollection - for Library items
    • ElementCollection - for Stage elements
    • Soon to come will be Document, Layer and Frame Collections.
  • Library ($$) - CSS-style selection of items in the Libray panel
  • Stage ($) - CSS-style selection of layers, frames and elements
  • Superdoc - logical routing to the expansive Document class' methods

User Interaction

  • XUL - OO library for creating and managing XUL dialogs
  • Module - Base class used to create and manage xJSFL Modules (collections of files)

File / Data

  • Config - an object-oriented wrapper for easily saving and loading settings
  • Events - handle JSAPI events like in AS3, including Event objects
  • FileSystem - object-oriented File and Folder classes
  • FLfile - adds FLfile platform-to-URI conversion compatibility for pre-CS4 versions of Flash
  • JSFL - serialises values to XML for type-safe communication with Flash panels
  • JSON - Standard JSON library
  • XML - Some additional E4X methods to overcome some JSFL-specific bugs

Text I/O

  • Output - logging, introspection, and a variety of printing and formatting methods
  • Source - utility methods for developers to parse source code
  • Table - outputs 2D Array/Object arrays to easily-readable ASCII tables
  • Template - loading and population of templates, including nesting & auto-indentation
  • Validation - validate user or other input


  • Class - a base class to create new classes and inherit prototype chains
  • Data - a collection of methods for manipulating data, including hierarchies
  • Geom - Geometric classes including Bounds
  • Timer - simple timer class, used for benchmarking, etc
  • Utils - Array, Object, String, Number and Color methods

Cool code examples

Smooth all bitmaps in the library:

$$(':bitmap').attr('allowSmoothing', true);

Rename any exported items after their classes, and select them:

function rename(name, index, item){
    return item.linkageClassName.split('.').pop();

Organise library items into respective folders (assets/movie clip, assets/graphic, etc):

    function(e,i){ $$(e).move('assets/' + e + 's'); }

Synchronize the animation of any tweens in your entire .fla (not yet committed in the repo):

function syncAnimation(timeline, index){
    $frames(':animated', timeline).attr('motionTweenSync', true);

Rename, randomise, and select all Leaf items on the current frame (also, noy yet committed in the repo):

			position:['20', '20'],
			width:[20, 100, 20],
			tint:{from:'green', to:'yellow', mode:'hsv'}

Inspect any object's properties, in this case, a library Item:

var item = $$('Movieclip 1').get(0);

Inspect: SymbolItem (objects:8, values:55, time:0.0 seconds)
object => SymbolItem
	[timeline] => Timeline
		 name: "MovieClip 2"
		[layers] => Array
			[0] => Layer
				 name: "Layer 1"
				 layerType: "normal"
				 visible: true
				 locked: false
				 frameCount: 1
				[frames] => Array
					[0] => Frame
						 name: ""
						 actionScript: ""
						[elements] => Array
						 startFrame: 0
						 duration: 1
						 soundLibraryItem: null
						 soundEffect: "none"
						 soundName: ""
						 soundSync: "stream"
						 soundLoopMode: "repeat"
						 soundLoop: 1
						 tweenType: "none"
						 tweenEasing: 0
						 motionTweenScale: true
						 motionTweenRotate: "auto"
						 motionTweenRotateTimes: 0
						 motionTweenOrientToPath: false
						 motionTweenSync: false
						 motionTweenSnap: false
						 shapeTweenBlend: "distributive"
						 labelType: "none"
						 hasCustomEase: false
						 useSingleEaseCurve: true
				 color: "#4fff4f"
				 height: 100
				 outline: false
				 parentLayer: null
		 frameCount: 1
		 currentFrame: 0
		 layerCount: 1
		 currentLayer: 0
		[bindings] => Array
	 symbolType: "movie clip"
	 sourceFilePath: ""
	 sourceLibraryName: undefined
	 sourceAutoUpdate: undefined
	 scalingGrid: true
	[scalingGridRect] => Object
		 left: -12.749
		 top: -12.749
		 right: 12.75
		 bottom: 12.75
	 itemType: "movie clip"
	 name: "Folder 1/MovieClip 2"
	 linkageExportForAS: true
	 linkageExportForRS: false
	 linkageImportForRS: undefined
	 linkageExportInFirstFrame: true
	 linkageIdentifier: ""
	 linkageClassName: "display.MyClass"
	 linkageBaseClass: ""
	 linkageURL: undefined

Inspect the properties of several library items in table format:

var elements = $$(':movieclip').sort().elements;
Table.print(elements, 'symbolType,name,linkageClassName,linkageBaseClass');

| symbolType | name                 | linkageClassName  | linkageBaseClass     |
| movie clip | Folder 1/MovieClip 1 | display.YourClass |                      |
| movie clip | Folder 1/MovieClip 2 | display.MyClass   |                      |
| movie clip | Folder 1/Sprite 1    | Sprite1           | flash.display.Sprite |
| movie clip | Folder 3/Sprite 2    | Sprite2           | flash.display.Sprite |
| movie clip | MovieClip 3          |                   |                      |

Read a file's contents:

var text = new File('assets/text.txt').contents;

Populate a template and output it, retaining indentation {>...}, rendering nested templates {...}, and removing optional non-populated variables {...?}:

// input: object.txt
  {name} =

var methodTemplate = new Template('method.txt', methodData);
var objectData     = {name:'TestClass', content:methodTemplate};
var objectTemplate = new Template('object.txt', objectData);

// output
TestClass =
	set color:function(color)

Count the total lines of code for all files in a folder (and subfolders):

var lines  = 0;
var folder = new Folder(xjsfl.utils.makeURI('core'));
countLines = function(file){
    lines += file.contents.split('\n').length;

Data.recurseFolder(folder, countLines);

// 8522

Output the hierarchical structure of a folder:

Output.folder('core', true); // relative paths are relative to the xJSFL root

			/External Libraries
			/xJSFL Loader.jsfl
			/xJSFL Splash.txt

Test a function and output the error stack if it fails:

function demo()
	var settings = XUL.create('xcolorchip:Color,numeric:Frame rate,Title');


Error: XUL.add(): Undefined control type "xcolorchip"

	0 > ("xcolorchip:Color,numeric:Frame rate,Title")

		line: 1088
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	1 > XUL("xcolorchip:Color,numeric:Frame rate,Title")

		line: 96
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	2 > ("xcolorchip:Color,numeric:Frame rate,Title")

		line: 239
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	3 > demo()

		line: 1429
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	4 > (demo)

		line: 684
		file: xjsfl.jsfl
		path: xJSFL/core/jsfl/libraries/

	5 > 

		line: 1497
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

Anyway, you get the general idea.

Once you get your hands on Komodo and have a look at the source code, you'll be into writing proper classes as well.



3 Responses to Pre-release roundup!

  1. Ash says:

    Hi Dave,
    I can’t find a description of $frames function.
    If I execute your example with synchronization of tweens, error ocured:

    The following JavaScript error(s) occurred:
    At line 280 of file “library.jsfl”:
    TypeError: xjsfl.iterators has no properties

    Also my Komodo Edit 6 doesn’t show autocompletion. But I’ve made all steps that you described.


  2. Dave Stewart says:

    Best you ask this question in the forum, then everyone gets to benefit from the answers, OK?

  3. Dave Stewart says:

    And sorry, $frames is not yet committed! Still working on some of that bit of the framework. As I said, jump in on the forum, and I’ll discuss some workarounds in the meantime.

    PS. Sorry about the iterators error – that’s a bug! I just pushed a fix, so pull / download again and you should be good (no need to reinstall, just update the files)

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>