Soundstep

First post

2008-04-22T00:00:00Z

Hi everyone,

This is my first post on this blog. I won't post, every day, hundred of news about flash or actionscript. A lot of sites and blogs are already doing that very well. Instead, I'll try to bring something personal.

I'll try to release as many classes or experiments as I can depending of my current work and, obviously, my time.

Have a look here to see why I've created this blog.

More will come in the next days... hope you'll enjoy during the next months and don't forget to leave me some comments if it is helping or just to say hello.

Romu

Background fitting the browser and image ratio

2008-05-08T00:00:00Z

Here is an example to show a element like a background, a image in a portfolio or whatever and make it fitting the browser.

In the demo you can choose three modes.

Mode Fit

The picture is fitting the browser regardless the original ratio. The formula is simple:

imagePositionX = 0
imagePositionY = 0
imageWidth = stageWidth
imageHeight = stageHeight

Mode Out (I called it like that because you'll miss a part of the picture)

The picture is fitting the browser as well but we keep the ratio, we'll miss a part of the picture at the right or the bottom in my example.

ratio = initialImageWidth / initialImageHeight
newWidth = stageWidth
newHeight = stageHeight
if (stageWidth / ratio < stageHeight) newWidth = stageHeight * ratio;
else newHeight = stageWidth / ratio;
imagePositionX = 0
imagePositionY = 0
imageWidth = newWidth
imageHeight = newHeight

Mode In

The image is fitting the browser, we also keep the ratio but we show the whole picture, we'll have a gap around depending of the size of the area.

ratio = initialImageWidth / initialImageHeight
newWidth = stageWidth
newHeight = stageHeight
if (stageWidth / ratio > stageHeight) newWidth = stageHeight * ratio
else newHeight = stageWidth / ratio
imageWidth = newWidth
imageHeight = newHeight
imagePositionX = (stageWidth * .5) - (imageWidth * .5)
imagePositionY = (stageHeight * .5) - (imageHeight * .5)

You can see a demo and download the source.

Line Bitmap drawing with Tweener Bezier

2008-05-08T00:00:00Z

After having a look at the tutorial from Lee Brimelow, I used it to make some experiments.

I tried to find a way to draw a moving line on a bezier curve, like a snake. I didn't really reached it. If you have some ideas how to get a "snake line", please let me know.

I used Tweener to animate.

Draw 1 (demo)

Just a simple drawing, a line on moving canvas. Here is the code:

/*
* Class
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;
    import flash.ui.*;
    import caurina.transitions.Tweener;
     
    public class Draw1 extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _canvas:Sprite;
        private var _obj:Object;
         
         
        //------------------------------------
        // public properties
        //------------------------------------
         
         
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Draw1() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.frameRate = 81;
            _obj = {};
            _obj.x = stage.stageWidth * .5;
            _obj.y = stage.stageHeight * .5;
            createCanvas();
        }
         
        //
        // PRIVATE
        //________________________________________________________________________________________________
         
        private function createCanvas(width:int = 500, height:int = 400):void {
            _canvas = new Sprite();
            cacheAsBitmap = true;
            _canvas.cacheAsBitmap = true;
            _canvas.graphics.lineStyle(3, Math.random() * 0xFFFFFF, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
            _canvas.graphics.moveTo(_obj.x, _obj.y);
            addChild(_canvas);
            _canvas.addEventListener(Event.ENTER_FRAME, loop);
            randomTween(getRandomData());
        }
         
        private function loop(e:Event):void {
            _canvas.x -= 4;
            var p:Point = _canvas.globalToLocal(new Point(_obj.x, _obj.y));
            _canvas.graphics.lineTo(p.x, p.y);
        }
         
        private function randomTween(o:Object):void {
            Tweener.addTween(_obj, {y:o.y, time:o.time, transition:"easeInOutElastic", onComplete:
                function():void {
                    randomTween(getRandomData());
                }
            });
        }
         
        private function getRandomData():Object {
            var o:Object = {};
            o.y = Math.round(Math.random() * stage.stageHeight);
            o.time = Math.random() * 3 + 1;
            return o;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
     
    }
 
}

Draw 2 (demo)

The second one I draw 5 lines contained in a circle. I used the bezier property of Tweener to build the curves. So I first draw the curve on a bitmapdata canvas and then use a color matrix filter to fade the line after each drawing.

/*
* Class
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.display.*;
    import flash.events.*;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.*;
    import flash.ui.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
     
    public class Draw2 extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _lineNum:uint = 5;
        private var _pointNum:uint = 5;
        private var _lineArray:Array = [];
        private var _objArray:Object = [];
        private var _maxRadius:Number = 150;
         
        private var _cmf:ColorMatrixFilter;
        private var _bf:BlurFilter;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        private var _bmd:BitmapData;
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Draw2() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.frameRate = 41;
            CurveModifiers.init();
            //graphics.beginFill(0x222222);
            //graphics.drawCircle((stage.stageWidth * .5), (stage.stageHeight * .5), _maxRadius);
            _cmf = new ColorMatrixFilter([1,0,0,0,0,
                                          0,1,0,0,0,
                                          0,0,1,0,0,
                                          0,0,0,.5,0]);
            _bf = new BlurFilter(8, 8, 3);
            createCanvas();
            createLines();
        }
         
        //
        // PRIVATE
        //________________________________________________________________________________________________
         
        public function createCanvas():void {
            _bmd = new BitmapData(550, 400, true, 0x000000);
            var bm:Bitmap = new Bitmap(_bmd);
            addChild(bm);
        }
         
        private function createLines():void {
            for (var i:uint = 0; i < _lineNum; i++) {
                var obj:Object = { };
                obj.color = Math.random() * 0xFF0000;
                obj.x = getRandomPos().x;
                obj.y = getRandomPos().y;
                _objArray.push(obj);
                var l:Sprite = new Sprite();
                //l.filters = [new BlurFilter(2, 2, 3)]
                l.name = "line" + i;
                l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                addChild(l);
                _lineArray.push(l);
                randomTween(getRandomData(obj, l), l);
            }
            addEventListener(Event.ENTER_FRAME, loop);
        }
         
        private function loop(e:Event):void {
            for (var i = 0; i < _lineNum; i++) {
                _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
            }
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
            //_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
            _bmd.draw(this);
        }
         
        private function randomTween(o:Object, line:Sprite):void {
            line.graphics.clear();
            line.graphics.lineStyle(3, o.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
            line.graphics.moveTo(o.x, o.y);
            Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time:o.time, transition:"easeInOutQuad", onComplete:
                function():void {
                    randomTween(getRandomData(o, line), line);
                }
            });
        }
         
        private function getRandomData(obj:Object, line:Sprite):Object {
            obj.time = Math.random() * 2 + .8;
            obj.x1 = getRandomPos().x;
            obj.y1 = getRandomPos().y;
            obj.bezier = [];
            for (var i = 0; i < _pointNum; i++) {
                obj.bezier.push({
                    x:getRandomPos().x,
                    y:getRandomPos().y
                });
            }
            return obj;
        }
         
        private function getRandomPos():Object {
            var o:Object = {}
            o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
            o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
            return o;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
     
    }
 
}

Draw 3 (demo)

In this one, the technic is slightly different. I now update the drawing in the frame loop and use the color matrix filter to leave a trail.

/*
* Class
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.display.*;
    import flash.events.*;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.*;
    import flash.ui.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
     
    public class Draw3 extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _lineNum:uint = 5;
        private var _pointNum:uint = 40;
        private var _lineArray:Array = [];
        private var _objArray:Object = [];
        private var _maxRadius:Number = 150;
         
        private var _cmf:ColorMatrixFilter;
        private var _bf:BlurFilter;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        private var _bmd:BitmapData;
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Draw3() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.frameRate = 41;
            CurveModifiers.init();
            _cmf = new ColorMatrixFilter([1,0,0,0,0,
                                          0,1,0,0,0,
                                          0,0,1,0,0,
                                          0,0,0,.5,0]);
            _bf = new BlurFilter(8, 8, 3);
            createCanvas();
            createLines();
        }
         
        //
        // PRIVATE
        //________________________________________________________________________________________________
         
        public function createCanvas():void {
            _bmd = new BitmapData(550, 400, true, 0x000000);
            var bm:Bitmap = new Bitmap(_bmd);
            addChild(bm);
        }
         
        private function createLines():void {
            for (var i:uint = 0; i < _lineNum; i++) {
                var obj:Object = { };
                obj.color = Math.random() * 0xFF0000;
                obj.x = obj.prevX = getRandomPos().x;
                obj.y = obj.prevY = getRandomPos().y;
                _objArray.push(obj);
                var l:Sprite = new Sprite();
                //l.filters = [new BlurFilter(2, 2, 3)]
                l.name = "line" + i;
                l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                addChild(l);
                _lineArray.push(l);
                randomTween(getRandomData(obj, l), l);
            }
            addEventListener(Event.ENTER_FRAME, loop);
        }
         
        private function loop(e:Event):void {
            for (var i = 0; i < _lineNum; i++) {
                _lineArray[i].graphics.clear();
                _lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                _lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
                _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
                _objArray[i].prevX = _objArray[i].x;
                _objArray[i].prevY = _objArray[i].y;
            }
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
            //_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
            _bmd.draw(this);
        }
         
        private function randomTween(o:Object, line:Sprite):void {
            Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time:o.time, transition:"linear", onComplete:
                function():void {
                    randomTween(getRandomData(o, line), line);
                }
            });
        }
         
        private function getRandomData(obj:Object, line:Sprite):Object {
            obj.time = Math.random() * 8 + 12;
            obj.x1 = getRandomPos().x;
            obj.y1 = getRandomPos().y;
            obj.bezier = [];
            for (var i = 0; i < _pointNum; i++) {
                obj.bezier.push({
                    x:getRandomPos().x,
                    y:getRandomPos().y
                });
            }
            return obj;
        }
         
        private function getRandomPos():Object {
            var o:Object = {}
            o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
            o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
            return o;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
     
    }
 
}

Draw 4 (demo)

Just a bit of fun on the second experiment with a blur filter, pretty nice if you like techno style :)

/*
* Class
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.display.*;
    import flash.events.*;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.*;
    import flash.ui.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
     
    public class Draw4 extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _lineNum:uint = 5;
        private var _pointNum:uint = 5;
        private var _lineArray:Array = [];
        private var _objArray:Object = [];
        private var _maxRadius:Number = 150;
         
        private var _cmf:ColorMatrixFilter;
        private var _bf:BlurFilter;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        private var _bmd:BitmapData;
        private var _bm:Bitmap;
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Draw4() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.frameRate = 41;
            CurveModifiers.init();
            btReload.addEventListener(MouseEvent.CLICK, reload);
            _cmf = new ColorMatrixFilter([1,0,0,0,0,
                                          0,1,0,0,0,
                                          0,0,1,0,0,
                                          0,0,0,1,0]);
            _bf = new BlurFilter(6, 6, 2);
            createCanvas();
            createLines();
        }
         
        //
        // PRIVATE
        //________________________________________________________________________________________________
         
        public function createCanvas():void {
            _bmd = new BitmapData(550, 400, true, 0x000000);
            _bm = new Bitmap(_bmd);
            addChild(_bm);
        }
         
        private function createLines():void {
            for (var i:uint = 0; i < _lineNum; i++) {
                var obj:Object = { };
                obj.color = Math.random() * 0xFF0000;
                obj.x = getRandomPos().x;
                obj.y = getRandomPos().y;
                _objArray.push(obj);
                var l:Sprite = new Sprite();
                l.filters = [new BlurFilter(3, 3, 2)]
                l.name = "line" + i;
                l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                addChild(l);
                _lineArray.push(l);
                randomTween(getRandomData(obj, l), l);
            }
            addEventListener(Event.ENTER_FRAME, loop);
        }
         
        private function loop(e:Event):void {
            for (var i = 0; i < _lineNum; i++) {
                _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
            }
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
            _bmd.draw(this);
        }
         
        private function randomTween(o:Object, line:Sprite):void {
            line.graphics.clear();
            line.graphics.lineStyle(3, o.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
            line.graphics.moveTo(o.x, o.y);
            Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time:o.time, transition:"linear", onComplete:
                function():void {
                    randomTween(getRandomData(o, line), line);
                }
            });
        }
         
        private function getRandomData(obj:Object, line:Sprite):Object {
            obj.time = Math.random() * 2 + .8;
            obj.x1 = getRandomPos().x;
            obj.y1 = getRandomPos().y;
            obj.bezier = [];
            for (var i = 0; i < _pointNum; i++) {
                obj.bezier.push({
                    x:getRandomPos().x,
                    y:getRandomPos().y
                });
            }
            return obj;
        }
         
        private function getRandomPos():Object {
            var o:Object = {}
            o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
            o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
            return o;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
        public function reload(e:MouseEvent = null):void {
            Tweener.removeAllTweens();
            removeEventListener(Event.ENTER_FRAME, loop);
            for (var i:uint = 0; i < _lineNum; i++) {
                removeChild(_lineArray[i]);
            }
            removeChild(_bm);
            _objArray = [];
            _lineArray = [];
            createCanvas();
            createLines();
        }
     
    }
 
}

Draw 5 (demo)

This one is mixing the colors and creating a shape little by little.

/*
* Class
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.display.*;
    import flash.events.*;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.*;
    import flash.ui.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
     
    public class Draw5 extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _lineNum:uint = 5;
        private var _pointNum:uint = 10;
        private var _lineArray:Array = [];
        private var _objArray:Object = [];
        private var _maxRadius:Number = 150;
         
        private var _cmf:ColorMatrixFilter;
        private var _bf:BlurFilter;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        private var _bmd:BitmapData;
        private var _bm:Bitmap;
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Draw5() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.frameRate = 41;
            CurveModifiers.init();
            btReload.addEventListener(MouseEvent.CLICK, reload);
            _cmf = new ColorMatrixFilter([1.1,0,0,0,0,
                                          0,1.1,0,0,0,
                                          0,0,1.1,0,0,
                                          0,0,0,.585,0]);
            _bf = new BlurFilter(5, 5, 2);
            createCanvas();
            createLines();
        }
         
        //
        // PRIVATE
        //________________________________________________________________________________________________
         
        public function createCanvas():void {
            _bmd = new BitmapData(550, 400, true, 0x000000);
            _bm = new Bitmap(_bmd);
            addChild(_bm);
        }
         
        private function createLines():void {
            for (var i:uint = 0; i < _lineNum; i++) {
                var obj:Object = { };
                obj.color = Math.random() * 0xFF0000;
                obj.x = obj.prevX = getRandomPos().x;
                obj.y = obj.prevY = getRandomPos().y;
                _objArray.push(obj);
                var l:Sprite = new Sprite();
                l.filters = [new BlurFilter(2, 2, 2)]
                l.name = "line" + i;
                l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                addChild(l);
                _lineArray.push(l);
                randomTween(getRandomData(obj, l), l);
            }
            addEventListener(Event.ENTER_FRAME, loop);
        }
         
        private function loop(e:Event):void {
            for (var i = 0; i < _lineNum; i++) {
                _lineArray[i].graphics.clear();
                _lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                _lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
                _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
                _objArray[i].prevX = _objArray[i].x;
                _objArray[i].prevY = _objArray[i].y;
            }
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
            _bmd.draw(this);
        }
         
        private function randomTween(o:Object, line:Sprite):void {
            Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time:o.time, transition:"linear", onComplete:
                function():void {
                    randomTween(getRandomData(o, line), line);
                }
            });
        }
         
        private function getRandomData(obj:Object, line:Sprite):Object {
            obj.time = Math.random() * 3 + 3;
            obj.x1 = getRandomPos().x;
            obj.y1 = getRandomPos().y;
            obj.bezier = [];
            for (var i = 0; i < _pointNum; i++) {
                obj.bezier.push({
                    x:getRandomPos().x,
                    y:getRandomPos().y
                });
            }
            return obj;
        }
         
        private function getRandomPos():Object {
            var o:Object = {}
            o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
            o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
            return o;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
        public function reload(e:MouseEvent = null):void {
            Tweener.removeAllTweens();
            removeEventListener(Event.ENTER_FRAME, loop);
            for (var i:uint = 0; i < _lineNum; i++) {
                removeChild(_lineArray[i]);
            }
            removeChild(_bm);
            _objArray = [];
            _lineArray = [];
            createCanvas();
            createLines();
        }
     
    }
 
}

Draw 6 (demo)

Almost the same test but I move the bitmapdata layer.

/*
* Class
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.display.*;
    import flash.events.*;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.*;
    import flash.ui.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
     
    public class Draw6 extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _lineNum:uint = 5;
        private var _pointNum:uint = 40;
        private var _lineArray:Array = [];
        private var _objArray:Object = [];
        private var _maxRadius:Number = 150;
         
        private var _cmf:ColorMatrixFilter;
        private var _bf:BlurFilter;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        private var _bmd:BitmapData;
        private var _bm:Bitmap;
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Draw6() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.frameRate = 41;
            CurveModifiers.init();
            btReload.addEventListener(MouseEvent.CLICK, reload);
            _cmf = new ColorMatrixFilter([1.1,0,0,0,0,
                                          0,1.1,0,0,0,
                                          0,0,1.1,0,0,
                                          0,0,0,.66,0]);
            _bf = new BlurFilter(8, 8, 2);
            createCanvas();
            createLines();
        }
         
        //
        // PRIVATE
        //________________________________________________________________________________________________
         
        public function createCanvas():void {
            _bmd = new BitmapData(800, 400, true, 0x000000);
            _bm = new Bitmap(_bmd);
            addChild(_bm);
        }
         
        private function createLines():void {
            for (var i:uint = 0; i < _lineNum; i++) {
                var obj:Object = { };
                obj.color = Math.random() * 0xFF0000;
                obj.x = obj.prevX = getRandomPos().x;
                obj.y = obj.prevY = getRandomPos().y;
                _objArray.push(obj);
                var l:Sprite = new Sprite();
                l.filters = [new BlurFilter(2, 2, 2)]
                l.name = "line" + i;
                l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                addChild(l);
                _lineArray.push(l);
                randomTween(getRandomData(obj, l), l);
            }
            addEventListener(Event.ENTER_FRAME, loop);
        }
         
        private function loop(e:Event):void {
            for (var i = 0; i < _lineNum; i++) {
                _lineArray[i].graphics.clear();
                _lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
                _lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
                _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
                _objArray[i].prevX = _objArray[i].x;
                _objArray[i].prevY = _objArray[i].y;
            }
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
            _bmd.draw(this);
            _bmd.scroll(-4, 0);
        }
         
        private function randomTween(o:Object, line:Sprite):void {
            Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time:o.time, transition:"linear", onComplete:
                function():void {
                    randomTween(getRandomData(o, line), line);
                }
            });
        }
         
        private function getRandomData(obj:Object, line:Sprite):Object {
            obj.time = Math.random() * 8 + 12;
            obj.x1 = getRandomPos().x;
            obj.y1 = getRandomPos().y;
            obj.bezier = [];
            for (var i = 0; i < _pointNum; i++) {
                obj.bezier.push({
                    x:getRandomPos().x,
                    y:getRandomPos().y
                });
            }
            return obj;
        }
         
        private function getRandomPos():Object {
            var o:Object = {}
            o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5 + 200);
            o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
            return o;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
        public function reload(e:MouseEvent = null):void {
            Tweener.removeAllTweens();
            removeEventListener(Event.ENTER_FRAME, loop);
            for (var i:uint = 0; i < _lineNum; i++) {
                removeChild(_lineArray[i]);
            }
            removeChild(_bm);
            _objArray = [];
            _lineArray = [];
            createCanvas();
            createLines();
        }
     
    }
 
}

Source

You can download the source here.

More links

More details on the Tweener bezier curve and the color matrix filter use.

3D line drawing with Papervision

2008-05-13T00:00:00Z

Back to the line drawing I started in this post.

I wanted to get a snake-like line and I had a try with Papervision3D. It made me able to handle the vertices and then delete the end of the lines.

Draw 1 (demo)

I started from an excellent work from Xero (the.fontvir.us) on the Papervision3D mailing list but instead of using a Lorenz attractor, I used the Tweener Bezier property as I did on the 2D versions.

I set a number of vertices, that is giving me the length of the line. Here is the code:

/*
* Lines3D1
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0
* 05-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import org.papervision3d.core.geom.renderables.*;
    import org.papervision3d.materials.special.*;
    import org.papervision3d.core.geom.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.cameras.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
    import flash.events.*;
 
    public class Lines3D1 extends BaseP3D {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var sight:DisplayObject3D;
        private var lineMaterial:LineMaterial;
        private var arrLines:Array = [];
        private var _objArray:Array = [];
        private var _linesNum:int = 5;
        private var _maxRadius:int = 200;
        private var _pointNum:uint = 80;
        private var _verticesNum:uint = 50;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Lines3D1() {
            stage.frameRate = 81;
            CurveModifiers.init();
            super(600, 600);
            b.addEventListener(MouseEvent.CLICK, reload);
            addChild(b);
        }
         
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        override protected function init2D():void {
            for (var u:int=0; u<_linesNum; u++) {
                var obj:Object = {};
                var newPos:Object = getRandomPos();
                obj['prevX'] = obj['x'] = newPos['x'];
                obj['prevY'] = obj['y'] = newPos['y'];
                obj['prevZ'] = obj['z'] = newPos['z'];
                obj['color'] = Math.random() * 0xFFFFFF;
                _objArray.push(obj);
                randomTween(getRandomData(obj));
            }
        }
 
        override protected function init3D():void {
            camera.zoom = 5;
            camera.z = -200;
            sight = new DisplayObject3D();
            camera.target = sight;
            lineMaterial = new LineMaterial(Math.random()* 0xFFFFFF);
            for (var f:int=0; f<_linesNum; f++) {
                var line:Lines3D = new Lines3D(lineMaterial, "line");
                arrLines.push(line);
                scene.addChild(line, "line");
            }
        }
         
        override protected function processFrame():void {
            for (var h:int=0; h<_linesNum; h++) {
                arrLines[h].addLine(new Line3D(arrLines[h], new LineMaterial(_objArray[h]['color'], 1), 3, new Vertex3D(_objArray[h]['prevX'],_objArray[h]['prevY'],_objArray[h]['prevZ']), new Vertex3D(_objArray[h]['x'],_objArray[h]['y'],_objArray[h]['z'])));
                _objArray[h]['prevX'] = _objArray[h]['x'];
                _objArray[h]['prevY'] = _objArray[h]['y'];
                _objArray[h]['prevZ'] = _objArray[h]['z'];
                if (arrLines[h].lines.length > _verticesNum) arrLines[h].lines.shift();
                camera.x += (((mouseX -(stage.stageWidth*.5))*3)-camera.x)*.01;
                camera.y += (((mouseY-(stage.stageHeight*.5))*3)-camera.y)*.01;
            }
        }
         
        private function randomTween(o:Object):void {
            Tweener.addTween(o, {x:o['x1'], y:o['y1'], z:o['z1'], _bezier:o['bezier'], time:o['time'], transition:"linear", onComplete:
                function():void {
                    randomTween(getRandomData(o));
                }
            });
        }
         
        private function getRandomData(o:Object):Object {
            o['time'] = Math.random() * (_pointNum*.5) + (_pointNum*.25);
            var newPos:Object = getRandomPos();
            o['x1'] = newPos['x'];
            o['y1'] = newPos['y'];
            o['z1'] = newPos['z'];
            o['bezier'] = [];
            for (var i:int=0; i<_pointNum; i++) {
                var newBezierPos:Object = getRandomPos();
                o['bezier'].push({
                    x:newBezierPos['x'],
                    y:newBezierPos['y'],
                    z:newBezierPos['z']
                });
            }
            return o;
        }
         
        private function getRandomPos():Object {
            var angleY:Number = Math.random() * 2 * Math.PI;
            var angleXZ:Number = Math.random() * 2 * Math.PI;
            var o:Object = {};
            o['x'] = Math.cos(angleY) * Math.sin(angleXZ) * _maxRadius;
            o['y'] = Math.sin(angleY) * Math.sin(angleXZ) * _maxRadius;
            o['z'] = Math.cos(angleXZ) * _maxRadius;
            return o;
        }
         
        private function reload(e:MouseEvent = null):void {
            Tweener.removeAllTweens();
            for (var r:int=0; r<_linesNum; r++) {
                scene.removeChild(arrLines[r]);
            }
            _objArray = [];
            arrLines = [];
            init3D();
            init2D();
        }
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
    }
     
}

Draw 2 (demo)

And a bit of fun with the Bitmap layer, the ColorMatrixFilter and the BlurFilter.

/*
* Lines3D2
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0
* 05-2008
* 
* @author       Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version      1.0
* @usage        
* 
*/
 
package {
     
    import flash.geom.Point;    
    import flash.display.Bitmap;    
    import flash.display.BitmapData;    
    import flash.filters.BlurFilter;    
    import flash.filters.ColorMatrixFilter; 
    import org.papervision3d.core.geom.renderables.*;
    import org.papervision3d.materials.special.*;
    import org.papervision3d.core.geom.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.cameras.*;
    import caurina.transitions.Tweener;
    import caurina.transitions.properties.CurveModifiers;
    import flash.events.*;
     
    public class Lines3D2 extends BaseP3D {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var sight:DisplayObject3D;
        private var lineMaterial:LineMaterial;
        private var arrLines:Array = [];
        private var _objArray:Array = [];
        private var _linesNum:int = 5;
        private var _maxRadius:int = 200;
        private var _pointNum:uint = 80;
        private var _verticesNum:uint = 30;
        private var _cmf:ColorMatrixFilter;
        private var _bf:BlurFilter;
        private var _bmd:BitmapData;
        private var _bm:Bitmap;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Lines3D2() {
            stage.frameRate = 81;
            CurveModifiers.init();
            super(600, 600);
            b.addEventListener(MouseEvent.CLICK, reload);
            addChild(b);
        }
         
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        override protected function init2D():void {
            _cmf = new ColorMatrixFilter([1.05,0,0,0,0,
                                          0,1.05,0,0,0,
                                          0,0,1.05,0,0,
                                          0,0,0,.54,0]);
            _bf = new BlurFilter(5, 5, 2);
            createCanvas();
            for (var u:int=0; u<_linesNum; u++) {
                var obj:Object = {};
                var newPos:Object = getRandomPos();
                obj['prevX'] = obj['x'] = newPos['x'];
                obj['prevY'] = obj['y'] = newPos['y'];
                obj['prevZ'] = obj['z'] = newPos['z'];
                obj['color'] = Math.random() * 0xFFFFFF;
                _objArray.push(obj);
                randomTween(getRandomData(obj));
            }
        }
         
        override protected function init3D():void {
            camera.zoom = 5;
            camera.z = -200;
            sight = new DisplayObject3D();
            camera.target = sight;
            lineMaterial = new LineMaterial(Math.random()* 0xFFFFFF);
            for (var f:int=0; f<_linesNum; f++) {
                var line:Lines3D = new Lines3D(lineMaterial, "line");
                arrLines.push(line);
                scene.addChild(line, "line");
            }
        }
         
        private function createCanvas():void {
            _bmd = new BitmapData(600, 600, true, 0x000000);
            _bm = new Bitmap(_bmd);
            addChild(_bm);
        }
 
        override protected function processFrame():void {
            for (var h:int=0; h<_linesNum; h++) {
                arrLines[h].addLine(new Line3D(arrLines[h], new LineMaterial(_objArray[h]['color'], 1), 3, new Vertex3D(_objArray[h]['prevX'],_objArray[h]['prevY'],_objArray[h]['prevZ']), new Vertex3D(_objArray[h]['x'],_objArray[h]['y'],_objArray[h]['z'])));
                _objArray[h]['prevX'] = _objArray[h]['x'];
                _objArray[h]['prevY'] = _objArray[h]['y'];
                _objArray[h]['prevZ'] = _objArray[h]['z'];
                if (arrLines[h].lines.length > _verticesNum) arrLines[h].lines.shift();
                camera.x += (((mouseX -(stage.stageWidth*.5))*3)-camera.x)*.01;
                camera.y += (((mouseY-(stage.stageHeight*.5))*3)-camera.y)*.01;
            }
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
            _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
            _bmd.draw(this);
        }
         
        private function randomTween(o:Object):void {
            Tweener.addTween(o, {x:o['x1'], y:o['y1'], z:o['z1'], _bezier:o['bezier'], time:o['time'], transition:"linear", onComplete:
                function():void {
                    randomTween(getRandomData(o));
                }
            });
        }
         
        private function getRandomData(o:Object):Object {
            o['time'] = Math.random() * (_pointNum*.5) + (_pointNum*.25);
            var newPos:Object = getRandomPos();
            o['x1'] = newPos['x'];
            o['y1'] = newPos['y'];
            o['z1'] = newPos['z'];
            o['bezier'] = [];
            for (var i:int=0; i<_pointNum; i++) {
                var newBezierPos:Object = getRandomPos();
                o['bezier'].push({
                    x:newBezierPos['x'],
                    y:newBezierPos['y'],
                    z:newBezierPos['z']
                });
            }
            return o;
        }
         
        private function getRandomPos():Object {
            var angleY:Number = Math.random() * 2 * Math.PI;
            var angleXZ:Number = Math.random() * 2 * Math.PI;
            var o:Object = {};
            o['x'] = Math.cos(angleY) * Math.sin(angleXZ) * _maxRadius;
            o['y'] = Math.sin(angleY) * Math.sin(angleXZ) * _maxRadius;
            o['z'] = Math.cos(angleXZ) * _maxRadius;
            return o;
        }
         
        private function reload(e:MouseEvent = null):void {
            Tweener.removeAllTweens();
            for (var r:int=0; r<_linesNum; r++) {
                scene.removeChild(arrLines[r]);
            }
            removeChild(_bm);
            _objArray = [];
            arrLines = [];
            init3D();
            init2D();
        }
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
    }
     
}

Get a random point in a sphere

maxRadius = 200
angleY = Math.random() * 2 * Math.PI
angleXZ = Math.random() * 2 * Math.PI
x = Math.cos(angleY) * Math.sin(angleXZ) * maxRadius
y = Math.sin(angleY) * Math.sin(angleXZ) * maxRadius
z = Math.cos(angleXZ) * maxRadius`

Get the source here.

Background fitting the browser (html/css/javascript)

2008-05-13T00:00:00Z

This has nothing to do with flash but I share this quick try as I saw a lot of people looking for a background that fit the browser in html.

I used the ratio out I explained in this previous post, obviously you don't have the flash smoothing.

It is not perfect, I had to remove the scrollbars as a part of the picture is not visible. See the demo and download the source.

I'm far from being a good html/css/javascript developer so If you know already a good version or if you have developed one, please let me know.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Soundstep | experiments (html/css background fitting the borwser)</title>
<style>
html, body {
    overflow: hidden;
}
</style>
<script type="text/javascript" src="browser.js"></script>
<script>
function fixedBackground(url) {
    document.body.style.padding = '0';
    document.body.style.margin = '0';
    var overlay = document.createElement('DIV');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.height = '100%';
    overlay.style.width = '100%';
    overlay.innerHTML = document.body.innerHTML;
    document.body.innerHTML = '<img id="bg" width="10" height="10" src="' + url + '" style="left: 0; top: 0; z-index: 0" />';
    document.body.appendChild(overlay);
    backgroundset = true;
    updateBackground();
}
 
function updateBackground() {
    var bSize = getSize();
    var sWidth = bSize.w;
    var sHeight = bSize.h;
    var ratio = 1024 / 768;
    if (sWidth / ratio < sHeight) sWidth = sHeight * ratio;
    else sHeight = sWidth / ratio;
    var __bg = document.getElementById('bg');
    __bg.top = 0;
    __bg.left = 0;
    __bg.width = sWidth;
    __bg.height = sHeight;
}
 
function getSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }
    else if (document.body && ( document.body.clientWidth || document.body.clientHeight )) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    var r = {w:myWidth, h:myHeight};
    return r;
}
</script>
</head>
 
<body onresize="updateBackground()" onload="fixedBackground('bg.jpg')">
 
</body>
</html>

BaseUI tutorial

2008-05-17T00:00:00Z

Click here to access to the demo and source.

This is a tutorial to explain you what you can do with BaseUI. It will not build a website for you (not yet :)) but should reduce your efforts by handling basic and common rules in a flash site, such as position, margin and resize of a DisplayObject.

I didn't test all the DisplayObject subclasses, so you might find funny results if a subclass is not working as expected. BaseUI is a young class I'm using for my own project and obviously needs debugging, more testing and improvement.

Let's get started.

Creating a BaseUI instance

BaseUI extends EventDispatcher and is basically managing a list of DisplayObject and a list of DisplayObject to render (I mean render by changing the position and the size).

BaseUI is not a Singleton, you can create as many instance as you wish.

Usually, I'm creating a main BaseUI instance in the main class, the entry point, to manage most of my elements. As you can see in the demo, the central window is a Sprite with its own BaseUI instance.

Example in the main class (which is extending Sprite or MovieClip):

 import com.soundstep.ui.\* var baseUI:BaseUI = new BaseUI(this);

Adding Elements as ElementUI

Now that we have our instance, we can start to add a DisplayObject in the list. BaseUI has 3 public methods: addElement, removeElement and getElement.

You can get an array of the elements added with the elements property of the BaseUI instance:

var allElements:Array = baseUI.elements;

The addElement will return an instance of the ElementUI class. This instance has the properties needed to handle the behavior of the DisplayObject.

var element:ElementUI = baseUI.addElement(mySprite);

This action add the DisplayObject to the BaseUI list and when you will add the sprite to the display list by using addChild(mySprite), the DisplayObject will be automatically added to the list-to-render in the BaseUI class, and then apply the rules set in the ElementUI instance.

You can get the ElementUI created like this:

var element:ElementUI = baseUI.getElement(mySprite);

You can remove an element from the list like this:

baseUI.removeElement(mySprite);

Note: If you remove the DisplayObject from the display list using removeChild(mySprite), the BaseUI removes the element from the list-to-render but the element is still listed in the BaseUI instance until you use the removeElement method. It means you can remove a child from the display list and add it again, the BaseUI will still apply the rules you have set to this element.

Type of an ElementUI

An ElementUI instance can be two types: element that is the default one and background. Some rules are common and some others are only working with a certain type. The class will throw an error if you try to do something wrong.

You can set the type when you add the element to the BaseUI instance or later.

Add a DisplayObject type element:

var element:ElementUI = baseUI.addElement(mySprite);

var element:ElementUI = baseUI.addElement(mySprite, ElementUI.TYPE\_ELEMENT);

Add a DisplayObject type background:

var element:ElementUI = baseUI.addElement(mySprite, ElementUI.TYPE\_BACKGROUND);

Change the type of an element:

 element.type = ElementUI.TYPE\_ELEMENT; element.type = ElementUI.TYPE\_BACKGROUND;

Reference to the ElementUI

Before we start to change the size and position of an element, you have to understand on which DisplayObject you align or resize to.

An ElementUI instance has a property onStage, the default is true. It means if you add a 10 pixels margin top, it will be 10 pixels from the top of the stage.

When I build a site, I'm using an element (like a logo, a menu, a page, a footer or whatever) like I would do in Photoshop, on a layer that is taking the whole area. That's why the onstage is set to true by default, you can change it like this:

element.onStage = false;

By doing this, you tell the Element to react, not with the stage anymore but with the parent DisplayObject. We will call it the DisplayObject reference, so the stage or the parent.

In the demo, the property onStage of the ElementUI in the Window are set to false because I want them to react with the window Sprite (DisplayObject reference), not the stage.

You have to be careful using an onStage property set to false, because it means the DisplayObject reference need to have a size to behave as expected.

For example, in a site, your main area is an invisible rectangle 800x600 (a container) that is always centered in the DisplayObject reference (the stage in my example). You can set the ElementUI onStage property of the DisplayObject in the container to false to make the elements behave as expected. It means the invisible container will have to have a width and height. The central window in the demo is working like that, Here is a hack to do that:

 var container:Sprite = new Sprite(); container.graphics.beginFil(0xFF0000, 0); container.graphics.drawRect(0, 0, 800, 600); addChild(container);

I draw an invisible rectangle (the alpha is set to 0) in my container to be sure the DisplayObject reference (the container) of my ElementUI has a size, and then make the ElementUI inside behave as expected.

Note: at the moment the type background is not working with a property onstage set to false, probably a further development.

Alignment

The alignment is a common property for both types, you can align an ElementUI to top, bottom, left, right and center. You have to set your alignment to an axis. The following example aligns an ElementUI to the right and the bottom of the DisplayObject reference:

 element.alignX = ElementUI.ALIGN\_RIGHT; element.alignY = ElementUI.ALIGN\_BOTTOM;

Here is the list of the alignment

 element.alignX = ElementUI.ALIGN\_LEFT; element.alignX = ElementUI.ALIGN\_CENTER; element.alignX = ElementUI.ALIGN\_RIGHT; element.alignY = ElementUI.ALIGN\_TOP; element.alignY = ElementUI.ALIGN\_CENTER; element.alignY = ElementUI.ALIGN\_BOTTOM;

From the version 1.1.0 you can set the horizontal and vertical alignment when the element is centered.

 element.horizontalAlign = 100; element.verticalAlign = -80;

Margin

The margin is also a common property for both types. Here is an example how to set a 10 pixels margin around a DisplayObject:

element.margin = 10;

You can set the margin only on a side, here is a list of the properties:

 element.marginLeft = 10; element.marginRight = 10; element.marginTop = 10; element.marginBottom = 10;

The margin property can also accept an Object:

element.margin = {left:10, right:20, top:10, bottom:20};

Type background

This type can be used for a background or a slideshow for example. It has a specific property mode that is resizing a DisplayObject to fit the DisplayObject reference. When a picture or a video is resized, I strongly recommend using the smoothing property like this:

 var bg:Bitmap = new Bitmap(new MyBitmap(0,0), PixelSnapping.AUTO, true); var element:ElementUI = baseUI.addElement(bg, ElementUI.TYPE\_BACKGROUND); element.mode = ElementUI.RATIO\_OUT; addChild(bg);

The three mode of the type background are ratio in, ratio out and ratio fit. Test the demo and see the behaviour of the different mode. You can use the alignment and margin with the mode.

The mode ratio fit is fitting the DisplayObject reference with the DisplayObject without keeping the ratio.

The mode ratio in is fitting the DisplayObject reference with the DisplayObject, keeping the ratio and you will always see the whole DisplayObject.

The mode ratio out is fitting the DisplayObject reference with the DisplayObject, keeping the ratio and you will always miss a part of the DisplayObject depending of the alignment.

Here is the syntax to set the mode:

 element.mode = ElementUI.RATIO\_FIT; element.mode = ElementUI.RATIO\_IN; element.mode = ElementUI.RATIO\_OUT;

Type Element

The type element has a property resizeOption. You can choose to resize the DisplayObject to fit the area in the width or the height. You can still use the margin and the alignment. It is useful for example to draw a line. Here is the syntax:

 element.resizeOption = ElementUI.OPTION\_ELEMENT\_WIDTH; element.resizeOption = ElementUI.OPTION\_ELEMENT\_HEIGHT;

Example:

 var lineAboveFooter:Sprite = new Sprite(); lineAboveFooter.graphics.beginFill(0xFF0000); lineAboveFooter.graphics.drawRect(0, 0, 10, 1); var element:ElementUI = baseUI.addElement(lineAboveFooter); element.alignY = ElementUI.ALIGN\_BOTTOM; element.margin = {left:20, right:20, bottom:30}; element.resizeOption = ElementUI.OPTION\_ELEMENT\_WIDTH; addChild(lineAboveFooter);

This example will resize your Sprite to fit the DisplayObject reference, align it at 30 pixels from the bottom with a margin left and right of 20 pixels.

Note: For this example, use the drawRect with height 1 pixel as the drawLine method wasn't behaving as expected.

Initial Size

When a DisplayObject is added in the BaseUI instance, an ElementUI is created and at this moment, the Element instance is recording the size of the DisplayObject. This is the initialWidth and initialHeight of the DisplayObject. They are private property but it might change to public in further development.

This size is used to calculate the ratio of the mode for example.

An ElementUI instance has a property useInitialSize set by default to false, you can change it to true when you want the behaviour of the ElementUI working with the initial size. It is useful for example when you have a mask in a Sprite that is disturbing the width and height of this Sprite.

If you have an unexpected behaviour, if you find bugs or if you have ideas to improve BaseUI, just contact me.

I hope it helps.

BaseUI minor updates

2008-05-23T00:00:00Z

I made some updates in BaseUI. You don't have to change a code already written, it is just bugs correction or functionalities added.

The demo, docs and source in the download page are updated.

Version 1.0.8 - The elements are now correctly refreshed when created if they are not visible (alpha or visible properties)

Version 1.0.7 - The elements are now correctly refreshed when a position or a margin is changed

Version 1.0.6 - Bug correction with the margin when using a type background mode ratio out

Version 1.0.5 - refresh method added in BaseUI

you can refresh all the elements of a BaseUI instance:

baseUI.refresh();

Version 1.0.4 - The Element is added to the list-to-render if the DisplayObject is already in the display list

When you create a ElementUI by adding a DisplayObject to a BaseUI instance, if this DisplayObject has been already added to the display list, the ElementUI is now added it correctly to the render list. This wasn't possible before:

var s:Sprite = new Sprite(); addChild(s); var e:ElementUI = baseUI.addElement(s);

Version 1.0.3 - Refresh method in ElementUI is now public

It makes you able to access to the refresh method:

var e:ElementUI = baseUI.getElement(mySprite); e.refresh();

Version 1.0.2 - removeAllElements method added in BaseUI

You can remove All the elements in BaseUI:

baseUI.removeAllElements();

Version 1.0.1 - Alignment and position for the background in mode ratio out is now respected

It makes you able to set the alignment of a ElementUI type background in mode ratio out. This wasn't possible before and was always aligned top left.

MouseChildren and buttonMode in AS2

2008-05-26T00:00:00Z

A quick post for an AS2 class I wrote. I won't do that a lot as I'm not really using AS2 anymore.

Have you ever had a Button in another Button in as2? Or let's say, you wanted a onRollOver on a MovieClip and a onRelease on another MovieClip in this MovieClip?

Well, it happened to me several times and this is just not possible by using only onRelease and onRollOver in the same time. In AS2, the first onRelease or whatever you use that will give a pointer cursor will "block" the onRelease/onRollOver of the children, annoying...

In AS3, life is easy, you manage it with the mouseChildren and buttonMode properties.

I don't know how you solved this problem, maybe there's another simpler solution (let me know, I'm curious) but mine was to play with the hitTest method of the MovieClip.

I wrote a class that I found useful for me. After creating a instance with the MovieClip target as a parameter, the class dispatch a MouseManager.MOUSE_OVER and MouseManager.MOUSE_OUT.

You can see a demo and download the source.

The code of the class:

/*
* 
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 2.0
* 05-2008
*
* @author      Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version    1.0
* @usage
*
*/
 
 
import mx.utils.Delegate;
import mx.events.EventDispatcher;
 
class com.soundstep.utils.managers.MouseManager {
     
    private var __target:MovieClip;
    private var __mouseListener:Object;
    private var __over:Boolean = false;
    private var dispatchEvent:Function;
     
    public var addEventListener:Function;
    public var removeEventListener:Function;
     
    public static var MOUSE_OVER:String = "mouse_over";
    public static var MOUSE_OUT:String = "mouse_out";
     
    public function MouseManager(target:MovieClip) {
        EventDispatcher.initialize(this);
        __target = target;
        __mouseListener = {};
        Mouse.addListener(__mouseListener);
        __mouseListener.onMouseMove = Delegate.create(this, mouseOverOut);
        mouseOverOut();
    }
     
    // PRIVATE
    //__________________________________________________________
     
    private function mouseOverOut():Void {
        var xMousePos:Number = _level0._xmouse;
        var yMousePos:Number = _level0._ymouse;
        if (__target.hitTest(xMousePos, yMousePos, true)) {
            if (!__over) {
                __over = true;
                this.dispatchEvent({type:MouseManager.MOUSE_OVER, target:__target});
            }
        }
        else {
            if (__over) {
                __over = false;
                this.dispatchEvent({type:MouseManager.MOUSE_OUT, target:__target});
            }
        }
    }
     
    // PUBLIC
    //__________________________________________________________
     
    public function get over():Boolean {
        return __over;
    }
     
}

and how to use it:

import mx.utils.Delegate;
import com.soundstep.utils.managers.MouseManager;
 
var mm:MouseManager = new MouseManager(mc);
mm.addEventListener(MouseManager.MOUSE_OVER, Delegate.create(this, mouseOver));
mm.addEventListener(MouseManager.MOUSE_OUT, Delegate.create(this, mouseOut));
 
var t:String = mc.mcText.text;
 
function mouseOver():Void {
    mc.mcText.text = t + " rollover";
}
 
function mouseOut():Void {
    mc.mcText.text = t;
}
 
mc.bt.onRollOver = function():Void {
    this.btText.text = "Button in MovieClip rollover";
}
 
mc.bt.onRollOut = function():Void {
    this.btText.text = "Button in MovieClip";
}

Data access with array extending and proxy extending

2008-05-27T00:00:00Z

I made some experiments on how to easily access to data in a Flash site. It is probably a mix with good and bad ways but I think it is worth having a look.

What I’ve done here is get data with syntax that is similar to what you get using E4X in AS3. For example with XML and E4X you can use syntax like that:

xml..item[2].author.name.text();

I’m not saying that this experiment is a good practice but I want to show you what you can do by extending the Array class and extending the Proxy class in AS3. The Proxy class is the replacement of the __resolve we were using in AS2.

Let’s say we have a website that will load data from a database at the start, for example using AMFPHP or whatever, and we are going to fill this data at run-time.

In my example I have a kind of tree with countries > cities > people.

I would like to be able to loop easily through the data, as well as getting them with a friendly/readable syntax if needed.

In my example, I have a Singleton class that contains all the data. I don’t load the data in my example, I statically fill the class. I will access to the data like that:

Content.data

This will return me a array of data, which will contains an array of countries, each instance of the country array will contains an array of cities, which will contains an array of people, etc…

So I’d like to access to my data like this:

To browse the countries:

Content.data[0] Content.data[1]

To browse the cities in the countries:

Content.data[0][0] Content.data[0][1]

To browse the people in the cities:

Content.data[0][0][0] Content.data[0][0][1]

That’s nice to loop through with a “for each” or whatever. An Array is a pretty nice tool to store data as you get some functions to manage it like push, splice, reverse, etc.

But these arrays have a problem, what if I need to get more info on my countries, like the weather, an ID or the surface of the country? I would like access to more data like that:

Content.data[0].name Content.data[0].id

This is possible with an Array as it is one of the few classes in AS3 that are dynamic. It means you can set any property at run time. For example MovieClip is dynamic and Sprite is not, try to add properties at run-time on these classes to see the result. Some people are saying that is it a good and bad things. It is easy to use but you don’t know what kind of properties will be added in your Array at run-time.

So you don’t want that, and better, you want to control what kind of data they are going to put in your Array. We will get that by extending the Array class.

There’s a nice explanation here to extends an Array, as well as control the data type your custom Array class will accept.

So far it is not bad, we can easily access to our data, we can have properties on these arrays and finally we know that we will have the right type of content inside.

The other thing I want is access to my data with a nice E4X-like:

Content.data.France.name Content.data.France.Paris.name

Easy, we just need a property France on this array and it is done. Well, the thing is we don’t know yet what this array will be filled with, so we are talking about dynamic properties. These dynamic properties will have to be added to the array when we create it because we said we want to control and we don’t want people adding their own properties.

How do we do that?

We’re going to use the Proxy class that make able us able to handle dynamic properties and dynamic calling.

We will have a class that will be an array (what you get when you call Content.data), a class for the countries, a class for the cities and a class for the people. The people class won’t be an array.

So we have the classes DataArray, CountryArray and CityArray that are extending the Array class. We will also have a Proxy class (a class that is extending the Proxy one) for each of the Array. I choose to a Proxy class for each Array class as it is easier to understand.

Let’s see a bit of code.

The Singleton Content class

package com.soundstep.data {
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Copyright:</b> Free to use and change (except to include in a framework), an notification email will be welcome for a commercial use (just for information).<br />
     * <b>Date:</b> 05-2008<br />
     * <b>Usage:</b> Manage a Section
     * @example
     * <listing version="3.0">
         
     * </listing>
     */
     
    public class Content {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private static var content:Content = new Content();
        private static var _data:Data;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
         
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Content() {
            if (content) throw new Error("Content is Singleton and can only be accessed through Content.data");
            if (_data == null) buildData();
        }
         
        //
        // PRIVATE, INTERNAL
        //________________________________________________________________________________________________
         
        private function buildData():void {
            _data = new Data();
             
        }
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
        public static function get data():Data {
            return _data;
        }
         
    }
     
}

The Data and DataArray class

The DataArray is extending the Array class. To be able to extend the Array class you need the dynamic keyword before the class.

dynamic public class DataArray extends Array {

We have a private property type Class used to control the Data we will push in our extended Array.

private var dataType:Class;

To control the type pushed we have to overwrite 4 functions: push, concat, splice and unshift, as it is nicely explained in the AS3 documentation.

Here is the code:

package com.soundstep.data {
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Copyright:</b> Free to use and change (except to include in a framework), an notification email will be welcome for a commercial use (just for information).<br />
     * <b>Date:</b> 05-2008<br />
     * <b>Usage:</b> Manage a Section
     * @example
     * <listing version="3.0">
         
     * </listing>
     */
     
    dynamic public class DataArray extends Array {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var dataType:Class;
 
        //------------------------------------
        // public properties
        //------------------------------------
                 
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function DataArray(...args) {
            dataType = Country;
            for (var i:int=0; i<args.length; i++) this.push(args[i]);
            length = length;
        }
         
        //
        // PRIVATE, INTERNAL
        //________________________________________________________________________________________________
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
        AS3 override function push(...args):uint {
            for (var i:* in args) {
                if (!(args[i] is dataType)) {
                    trace("Error: you must push an Object type Country");
                    args.splice(i,1);
                }
            }
            return super.push.apply(this, args);
        }
         
        AS3 override function concat(...args):Array {
            var passArgs:DataArray = new DataArray();
            for (var i:* in args) passArgs.push(args[i]);
            return super.concat.apply(this, passArgs);
        }
         
        AS3 override function splice(...args):* {
            if (args.length > 2) {
                for (var i:int=2; i< args.length; i++) {
                    if (!(args[i] is dataType)) args.splice(i,1);
                }
            }
            return super.splice.apply(this, args);
        }
         
        AS3 override function unshift(...args):uint {
            for (var i:* in args) {
                if (!(args[i] is dataType)) args.splice(i,1);
            }
            return super.unshift.apply(this, args);
        }
         
    }
     
}

To create a new DataArray instance, we actually don’t use the DataArray class directly but his Proxy, that will handle the dynamic properties.

I named the class Data, it is what you get with Content.data.

To extend the Proxy class you need to import the class itself and its namespace:

import flash.utils.Proxy; import flash.utils.flash_proxy;

Proxy is also a dynamic class:

dynamic public class Data extends Proxy {

We have our private var that will be our DataArray instance:

private var _item:DataArray;

To control the properties and method called through our Proxy, we need to override 3 methods (with the namespace flash_proxy):

override flash_proxy function callProperty(methodName:*, ... args):* { override flash_proxy function getProperty(name:*):* { override flash_proxy function setProperty(name:*, value:*):void {

When you will call an unknown method, the Proxy class invoke callProperty, and when you will call or set a property (like Content.data.France), the Proxy class invoke getProperty and setProperty.

In my example I trace an Error if you try to set your own property, this is our control. When you get a property, I loop through the DataArray instance to see if I’ve got an item with that name. We could do it with the id or any property of your choice (that is in the DataArray class), and if yes I return it. This is the instance you get by using Content.data.France.

So in brief, when I call Content.data.France, I’m going through the Proxy that is basically managing the dynamic properties added at run-time. The DataArray class is extending the Array class to control the properties and data type.

Here is the code of the Data class:

package com.soundstep.data {
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Copyright:</b> Free to use and change (except to include in a framework), an notification email will be welcome for a commercial use (just for information).<br />
     * <b>Date:</b> 05-2008<br />
     * <b>Usage:</b> Manage a Section
     * @example
     * <listing version="3.0">
         
     * </listing>
     */
 
    import flash.utils.Proxy;
    import flash.utils.flash_proxy;
     
    dynamic public class Data extends Proxy {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _item:DataArray;
         
        //------------------------------------
        // public properties
        //------------------------------------
                 
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Data(...args) {
            _item = new DataArray();
            for (var i:int=0; i<args.length; i++) _item.push(args[i]);
        }
         
        //
        // PRIVATE, INTERNAL
        //________________________________________________________________________________________________
         
        private function getString():String {
            var s:String = "";
            for (var i:uint=0; i<_item.length; i++) {
                s += "index:" + i + ", id:" + _item[i].id + ", name:" + _item[i].name;
                if (i < _item.length-1) s += "\n";
            }
            if (_item.length == 0) return _item.name + " is empty";
            else return s;
        }
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
        override flash_proxy function callProperty(methodName:*, ... args):* {
            var res:*;
            switch (methodName.toString()) {
                case 'clear':
                    _item = new DataArray();
                    break;
                case 'list':
                    trace(getString());
                    break;
                default:
                    res = _item[methodName].apply(_item, args);
                    break;
            }
            return res;
        }
 
        override flash_proxy function getProperty(name:*):* {
            for each (var i:* in _item) {
                if (name == i.name) {
                    return i;
                    break;
                }
            }
            return _item[name];
            throw new Error("ERROR: Property " + name + " not found!");
        }
 
        override flash_proxy function setProperty(name:*, value:*):void {
            trace("ERROR: You can't set your own property!");
        }
         
        public function toString():String {
            return getString();
        }
    }
}

Basically the cities and countries classes are doing the same, the dataType and properties are different, a country is asking a City type and the a city is asking a People type.

For example the CountryArray class asks an id and name to create the array, you have to use a syntax like:

var france:Country = new Country(0, "France");

As it is an Array extended you can still pass more arguments (but they have to be the right type), the type here is City, that is also an Array extended but a city instance is asking an id, a name and weather as parameters:

var france:Country = new Country(0, "France", new City(0, "Paris", "As bad as London!"), new City(1, "Marseille", "More sun than Paris"));

Here is how I fill the Content with some examples:

//country
var france:Country = new Country(0, "France");
Content.data.push(france);
var uk:Country = new Country(1, "UK");
Content.data.push(uk);
 
// city
var paris:City = new City(0, "Paris", "As bad as London!");
france.push(paris);
france.myvar = "qwe";
var marseille:City = new City(1, "Marseille", "More sun than Paris");
france.push(marseille);
var london:City = new City(0, "London", "Quite bad!");
uk.push(london);
var liverpool:City = new City(1, "Liverpool", "Even worst than London");
uk.push(liverpool);
 
// people
var franck:People = new People(0, "Franck", "Dupont", 29);
paris.push(franck);
var stephane:People = new People(1, "Stephane", "Durand", 42);
paris.push(stephane);
var john:People = new People(0, "John", "Doe", 35);
london.push(john);
var david:People = new People(0, "David", "Doe", 37);
london.push(david);

And finally here is some example to access to your data:

Content.data.length
Content.data.France.length
Content.data[0].name
Content.data.France.name
Content.data.France[0].name
Content.data.France.Paris.name
Content.data.France.Paris.Franck.name
Content.data[0][0][0].name

I didn’t optimize/clean the classes and as I said, I’m not saying that it is a good way of accessing data in Flash, but it shows you how to control data type, how to extend an Array, how to extend the Proxy class and how to handle properties and methods of a class at low-level.

Download the source.

Chromeless AIR application

2008-06-01T00:00:00Z

I had to get an AIR application without the OS window, let's say windowless or chromeless.

I needed to be able, with my own graphics, to minimize, restore, maximize, close, close in the system tray or dock, fullscreen and resize.

You can find several tutorials on Internet (with which I got inspired) but I put all these functionalities in one small example as it is convenient.

You need to set 2 parameters out of the code, in the XML description file:

<systemChrome>none</systemChrome>
<transparent>true</transparent>

I won’t explain the code, I guess it is easy enough to find out. You can comment if something is not clear for you.

Here is the code of the main mxml file:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showFlexChrome="false" creationComplete="init()">
 
<mx:Script>
<![CDATA[
 
[Embed(source="assets/iconDock.png")]
[Bindable]
public var IconDock:Class;
 
private function init():void {
    registerMovementHandler();
    setDock();
}
 
public function registerMovementHandler():void {
    appCanvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDrag);
    btResizeBottomRight.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
    btResizeBottomLeft.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
    btResizeTopRight.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
    btResizeTopLeft.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
}
 
public function mouseDrag(e:MouseEvent):void {
    if (e.target == e.currentTarget) stage.nativeWindow.startMove();
}
 
public function resizeWindow(e:MouseEvent = null):void {
    if (e.target == e.currentTarget) {
        var corner:String;
        switch(e.currentTarget){
            case btResizeBottomRight:
                corner = NativeWindowResize.BOTTOM_RIGHT;
                break;
            case btResizeBottomLeft:
                corner = NativeWindowResize.BOTTOM_LEFT;
                break;
            case btResizeTopRight:
                corner = NativeWindowResize.TOP_RIGHT;
                break;
            case btResizeTopLeft:
                corner = NativeWindowResize.TOP_LEFT;
                break;
        }
        stage.nativeWindow.startResize(corner);
    }
}
 
public function setDock():void {
    if (NativeApplication.supportsSystemTrayIcon){
        dockProperties();
        SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = dockMenu();
    }
}
 
private function dockProperties():void{
    SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Soundstep | chromeless window";
    SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);
}
 
private function dockMenu():NativeMenu {
    var menu:NativeMenu = new NativeMenu();
    var open:NativeMenuItem = new NativeMenuItem("Open");
    var close:NativeMenuItem = new NativeMenuItem("Close");
    open.addEventListener(Event.SELECT, undock);
    close.addEventListener(Event.SELECT, closeWindow);
    menu.addItem(open);
    menu.addItem(new NativeMenuItem("",true));
    menu.addItem(close);
    return menu;
}
 
public function dock():void {
    stage.nativeWindow.visible = false;
    NativeApplication.nativeApplication.icon.bitmaps = [new IconDock() as Bitmap];
}
 
public function undock(evt:Event):void {
    stage.nativeWindow.visible = true;
    stage.nativeWindow.orderToFront();
    NativeApplication.nativeApplication.icon.bitmaps = [];
}
 
public function closeWindow(e:Event = null):void {
    stage.nativeWindow.close();
}
 
public function setFullscreen():void {
    var state:String = (stage.displayState == StageDisplayState.FULL_SCREEN) ? StageDisplayState.NORMAL : StageDisplayState.FULL_SCREEN; 
    stage.displayState = state;
}
 
]]>
</mx:Script>
 
<mx:Canvas right="0" left="0" top="0" bottom="0" backgroundColor="#CF3232" id="appCanvas">
 
    <mx:Label buttonMode="true" mouseChildren="false" text="Min" top="10" color="#000000" id="btMin" click="minimize()" horizontalCenter="58"/>
    <mx:Label buttonMode="true" mouseChildren="false" text="Max" top="10" color="#000000"  id="btMax" click="maximize()" horizontalCenter="-45"/>
    <mx:Label buttonMode="true" mouseChildren="false" text="Close" top="10" color="#000000" id="btClose" click="closeWindow()" horizontalCenter="96"/>
    <mx:Label buttonMode="true" mouseChildren="false" text="Restore" color="#000000" id="btRestore" click="restore()" top="10" horizontalCenter="-91"/>
    <mx:Label buttonMode="true" mouseChildren="false" y="10" text="Tray/Dock" color="#000000" id="btSys" click="dock()" horizontalCenter="8"/>
    <mx:Label buttonMode="true" mouseChildren="false" text="Fullscreen" color="#000000" horizontalCenter="0" bottom="10" id="btFullscreen" click="setFullscreen()"/>
     
    <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeBottomRight" themeColor="#494949" right="0" bottom="0" />
     
    <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeTopLeft" themeColor="#494949"  left="0" top="0" />
     
    <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeBottomLeft" themeColor="#494949" bottom="0" left="0" />
 
    <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeTopRight" themeColor="#494949" right="0" top="0" />
 
</mx:Canvas>
     
</mx:WindowedApplication>

You can [download the source](http://www.soundstep.com/blog/experiments/chromeless/chromeless.zip) or install the AIR application:

In order to view this page  
You must enable Javascript  
And download the Flash Player  
[![get flash player](images/get_flashplayer.gif)](http://www.adobe.com/products/flashplayer/)

<script src="/blog/experiments/js/swfobject.js" type="text/javascript"></script>

<script type="text/javascript">// <!-- // <![CDATA[ var so = new SWFObject('/blog/experiments/badge.swf', 'chromeless', '217', '180', '9', '#FFFFFF'); so.addParam('FlashVars', 'appname=Chromeless&#038;appurl=http://www.soundstep.com/blog/experiments/chromeless/Chromeless.air&#038;airversion=1.0.1&#038;imageurl=/blog/experiments/badge.jpg'); so.write('chromeless'); // ]]> // --></script>

Flex SDK 3 bug with SWC and GenericTag

2008-06-10T00:00:00Z

I recently used ANT and compc to compile a SWC. I had to include another SWC with classes and jpg and some other classes as I needed to force them at compile-time to make the getDefinitionByName class working.

If you don't know getDefinitionByName (and registerClassAlias and getClassByAlias), it make us able to create instances of classes with a string (from a XML for example). The problem is the compiler doesn't include them at compile-time if they are not used.

You will find tons of people talking about that if you google it.

One trick is add a public var myClass:MyClass = null; in the code or use a array. Not really ideal as you have to do that for every class. Example:

public var myClassPage:MyClassPage = null;
var PageClass:Class = getDefinitionByName("com.site.page.MyClassPage") as Class;
var page:SuperClassPage = new PageClass();

Here is a class that will help you manage that if you need:

package com.soundstep.managers {
     
    import com.site.menu.basic.*;
    import com.site.page.*;
    import flash.net.*;
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> BETA 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Copyright:</b> 
     * <br />
     * <b>Date:</b> 05-2008<br />
     * <b>Usage:</b>
     * @example
     * <listing version="3.0"></listing>
     */
     
    public class ImportManager {
 
        //------------------------------------
        // private, protected properties
        //------------------------------------
         
        private static var INITIALIZED:Boolean = false;
         
        private static var importManager:ImportManager = new ImportManager();
        private static var importer:Array = [
            BasicMenu,
            Home,
            Page1,
            Page2,
            Page3,
            Page4,
            Page5,
            PageSub21,
            PageSub211,
            PageSub22,
            PageSub221,
            PageSub222,
            PageSub223,
            PageSub23,
            PageSub231,
            PageSub232,
            PageSub233,
            PageSub31,
            PageSub311,
            PageSub32,
            PageSub321,
            PageSub33,
            Page4,
            PageSub41,
            PageSub411
        ];
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function ImportManager() {
            if (importManager) throw new Error("ImportManager is Singleton.");
        }
         
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        private static function init():void {
            for each (var i:Class in importer) {
                registerClassAlias(String(i).substring(7, String(i).length-1), i);
            }
            INITIALIZED = true;
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
        public static function getClass(className:String):Class {
            if (!INITIALIZED) init();
            for each (var i:Class in importer) {
                if (String(i).indexOf(className)) {
                    return getClassByAlias(className);
                    break;
                }
            }
            return null;
        }
         
    }
}

You can use it like that:

var PageClass:Class = ImportManager.getClass("MyClassPage");
var page:SuperClassPage = new PageClass();

Anyway, this is not the subject of the post. "Revenons a nos moutons", as we say in France.

I didn't want to force the import of the classes at compile-time in this way. I had a SWC compiled with flash with some fonts, movies and jpg. I was using this SWC to compile a SWF with mxmlc. I set an Ant task with compc to compile this SWC + the classes I needed with the getDefinitionByName into another SWC. And then, compile my SWF with this unique SWC.

It should have worked very well if compc was compiling my SWC. I had error about flash.swf.tags.GenericTag... nice...

After a bit of research, I saw that Adobe knows about it and are working on it. The problem is the jpg that are included in the first SWC. Even if you try to compile a SWF with mxmc including a SWC with jpg inside, you will get this error. Here are some links where they talk about:

http://bugs.adobe.com/jira/browse/SDK-14888
http://bugs.adobe.com/jira/browse/SDK-14667

You can see that there is a patch there: http://bugs.adobe.com/jira/secure/attachment/17851/GenericTag.patch

I don't know more about this bug and I'm not really a java man... anyway.

I had to find this GenericTag class that is extending flash.swf.Tag and make it extend flash.swf.tags.DefineTag (full path, not like it is written in the patch).

The class is located in a jar file, which you can open with winrar or similar: \flex\_sdk\_3.0.0.477\lib\swfkit.jar

and in the jar, the class is there: \flash\swf\tags\GenericTag.class

A "class" file is java class that is compiled. I found this nice tool to decompile it: http://classeditor.sourceforge.net/

I change: public class GenericTag extends flash.swf.Tag by: public class GenericTag extends flash.swf.tags.DefineTag

After that you just have to save the file and put it back in the jar. compc or mxmlc is now compiling without error.

I'll spare you this time, you can download the jar updated. This fix has been done for Flex SDK 3.0.0.477.

Horizontal and vertical alignment

2008-06-15T00:00:00Z

I've solved a couple of bugs and I've added a new feature.

When you have a ElementUI type element and the property alignX or alignY set to center, you can now set a value to two new properties: horizontalAlign and verticalAlign.

It is working like Flex, for example if you want your centered element 100 pixels more to the right, let's say 100 pixels from the center point, these properties will help you doing it. The syntax is:

element.alignX = ElementUI.ALIGN_CENTER;
element.alignY = ElementUI.ALIGN_CENTER;
element.horizontalAlign = 100;
element.verticalAlign = -80;

I kept the way BaseUI is working with the elements, if the browser is too small the elements will always stay inside the window with the margin still working, it is also true with these two new properties.

I've updated the demo.

Flash liquid layout with BaseUI version 2

2008-06-23T00:00:00Z

I've been working on the second version of BaseUI, so I'm happy to release it today.

THIS IS NOT AN UPDATE.

This new version is quite different, as well as the syntax, so the code you have written for the previous version won't work with this one.

I didn't try it yet in a real project but you shouldn't find too much bugs, comment if you find some, I'll solve them.

I've been working a lot with Flex and everyone enjoy a lot the layouts I think. I build this new version taking a lot of features from Flex. In the demo I use the Flex Builder interface to set the properties on a DisplayObject, so it is working pretty much the same.

I didn't build the Flex layouts obviously, but I'm thinking about it. Anyway, BaseUI allows you to use those following properties on a DisplayObject:

x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter, ratio, alignX, alignY

You'll discover some nice features, for example you can use Number or String to set the properties. I've done that because you can now use percentage value for the width and the height!

This will make you able to do a lot more things, have a try in the demo.

Here is some examples of the new syntax:

var baseUI:BaseUI = new BaseUI(this);
var element:ElementUI = baseUI.add(mySprite);
element.right = 10;
element.bottom = "10";
element.width = "50%"
element.height = 200;
addChild(mySprite);

var baseUI:BaseUI = new BaseUI(this);
var element:ElementUI = baseUI.add(mySprite);
element.properties = {right:10, verticalCenter:0};
addChild(mySprite);

var baseUI:BaseUI = new BaseUI(this);
var element:ElementUI = baseUI.add(mySprite);
element.ratio = ElementUI.RATIO_IN;
addChild(mySprite);

As the previous version, if you use the onStage property set to false (to set the reference on the parent instead of the stage), everything will work except the "ratio in" and "ratio out". I need to build a Layout class for that, probably the next step.

A memory system has been included to make your life easier if you need to switch between properties. For example, if your width is set to 200 or "50%", and later you set a left and right version values. The width is not used anymore as it doesn't make sense, but the value is "memorized" and will be set back automatically if needed, if you set an horizontalCenter value for example. This is done internally, you don't have to do anything.

Have a look at the demo and you'll understand what I mean by values "memorized", basically it is working like the Flex Builder interface.

A tutorial will follow when I get a chance.

If you find any bugs, if you have some ideas to improve it or if you just want to talk about, please let me know.

Here is the demo and the source.

BaseUI bypass resize

2008-06-27T00:00:00Z

Sorry, I didn't have time to write a tutorial on BaseUI v2. I've added a property to bypass the resize of the DisplayObject (width and height).

It might be useful for a sprite animated that has a size that is changing all time. It will set the useInitialSize to true and you can't use it with a ratio set to RATIO_IN or RATIO_OUT.

The property is:

var el:ElementUI = baseUI.add(mySpriteAnimated);
el.bypassSize = true;

BaseUI v2 tutorial

2008-06-29T00:00:00Z

BaseUI will help you to manage your assets (a logo, footer, a menu, etc) in the browser, in a liquid layout or a fixed area.

BaseUI is managing a list of DisplayObject like Sprite, MovieClip, TextField, Bitmap, etc. You will be able to use properties like top, bottom, left, right, horizontalCenter, verticalCenter, width and height even with percentage, some ratio mode for backgrounds and other specific properties.

BaseUI instance

BaseUI is not a Singleton, you can create as many instance as you wish. Usually, I'm creating a main BaseUI instance in the main class, the entry point, to manage most of my elements. Example in the main class (which is extending Sprite or MovieClip):

var baseUI:BaseUI = new BaseUI(this);

BaseUI will refresh the position and size of your DisplayObject when the Event.RESIZE will trigger.

You can now add some DisplayObject to your list; it will return an instance of the ElementUI class:

 var element1:ElementUI = BaseUI.add(mySprite); var element2:ElementUI = BaseUI.add(myBitmap); var element3:ElementUI = BaseUI.add(myTextField);

The public methods of the BaseUI class are:

 baseUI.add(mySprite); baseUI.refresh(); baseUI.getElement(mySprite); baseUI.remove(mySprite); baseUI.removeAll();

The public properties:

 var elements:Array = baseUI.elements; var holder:DisplayObjectContainer = baseUI.holder

BaseUI manages 2 lists: a list of DisplayObject and a list of DisplayObject added to the display list. Only the second one will be "refreshed".

BaseUI will trigger 2 events, when you add a DisplayObject to the BaseUI instance and when you remove it:

 baseUI.addEventListener(BaseEventUI.ADDED, addedHandler); baseUI.addEventListener(BaseEventUI.REMOVED, removedHandler);

Reference to the ElementUI

Before we start to change the size and position of an element, you have to understand on which DisplayObject you align or resize to.

An ElementUI instance has a property onStage, the default is true. It means if you add a 10 pixels top property, it will be 10 pixels from the top of the stage.

When I build a site, I'm using an element (like a logo, a menu, a page, a footer or whatever) like I would do in Photoshop, on a layer that is taking the whole area. That's why the onStage is set to true by default, you can change it like this:

 element.onStage = false;

By doing this, you tell the Element to react, not with the stage anymore but with the parent DisplayObject. We will call it the DisplayObject reference, so the stage or the parent.

You have to be careful using an onStage property set to false, because it means the DisplayObject reference need to have a size to behave as expected. For example, in a site, your main area is an invisible rectangle 800x600 (a container) that is always centered in the DisplayObject reference (the stage in my example). You can set the ElementUI onStage property of the DisplayObject in the container to false to make the elements behave as expected.

It means the invisible container will have to have a width and height. Here is a hack to do that:

 var container:Sprite = new Sprite(); container.graphics.beginFil(0xFF0000, 0); container.graphics.drawRect(0, 0, 800, 600); addChild(container);

ElementUI properties

When you get the instance of the ElementUI class, you can use its properties, here are some examples:

To align a Sprite 10px from the bottom and right border:

 element.bottom = 10; element.right = 10;

To center a Sprite:

 element.horizontalCenter = 0; element.verticalCenter = 0;

To have a Sprite fitting the browser:

 element.left = 0; element.right = 0; element.top = 0; element.bottom = 0;

You can also set (or get) all the properties in one time, like this:

 element.properties = {top:10, bottom:10, horizontalCenter:-100};

BaseUI is flexible and will accept Number as well as String for the following properties: x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter

 element.bottom = 10; 
``` is the same as ```actionscript
 element.bottom = "10";

For the width and the height, you can also use percentage values:

 element.width = "80%"; element.height = "80%";

In the ElementUI class, they are cases when a property shouldn’t be used, for example if you set a left and right value, the width property is not used anymore. When you do so, the class will memorize the width value in case it will be "turned on" by another property. For example, if you set horizontalCenter to 0, left and right will be memorized and turn on to NaN, the width value will be restored.

Everything is done automatically by the ElementUI class, you don’t have anything to do, see the demo for a better understanding.

Refresh method

In some case you will have to manually refresh the element, for example if you change the width and the Event.RESIZE won’t be triggered.

You can refresh the element like that:

 element.refresh();

This will work only if the alpha of the DisplayObject is superior to 0 and the visible property is set to true. Otherwise, you will have to force the refresh:

 element.forceRefresh();

The ElementUI class dispatches an updated event when the Element has been refreshed, you can listen to it like that:

 Element.addEventListener(BaseEventUI.UPDATED, updatedHandler);

To refresh all the elements of the BaseUI class, use:

 BaseUI.refresh();

Ratio property

As in the precedent version, you can set the ratio property, I guess mainly for a background:

 element.ratio = ElementUI.RATIO\_IN; element.ratio = ElementUI.RATIO\_OUT;

See the demo for the different behaviors.

To turn it off, just pass an empty String or whatever you want:

 element.ratio = "none";

Some properties are bypassed when a ratio has been set as it doesn’t make sense, like width and height. Some others like top, bottom, left and right are still working.

In ratio set to RATIO_OUT, you can use the properties alignX and alignY:

 element.alignX = ElementUI.ALIGN\_CENTER; element.alignY = ElementUI.ALIGN\_BOTTOM;

Known issue: if you set the ratio to RATIO_IN or RATIO_OUT with the property onstage set to false, it won’t work properly. Probably a further development will allow it.

Initial Size

This size is used to calculate the ratio of the DisplayObject for example.

An ElementUI instance has a property useInitialSize set by default to false, you can change it to true when you want the behavior of the ElementUI working with the initial size. It is useful for example when you have a mask in a Sprite that is disturbing the width and height of this Sprite.

Bypass Size

In some case, your DisplayObject will be animated making its size impossible to use. To prevent unexpected behaviors you can set the bypassSize property to false. Only the properties for position will be used.

Keep on screen

By default the property keepOnScreen is set to true (added in 2.0.4). This prevent the top-left corner of the DisplayObject to go off the screen.

BaseUI global references

2008-07-11T00:00:00Z

Hi everyone,

I've added global references and a property "reference" in BaseUI (and ElementUI).

As I'm explaining in the tutorial, an ElementUI need a reference to set the position and the size of a DisplayObject. By default, the stage is the reference, set with the property of the ElementUI class "onStage". If the property onStage is set to false, the reference is the parent of the DisplayObject.

This is the basic behavior of BaseUI.

You can now specify any reference in the ElementUI class. The property "reference" can be set with a DisplayObjectContainer (Stage, Sprite, MovieClip, etc) and has priority on the onStage property:

var element:ElementUI = baseUI.add(mySprite); element.reference = mySpriteContainer;

I've also added the same properties to the BaseUI class, they are what we can call a "global default reference". If you set the onStage property or the reference property of the BaseUI class (not the ElementUI class), when you add a new element in the BaseUI class, those properties will assign the same values to the ElementUI instance created. It just mean if you have 50 ElementUI instances and you want to set the reference property or the onStage property on all those instances, just use the BaseUI ones before adding the DisplayObject:

var baseUI:BaseUI = new BaseUI(this); baseUI.reference = mySpriteContainer; // or baseUI.onStage = false; var element1:ElementUI = baseUI.add(mySprite); // the reference is mySpriteContainer var element2:ElementUI = baseUI.add(mySprite); // the reference is mySpriteContainer var element3:ElementUI = baseUI.add(mySprite); // the reference is mySpriteContainer

If you need to reset the reference:

element.reference = null;

BaseUI keep on screen

2008-07-25T00:00:00Z

Hi Everyone,

I haven't been posting for a while, it is not that I'm lazy ;) We've been working on something exiting that will be release in a while, be patient.

I've solved some bugs in BaseUI, one about the width of a DisplayObject which wasn't updated well when the content changed.

I've also added a keepOnScreen property set by default to true in BaseUI and ElementUI. It won't be a final solution as I'm going to build layouts when I'll have time, they will handle this behavior in a better way. At the moment, with this property set to true, the top-left corner of a DisplayObject won't go off screen.

See the demo.

BaseUI v3 layout manager

2008-08-12T00:00:00Z

Hi everyone,

Before going on holiday, here is a BaseUI major release :)

It means code written for the previous might not work for this version (even is there isn’t any major change in the structure, some internal code has been changed). If you want to update your code with this version, unless you were using the version 1, it won’t take a long time to adapt it.

Before we could say that BaseUI was an assets manager, now it is becoming a real layout manager.

The two main classes BaseUI and ElementUI allow you to handle assets positioning by using properties on your DisplayObject like top, bottom, width, percentage width, horizontal center and so on, to make them working with the resize event (when the browser is resized by the user). It makes you able to handle liquid layouts, but also works with fixed layouts.

In the first version, BaseUI has been built mainly to work on the stage. It is working now from the version 2 with any reference, stage or another DisplayObject (see properties like onstage and reference).

As I’m also a Flex user and I’ve started to build layout for Flash taking example of the Flex framework.

In this version you’ll find a canvas, a horizontal box, a vertical box and a tile. Those new classes will be found in a layout package: CanvasUI, HBoxUI, VBoxUI and TileUI. All kind of components you can find in the Flex framework, even the name is very close so you don’t get lost with alien class name. Let’s keep things simple.

Before we start on the new classes, let’s see what the changes in BaseUI and ElementUI are. Well, almost nothing changed in appearance. Bugs have been solved and few methods and properties added.

BaseUI

Method: contains Return true of false if the BaseUI instance already contains the DisplayObject, like you can find in a DisplayObjectContainer such as Sprite or MovieClip.

Property: autoRefresh (default true) This is a global setting, meaning all the ElementUI created by adding DisplayObject to the BaseUI instance will get the same setting, it can be overridden in each ElementUI instance. By default, when you set a property on an ElementUI instance, the size and positions of the DisplayObject are automatically calculated and “refreshed”. Using autoRefresh set to false, you’ll have to refresh yourself the element by using the refresh methods. This applies only for setting properties, the elements will still be automatically “refreshed” when the Event.RESIZE is triggered. This property is useful if you have a lot of DisplayObject and you don’t want to execute some useless code.

ElementUI

Property: autoRefresh (default true) See BaseUI autoRefresh description above.

Properties: forceReferenceHeight and forceReferenceWidth BaseUI is using width and height to set the position of the DisplayObject, sometimes the size can be disturbed by mask or components. They are some properties to help you handle these problems, for example: useInitialSize or bypassSize. I’ve added these two properties and they are the strongest reference that will be used for calculate a new position.

Other layouts will be built, at least a Grid and another Canvas to handle overlapping. I'm basically waiting the official Flash Player 10 release as it has a nice text layout manager!

I’ll write a complete tutorial in the future, let’s see the layouts classes in details.

HBoxUI, VBoxUI and TileUI are subclasses of CanvasUI that is a subclass of MovieClip.

A canvas is containing: - a Wrapper to handle the size of the canvas - a Sprite container containing the children added in the canvas - a Mask to hide the content that is outside of the canvas (optional) - a Scrollpane component to handle scrollbars if the content is bigger than the canvas (optional)

CanvasUI

The main meaning of a canvas is having an area you can resize without having the content resized. As in Flex, the canvas is an absolute layout and children can overlap. It will be possible to handle some behaviors impossible without. It is also the easiest way to have a centered fixed area in the browser and easily handle ElementUI inside.

To create a canvas:

 var canvas:CanvasUI = new CanvasUI();

A canvas constructor can take 4 optional parameters: width, height, layoutScroll, layoutMask. By default, CanvasUI build a mask to show only the content within the size specified and creates scrollbars (scrollpane instance) if the content is bigger than the size specified. If you don’t need the mask or the scrollbar, just set them to false when you create the instance. If you set the layoutScroll to false, you don’t need a scrollpane component in the flash library (or SWC for Flex SDK user), it will not be imported or created. For example:

 var canvas:CanvasUI = new CanvasUI(200, 200, false, false);

A canvas has a background color and alpha (default is 0), you can set those values if you want to see your canvas:

 canvas.canvasColor = 0xFF0000; canvas.canvasAlpha = 0.5;

You can use all the ElementUI properties, for example: top, bottom, width, ratio, etc… straight on the canvas. The only difference, unlike ElementUI, the width and height percentage is set with others properties (percentWidth and percentHeight). For example:

 canvas.horizontalCenter = 0; canvas.percentWidth = “80%”; // or “80” or 80 canvas.bottom = 20; canvas.height = 300;

A canvas has an internal BaseUI instance (for wrapper, mask and scrollpane) and another for the children. The internal BaseUI instance has the property autoRefresh set to false to keep good performance. It means when you are done setting the properties for the canvas, you must refresh it (this is only for the canvas, you don’t need to do that after adding children):

 canvas.refresh();

You can add children as you would do with a Sprite or other DisplayObjectContainer using the addChild method. You can also use addChildUI to add a child and an ElementUI instance will be created. You can also set ElementUI properties on the children, for example:

 var el:ElementUI = canvas.addChildUI(mySprite); el.ratio = ElementUI.RATIO\_IN; el.properties = {top:10, bottom:10, left:10, right:10};

 var el:ElementUI = canvas.getChildUI(mySprite); canvas.getChildUI(mySprite).bottom = 20; canvas.getChildUIByName("mySprite").right = 20; canvas.removeChildUI(mySprite);

CanvasUI is a mix between inheritance and polymorphism to make behaviors working properly. Most of the MovieClip methods and properties are accessible from the canvas instance. You might find some missing or not working properly, testing all methods and properties between DisplayObjectContainer and MovieClip is a hudge work as some are applied on the wrapper, others on the canvas and others on the container. If you’ve got a problem, you can access to the internal elements through properties.

HBoxUI, VboxUI and TileUI

These layouts are subclassing the CanvasUI and you’re not free to set the position of the children, they are calculated internally. You’ll find some properties common in the Flex layouts.

HBox horizontally lays out its children one by one, you have access to properties like horizontalGap, alignChildren, verticalCenterChildren and padding. Here is an example:

 var hbox:HBoxUI = new HBoxUI(); addChild(hbox); hbox.horizontalGap = 5; hbox.alignChildren = HBoxUI.ALIGN\_CENTER; hbox.verticalCenterChildren = 40; hbox.padding = new Padding(10, 10, 25, 10); hbox.name = "hbox"; hbox.reference = this; hbox.percentWidth = "50%"; hbox.height = 200; hbox.right = 20; hbox.bottom = 20; hbox.canvasAlpha = .4; hbox.refresh(); hbox.addChild(mySprite1); hbox.addChild(mySprite2); hbox.addChild(mySprite3);

VBox vertically lays out its children one by one, you have access to properties like verticalGap, alignChildren, horizontalCenterChildren and padding. Here is an example:

 var vbox:VBoxUI = new VBoxUI(); addChildUI(vbox); vbox.alignChildren = VBoxUI.ALIGN\_CENTER; vbox.horizontalCenterChildren = 40; vbox.padding = new Padding(10, 25, 10, 10); vbox.name = "vbox"; vbox.reference = this; vbox.percentWidth = "50%"; vbox.height = 200; vbox.right = 20; vbox.bottom = 20; vbox.canvasAlpha = .4; vbox.refresh(); vbox.addChild(mySprite1); vbox.addChild(mySprite2); vbox.addChild(mySprite3);

TileUI lays out its children in a grid of equal-sized cells. You can set additional properties like horizontalGap, verticalGap, direction and padding. Here is an example:

 var tile:TileUI = new TileUI(); addChildUI(tile); tile.direction = TileUI.DIRECTION\_HORIZONTAL; tile.padding = new Padding(10, 10, 10, 10); tile.name = "tile"; tile.reference = this; tile.percentWidth = "50%"; tile.height = 200; tile.right = 20; tile.bottom = 20; tile.canvasAlpha = .4; tile.refresh(); tile.addChild(mySprite1); tile.addChild(mySprite2); tile.addChild(mySprite3);

Demo Tween

It is not working smoothly in some browsers (Firefox seems the slowest one), but you can easily tween a new position and size after a resize event. ElementUI is using an Event before applying the new values to the DisplayObject. You can add a listener, stop the propagation and handle yourself the movements. The demo link is at the end of the post or in the source.

I’ve included the demos in the source, Flex SDK users and Linux users will find a SWC of the Scrollpane classes and skin.

Hope you like it and find it useful.

Demo BaseUI
Demo CanvasUI
Demo HBoxUI
Demo VBoxUI
Demo TileUI
Demo Tween

Source

Tween Scroll movement

2008-09-09T00:00:00Z

The ScrollPane component is a nice tool to use if you need to scroll a content or a list with more than text.

If you like to have everything a bit "tweened" in the sites you developed, you will feel the scroll movement of the scrollpane a bit straightforward.

There is an easy way to get this done.

When the user is scrolling the content with the scrollbar of the ScrollPane, the component dispatch an event:

ScrollEvent.SCROLL

The idea is to stop the movement of the content when this event is dispatched using:

e.stopImmediatePropagation()

And then handle the scrolling using a tweener.

I made an simple example with the CanvasUI class I built as it is using a ScrollPane component for the content, but you can use this code for a normal ScrollPane instance.

Here is the demo and the source, code of the main class below for a quick look.

package {
 
    import flash.display.Sprite;
    import fl.events.ScrollEvent;
    import fl.containers.ScrollPane;
    import fl.controls.ScrollBarDirection;
    import gs.TweenMax;
     
    import com.soundstep.ui.layouts.*;  
    import com.soundstep.ui.*;  
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Actionscript version:</b> 3.0<br />
     */
      
    public class Main extends Sprite {
 
        //------------------------------------
        // private properties
        //------------------------------------
         
        private var _canvas:CanvasUI;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
         
 
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Main() {
            _canvas = new CanvasUI();
            addChild(_canvas);
            _canvas.canvasAlpha = .2;
            _canvas.horizontalCenter = 0;
            _canvas.verticalCenter = 0;
            _canvas.width = 300;
            _canvas.height = 300;
            _canvas.addChildUI(new ContentText());
            _canvas.refresh();
            _canvas.scrollPane.addEventListener(ScrollEvent.SCROLL, scrollHandler, true);
        }
         
        //
        // PRIVATE, PROTECTED, INTERNAL
        //________________________________________________________________________________________________
         
        private function scrollHandler(e:ScrollEvent):void {
            e.stopImmediatePropagation();
            switch (e.direction) {
                case ScrollBarDirection.HORIZONTAL:
                    TweenMax.to(_canvas.scrollPane.content, .5, {x:e.position*-1});
                    break;
                case ScrollBarDirection.VERTICAL:
                    TweenMax.to(_canvas.scrollPane.content, .5, {y:e.position*-1});
                    break;
            }
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
         
         
    }
}

Flex SDK 3.1 bug with SWC and GenericTag (fix update)

2008-10-11T00:00:00Z

Hi,

In this previous post talking about a bug with the Flex SDK, you can find how to fix a problem when you compile a SWF including a SWC containing pictures.

Actually the version of the Flex SDK is 3.1 and the structure of the java library slightly changed. I applied the same fix on the GenericTag java class but now this class is in the jar file swfutils.jar

You just need to replace this jar with the fix in this location:

/flex_sdk/lib/

Click here to get the jar fixed

FPS class update

2008-10-13T00:00:00Z

I've added a little feature to the FPS class, you still can hide the bar by clicking on it and you can show the bar again by typing "fps". I've also slightly changed the way I show the values.

Extend a Singleton

2008-11-01T00:00:00Z

For a special purpose I had to extend a Singleton, to make my system fully flexible. I found complicated solutions that wasn't fully working as intended.

To use PureMVC, you have to extend a Singleton (Facade), which is the entry point of the framework. This is working only if you don't use the Facade class (the super Singleton) before using the subclass, otherwise you get an error, as the super singleton has already been instantiated.

Well this might be a simple solution but not working in my case.

First of all, they are a lot of solutions to correctly "lock" a Singleton, because in AS3, private constructor doesn't exist. Some of them have turn around, that you can solve with a bit more code, but the solution I prefer is instantiate the Singleton out of the constructor and method:

 private static var \_instance:Singleton = new Singleton();

So, if I use the super singleton with a Singleton.getInstance(), and then use the subclass with a SingletonExtended.getInstance(), this will throw an error as when the SingletonExtended is called, the Singleton is called as well and has already been instantiated.

The solution I found is compare the super class name with a static class name, basically you can't use the keyword "this" when you declare a variable, but using "super" will return the same result (well that's odd but it is what I saw):

 private static var \_className:String = getQualifiedClassName(super);

And then compare it with the super classname in the Singleton constructor:

 if (\_instance != null && getQualifiedSuperclassName(this) != \_className) throw new Error

if I trace(_className + " - " + getQualifiedSuperclassName(this)) in the Singleton constructor:

- when I use the Singleton class, I get: "null - Object" - when I use the SingletonExtended class, I get: "Singleton - Singleton", meaning the constructor has been called from a subclass.

Until now, it is working pretty well, I can use:

 Singleton.getInstance().singletonValue SingletonExtended.getInstance().singletonValue SingletonExtended.getInstance().singletonExtendedValue

But we're not completely done. We can access to our two Singleton... but wait, "two Singleton", is that possible?

In fact, it is completely possible and it is even a problem. Let's say I have a undefined value in Singleton, like:

 private var \_myValueNotInitialized:String;

And then you have a public method that is setting a value to this variable:

 public function initializeMyValue():void { \_myValueNotInitialized = "I am initialized"; }

You can now use:

 Singleton.getInstance().initializeMyValue(); or SingletonExtended.getInstance().initializeMyValue();

But here is the problem: you still have 2 instances. One in Singleton and the other in SingletonExtended. If you use: Singleton.getInstance().initializeMyValue(); and trace: SingletonExtended.getInstance().myValueNotInitialized you will get null, which is normal.

This doesn't make a lot of sense for a Singleton, does it?

The solution I found is updating the Singleton instance with the SingletonExtended one.

In the Singleton, I'm now able to update the instance:

 public function updateInstance(instance:Singleton):void { if (instance != null && instance is Singleton) \_instance = instance; else throw new Error("Incorrect Singleton update"); }

And in the subclass SingletonExtended, I change the getInstance method:

 public static function getInstance():SingletonExtended { Singleton.getInstance().updateInstance(\_instance); return \_instance; }

This is doing the job I needed, a fully Extended Singleton with no errors accessing the super or he subclass.

I tried to break it, but if it is possible, I didn't find the hole. And if you have a better solution, I'd be very happy to see it.

You can download the source by clicking here, or see the classes below.

The main class:

package {
     
    import flash.display.Sprite;
     
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Date:</b> 11-2008<br />
     */
      
    public class Main extends Sprite {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Main() {
             
            trace("--- public properties ---");
            trace(Singleton.getInstance().singletonValue + " >>> from Singleton");
            trace(SingletonExtended.getInstance().singletonValue + " >>> from SingletonExtended");
            trace(SingletonExtended.getInstance().singletonExtendedValue + " >>> from SingletonExtended");
            trace(Singleton.getInstance().singletonValue + " >>> from Singleton");
             
            trace("--- access to public methods ---");
            trace(Singleton.getInstance().publicSingletonMethod() + " >>> from Singleton");
            trace(SingletonExtended.getInstance().publicSingletonMethod() + " >>> from SingletonExtended");
            trace(SingletonExtended.getInstance().publicSingletonExtendedMethod() + " >>> from SingletonExtended");
             
            trace("--- access to private methods ---");
            trace(Singleton.getInstance().accessPrivateSingletonMethod() + " >>> from Singleton");
            trace(SingletonExtended.getInstance().accessPrivateSingletonMethod() + " >>> from SingletonExtended");
            trace(SingletonExtended.getInstance().accessPrivateSingletonExtendedMethod() + " >>> from SingletonExtended");
             
            trace("--- access to protected and overriden methods ---");
            trace(Singleton.getInstance().accessProtectedSingletonMethod() + " >>> from Singleton");
            trace(SingletonExtended.getInstance().accessProtectedSingletonMethod() + " >>> from SingletonExtended");
            trace(SingletonExtended.getInstance().accessOverridenSingletonExtendedMethod() + " >>> from SingletonExtended");
             
            trace("--- value not initialized ---");
            trace("before = ", Singleton.getInstance().myValueNotInitialized);
            Singleton.getInstance().initializeMyValue(); // or SingletonExtended.getInstance().initializeMyValue();
            trace("after = ", Singleton.getInstance().myValueNotInitialized);
             
            // this will generate errors
            // as you can't instantiate twice a Singleton or a sublass of Singleton
             
            //var s1:Singleton = new Singleton(); 
            //var s2:SingletonExtended = new SingletonExtended();
             
        }
         
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
    }
}

The Singleton class:

package {
 
    import flash.utils.getQualifiedClassName;
    import flash.utils.getQualifiedSuperclassName;
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Date:</b> 11-2008<br />
     */
      
    public class Singleton {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private static var _instance:Singleton = new Singleton();
        private static var _className:String = getQualifiedClassName(super);
         
        private var _myValueNotInitialized:String;
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        public var singletonValue:String = "Singleton value";
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Singleton() {
            if (_instance != null && getQualifiedSuperclassName(this) != _className) throw new Error("Singleton is obviously... Singleton.");
        }
         
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        private function privateSingletonMethod():String {
            return "privateSingletonMethod";
        }
         
        protected function protectedSingletonMethod():String {
            return "protectedSingletonMethod";
        }
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
        public function initializeMyValue():void {
            _myValueNotInitialized = "I am initialized";
        }
         
        public function updateInstance(instance:Singleton):void {
            if (instance != null && instance is Singleton) _instance = instance;
            else throw new Error("Incorrect Singleton update");
        }
 
        public static function getInstance():Singleton {
            return _instance;
        }
         
        public function publicSingletonMethod():String {
            return "publicSingletonMethod value";
        }
         
        public function accessPrivateSingletonMethod():String {
            return privateSingletonMethod();
        }
         
        public function accessProtectedSingletonMethod():String {
            return protectedSingletonMethod();
        }
         
        public function get myValueNotInitialized():String {
            return _myValueNotInitialized;
        }
    }
}

The SingletonExtended class:

package {
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Date:</b> 11-2008<br />
     */
      
    public class SingletonExtended extends Singleton {
         
        //------------------------------------
        // private properties
        //------------------------------------
         
        private static var _instance:SingletonExtended = new SingletonExtended();
         
        //------------------------------------
        // public properties
        //------------------------------------
         
        public var singletonExtendedValue:String = "SingletonExtended value";
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function SingletonExtended() {
            if (_instance != null) throw new Error("SingletonExtended is obviously also... Singleton.");
        }
         
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        private function privateSingletonExtendedMethod():String {
            return "privateSingletonExtendedMethod";
        }
         
        override protected function protectedSingletonMethod():String {
            return "protectedSingletonMethod overriden in SingletonExtended, value in super.protectedSingletonMethod(): " + super.protectedSingletonMethod();
        }
         
        //
        // PUBLIC
        //________________________________________________________________________________________________
         
        public static function getInstance():SingletonExtended {
            Singleton.getInstance().updateInstance(_instance);
            return _instance;
        }
         
        public function publicSingletonExtendedMethod():String {
            return "publicSingletonExtendedMethod value";
        }
         
        public function accessPrivateSingletonExtendedMethod():String {
            return privateSingletonExtendedMethod();
        }
         
        public function accessOverridenSingletonExtendedMethod():String {
            return protectedSingletonMethod();
        }
     
    }
}

Flash CS4 bug with XML E4X filters

2008-11-12T00:00:00Z

I had some XML E4X filters and I couldn't understand why they were working everywhere (included Gumbo) but in the Flash CS4 IDE.

I've finally isolated the problem…

I’ve got a simple XML like this:

<?xml version="1.0" encoding="utf-8"?>
<items>
  <item id="item1" type="item1_type" />
  <item id="item2" type="item2_type">
    <item id="item3" type="item3_type" />
  </item>
</items>

Basically my filter is parsing all the attributes "id" of the nodes "item", to return me the attribute "type", sounds simple.

Here is my filter:

xml..*.(name() == "item" && @id == "item1").@type

So, I nicely put this filter in a function, and then it stopped working in Flash CS4. When I tried to get the type of the id "item1" it worked but none of the id "item2" and "item3" worked, the filter wasn’t able to find the node. Also, when I removed the item3, which is a child of the item2, I could get the type of my item2… how weird, anyway…

My mistake, which wasn’t really a mistake by the way, was to use the word "item" as a parameter of my function. It should work as the parameter has nothing to do with the XML but it seems that Flash CS4 messed up with something and got lost.

So, this didn’t work:

 getItemTypeNotWorking("item2"); function getItemTypeNotWorking(item:String):void { trace("test1 = ", xml..\*.(name() == "item" && @id == item).@type); }

But this worked:

 getItemTypeWorking("item2"); function getItemTypeWorking(itemID:String):void { trace("test2 = ", xml..\*.(name() == "item" && @id == itemID).@type); }

As you can see only the parameter is different (item and itemID).

Using a parameter that is the same word as a node name will make the filter not working as intended, only in Flash IDE CS4.

See the source by clicking here.

Flex SDK bug with SWC

2008-11-19T00:00:00Z

It seems the problem explained in this post and this post has been solved in the Flex SDK 3.2 release.

A good thing then :)

Soma AS3 MVC framework automated

2008-11-25T00:00:00Z

After months working on my own framework and successfully using in small to large projects, I'm happy to give you access to SomaUI and Soma.

As a quick description, Soma is a MVC (Model-View-Controller) framework and SomaUI is a tool to generate the base of a Flash site in AS3, based on Soma (available for windows, mac and linux).

First of all, I'd like to thanks Juan. He has shown very early his interest in Soma and has helped me to get started on the java part: SomaUI, it really was a great help. I'd like to thanks Luis from Less Rain, he has given me invaluable advice on the flash part: Soma, and I'm sure it will continue. We had great nice and long conversations. I'd also like to thanks CVSDude for the help and support.

Soma

An important thing to understand is, I'm not entering in the "framework fight" of the best one and the best OOP practice. Soma is not at all a competitor to PureMVC, which is not even restricted to a language, or any other framework. Soma is a result of a personal need, no more no less, and I built it my way. I wanted it quick, easy, invisible and as much as I could, well-written. I wish to share it hoping it will help some of you.

I like to call Soma an invisible framework, as you can fully use the MVC way even used in its internal building, or completely avoid it and build your site your way. The framework is built to centralize events and managers that are handling common actions in a flash site, like loading, content manager, page manager, deep-linking, transitions, and so on. The framework will handle most of those redundant and annoying development and give a body (or a skeleton) to work with.

Soma is very XML-based and use a reference to a XML site definition almost all the time. The structure, content, assets and assets behaviors are stored in this XML site definition. You can use Soma for any "page-based" site. Soma is only managers and "empty layers" meaning you can use it with any kind of design.

Soma can be used in a lot of different ways, so I won't go further for now. I'll write other detailed tutorials about Soma and its XML.

SomaUI

SomaUI is a software available for Windows, Mac and Linux. Its main purpose is to generate the base of an AS3 site, ready to be used for further development, for Flash Player 9 or 10 and for Flash or Flex SDK developer.

To use SomaUI, you'll need at least a Flex SDK version 3.1 (even if you are a Flash developer), you can download it here. You'll also need at least a java runtime environment version 5 (JRE 1.5). The JRE is usually already available on your computer but if it is not the case, you can download or update it here.

SomaUI makes you able to create a project, choose specific settings such as name, package, flash player version, and so on. You will write the xml definition of your site or load a template and finally, export it (source files, files needed to deploy it on a server and Flash files if you set the option "Flash Developer").

To avoid annoyance with security sandbox, I suggest you export your site in a local server, you can use Wamp or Xampp for WIndows, Mamp for Mac and I suppose Apache is already installed in most of the Linux distribution.

You'll be able to generate a good base to work with in seconds if you use a template... A getting-started is available in html or pdf.

Important: SomaUI is a beta software, SomaUI does not scan or scaffold your project. For testing purpose, if you export again your project in the same folder, any file will be overwritten without warning. The scan/scaffold is a feature that will come in a further release.

Get the source

You can find the last versions on the SomaUI page in the downloads section. A soma demo site with more functionalities is available on the SVN if you want to see further before I write tutorials.

SomaText and StyleManager

2008-12-17T00:00:00Z

A StyleManager and SomaText classes have been added to the Soma Framework.

You can handle your text fields with external extended stylesheets for a better style management without the need to recompile.

SomaText is a class that is extending the Flash built-in class TextField with many features to make you life easier with texts and styles.

A global default stylesheet can easily be loaded in Soma with a single line.

SomaProtest has been updated, all the texts and styles are managed with a CSS stylesheet. A page explaining how to use the new style and text features.

SomaText makes you able to use TextField and TextFormat properties straight from the CSS file, properties such as: embed-fonts, anti-alias-type, auto-size, multiline, font-family, text-decoration, grid-fit-type, and many others.

A full list of properties you can use is available on the CSS properties page.

Soma Tutorial - From SomaUI to FDT

2009-01-08T00:00:00Z

A new tutorial is available for Soma (Flash AS3 MVC Framework), I explain how to create a FDT project in eclipse and compile the site after exporting a project from SomaUI.

It also shows you how I use a SWC file as a Flash Library for a pure actionscript project.

Hope it is useful for all the FDT user (thanks Powerflasher!).

Soma Tutorial - From SomaUI to Flash Develop

2009-01-09T00:00:00Z

Another tutorial but for the Flash Develop users this time. I explain how to create a Flash Develop project and compile the site after exporting a project from SomaUI.

Thanks to Keita for this one :)

SomaText update and TextField bad behavior

2009-01-19T00:00:00Z

I made a small update in the SomaText class (also Soma and SomaUI because of a bad behavior with the TextField class. The TextField instance is losing the HTML formatting in case you set the htmlText and then set the multiline property to true (the other way keeps the formatting).

To reproduce the behavior:

create a next TextField instance
set some htmlText with formatting (like P and BR)
set the multiline property to true

Not a big deal but SomaText solves this behavior (working either way). I've also updated Soma and SomaUI as the framework can process TextField properties in the XML you might have found formatting problems with some SomaUI Templates (or when using the TemplateParser). The Soma Protest sources are using styles from a CSS, not TextField property in the XML, so no problem).

Anyway, everything should work as expected now.

Soma 1.6.4 and urlfriendly

2009-01-27T00:00:00Z

I've made a minor update that brings us to Soma 1.6.4 and SomaUI 1.0.6, you can get the new versions from the SomaUI page.

In the XML Site Definition, the attribute urlfriendly in a page node builds the URL for the deep-linking and in previous version this attribute had to be unique through the XML. It is no longer the case, you can now have identical parts in the URL.

This wasn't possible before:

/#/page1/common-urlfriendly/
/#/page2/common-urlfriendly/
/#/page3/common-urlfriendly/

Only the PageManager changed, you can update your sources from the previous version without problem.

And by the way, from now, I'll be release only minor update for Soma and SomaUI as I'm working on the v2 for both of them.

SomaLoader release

2009-03-03T00:00:00Z

SomaLoader is a lightweight loading manager written in AS3. You can load many types such as images, swf, xml, text, xml, css, fonts in a swf, mp3, variables and binary data. Items can be added, removed and changed in position from the queue even while loading.

SomaLoader provides a simple and unique interface for massive loading, to listen to events and access to data.

SomaLoader has some specific features such as targeting before loading, easy loading progress display, caching system and binary loading for "silent loading".

I'm working on the version 2 of Soma (AS3 MVC Flash Framework) and SomaLoader will be part of the framework, this is a pre-release as it can be used as a standalone.

Neoderma release and Soma v2 progress

2009-04-06T00:00:00Z

Hi everyone,

I've been working on the version 2 of Soma and its generator. I'm pretty busy so I didn't post for a while, but I'm going to give you some news today.

We've just released at Less Rain the Neoderma international website. It is not a "crazy-kick-your-ass-3D-website", nothing is complicated there, but it has a very nice and clean "look and feel" and a complex CMS where everything can be changed (structure, content, animations, language, and so on). The content is pretty big so it is a complicated site in terms of data. Neoderma is a multi-language site (translations are not done yet but will appear in the future).

I'm talking about Neoderma here because it has fully been built with Soma v1 and the framework has been a great help (and also a joy) to keep a strong and solid structure. Soma has been very effective in responding to (almost) whatever I needed, and because Soma is very flexible, it worked perfectly with a site where everything can be changed via a CMS.

I'm not allowed to give any source code of course, but I can advice Soma users if they wonder how to do something. Soma v1 is lacking documentation and examples but this will be greatly improved in the v2.

About the v2 I'm working on, it is in a pretty good shape. The framework is almost done. I'll make the full documentation before releasing it. It is easier to use and more consistent, not at all completely different though. Templates disappeared as we could do without them, a real node parser has been built to dynamically instantiate classes (custom or built-in) straight from the XML, a new page mode appears for Flash IDE users making you able to build something in no time, SomaLoader implemented, and more features we'll see at the release.

SomaUI, the generator is done at 80% and will make you able to build the XML Site definition with a friendly user interface, as well as exporting and compile the sources created. You'll even be able to build something very quickly from SomaUI, without knowing the framework and opening a documentation.

Thanks for your patience, it is on its way :)

Hopefully, I'll post more if I can get a bit more time!

Happy development.

SomaUI v2 small update

2009-08-18T00:00:00Z

Hi,

Small update about my work on SomaUI v2 and Soma v2. I can say that:

- Soma v2 is done (the as3 framework) - Soma Documentation is done (asdoc) - Soma Protest is ready (site demo) - SomaUI v2 is done (the source generator, AIR-java application) - SomaUI Demo is done (a SomaUI project demo)

It has been a huge amount of work, especially with the generator, I can't count the nights I passed on it. But we're almost there. I've already used the framework and generator on many projects here at Less Rain.

So good news, the framework is (I think and hope) very enjoyable. I always had fun with it and it made my life far easier on common tasks.

The last step before I release the v2 is a screencast to get you started with the new generator. I should be able to do that this week.

Soma v2 AS3 MVC Framework released!

2009-08-21T00:00:00Z

I finally release the version 2 of the framework Soma MVC and its source code generator SomaUI. It has been a long run since the last release, months of works and nights spent to make your life easier! But here we are.

Firstly, I'd like to thanks Less Rain. Not only they are amazing and skilled people, but they also have been very supportive to me. Thanks again!

Soma v2 have been already used for many projects and it has been a joy to work with it. I first built this framework for myself, as a tool. I wouldn't release it if I didn't think that Soma could help you with a minimum of learning and "framework fights", and I hope... with a lot of fun!

If the concept, compare to the version 2, is similar, a lot have been improved and added.

Soma, the AS3 MVC Framework

The framework is more consistent and is simpler to use, ease of use has always been my goal. And for this, the transitions proxies don't exist anymore and the template system has been removed.

Paradoxically, the framework is a lot more powerful and stronger that the version 1, especially in terms of automation.

What's new?

Some libraries have been added and they can also be used without the framework, such as a loader library SomaLoader (already released as a standalone) to manage loading processes, queue management and loading display.

I also built a video player "SomaVideoPlayer" (not released yet as a standalone), very easy to use and with a powerful skin system to alter built-in controls or create new ones.

I also built an assets system to dynamically create images, video, or anything, positioned them, describe layout behaviors, and a lot more... and just from an XML file, no code required! The process is amazingly quick. For example to create a video player on screen, it takes not more than a single XML node. This assets system can be used to dynamically create your own assets (custom display objects) at run-time from an XML.

There a new special "page mode movieclip" that works with the Flash IDE, that can make simple development of a whole site a matter of minutes (depending on what you want you want to reach). This will be my next tutorial.

I've never wanted Soma to impose rules to a developer, at least not too much. A big point in Soma (and SomaUI), it is never handling physical files or assets files. You can still embed images, fonts or anything the way you like (with SWC, in Flash IDE, metadata tags, or whatever). I did break some encapsulation rules though, and it was to reach a very high level of freedom and flexibility.

SomaUI, the source code generator

The first version has always been in beta and was more a kind of "concept".

The version 2 is going a lot further and its purpose is:

building an XML file required in order to make Soma working
exporting deploy files (html, css, etc)
exporting source (actinscript, Flash file, XML, etc)
compile with the Flex SDK

If you know how to build the XML file that is required by Soma, you can avoid to use SomaUI. So the whole point of SomaUI is helping you building that XML and create files to spare time.

Through screens you can set up your project, configure it, create pages, create assets, backgrounds, and export!

Soma MVC minor update 2.0.1

2009-09-01T00:00:00Z

New version available (v2.0.1), small bugs solved with the Page Manager.

Here is how I will update Soma and SomaUI. There is 3 numbers in the version number:

the first is a major update, where possibly everything change, probably not usable with previous sources.
the second is a medium update, the structure might slightly change and it might need refinement to match with a previous medium version.
the third is a minor update, totally transparent for the user, you can update the framework and the generator without breaking what you have already done.

So this is a minor update, meaning it doesn't change anything for what you are doing. You can just update the framework and the generator. SVN and source (zip) have been updated, you can get them in the SomaUI page.

Romu

Soma MVC v2.0.2 minor update

2009-09-07T00:00:00Z

SomaUI v2.0.2

-bug fixed: page selection in the page tab wasn't working properly -bug fixed: layout tab and layout properties wasn't correctly updating the XML -bug fixed: Flash Player wasn't correctly updated in Page Settings tab when opening a project -update: new page auto-name renamed to Page1, Page2, etc -update: Soma v2.0.2

Soma v2.0.2

-bug fixed: layout with a background alpha 0 wasn't displayed

Note: to update sources already exported with a version 2.0.x, just grab the com.soma package (or SWC) and replace, or in SomaUI, in the export tab and under Soma Framework, select "overwrite all".

MVC design philosophy

2009-10-06T00:00:00Z

Hi Everyone,

This is not exactly a "Soma release", but I would like to share with you my last work so we can talk about: A new AS3 MVC Framework with its own design philosophy.

Why another AS3 MVC Framework?

I've been working with different Frameworks in the last years, such as PureMVC, Cairngorm and Mate for the well-known. I've always knew that I would write my own "MVC design philosophy", without taking big words, because I would have some needs that existing Frameworks wouldn't completely fill.

That's what happened. I needed a Flash lightweight framework, not DI, event based, working both for Flex or Pure AS3. The biggest inspirations have been PureMVC for the proxies and mediators, and Mate for their event system.

I'll be starting an interesting AIR Modular app and I needed something that will easily allow me to have views and models free of Framework code, without creating tons of files or use any injection. I also wanted a Framework very flexible, so I can use it even for smaller project, being sure I'll be effective in terms of development time.

Free the views and models

First problem, free the views and models of Framework code (loose-coupling). It seems there's a wave of DI Framework but... I've never really been into DI Framework, because they tend to control the way you're doing things. If you stick to it, it is fine, but I've always felt more freedom with framework like PureMVC. I might be wrong, it is just an opinion and not even entirely true as I didn't felt that problem with Mate.

So, to solve this problem, I used the events Mate concept. A basic Flash Events that has a bubble property set to true can become Commands when they are mapped to a Command class. Those events can be intercepted, stopped and processed by the Framework (execute Commands). The great thing is, views and models are free of Framework code and can use Commands because they are just Flash native events.

Wires introduction

Second problem, was to "update" data or states in the views and models. PureMVC is using proxies and mediators and I like that approach. However, you end up by creating tons of files for the sake of loose-coupling pratice. So I've created something that I call "Wire". Now software engineers or PureMVC adept might say that what I'm doing is wrong. I have no idea, I'm no computer scientist, I do what I feel and I'm sharing it with you.

Wire are classes that can contain Framework code and they will be the links between the models, the views, the Framework and... whatever you like. Wire can be proxies, they can be mediators, but they can also be both and handle more than one view or model.

Basically, they are as free as you want them to be. They can even be optional if you don't care about good practice or loose-coupling programming. Wires have easy access to all the framework, models, commands and views. They can register create models, views, register commands or create other wires.

Update from comment:

So far I saw two ways to inject/update information into views without having framework code inside:

Dependency Injection
Buffer classes (such as Mediators and Proxies in PureMVC for the analogy, respectively for Views and Models). I mean "buffer" by classes that act as steward of other classes.

I've chosen the second way, and I've created a "buffer" class that I called a Wire.

Wires are completely free classes. I won't tell you how to use them (because that's up to you) but I can tell what you can do with them. Wires can be used to update views and models but they are not tight to anything. They are not even only tight to one tier. To create a wire class you extend Wire and implements IWire, and here are the roles they can take:

a wire can act as steward of a view (such as Mediator in PureMVC)
a wire can act as steward of a model (such as Proxies in PureMVC)
a wire can manage both a view and a model
a wire can manage multiple views and/or multiple models
a wire can be considered as a subdivision of the framework and create its own views, create its own models and register its own commands. Much like you would create a specific package to hold a specific matter.

When I build something, I always try to keep a good level of freedom to handle problems how I like but most importantly, how they should be. If you like to have the framework telling you (or forcing you) how to build your application, fair enough but you won't like it.

The wires are the free elements that will let you built your application the way you like or the way it is required to be. They can make your application rigid, segmented, flexible or centralized, depending of the role you are going to give them. They are so free that I believe remove (or lesser) what I call "Framework Fight".

Let's take an example, the Cafe TownSend below.

There are 2 wires: the LoginWire and the Employee Wire. They both register their own commands to control their views and models.

The Login Wire only handles a Login View.

The EmployeeWire handles 2 views: a list of employees and an employee details. But also 1 model (the employees data), all of them only related to employees matter.

SomaCore

I temporarily named this framework SomaCore and it has nothing to do with the Framework I released on this blog (Soma). However, this framework might become the core of what will be Soma v3.

I post this code hoping to get your feedback or point of view of what might be great or wrong in this framework.

Here is a diagram:

Click here to download a zip file containing the Framework sources code (classes and SWC).

And here are some demos. I made a Flex Cafe TownSend demo and a pure AS3 demo.

Download Source

This is a very early state, this Framework has not been used yet in a real project beside the demos above. Have a look and please let me know what you feel is good or wrong in the core concept.

SomaCore AS3 MVC Framework event-based

2009-11-20T00:00:00Z

Following my previous post about MVC design philosophy and an AS3 MVC Framework that suit my needs and expectations, I've started using SomaCore in a relatively complicated AIR modular application, and I'm really enjoying it.

I made some small changes to the code and I thought it would be a good idea to provide you the sources. SomaCore was a missing tool in my actionscript work.

I've started to feel the power of the native Flash event system (even if criticized!) by being able to listen to commands independently of the commands itself (and what the command is doing), or being able to "preventDefault" any command, or to monitor very easily everything that is going on in the framework. The wires have been a good help to keep my code very clean without tons of classes, while keeping my models and views completely free of framework code.

I also found out some kind of hidden capabilities I didn't think about while making it. One of them is an "easy module communication", so easy that, you have absolutely nothing to do to enable it. When I say module, it could be another SomaCore instance, a loaded SWF, another SomaCore instance in a loaded SWF, and so on. But I'll give more details later.

Special thanks to Henry for his testing and feedback!

Feel free to use the sources and give me some feedback. I'll try later to give more explanation on how to use SomaCore and the Wires, new demos and tutorials.

SomaCore Debugger update

2009-11-27T00:00:00Z

I've updated the debugger used in SomaCore. You can know click on everything to parse the objects and I've added a FPS + Memory meter. I'll continue to improve the debugger with my needs, next step might be a Garbage Collection monitor.

Click here to see the debugger in action.

Tips: if you close the debugger, type "debug" to get it back.

Here is a little bit of code in case you want to want to use the debugger without using the SomaCore Framework.

package {
     
    import flash.display.Sprite;
    import com.soma.core.Soma;
    import com.soma.core.interfaces.ISoma;
    import com.soma.debugger.SomaDebugger;
    import com.soma.debugger.vo.SomaDebuggerVO;
    import com.soma.debugger.events.SomaDebuggerEvent;
     
    public class Main extends Sprite {
         
        function Main() {
            // create soma application
            var app:ISoma = new Soma(stage);
            // create debugger options
            var vo:SomaDebuggerVO = new SomaDebuggerVO(app, SomaDebugger.NAME_DEFAULT, [], true, false);
            // create debugger
            var debugger:SomaDebugger = app.createPlugin(SomaDebugger, vo) as SomaDebugger;
            // use debugger
            debug("Hello Debugger");
            debug(this);
            debug(app);
        }
         
        private function debug(obj:Object):void {
            // use app.dispatchEvent() from a class that is not in the display list
            dispatchEvent(new SomaDebuggerEvent(SomaDebuggerEvent.PRINT, obj));
            // events available:
            // SomaDebuggerEvent.SHOW_DEBUGGER;
            // SomaDebuggerEvent.CLEAR;
            // SomaDebuggerEvent.PRINT;
            // SomaDebuggerEvent.HIDE_DEBUGGER;
            // SomaDebuggerEvent.MOVE_TO_TOP;
        }
         
    }
     
}

AS3 garbage collection monitor

2010-01-18T00:00:00Z

I needed to watch objects to know if they were properly garbage collected or not, so I've added a GC Monitor in the SomaCore Debugger. It is pretty easy to use and I think very useful if you start to care about the memory that the Flash Player is using and global performance.

Demo Flash (garbage collection monitor)

Download Source

The concept to use it is to "register" an object, such as a Sprite or anything, with a name.

The first step is to create the debugger. If you're using the framework SomaCore, you'll find some demo by clicking here. And if you want to use the debugger without using SomaCore, here is a snippet to create the application and debugger:

package {
    import flash.display.Sprite;
    import com.soma.core.Soma;
    import com.soma.core.interfaces.ISoma;
    import com.soma.debugger.SomaDebugger;
    import com.soma.debugger.vo.SomaDebuggerVO;
    import com.soma.debugger.events.SomaDebuggerEvent;
    public class Main extends Sprite {
        function Main() {
            // create soma application
            var app:ISoma = new Soma(stage);
            // create debugger options
            var vo:SomaDebuggerVO = new SomaDebuggerVO(app, SomaDebugger.NAME_DEFAULT, [], true, false);
            // create debugger
            var debugger:SomaDebugger = app.createPlugin(SomaDebugger, vo) as SomaDebugger;
            // use debugger
            debug("Hello Debugger");
            debug(this);
            debug(app);
        }
        private function debug(obj:Object):void {
            // use app.dispatchEvent() from a class that is not in the display list
            dispatchEvent(new SomaDebuggerEvent(SomaDebuggerEvent.PRINT, obj));
            // events available:
            // SomaDebuggerEvent.SHOW_DEBUGGER;
            // SomaDebuggerEvent.CLEAR;
            // SomaDebuggerEvent.PRINT;
            // SomaDebuggerEvent.HIDE_DEBUGGER;
            // SomaDebuggerEvent.MOVE_TO_TOP;
        }
    }
}

dispatchEvent(new SomaDebuggerGCEvent(SomaDebuggerGCEvent.ADD\_WATCHER, "my sprite", mySprite));

You can dispatch this event from anywhere in an DisplayObject in the display list (Sprite, MovieClip, etc), from the document class, the stage or the SomaCore instance.

In the debugger window, there is a "garbage collection bar" where you can click to see the registered objects, they can be either "retained" or "released". A released object means it has been garbage collected and doesn't exist anymore. The memory used by this object will be free to use.

A "force" button will trigger the garbage collection, it will call System.gc() twice with a small interval. This should only works in a Flash Player Debugger version, but useful for debugging.

Here is a list of events you can use for the garbage collection monitor:

SomaDebuggerGCEvent.REMOVE_ALL_WATCHERS
SomaDebuggerGCEvent.REMOVE_WATCHER // pass the name of he object as parameter
SomaDebuggerGCEvent.ADD_WATCHER // pass the name of the objects and the object itself as parameter
SomaDebuggerGCEvent.FORCE_GC

Note: by default SomaDebugger is now using a weak reference to the objects that you want to inspect. You can turn off this option to inspect everything in the debugger, but the objects will never be released, making the garbage collection monitor useless.

Here is how to force the inspection of any objects:

SomaDebugger.WEAK_REFERENCE = false;

Any feedback appreciated!

Romu

Firefox 3.6 Mac bug with MouseEvent

2010-03-02T00:00:00Z

Firefox 3.6 introduced a very annoying bug, and only on a Mac.

If you're using somewhere a MouseEvent.ROLL_OUT or MouseEvent.MOUSE_OUT, this event will fired even if you only click on a object without leave the object with the mouse.

The select box in the middle of the page doesn't work because a roll out event is fired when you click on it.

I didn't try yet to find a fix with MOUSE_UP and MOUSE_DOWN, but the problem is, all the existing sites that are using those events might be broken...

I believe Firefox is, or not firing the right event, or removing and putting back the flash so it loses the focus, meaning roll out is fired... A friend told me that the same things happen with java applet, didn't verify it yet.

Bug report

To test it, paste this as a document class:

package com.soundstep.baseui.demo {
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    public class Main extends Sprite {
        public function Main() {
        var s:Sprite = new Sprite();
        s.graphics.beginFill(0xFF0000);
        s.graphics.drawRect(0, 0, 100, 100);
        s.addEventListener(MouseEvent.MOUSE_OUT, test);
        addChild(s);
        }
        private function test(e:MouseEvent):void {
            trace("ok");
        }
    }
}

Click on the square and you'll see that the MOUSE_OUT is fired...

I hope they'll fix soon or I'll have to find a hack and change everything that is live.

SomaCore update AS3 MVC Minimal Framework

2010-05-14T00:00:00Z

Hi everyone,

In case you didn't notice that I released an new minimal AS3 MVC Framework some time ago: SomaCore.

I call it minimal because it is very lightweight, yet powerful and non-intrusive. You don't have much to learn if you're used to MVC framework of any sort.

I made an update today, the second one in months because it won't change a lot, the structure is there.

You can also replace any kind of previous use of the framework, the only feature added is a dispose method that will remove everything that has been created in the framework. Mostly useful in case you're creating several instance of the framework, it will now be correctly garbage collected.

Once you've created a instance of the framework:

var app:ISoma = new Application(stage);

The only things you need to do is

app.dispose(); app = null;

Here is what it is doing to the components that have been added to the frameworks:

all wires will be removed. On each wire, the dispose method will be called. You can overwrite this dispose method in your wires subclasses.
all models will be removed. On each model, the dispose method will be called. You can overwrite this dispose method in your models subclasses.
all commands will be removed
all views will be removed but not removed from the display list, that's your job. On each view, a dispose method will be called if it exists. You can create this dispose method in your views:

public function dispose():void {
    // dispose objects, graphics and events listeners
}

It important to say that all the components will be removed from the framework, but that's your matter to properly destroyed what you're creating in order to be garbage collected.

A quick info for my plans because I've silent lately (busy).

I'll make a BaseUI release in the next weeks, a completely rebuilt and optimized version 4. It is ready but I need to finish the documentation.

After that I plan to make more examples and screen cast about the SomaCore Framework.

I just wanted to say that I'm rarely happy about what I'm producing, because I like things to be... perfect. Of course, perfection can't be reached, but that is pushing me to create the better code I can, at my level.

I'm now using SomaCore in some projects. One is a relatively complicated AIR Modular Application for children. And for once, I'm very happy with what I've done with SomaCore. It has been a great help really, I should say that it saves me a lot of troubles when changes happened because I built the application how I wanted it, without "framework-fight" and as much flexible as I could. It just made me more responsive to any kind of changes in the project.

For this reason, I'll try to push SomaCore further by making more demos, videos, examples, documentation, wires concept and so on.

I still have plans to create a new version of the first automated framework Soma MVC, and its source generator, based on SomaCore.

Happy development!

Badge AIR runtime installation bug with Firefox

2010-06-29T00:00:00Z

I found out that there's a bug with the badge used to install an AIR application with Firefox from version 3.6.4 until today's version (3.6.6).

If you don't have the AIR runtime installed a Adobe UI should pop up to show a progress bar and install the runtime. The trouble is that nothing happened at all after clicking on the YES button.

To test the bug, uninstall your AIR runtime and test the badge in this page.

The problems is very inconsistent, sometimes it works and sometimes it doesn't.

AS3 Layout Manager BaseUI v4 finally released

2010-07-05T00:00:00Z

Finally, BaseUI version 4 is released!

If you don't know what is BaseUI, it is a lightweight layout manager written in pure AS3 that is helping you to handle the position and size of your elements in a Flash layout (a site, an application and or whatever you can build with AS3).

More specifically, it is calculating positions and size when you resize your browser to update your elements. BaseUI makes you able to use layout properties (such as top, bottom, horizontalCenter, and so on) on any DisplayObject instance, much like you would do in a Flex environment.

You can use BaseUI with a single DisplayOBject instance, with tons of DisplayObject instances or in a more complex system with layout classes (such as canvas, horizontal and vertical box, and tile).

Before showing you how it works with some simple examples, I'd like to mention that BaseUI has been completely rebuilt from scratch. I did that because I wasn't happy at all with a lot of things in the previous version. I wanted a very clean and effective library, with no hacks to make things works, which would make it very reliable.

The library is now contained in a com.soma.ui package, it will be part of the next Soma MVC Framework version.

I removed two things from the previous version:

the width and height ElementUI properties, as it wasn't making sense, you can now just set the width and height on your own DisplayObject instances.
the percentage values for width and height, that is not possible anymore, I might add specific properties in the future if requested

demo
source

Concept and the need of a reference

The important concept to understand is that you need to specify a reference to a BaseUI instance, or to the class that will handle the DisplayObject (which is the ElementUI class). A reference is what will be used to calculate size and position. For example, if you want your DisplayObject to be at 10 pixels from the bottom, you need to tell the library from what object. That's what a reference is.

The reference can be any DisplayObjectContainer, such as the stage, a sprite, a layout, etc. Once you understand completely the need of having a reference, it is good to know that is doesn't have to be a parent of your DisplayObject, it can be anything, anywhere. The only important things is that the reference must have a proper width and height, the stage or a layout class will always have it, but an empty Sprite instance won't, the values will be 0.

All the following example will use the stage as a reference, but again, you can use anything you want.

Create a BaseUI instance

var baseUI:BaseUI = new BaseUI(stage);

Adding and removing DisplayObject instances

var baseUI:BaseUI = new BaseUI(stage); var mySprite:Sprite = new Sprite(); var element:ElementUI = baseUI.add(mySprite); element.refresh(); addChild(mySprite);

baseUI.remove(mySprite); baseUI.removeAll();

Getting ElementUI instances

var element:ElementUI = baseUI.getElement(mySprite); var arrayOfElements:Array = baseUI.getElements(); // note that this is a copy of the real array var dictionaryOfElements:Dictionary = baseUI.getElementsAsDictionary(); // note that this is a copy of the real dictionary

Setting ElementUI properties

var element:ElementUI = baseUI.getElement(mySprite); element.bottom = 10; element.right = 10; element.refresh();

var element:ElementUI = baseUI.getElement(mySprite); element.horizontalCenter = 0; element.verticalCenter = 0; element.refresh();

var element:ElementUI = baseUI.getElement(mySprite); element.ratio = ElementUI.RATIO\_IN; element.refresh();

Reset ElementUI properties

You can reset the Number properties of the ElementUI instance by using NaN or null for the others:

element.top = 10; element.top = NaN;

element.ratio = ElementUI.RATIO\_IN; element.ratio = null; // or Element.RATIO\_NONE

element.rect = new Rectangle(0, 0, 50, 50); element.rect = null;

Or reset all of them:

element.reset();

Using ratio

The ratio is a kind of mode. You can use with a DisplayObject instance that keeps its proportion (Aspect Ratio) when it gets resized. Especially useful with pictures or backgrounds for example.

There is two ratio mode, a mode "in" and a mode "out".

The mode "in" will always display all the surface of the DisplayObject instance in its reference, you might get empty area if the reference has a different ratio. The mode "out" will always cover the surface of the reference, you might miss some part of the DisplayObject if the reference has a different ratio.

var element:ElementUI = baseUI.add(mySprite); element.ratio = ElementUI.RATIO\_IN; element.alignX = ElementUI.ALIGN\_RIGHT; element.alignY = ElementUI.ALIGN\_BOTTOM;

DisplayObject boundaries (optional)

When you use some ElementUI properties (such as right, bottom, horizontalCenter, etc), BaseUI will use the width and height of your DisplayObject instance to make its position calculation. For example, if you want the object to be at 10 pixels from the bottom, BaseUI needs to use the height.

This might prove difficult in some cases, for example if you have a specific "center point" or if the size of the DisplayObject instance changes all the time (if it is animated).

To solve this kind of problem, you can specify the boundaries of your DisplayObject to be used as a size in BaseUI instead of its real size. You can do that by using the "rect" and a Rectangle instance.

For example, if you draw a square in a sprite width 100 and height 100, but starting at x -50 and y -50 so it is centered. You can specify the boundaries like this:

var element:ElementUI = baseUI.add(myCenteredSprite); element.rect = new Rectangle(-50, -50, 100, 100);

And you can remove it this way:

element.rect = null;

ElementUI Listeners

An ElementUI instance can dispatch three events, in this order:

1. EventUI.WILL_CALCULATE (dispatched before any calculation) 2. EventUI.WILL_UPDATE (dispatched after calculation and before updating the DisplayObject) 3. EventUI.UPDATED (dispatched after that the DisplayObject has been updated)

You can stop the ElementUI process in the EventUI.WILL_CALCULATE and EventUI.WILL_UPDATE handlers using "event.preventDefault()".

var baseUI:BaseUI = new BaseUI(stage); var element:ElementUI = baseUI.add(mySprite); element.addEventListener(EventUI.WILL\_CALCULATE, willCalculateHandler); element.addEventListener(EventUI.WILL\_UPDATE, willUpdateHandler); element.addEventListener(EventUI.UPDATED, updatedHandler); element.right = 10; element.bottom = 10; element.refresh(); addChild(mySprite);

private function willCalculateHandler(event:EventUI):void { //event.preventDefault(); // stop the process before the calculation trace(event.element); // trace the ElementUI instance trace(event.element.object); // trace the DisplayObject instance trace(event.element.baseUI); // trace the BaseUI instance }

private function willUpdateHandler(event:EventUI):void { //event.preventDefault(); // stop the process before new properties are applied to the DisplayObject trace(event.element); // trace the ElementUI instance trace(event.element.object); // trace the DisplayObject instance trace(event.element.baseUI); // trace the BaseUI instance trace(event.properties); // trace the properties that will be applied to the DisplayObject }

private function updatedHandler(event:EventUI):void { trace(event.element); // trace the ElementUI instance trace(event.element.object); // trace the DisplayObject instance trace(event.element.baseUI); // trace the BaseUI instance trace(event.properties); // trace the properties that have been applied to the DisplayObject }

Refreshing an element

When you create an element, the position and size will be calculated when an Event.RESIZE occurs, which might not happen unless you resize your browser. For a performance matter, the calculation is not done when you change a property. To make the calculation and update your element, you might need to use the refresh method of your ElementUI instance (or BaseUI instance for all the ElementUI).

element.refresh(); baseUI.refresh();

Disposing and garbage collection

Both BaseUI and ElementUI classes have a dispose method to destroy variables and make the instance eligible for the garbage collection. The only one you have to care about is the BaseUI one, as the ElementUI will be properly destroyed when you use the remove and removeAll BaseUI methods.

baseUI.dispose(); baseUI = null;

Using layouts

Five layouts classes are built in BaseUI, all of them have ElementUI properties directly accessible.

- The LayoutUI class: the super class of all the other layouts classes, only a container, children stay un-touched - The CanvasUI class: handle the children with ElementUI properties - The HBoxUI class: display the children, one after the other, in a horizontal direction - The VBoxUI class: display the children, one after the other, in a vertical direction - The TileUI class: display the children, one after the other, and is in both direction and in a "multiline" way

All the layouts classes will have some common properties, such as background color, background transparency, rounded values, and if the content that goes outside of the boundaries of the layouts should be displayed or hidden.

You can also use layouts in other layouts, like adding canvas in tiles that are added in vertical boxes, etc. Be aware that we're still using flash here, and even if the library is efficient, it might get slower if you add thousands of tiles in thousands of other tiles with thousands of bitmaps. Calculation are made and everything has limits, especially Flash. Beside that, I got good performance with the library, you will be fine unless you do crazy things :)

The LayoutUI class

The LayoutUI class extends the MovieClip class and is nothing else that a container that will always have a size (width and height), even if there's nothing inside. Another difference with another built-in flash container (like Sprite, MovieClip, etc), is that the width and height will always be the one of the container regardless of what it contains.

For example, a layout instance (width 100 and height 100), that contains another DisplayObject (width 200 and height 200). The width and height values returned by a normal Sprite or MovieClip would be 200, while the layouts classes will return 100 (see getRealWidth and getRealHeight methods).

And that is true for all the layouts in the library, it is something to be aware of.

var layout:LayoutUI = new LayoutUI(stage, 400, 300);
layout.backgroundColor = 0xFF0000;
layout.backgroundAlpha = 0.2;
layout.bottom = 10;
layout.right = 10;
layout.refresh();
addChild(layout);

The CanvasUI class

The behavior of the CanvasUI class is very close to its super class (LayoutUI), with the different that an ElementUI instance is created (or removed) when you add children to its display list. Makes you able to handle the children of the CanvasUI instance with ElementUI properties.

var canvas:CanvasUI = new CanvasUI(stage, 400, 300);
canvas.backgroundColor = 0xFF0000;
canvas.backgroundAlpha = 0.2;
canvas.ratio = ElementUI.RATIO_IN;
addChild(canvas);

var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xFF0000, .5);
sprite.graphics.drawRect(0, 0, 100, 100);

var element:ElementUI = canvas.add(sprite);
element.right = 10;
element.bottom = 10;

canvas.refresh();

The HBoxUI class (horizontal box)

The goal of the HBoxUI class is that it will take from the positioning of its children, and align them in an horizontal way and only one row. Properties such as children gap, children align and children padding are introduced.

var hbox:HBoxUI = new HBoxUI(stage, 400, 300);
hbox.backgroundColor = 0xFF0000;
hbox.backgroundAlpha = 0.2;
hbox.ratio = ElementUI.RATIO_IN;
hbox.childrenGap = new GapUI(5, 5);
hbox.childrenPadding = new PaddingUI(5, 5, 5, 5);
hbox.childrenAlign = HBoxUI.ALIGN_BOTTOM_RIGHT;
addChild(hbox);

for (var i:int=0; i<8; ++i) {
  var sprite:Sprite = new Sprite();
  sprite.graphics.beginFill(0xFF0000, .5);
  sprite.graphics.drawRect(0, 0, 100, 100);
  hbox.addChild(sprite);
}

hbox.refresh();

The VBoxUI class (vertical box)

The VBoxUI class is much like the HBoxUI one, but you found out, in a vertical way.

var vbox:VBoxUI = new VBoxUI(stage, 400, 300);
vbox.backgroundColor = 0xFF0000;
vbox.backgroundAlpha = 0.2;
vbox.ratio = ElementUI.RATIO_IN;
vbox.childrenGap = new GapUI(5, 5);
vbox.childrenPadding = new PaddingUI(5, 5, 5, 5);
vbox.childrenAlign = VBoxUI.ALIGN_BOTTOM_RIGHT;
addChild(vbox);

for (var i:int=0; i<8; ++i) {
  var sprite:Sprite = new Sprite();
  sprite.graphics.beginFill(0xFF0000, .5);
  sprite.graphics.drawRect(0, 0, 100, 100);
  vbox.addChild(sprite);
}

vbox.refresh();

The TileUI class

A kind of mix between the HBoxUI and VBoxUI classes, Flex developer are used to it as well. It will show the children in multiple lines, in any direction depending of the setting used.

var tile:TileUI = new TileUI(stage, 400, 300);
tile.backgroundColor = 0xFF0000;
tile.backgroundAlpha = 0.2;
tile.ratio = ElementUI.RATIO_IN;
tile.childrenGap = new GapUI(5, 5);
tile.childrenPadding = new PaddingUI(5, 5, 5, 5);
tile.childrenAlign = TileUI.ALIGN_BOTTOM_RIGHT;
tile.childrenDirection = TileUI.DIRECTION_HORIZONTAL;
addChild(tile);

for (var i:int=0; i<16; ++i) {
  var sprite:Sprite = new Sprite();
  sprite.graphics.beginFill(0xFF0000, .5);
  sprite.graphics.drawRect(0, 0, 100, 100);
  tile.addChild(sprite);
}

tile.refresh();

I'm sure you will enjoy the library, it is very easy to use. Please send me some feedback :)

Happy development!

Super White Effect

2010-08-13T00:00:00Z

Let's start by a Flash demo here and a bit of explanation below.

While training myself to get better with After Effects, I stumble on a very interesting thing about color.

I was watching a Chad Perkins video about HDRI and color depth, more precisely, 32 bits rendering.

He showed what was happening with a Fast Blur effect (which is a 32 bits effect), and a white text in a 32 bits After Effects project.

Here is the rendering in a 8 bits project, just a normal blur.

And here is the result is you set the project to be 32 bits.

So what's happening here? We can see there is some kind of halo, or glow, but there's just a blur. I found the result pretty nice, a lot of luminance, and they call that "superwhite". I didn't find a lot of information, maybe there is another term for that. I found that very intriguing.

I've started to think how to get this effect in flash. The problem is Flash is only rendering 8 bits. I quote a details I found about Pixel Bender:

Although Pixel Bender images have 32-bits per channel, graphics in Flash Player and AIR only have 8-bits per channel. When a kernel is run, the input image data is converted to 32-bits per channel and then converted back to 8-bits per channel when kernel execution is complete.

But I wanted to have a try anyway and even if I don't have the exact same effect in Flash, I found out that something is happening. Here is what I've done.

1. I put a white text on the stage (2 actually for other tests) 2. I've added a Blur effect (15 and 15)

Here is the result, again just a normal blur.

Then I've changed the alpha multiplier value (ColorTransform property) from 1 to 2.5, nothing happened obviously, alpha 1 or 2.5 is the same isn't it? But here is the effect coming, if you add a bit of color, for example by setting the blue multiplier from 1 to 0.99, you then get a (fake?) superwhite. Here is the result:

Again, there's no glow of anything, it is just a color and alpha effect. The amount of "superwhite" is changed with the value of the alpha multiplier, at least from 1 to... 20 or something.

Pretty cool huh? It is a fake superwhite because if I trust After Effect, it can happen only with 32 bits rendering, and I also don't get exactly the same result as in After Effect, the color halo around is missing. But still, I found that quite intriguing. I'm not that good with colors, but I believe that what's happening is the alpha channel that is multiplied by each color channel. Maybe someone will have a more in-depth explanation of what's happening? I would be curious.

To check out the demo, click here.

You can click the button at the bottom to applied values. You can see the difference between the "Normal Blur" and the "Super White".

Bringing life to an image

2010-08-16T00:00:00Z

Here is how to bring life to an image using the filter DisplacementMapFilter.

Click here to see the demo.

I got the idea from a video made by Chad Perkins (thanks Chad, you're giving me a lot of inspiration!) where he is showing this effect in After Effects. My Flash nature pushed me to reproduced it with AS3. The result is great even if the After Effects version is slightly better, maybe the Flash version can be tweaked a bit more.

Here is how it works. I used this wonderful picture from my friend Ziemowit Maj :)

You also need a second picture that will describe the map of the filter using luminance. The foreground areas should be whiter than the background areas. I made this picture using Photoshop, the brush tools, and of course my proven drawing skills :D

I apply the DisplacementMapFilter on a BitmapData and I move the map position over time. It is not too complicated, but you can probably spend more time than me to draw the map correctly. Be careful not to make a distortion too big or it will look weird! Here is the code:

package {
    import caurina.transitions.Tweener;
 
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.BitmapDataChannel;
    import flash.display.PixelSnapping;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.filters.DisplacementMapFilter;
    import flash.filters.DisplacementMapFilterMode;
    import flash.geom.Point;
    import flash.geom.Rectangle;
 
    /**
     * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
     * <b>Company:</b> Less Rain - <a href="http://www.lessrain.com/" target="_blank">www.lessrain.com</a><br />
     * <b>Class version:</b> 1.0<br />
     * <b>Actionscript version:</b> 3.0<br />
     * <b>Copyright:</b> 
     * <br />
     * <b>Date:</b> Aug 16, 2010<br />
     * <b>Usage:</b>
     * @example
     * <listing version="3.0"></listing>
     */
     
    public class Main extends Sprite {
         
        [Embed(source="../assets/photo.jpg")]
        private var Photo:Class;
        [Embed(source="../assets/map.jpg")]
        private var Map:Class;
         
        private var _photo:Bitmap;
        private var _map:Bitmap;
        private var _point:Point;
        private var _photoDisplaced:Bitmap;
        private var _photoDisplacedData:BitmapData;
        private var _filter:DisplacementMapFilter;
         
        private var _range:Number = 17;
 
        //------------------------------------
        // private, protected properties
        //------------------------------------
         
         
 
        //------------------------------------
        // public properties
        //------------------------------------
         
         
         
        //------------------------------------
        // constructor
        //------------------------------------
         
        public function Main() {
            initialize();
        }
 
        //
        // PRIVATE, PROTECTED
        //________________________________________________________________________________________________
         
        private function initialize():void {
            // stage
            stage.frameRate = 41;
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            // photo
            _photo = new Photo();
            // photoDisplaced
            _photoDisplacedData = new BitmapData(_photo.width, _photo.height);
            _photoDisplaced = new Bitmap(_photoDisplacedData, PixelSnapping.AUTO, true);
            _photoDisplaced.scaleX = 1.05;
            _photoDisplaced.scaleY = 1.05;
            _photoDisplaced.x = (stage.stageWidth - _photo.width) >> 1;
            _photoDisplaced.y = (stage.stageHeight - _photo.height) >> 1;
            addChild(_photoDisplaced);
            // map
            _map = new Map();
            // point
            _point = new Point(-(_range), 0); 
            // enterframe
            addEventListener(Event.ENTER_FRAME, loop);
            // scroll motion
            move(_range);
        }
 
        private function move(target:Number):void {
            Tweener.addTween(_point, {time:2, x:target, transition:"linear", onComplete:move, onCompleteParams:[target*-1]});
        }
 
        private function loop(event:Event):void {
            _filter = new DisplacementMapFilter(
                _map.bitmapData,
                _point,
                BitmapDataChannel.RED,
                BitmapDataChannel.RED,
                _point.x,
                _point.y,
                DisplacementMapFilterMode.WRAP);
            _photoDisplacedData.applyFilter(_photo.bitmapData, _photoDisplacedData.rect, new Point(0,0), _filter);
            _photoDisplaced.bitmapData.draw(_photoDisplacedData, null, null, null, new Rectangle( _point.x, _point.y, _photo.width, _photo.height), true);
        }
         
        // PUBLIC
        //________________________________________________________________________________________________
         
         
         
    }
}

SomaUI update for Flex SDK 4

2010-09-29T00:00:00Z

I've updated SomaUI, the AIR tool that generates the draft of a Flash website build with SomaMVC. Sorry for the late update but you can now use the generator with Flex 4 and target the Flash Player 10.1.

To avoid a confusion, SomaUI is an AIR tool that generates AS3 sources build with the AS3 MVC Framework SomaMVC.

SomaMVC has nothing to do with SomaCore, they are 2 different frameworks and don't share the same goal.

While SomaMVC (which would entered in the same category as the Gaia Framework) is meant to be generated and rely on an XML File to describe and build its content, SomaCore is a lightweight MVC framework that doesn't build anything for you and would entered in the same category as PureMVC.

I intend at some point to rebuild SomaMVC using SomaCore and unify these 2 projects.

SomaCore AS3 MVC framework on Github

2010-10-18T00:00:00Z

I've decided to put my framework SomaCore on Github.

SomaCore is a lightweight event-based MVC framework written in AS3 that provides a structure, models, views management and commands. Somacore can be used for Flash, Flex and AIR projects.

SomaCore does not use any external library and does not use dependency injection.

SomaCore is completely event-based and use a concept of wires to code in an efficient decoupled way.

Framework http://github.com/soundstep/somacore_framework
Demos http://github.com/soundstep/somacore_demos
Plugins http://github.com/soundstep/somacore_plugins
Blog Page (with demos) http://www.soundstep.com/blog/downloads/somacore/
Video tutorial http://www.soundstep.com/blog/source/somacore/tutorials/getting-started/
Documentation http://www.soundstep.com/blog/source/somacore/docs/

A very handy capability of the framework among others is the way you can monitor the flow of your application. SomaCore is using the the flash model to monitor commands and even intercept them in a way so that any actionscript developer will feel at home. Example in a wire class to listen and intercept a command:

// listen to a command
addEventListener(MyEvent.DO_SOMETHING, commandHandler);
// remove a listener
removeEventListener(MyEvent.DO_SOMETHING, commandHandler);
 
private function commandHandler(event:MyEvent):void {
    // intercept (if the event is cancelable)
    e.preventDefault();
}

Click here to see one of the demo code to get started.

Some other things to know about the framework

Commands are normal built-in Flash events with the bubbles property set to true.
Commands can be used in the views as they are not really framework code.
Parallel and sequence commands are built-in.
Wires are the glue of the frameworks elements (models, commands, views, wires) and can be used the way you wish, as proxy/mediators or managers.
Wires can manage one class or multiple classes.
Wires and commands access to all the framework elements (stage, framework instance, wires, models, views and commands).
Plugins can be created for the framework (such as the SomaDebugger plugin).
Powerful flow control using the built-in flash event model.

Here is how to get started with github: http://help.github.com/

SomaCore Hello World

2010-10-24T00:00:00Z

I've added a very simple SomaCore Hello World demo.

The application creates a wire, a view and a model. The view dispatch a command to request a message, the command ask the data to the model, the model gets the data and dispatch an event to notify the framework, the wire catch the event and update the view with the message.

That's all!

The demo is also available from the demo repository on Github: http://github.com/soundstep/somacore_demos

Hello World

SomaCore Hello World

SomaCore Twitter Search demo

2010-10-26T00:00:00Z

Another SomaCore demo is available on Githug or on the SomaCore page.

This demo is relatively simple. Keywords are sent to the Twitter API using a command that is dispatched straight from the view as it is something possible with SomaCore. A command is nothing more than a flash built-in event. The views are able to dispatch commands without accessing to a mediator first and stay completely free of framework code.

A TwitterService dispatch a search result event after getting the data. The wire responsible of the main view is listening to the search result event and update the view.

The SearchWire class demonstrates that both commands and events can be listened to from any wire.

The control of the flow of the application is also very flexible, the SearchWire class could have stopped the search command for any reason using event.preventDefault() as the class is listening to the command (if the event is sent with a cancelable property set to true).

Any commands in SomaCore can be listened to in any wires, and can also be "default prevented".

Twitter Search

SomaCore Twitter Search

Credits: Inspired by a great Flex Robotlegs demo by John Lindquist, using the AS3 API library Tweetr.

SomaCore AS3 MVC Framework v2 release

2011-02-07T00:00:00Z

SomaCore is a lightweight AS3 MVC event-based framework that provides a very flexible structure for your Flash, Flex and AIR projects.

The main addition in this version 2 is Dependency Injection, but it is up to you how you want to use SomaCore because injection is optional.

Information

SomaCore Main Page (tutorials, demos, source)
Repository SomaCore (github)
Repository Demos (github)
Repository Plugins (github)

Don't want to read, just show me some code!

SomaCore Hello World
SomaCore CafeTownSend (Flex)
Twitter Search demo (pure as3)

SomaCore is both a registry and dependency injection framework

As a base, SomaCore is a registry framework, much like PureMVC. The framework makes you able to add and remove elements to the framework instance to be able to access them from anywhere (such as addView, getView, addWire, getWire, addModel, getModel, addCommand, and so on).

Enable injection

You are now able to use dependency injection. It can be enabled by sending an ISomaInjector class to the constructor of the Soma class:

public class SomaApplication extends Soma implements ISoma {
  public function SomaApplication(stage:Stage) {
    super(stage, SomaInjector);
  }
}

The injector is accessible from framework instances, wires and commands using the property injector.

Here is a quick example:

injector.mapToInstance(MyModel, new MyModel());
injector.mapSingleton(MyWire);
injector.getInstance(MyWire);

package  {
    import com.soma.core.wire.Wire;
    import com.soma.core.interfaces.IWire;
     
    public class MyWire extends Wire implements IWire {
 
        [Inject]
        public var model:MyModel;
         
        override public function initialize():void {
            // called when the wire has been registered to the framework
            trace(model, " is injected");
        }
         
        override public function dispose():void {
            // called when the wire has been removed from the framework
        }
         
    }
}

Inspirations

Before going further, I have to give some credits.

When I first tried Robotlegs, one part strikes me as it was solving a problem I had for a while: The mediator system: being able to build your application and add mediators regardless of any kind of structure and very easily. This workflow was so nice that it made me rethink a lot of things.

SomaCore has some capabilities that made me build the framework and I wasn't ready to give them up. But I felt that this mediator workflow in SomaCore would just be amazing and a great addition.

I built these tools and frameworks to make my developer life easier, I then share them to other developers. If my work makes them enjoy their coding, that's good enough for me.

So before asking myself too many questions, I reproduced the mediator system in SomaCore. It is now very similar to Robotlegs but it can also be used without enabling injection. That is the first part of the credits: a big one to Robotlegs that has been an amazing inspiration to SomaCore, as big as PureMVC has been for the version 1.

The second credit would go to the library SwiftSuspenders, the same one that Robolegs is using to handle its dependency injection. It is very lightweight and has good performance.

Mediators

Here is how it works, you can map a view to another class (the mediator), and every time this "mapped view" will be added to a display list, the mediator class will be instantiated with a reference to this view. The mediator class will also be destroyed when the view is removed from the display list. Everything is automatic and handled by the framework.

In SomaCore the Mediator class is extending the Wire class which gives access to everything in the framework.

Mapping a view (example in a wire):

mediator.mapView(MySprite, MySpriteMediator);

The mediator get instantiated when the view is added to the display list

addChild(new MySprite());

Mediator example:

package {
    import com.soma.core.interfaces.IMediator;
    import com.soma.core.mediator.Mediator;
    public class MySpriteMediator extends Mediator implements IMediator {
         
        [Inject]
        public var view:MySprite;
         
        override public function initialize():void {
            // called when the mediator has been created and registered to the framework
            trace(view == viewComponent);
        }
         
        override public function dispose():void {
            // called when the mediator has been destroyed by the framework
        }
         
    }
}

From version 1 to version 2

Only minor changes:

initialize and dispose methods in wires and models are now public.

package  {
    import com.soma.core.interfaces.IModel;
    import com.soma.core.model.Model;
    public class ModelExample extends Model implements IModel {
        override public function initialize():void {
            // called when the model has been registered to the framework
        }
        override public function dispose():void {
            // called when the model has been removed from the framework
        }
    }
}

the framework instance property has changed from soma to instance.

package  {
    import com.soma.core.wire.Wire;
    import com.soma.core.interfaces.IWire;
    public class WireExample extends Wire implements IWire {
        override protected function initialize():void {
            // called when the wire has been registered to the framework
            trace("my framework instance:", instance)
        }
        override protected function dispose():void {
            // called when the wire has been removed from the framework
        }
    }
}

a public setup method is available in your framework instance.

var app:ISoma = new Soma();
app.setup(stage, SomaInjector);

an initialize and start protected methods have been added in the Soma instance.

package  {
    import com.soma.core.Soma;
    import com.soma.core.interfaces.ISoma;
    import com.soma.core.di.SomaInjector;
    import flash.display.Stage;
    public class SomaApplication extends Soma implements ISoma {
        public function SomaApplication(stage:Stage) {
            super(stage, SomaInjector);
        }
        override protected function initialize():void {
             
        }
        override protected function registerCommands():void {
             
        }
        override protected function registerModels():void {
             
        }
        override protected function registerViews():void {
             
        }
        override protected function registerWires():void {
             
        }
        override protected function registerPlugins():void {
             
        }
        override protected function start():void {
             
        }
    }
}

SomaCore features

Here are some features that might makes you enjoy the framework.

Stage as single event dispatcher

SomaCore is using a single event dispatcher: the stage, and a system of event interception to handles its commands system. As the commands in SomaCore are normal built-in events with the property bubbles set to true, this makes you able to dispatch commands straight from a view removing potential layers (like mediators) to handles communications from the views to the framework.

This also makes you able to communicate between different modules (or swf files) as they all share the same stage.

Seamless commands and events integration

The commands in SomaCore are normal built-in events and the framework has a seamless integration with the flash event system. Seamless meaning that the built-in syntax is in use: dispatchEvent, addEventListener, and so on.


Dispatch a command from a framework elements (wires, commands, models, etc) **or views**: ```actionscript
 dispatchEvent(new MyEvent(MyEvent.DO\_SOMETHING));

Monitoring commands from wires, mediators, or models:

 addEventListener(MyEvent.DO\_SOMETHING, myEventHandler);

Commands monitoring

This capability is probably one of the most important to me. SomaCore makes you able to listen to commands from any wires and mediators, but also makes you able to stop the execution of any command (if the event is set as cancelable) using event.preventDefault().

package  {
    import com.soma.core.wire.Wire;
    import com.soma.core.interfaces.IWire;
    public class WireExample extends Wire implements IWire {
        override public function initialize():void {
            // called when the wire has been registered to the framework
            addEventListener(MyEvent.DO_SOMETHING, myEventHandler);
        }
        private function myEventHandler(event:MyEvent):void {
            // the command MyEvent.DO_SOMETHING has been dispatched
            // I can monitor it here (possible from any wires and mediators)
            // for some reasons, I decide to stop the execution of this command:
            event.preventDefault();
        }
        override public function dispose():void {
            // called when the wire has been removed from the framework
            removeEventListener(MyEvent.DO_SOMETHING, myEventHandler);
        }
    }
}

Easy way to map a mediator to a view

This is the workflow I reproduced from Robotlegs. It allows you to build you application, let's say... complicated layouts, structure, tons of views, and so on. But at any point, if the framework needs to talk to a specific view, you can easily map a mediator to this view:

 mediator.mapView(MyView, MyViewMediator);

For the other way around: a view needs to talk to the framework, mediators are not necessarily needed as you can dispatch commands straight from views in SomaCore. The commands are just normal events. The only requirement is that the view needs to be on the stage (added to a display list, after a ADDED_TO_STAGE event) in order for the stage to get the command.

Flexibility (injection, not injection, or both)

As the injection is optional in the framework, you are free to code the way you like, in the registry way like PureMVC way or in the injection way like Robotlegs, or even using both ways in the same time.

For some reasons, you might want to avoid injection, describeType, getElementByName, not comfortable yet with the concept, portability, optimal performance for games, etc. This is still possible with SomaCore.

Here are the built-in registry methods without injection: ```actionscript addWire(MyWire.NAME, new MyWire()); getWire(MyWire.NAME); addModel(MyModel.NAME, new MyModel()); getModel(MyModel.NAME); addView(MY_SPRITE_NAME, new Sprite()); getView(MY_SPRITE_NAME);


With injection, you might do something like: ```actionscript
injector.mapSingleton(MyModel);
injector.createInstance(MyWire);

// MyWire injectee class
[Inject]
public var model:MyModel;

You can also use both: ```actionscript var wire:MyWire = new MyWire(); injector.mapToInstance(MyWire, wire); addWire(MyWire.NAME, wire);


Making you able to get the wire back this 2 ways: ```actionscript
[Inject]
public var wire:MyWire;

getWire(MyWire.NAME);

Plugins system

An easy way to add plugins to the framework, the SomaDebugger is the first one but I have plans to write others.

Debugger

The SomaDebugger especially built to work with SomaCore (even if it can be used without).

protected function registerPlugins():void {
    createPlugin(SomaDebugger, new SomaDebuggerVO(this, SomaDebugger.NAME_DEFAULT, getCommands(), true, false));
}

Lightweight

SomaCore is lightweight, here are the size compiled of the framework:

9.46 KB (9 693 bytes) - injector not enabled 14.83 KB (15 185 bytes) - injector enabled

Next steps

I'll make new documents for code examples, best practices, and so on to help you get started. Maybe a javascript version as a developer has made an amazing port of SomaCore.

If you're looking for more information about the dependency injection part before I write documents, check the README file from the injection library: SwiftSuspenders.

Try SomaCore out, it is really easy to get started with. You'll feel at home very quickly with its flexibility and well integrated command system with built-in events.

SomaCore tutorial framework instance

2011-02-09T00:00:00Z

I'll be writing in the next days a series of wiki, manual, best practices with tons of code example. It should help you to get started. I will be explaining in-depth how SomaCore works and what you can do with it.

The first one is about the Framework Instance. The different ways to create a SomaCore application, what is required, how to enable dependency injection and how to access to this instance.

SomaCore wiki and framework flow

2011-03-14T00:00:00Z

I've added some more information on the SomaCore wiki.

You can find some code and explanation how to use, create and remove Wires within the framework, using injection or not. I also explained how to monitor and control the application flow with methods you are used to, such as dispatchEvent, addEventListener, preventDefault and so on.

You can also find explanation to handle the views in the framework.

Last addition is a diagram showing the commands flow from other framework elements, I've added it to the previous SomaCore diagram.

Next step in the wiki are about commands and 2 others diagrams related to them.

Hope that will help to get you started.

Knob AS3 drag on circle or ellipse

2011-04-08T00:00:00Z

I needed some knobs for a debug interface. I share this very simple class to use so you don't have to rebuild it from scratch, it should be pretty flexible.

Click here to see the demo.

Download source.

The knob can be used as circle or ellipse, here is how to create one:

var knob:Knob = new Knob();
knob.addEventListener(Event.CHANGE, changeHandler);
addChild(knob);
 
function changeHandler(event:Event):void {
    var knob:Knob = event.currentTarget as Knob;
    trace(knob.value);
    trace(knob.valuePercent);
}

Set the radius, a custom handler and a custom graphic:

var customHandler:Sprite = new Sprite();
customHandler.graphics.beginFill(0xFF0000);
customHandler.graphics.drawRect(-10, -10, 20, 20);
customHandler.graphics.endFill();
var knob:Knob =  = new Knob(100, 50, customHandler);
knob.stylePathColor = 0x00FF00;
knob.stylePathThickness = 3;
knob.stylePathAlpha = 0.3;

That's pretty much it, here is the class:

package {
 
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
 
    /**
     * @author Romuald Quantin
     */
    public class Knob extends Sprite {
 
        private var _radiusX:Number;
        private var _radiusY:Number;
        private var _handler:DisplayObject;
        private var _sector:Sector;
         
        private var _stylePathColor:uint = 0xCCCCCC;
        private var _stylePathAlpha:Number = 1;
        private var _stylePathThickness:Number = 0;
 
        public function Knob(radiusX:Number = 100, radiusY:Number = 100, handler:DisplayObject = null) {
            setRadius(radiusX, radiusY);
            setHandler(handler);
            updatePositionFromDegree(-90);
        }
 
        private function setRadius(radiusX:Number, radiusY:Number):void {
            _radiusX = radiusX;
            _radiusY = radiusY;
            if (!_sector) _sector = new Sector(0, _radiusX, _radiusY);
            draw();
            updatePosition();
        }
 
        private function setHandler(value:DisplayObject):void {
            disposeDragabble();
            _handler = (!value) ? createNewHandler() : value;
            setHandlerListeners();
            addChild(_handler);
            updatePosition();
        }
 
        private function setHandlerListeners():void {
            _handler.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
        }
 
        private function removeHandlerListeners():void {
            _handler.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            stage.removeEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler);
        }
 
        private function mouseLeaveHandler(event:Event):void {
            stopDragging();
        }
 
        private function mouseDownHandler(event:MouseEvent):void {
            startDragging();
        }
 
        private function mouseUpHandler(event:MouseEvent):void {
            stopDragging();
        }
 
        private function startDragging():void {
            stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            stage.removeEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler);
            stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler);
        }
 
        private function stopDragging():void {
            stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            stage.removeEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler);
        }
 
        private function mouseMoveHandler(event:MouseEvent):void {
            updatePosition();
        }
 
        private function updatePosition():void {
            var ratio:Number = _radiusX / _radiusY;
            var angle:Number = Math.atan2(mouseX, mouseY);
            updatePositionFromDegree(90 - (Math.atan2(Math.sin(angle), Math.cos(angle) * ratio)) * (180 / Math.PI));
            dispatchEvent(new Event(Event.CHANGE));
        }
 
        private function updatePositionFromDegree(value:Number):void {
            _sector.degree = value;
            _sector.radiusX = _radiusX;
            _sector.radiusY = _radiusY;
            if (_handler) {
                _handler.x = _sector.x;
                _handler.y = _sector.y;
            }
        }
 
        private function createNewHandler() : DisplayObject {
            var circle:Sprite = new Sprite();
            circle.graphics.beginFill(0x434F6C);
            circle.graphics.drawCircle(0, 0, 5);
            return circle;
        }
 
        private function draw():void {
            graphics.clear();
            graphics.lineStyle(_stylePathThickness, _stylePathColor, _stylePathAlpha);
            graphics.moveTo(_sector.x, _sector.y);
            var i:Number = 0;
            var l:Number = 360;
            for (; i <= l; ++i) {
                _sector.degree = i;
                _sector.radiusX = _radiusX;
                _sector.radiusY = _radiusY;
                graphics.lineTo(_sector.x, _sector.y);
            }
            graphics.endFill();
        }
 
        public function get radiusX():Number {
            return _radiusX;
        }
 
        public function set radiusX(value:Number):void {
            setRadius(value, _radiusY);
        }
 
        public function get radiusY():Number {
            return _radiusY;
        }
 
        public function set radiusY(value:Number):void {
            setRadius(_radiusX, value);
        }
 
        public function get handler() : DisplayObject {
            return _handler;
        }
 
        public function set handler(value:DisplayObject):void {
            setHandler(value);
        }
 
        public function get value():Number {
            return _sector.degree + 90;
        }
 
        public function set value(value:Number):void {
            updatePositionFromDegree(value - 90);
        }
 
        public function get valuePercent():Number {
            return value / 360;
        }
 
        public function set valuePercent(value:Number):void {
            this.value = 360 * Math.min(1, Math.max(0, value));
        }
 
        public function disposeDragabble():void {
            if (!_handler) return;
            removeHandlerListeners();
            if (_handler.hasOwnProperty("dispose")) {
                _handler['dispose']();
            }
            removeChild(_handler);
            _handler = null;
        }
 
        public function dispose():void {
            disposeDragabble();
            _sector = null;
        }
 
        public function get stylePathColor():uint {
            return _stylePathColor;
        }
 
        public function set stylePathColor(value:uint):void {
            _stylePathColor = value;
            draw();
        }
 
        public function get stylePathAlpha():Number {
            return _stylePathAlpha;
        }
 
        public function set stylePathAlpha(value:Number):void {
            _stylePathAlpha = value;
            draw();
        }
 
        public function get stylePathThickness():Number {
            return _stylePathThickness;
        }
 
        public function set stylePathThickness(value:Number):void {
            _stylePathThickness = value;
            draw();
        }
    }
}
 
class Sector {
 
    public var degree:Number;
    public var radiusX:Number;
    public var radiusY:Number;
 
    public function Sector(degree:Number = 0, radiusX:Number = 10, radiusY:Number = 10) {
        this.degree = degree;
        this.radiusX = radiusX;
        this.radiusY = radiusY;
    }
 
    public function get x():Number {
        return radiusX * Math.cos(degree * Math.PI / 180);
    }
 
    public function get y():Number {
        return radiusY * Math.sin(degree * Math.PI / 180);
    }
 
    public function toString():String {
        return "[Sector] degree: " + degree + ", radiusX: " + radiusX + ", radiusY: " + radiusY + ", x: " + x + ", y: " + y;
    }
}

AS3 debugging interface with BinderUI

2011-05-17T00:00:00Z

BinderUI is a debugging tools to help you create interfaces and debug values.

Very often I’m sure you spend time building visual interfaces to set, to see and to debug some values. This can be useful for example to show to the creative (or even the client?) and extract the right values instead of tweaking thing for ages, I’m sure you know what I mean.

That can be time consuming and is often very annoying so I wanted to ease the process (1 line of code and a metadata tag).

BinderUI is a simple static class and the idea is to “bind” a value to visual components such as slider, knob, meter, text input, and so on. For the components I used the library minimalComps.

That means that the bound values will update the components in real-time and the components will update the values (two-ways). I used the BindingUtils and ChangeWatcher classes from the mx package but as it will be for debugging, you can use it on project that will be pure AS3 as well.

Click here to see the demo.

As a quick example, imagine you have a custom darkness property on your custom class, you can bind the value this way:

BinderUI.displaySliderHorizontal(this, \_mySprite, "darkness", "darkness", null, 0.1, 1, -255, 255);

This will create a slider that will update (and be updated) for your darkness property.

You’ll also need to add a Bindable metadata in your class:

[Bindable]
public class MySprite extends Sprite {

Note: in case you want to debug built-in flash properties (such as x and y), you’ll need to override the properties in your custom class even if it does nothing.

override public function get x():Number {
  return super.x;
}
override public function set x(value:Number):void {
  super.x = value;
}

For now you can debug only properties (getters and setters), and types that are String, Number, Boolean (and color).

Here is a list of component that can be used.

BinderUI.displayLabel(this, s, "x");
BinderUI.displayColorChooser(this, sprite, "color", 0xFFFF00);
BinderUI.displayCheckBox(this, sprite, "halfTransparent", "half transparent");
BinderUI.displayIndicatorLight(this, sprite, "halfTransparent", "half transparent");
BinderUII.displayNumericStepper(this, sprite, "x", 5, null, 0, 900, 1);
BinderUI.displayInput(this, sprite, "x");
BinderUI.displaySliderHorizontal(this, sprite, "x", "x", null, 0.1, 1, 0, 900);
BinderUI.displaySliderVertical(this, sprite, "x", "x", null, 0.1, 1, 0, 900);
BinderUI.displayTextarea(this, sprite, "x");
BinderUI.displayKnob(this, sprite, "x", "x", null, Knob.VERTICAL, 20, 0, 900);
BinderUI.displayMeter(this, sprite, "x", "x", null, 0, 900);

In some case, it is harder to bind values, such as when you want to update a component from what you type in a textfield. You’ll need to dispatch an event yourself (usually these events are added by the compiler with the Bindable metadata tag).

dispatchEvent(new PropertyChangeEvent(PropertyChangeEvent.PROPERTY\_CHANGE, false, false, PropertyChangeEventKind.UPDATE, 'text', oldValue, newValue, this));

About colors, you can use the displayColorChooser method. The easiest is using a “color” property for example.

BinderUI.displayColorChooser(this, mySprite, "color");

You can also use the colorTransform property but this property is not bindable, so it will work only in one way (component —> target):

BinderUI.displayColorChooser(this, mySprite.transform, "color");

You can also use the MinimalConfigurator to create your interface from an XML file.

Three methods are available to dispose (remove and destroy) components. You can dispose by target, by component or dispose everything.

BinderUI.disposeByTarget(mySprite); BinderUI.disposeByComponent(myComponent) BinderUI.dispose();

Download source and demos.
Source on github.

SomaCore plugin to load and manage assets: SomaAssets

2011-06-03T00:00:00Z

Two new releases today, an asset loader and the SomaCore plugin: SomaAssets.

The AssetLoader library is a port from Matan's AssetLoader library to be event-based, it makes you able to load and manage multiple assets (image, video, xml, sound, etc) in your application.

SomaAssets is a plugin based on the AssetLoader library to easily access to your assets and effectively integrate them in your SomaCore application with paths and automatic mapping name generation for injection.

Special thanks to Matan for his help with the AssetLoader and his joy in general, a pleasure to "meet" him.

You can read the SomaAssets wiki section to get started with it, but I'll post below a few hints of what you can easily do with it within a SomaCore application.

AssetLoader source AssetLoader wiki SomaAssets source SomaAssets wiki

Easily create the plugin and add a XML config file for the assets.

 createPlugin(SomaAssets, new SomaAssetsVO(this, "xml/assets\_config.xml"))

Easily retrieve the assets with paths through the XML config.

 var image:Bitmap = assets.getAssets("group0/group00/img0");

Easily retrieve the plugin, main loader, config and assets with injection in a SomaCore application. The following mapping names have been automatically generated from the XML config.

[Inject(name="assets")]
public var plugin:SomaAssets;
 
[Inject(name="assets")]
public var loader:IAssetLoader;
 
[Inject(name="group0/group00/img0")]
public var loaderType1:ImageLoader;
 
[Inject(name="group0/group00/img0")]
public var assetType1:Bitmap;

After effects export trackers or properties

2011-07-29T00:00:00Z

Hi,

I wrote 2 quick scripts for After Effects to export properties to XML. I thought it might be handy for some of you.

I mainly wrote them to export motion trackers to use in Flash afterwards, but you should be able to export other properties.

To use them, do the following:

In the menu: Preferences > General > and tick "Allow scripts to write files and access network"
open a project
select the properties you want to export (for example the 4 points "Feature Center" of motion trackers)
In the menu: File > Scripts > Run script file...
select one the following scripts

A file "export.txt" should have been created on your desktop (and opened), with the XML content inside.

You should be able to export other properties, such as Transform properties like "position", and so on.

It is certainly not bug free, but it should get you started.

Export by properties
Export by time

Hope that helps!

Manage multiple Git SSH key with the terminal

2012-02-23T00:00:00Z

If you are like me, you might have many accounts to online project hosting services. I have 1 codesion, 2 github and 1 beanstalk. On top of this you might also work at different places: at the office, at home, and so on.

I like to use git with the command line and it took me while to find out some really useful commands to manage the ssh keys.

All these services manage their access with ssh public key. To create them, it is easy, just follow the wonderful Github guide: http://help.github.com/mac-set-up-git/

The following tips are working on a Mac, I have no idea if they would on Windows, I suspect Linux will work.

But sometimes you get:

Permission denied (publickey,keyboard-interactive). fatal: The remote end hung up unexpectedly

Even though you generated created that key last week, it doesn't seem to be there anymore. You probably have the key in your folder (/Users/my_user/.ssh) but the terminal doesn't use it.

So first command, list the identities that are in use:

ssh-add -l

To remove an identity:

ssh-add -d /Users/my_user/.ssh/keyfile_name

And to add one:

ssh-add /Users/my\_user/.ssh/keyfile\_name

That's it, very simple, but now you can manage your keys.

If you have other tips, please let me know!

Soma.js - lightweight MVC Javascript Framework

2012-03-05T00:00:00Z

We are excited to release a new Javascript framework called soma.js. I am Henry Schmieder, London based web developer, and this is my first post on this blog. Romu and I have been working on this framework the last couple of weeks and I'm going to introduce it to you.

soma.js is a Javascript model-view-controller (MVC) framework that is meant to help developers to write loosely-coupled applications to increase scalability and maintainability.

Check the soma.js website where you can find the framework, demos, unit tests, documentation, tutorials, and so on.

Why another Javascript framework?

We both have a strong background in other languages and we thought it would be nice to bring our experience to the Javascript world. Javascript is evolving, and while the language is pretty powerful, its use is very different today than years ago. Applications have become more and more complex and manifold, from one page GUI driven web apps to stateless mobile applications. To keep the process of developing modern JavaScript applications easy and fun, we built soma.js.

There are many great Frameworks out there, written in different languages, that cover the basics of a structured development flow of more complex applications. The core paradigm for a lot of them is the MVC concept.

We believe in the Law of Demeter to develop complex application structure, and we also believe that loose-coupling development is key. soma.js implements the Observer and Command pattern through the native javascript event system, which offered many advantages and flexibility.

There is a lot of discussion as to how much sense makes trying to project concepts of a strong OOP language like Java or ActionScript onto the loosely typed, dynamic prototype based Javascript. But there is a lot of sense in it, not at least having a background in applying the benefits of structured application design based on OOP concepts and pattern based concepts like MVC.

I used Mootools for the very first version of soma.js and Romu joined me to give the project a massive backwind towards a public release. So we worked on a complete unit test system, an automated template downloader and packer, a set of demos, a complete documentation and an interactive demo site that explains the project and allows realtime code example modification and execution and introduces into all the important concepts of the framework step by step. On top of that we decided to remove the dependency from another framework, Mootools, and created a complete native version, also entirely documented and unit test backed.

Have fun with it and provide feedback to us!

Image loader plugin for soma.js

2012-03-08T00:00:00Z

Now that we can easily create plugins for soma.js, I've created an image loader plugin.

I've used PxLoader as a base and before any explanation, it looks like that:

The advantage of using the plugin is that you are able to listen to these events anywhere in your application: in a wire, in the framework instance or a model.

Here is how to instantiate the plugin.

this.createPlugin(SomaImageLoader, "assets/config.json");

The plugin will first load the config file, you can add an event to know when it will be loaded. And again, anywhere in the application, a model to manage your assets would make complete sense.

this.addEventListener(SomaImageLoaderEvent.CONFIG\_LOADED, this.configLoadedHandler.bind(this));

Once the config is loaded, you can dispatch a command to start the loading.

this.dispatchEvent(new SomaImageLoaderEvent(SomaImageLoaderEvent.START));

The plugin will catch the start event and start the loading. To retrieve the images and use them, you can either listen to an "image complete" event, or wait that everything is loaded and listen to a "queue complete event".

this.addEventListener(SomaImageLoaderEvent.ITEM\_COMPLETE, this.itemCompleteHandler.bind(this)); this.addEventListener(SomaImageLoaderEvent.QUEUE\_COMPLETE, this.completeHandler.bind(this));

itemCompleteHandler: function(event) {
    // notification received when an item is loaded
    console.log('> item complete', event.params.completed, "/", event.params.total);
    console.log('    id:', event.params.loader.id);
    console.log('    loader:', event.params.loader);
    console.log('    data:', event.params.data);
    // draw image loaded in a canvas
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(event.params.data, 0, 0);
},
completeHandler: function(event) {
    // notification received when all items are loaded
    this.log('> complete');
    // draw all images loaded in a canvas
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(event.params.data['img1'], 0, 0);
    ctx.drawImage(event.params.data['img2'], 100, 50);
    ctx.drawImage(event.params.data['img3'], 200, 100);
    ctx.drawImage(event.params.data['img4'], 300, 150);
    ctx.drawImage(event.params.data['img5'], 400, 200);
    },

You don't have to use a config json, all these operation can be done manually if you wish to.

var plugin = this.createPlugin(SomaImageLoader);
// plugin.loadConfig("assets/config.json");
plugin.addImage("myImage1", "assets/images/img1.jpg");
plugin.addImage("myImage2", "assets/images/img2.jpg");
plugin.start();

You can find the plugin on the soma.js site in the "plugins section" or on the github repo.

You will find both a native version and a Mootools version.

soma.js update 1.0.1 plugin system

2012-03-08T00:00:00Z

I've added a plugin system in soma.js and a tutorial how to create a plugin on the site.

It is quite simple and everything is explained in the tutorial step by step, but here is a quick overview.

To create a plugin, you just need to create a function that will receive a soma framework instance and any additional parameter.

var MyPlugin = function(instance, myParam) {
    this.instance = instance;
    this.myParam = myParam;
}

Another syntax that might be helpful, especially if you want to extend the plugin later on.

var MyPlugin = soma.extend({
    constructor: function(instance, myParam) {
        this.instance = instance;
        this.myParam = myParam;
    }
});

Now that you have access to the framework instance, you can create models, wires, commands, events, and so on.

To use the plugin, you just need to instantiate it in either a framework instance, a wire or a command.

var SomaApplication = soma.Application.extend({
    init: function() {
        var plugin = this.createPlugin(MyPlugin, "my param");
    }
});
var app = new SomaApplication();

That's it!

Check out a more advanced plugin with the step by step tutorial on the soma.js site.

Javascript motion tracking

2012-03-19T00:00:00Z

It is very often that I have to do video motion tracking for interactive video campaign in my daily work.

If I'm used used to do that in Flash, I made a quick experiment to do the same in javascript.

Thanks to Olof Storm who made me a perfect corner pin motion tracking in After Effects, and I've been using some code from Steven Wittens to draw an image in perspective.

Click here to see the motion tracking demo (give it a bit of time to fully load).

What I'm doing in this demo is drawing a video in a canvas, and using the corner pin tracking data to draw an image on top of the video.

I made 2 different videos, you can switch between them using the "switch video" button.

In the first video, I get the current video frame number by calculation (current time by video fps). And in the second video, I get the frame number using a different technique that is know to be quite accurate when we do it in Flash, I call that a binary counter.

The idea behind the binary counter is to export the video with some white and black rectangle that describe graphically the real frame number of the video. We've been using this technique in Flash for a while in the advertising industry, and Zeh Fernando talked about it last year.

You can see the binary counter on the right border of the video. The code gets a pixel in each bit of the binary counter (16 bits), find out if the bit is white or black to get a 0 or 1 and calculate a number out of it.

While you might not see a difference between the two frame number calculations at first glance, seeking the video with the binary counter version (using the top-right blue control) will keep the image and the video "synchronised". Pretty cool.

This version is not perfect compared to what we do in Flash, some frames still seem to be a bit "out". I also couldn't find a way to solve "pixel snapping drawing" in a canvas, in other words, being able to draw an image on half a pixel.

I did really miss some powerful drawing method from the graphic API in Flash. I would love to find in javascript a "beginBitmapFill" method, apply matrix directly to a drawing method and draw triangles in an easier way to use this plane drawing technic we use in Flash.

update

I just found out that what I call a binary counter is actually a VITC, which I didn't know! Interesting!

javascript motion detection

2012-03-22T00:00:00Z

This is a motion detection experiment in javascript, and before starting any explanation:

Click here to see the demo.

To see this demo with your own webcam, you will need to download a browser that enables some new features as explained in this link. To make it simple, I've used Google Chrome Canary, go and get it!

I used an html 5 API this is not released yet, the html 5 getUserMedia API. This API makes you able to use a webcam stream in javascript. Exiting! Paul Neave has done a very nice webcam demo.

So what is the demo about?

I use a webcam feed, I put a xylophone image on top of it and I detect the user's movements to play the xylophone.

To detect the user's movement I used a technic that is probably well-known by developers, designers and motion designers: the blend mode difference.

The concept is, if you put a picture on top of the same picture and blend them together using the blend mode difference, you obtain... a black screen!

If there's a slight difference between the 2 pictures, the colors start to appear, showing you the "difference" between the two pictures. You get something like that:

Not exactly like that actually, in this demo I made an average on each pixel between the red, the green and the blue, and turn them to white above a certain amount to get a bit more accuracy.

The first step is drawing the webcam feed in a canvas, grab a picture from it at a time interval, and blend the current frame to the previous one. This means that if you don't move, the result will be black, and when you start moving some pixels will turn white.

To be a bit more precise, I loop over the pixels of the current frame and I subtract the pixels color from the same pixel color of the previous frame. This is what the blend mode difference is doing: "Difference subtracts the top layer from the bottom layer or the other way round, to always get a positive value.".

The next step is checking in some areas (the different parts of the xylophone) if you have some white pixels in them. If you get a certain amount of non-black pixels in this area, it means that something moved since the last frame and I play a note.

I've been using the Web Audio API to the play the notes, the demo is fully done in javascript.

Javascript displacement mapping

2012-04-25T00:00:00Z

I wrote a javascript displacement map filter, mostly as an experiment, this graphic technique has been widely used in Flash.

Check out the following demos:

Displacement mapping is a simple action of shifting pixels. An image map containing color values is used as data to create the displacement and move pixels around.

The filter can be used several different effects, here are some that have been done in Flash, these might give you ideas:

And two great links to have a better understanding of the displacement mapping. Both links explain the Flash version of the filter, but it is almost identical (missing modes for now) to the one I wrote in javascript. I strongly recommend to read the first link.

About the demo with the picture, I created an image map in Photoshop, please notice my skill with a brush :)

I used the javascript displacement filter to apply it on the following picture, and finally draw it in a canvas.

The filter itself will take different parameters that can be changed in real-time (on a time interval): - a canvas containing the image on which the filter will be applied on - a canvas containing the image map to create the displacement - a canvas where the result will be drawn - a point (x and y) where the displacement will be applied on the image source - a scale value for the X axis, this will be the amount of displacement on this axis - a scale value for the Y axis - a color channel for the X axis, the color used to create the displacement on this axis - a color channel for the Y axis

It will look like this:

var filter = new filters.DisplacementMap(
    canvasSource,
    canvasMap,
    canvasTarget,
    new filters.Point(50, 50),
    40,
    40,
    filters.ColorChannel.RED,
    filters.ColorChannel.GREEN);
filter.draw();

When the draw method is called, the filter will loop over the pixels of the image map and find the color that has been specified to create the displacement. A color is represented by the hexadecimal value of 255 (0xFF). If the color found in the map for a specific pixel is superior to the half (0x80), the pixel shifting will increase, otherwise it will decrease.

About the second demo, I reproduced a flash demo from Zeh Fernando that I really liked. There's a simple background with heart pattern used as a source image, and the displacement map looks like this:

The gradient colors are chosen so that the displacement will create a magnifying effect. The red colors will be used to move the pixels on the X axis and the green colors will be used to move on the Y axis.

I also reproduced a little trick to emphasis the displacement. Ive added a simple png with transparency on top of the displacement, it contains lights and shadows:

I also tweened the filter values with TweenJS to add a bit of movement (the heart bump), as in the Flash version.

Click here to download the demo and source.

soma.js router plugin

2012-04-26T00:00:00Z

I wrote a router plugin for soma.js to create internal routes in a web app.

The plugin is based on the amazing library davis.js (thanks a lot to the author Oliver from New Bamboo for the help). It uses the HTML5 history API and have a hash fallback for browsers that don't support the HTML5 API (see the davis hash routing plugin).

Click here to see the demo, the soma.js site has also been updated with the plugin and the latest version (1.0.2).

Prepare the html

Include the libraries in your page:

<script src="/js/davis.js"></script>
<script src="/js/davis.hashRouting.js"></script>
<script src="/js/soma.js"></script>
<script src="/js/soma-router.js"></script>

Create the plugin

Creating the plugin takes only one line:

var router = this.createPlugin(soma.router.Router);

This can be done in a soma.js framework element such as the application itself or a wire:

var SomaApplication = soma.Application.extend({ init: function() { this.createPlugin(soma.router.Router); } }); var app = new SomaApplication();

Create the routes

Given some html links:

<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/articles/article1">Articles</a></li>
<li><a href="/articles/article2">Articles</a></li>
<li><a href="/articles/article3">Articles</a></li>
<li><a href="/contact">Contact</a></li>

Here is how the routes can be created:

var routes = {
    'get': {
        '/' : RouterEventTypes.ROOT,
        '/:nav' : RouterEventTypes.NAV,
        '/:nav/:subnav' : RouterEventTypes.SUBNAV
    }
};

The variables RouterEventTypes are simple strings and will be used as event types.

var RouterEventTypes = {
    ROOT: "root",
    NAV: "nav",
    SUBNAV: "subnav"
};

When the router will find a route, from a url change or when a link is clicked in the browser, a specific event will be dispatched through the framework. A url such as "http://site.com/about" will be matched by the rule "/:nav" and an event of type RouterEventTypes.NAV will be dispatched through the framework.

Note that I could have set a route in a static way: /about rather than /:nav.

Register the routes to the router

The routes object created previously can be registered to the router this way:

var router = this.createPlugin(soma.router.Router, routes);

Listen to route changes

Now that everything is set up, it is only a matter of adding event listeners in the framework elements, here is an example with a wire:

var WireRouter = soma.Wire.extend({
    init: function() {
        this.addEventListener(RouterEventTypes.ROOT, this.rootHandler);
        this.addEventListener(RouterEventTypes.NAV, this.navHandler);
        this.addEventListener(RouterEventTypes.SUBNAV, this.subnavHandler);
    },
    rootHandler: function(event) {
        // do something
    },
    navHandler: function(event) {
        // do something
    },
    subnavHandler: function(event) {
        // do something
    }
});

The event received contains the following information:

event.params.rule -> /:nav
event.params.request -> Davis.Request

And the Davis.Request will contains all the information you might need. Such as the link or url:

navHandler: function(event) {
    var request = event.params.request;
    // the following variable urlParameter will contain "about"
    // if the link was for example http://site.com/about
    var urlParameter = request.params[RouterEventTypes.NAV];
}

Controlling and interrupting

A global route change event can also be listened to:

this.addEventListener(soma.router.RouterEvent.CHANGED, this.changeHandler);

This is an internal framework command and can be interrupted this way:

changeHandler:function(event) {
    if (whatever_reason) {
        // stop the route to occur
        event.preventDefault();
    }
}

Hash routing fallback

In case the browser doesn't support the HTML5 History API, you can add a hash fallback by adding the Davis plugin hashRounting just before you create the router plugin:

Davis.extend(Davis.hashRouting({ prefix: "!/" }));
this.createPlugin(soma.router.Router);

Davis handler

When a Davis.js instance is created, an handler is passed to it and will be a Davis.App.

For example:

var app = Davis(function () {
    // do something
});

The creation of the Davis.App is automatically done by the plugin but you can still pass the handler to it and do more Davis.js specific operations:

var router = this.createPlugin(soma.router.Router, routes, function() {
    app.bind('routeNotFound', function () {
        // do something
    });
});

Handling non-existing route

When you have a url and create HTML5 History routes (called states), these URLS might not exist in reality. If a user go a non-existing URL, it can be either handled by the server to the serve the correct content, or you can use the following htaccess file on an Apache Server:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]

These rules will redirect any URL that is not a file or a folder to the index.html of you site, Davis.js will then handle the routes for you to show the right content on the client side.

Note that you need to specify to Davis.js that you want the first page load to be handled as a route: [js] var router = this.createPlugin(soma.router.Router, routes, function() { this.settings.generateRequestOnPageLoad = true; }); [/js]

To get the router plugin, you can:

clone the repository soma

For more information about Davis.js, you can check:

infuse.js ioc javascript library

2012-09-12T00:00:00Z

Infuse.js is an IOC javascript library (inversion of control).

Using rules based on properties and paramaters naming, you will be able to inject data in functions or objects.

Quick video for the impatient.

Why would I need to inject anything anywhere?

Dependency injection is used in many languages, the concept is that some data are injected automatically when you create a "class" or other re-usable component.

Just a few advantages of using injection not to name them all. Injection will reduce boilerplate code (increasing readability), dependencies between components and you will be able to produce a much more re-usable code. Injection is also very good to produce a highly-testable code.

The application you are building will also benefit from lazy instantiation, which is very good, the instances will be created only when they are used and when you need them.

Infuse.js is a pretty small library compared to the huge benefit you can gain.

So... How does this work?

In short, you are going to create some rules based on names (string), you will provide data to inject (string, number, array, boolean, objects, function, and probably anything that can be hold in a variable).

When these rules are created, you are going to use their names as properties or constructor parameters. And the injector will take care of populating these variables with the right content, no strings attached!

Sorry I still don't get it...

Let's take an example then, you are building a huge app with several developers, javascript files, components, and so on. You have a basic function called "Settings" that will hold a lot of information and you like to use it in about anything in the app. How do you do that?

Well, you could create some kind of global object, you can access it everywhere and it is done!

window.Settings = { deploy: 'dev', domain: 'localhost' }

But in that case you will create a direct dependency on a object (Settings), which is bad for tons of reasons. Hard to test, not re-usable because of the dependencies, and so on. You should always stick to the Law of Demeter.

Another solution would be to create that object and pass it in everything you need, that would be a better a solution, but still very hard to maintain and not ideal.

With injection you can do the same thing in a much easier way (which is populating variable with something external), especially if you want to inject tons of things. But this could also be automatically done!

It would be nice to just say: "ok I've created these 6 components, I really would like to have that "settings" variable automatically set without doing anything or adding code for it!". Well that's what infuse.js will do.

Sounds good! Let's see some code!

Well first, create an injector instance.

create injector var injector = new infuse.Injector();

Now you create an object you want to access to from everywhere, just as an example, it could be a function, an array, a string, or whatever.

create object var settings = { deploy: 'dev', domain: 'localhost' }

Now you want to say: "ok, every time something contains the variable 'settings', or has a constructor parameter 'settings', I want that object to be set in."

That is nothing more than a mapping rule. Here is an example.

injector.mapValue('settings', settings);

Last step is populating the variables. This can be done in two ways: manually or automatically. Here is how to do that manually:

// a function
var Receiver = function() {
    this.settings = null;
}
// create an instance
var receiver = new Receiver();
// populate the settings variable
injector.inject(receiver);

That's basically it, you can add a postConstruct method, which will be automatically called when the injection is done.

Receiver.prototype.postConstruct = function() { alert(this.settings); // got it! }

Easy? Let's see the automatic version where the injector will take care of instantiating the function and populating the variables.

// a function
var Receiver = function() {
    this.settings = null;
}
Receiver.prototype.postConstruct = function() {
    alert(this.settings); // got it!
}
// create an instance
var receiver = injector.createInstance(Receiver);

Works also with a constructor.

// a function
var Receiver = function() {
    this.settings = null;
}
Receiver.prototype.postConstruct = function() {
    alert(this.settings); // got it!
}
// create an instance
var receiver = injector.createInstance(Receiver);

The injector can inject data in several ways, and can also take care of instantiation, of what should be injected and how it should injected. If we turn the data to a function:

var Settings = function() {
    this.deploy = 'dev';
    this.domain = 'localhost';
}

We can use another type of rule (mapClass):

injector.mapClass('settings', Settings);

The injector will now inject a new instance of Settings every time it has to be injected somewhere (like doing a new Settings() and sending it).

This might not be ideal, maybe you want to inject the same instance all the time so you have some kind of shared unique instance? This is called a "Singleton mapping". Don't be scared by the name if you don't like Singleton, they are not really Singleton. It just means that they are created only once and the same instance will be injected everywhere. You can do that by changing the rules like this:

injector.mapValue('settings', settings, true);

As the "settings" rule has been set "as Singleton", the same settings instance will be injected in both functions.

var FooClass1 = function() {
    this.settings = null;
}
var FooClass2 = function() {
    this.settings = null;
}
var foo1 = injector.createInstance(FooClass1);
var foo2 = injector.createInstance(FooClass2);
// next line will alert true because the settings injected
// will be the same instance (mapped as Singleton)
alert(foo1.settings === foo2.settings);

This is just a small overview, you can do tons of things with injection and infuse.js.

Where do I get more info?

The repo is there, where you can find more examples (you can also check the tests in the repo to get a complete overview): https://github.com/soundstep/infuse

Install with npm (infuse.js works with node.js):

npm install infuse.js

var Injector = require("infuse.js").Injector;
var injector = new Injector();
injector.mapValue('name', 'John');
var Person = function(name) { this.nameParam = name; };
var john = injector.createInstance(Person);
console.log(john.nameParam);

And the demo from the video.

Soma events native DOM 3 Observer pattern

2012-09-17T00:00:00Z

At some points, any developer will read something about loose-coupling and the Law of Demeter.

It is usually happening when you are writing code that becomes a bit larger and you start to have difficulties to scale it up, maintain it, read it, test it, and so on. The idea is very simple, each component should work on its own, responsible for its own task, be encapsulated, and while begin part of something bigger, should not know about the other components (not having a reference to them).

You usually have 2 problems to solve to achieve this: 1. find a way so the component is getting data to do its job 2. find a way so the component can tell other components that something has been done

There's tons of way of solving the first one, I talked about one of them in a previous post: injection with infuse.js.

And to solve the second problem, the Observer Pattern is usually the way, also called "publishing-subscribing".

Let me quote Addy Osmani again: "The motivation behind using the observer pattern is where you need to maintain consistency between related objects without making classes tightly coupled. For example, when an object needs to be able to notify other objects without making assumptions regarding those objects."

I've kind of always been concerned with that one, as in the best world, you don't want to add framework code in a view or a model component that should be fully re-usable, and re-usable everywhere, and written in pure plain javascript where possible.

There's one Observer Pattern that is part of the Dom specification: the Event model (Dom 4 Event specs seems on its way too).

It would be a very good thing to use something standard as an Observer Pattern but there's 2 problems with that one: 1. cross-browsing issues 2. need a DOM

I've extracted the observer pattern used in the soma.js framework so it is easily re-usable everywhere.

It is called soma-events, and provides a wrapper function to create native custom events and solve cross-browsing issues, and a custom dispatcher so the exact same API can be used without the DOM.

As a very quick overview, it would look like this:

var EventTypes = {
    START: "start"
}
var Application = function() {
    var model = new Model();
    dispatcher.dispatchEvent(new Event(EventTypes.START, {myStuff:"myStuff"}));
};
var Model = function() {
    dispatcher.addEventListener(EventTypes.START, function(event) {
        console.log("application started with:", event.params.myStuff);
    });
};
var app = new Application();

The dispatcher variable in this example can be both a custom dispatcher (EventDispather), or just a DOM Element.

More info and example on the Github readme: https://github.com/soundstep/soma-events

Quick install (works also with node.js):

npm install soma-events

soma-template seamless dom manipulation

2012-11-22T00:00:00Z

soma-template is a web template engine. The library aims to help developers insert data in their html applications using native DOM capabilities.

Most web template engine today are "string-based", which means they will compute a string with a set of data, JSON data very often, and insert the result using the innerHTML DOM element property.

While this is completely fine, soma-template has another goal. The library will help you insert content in your html application with a minimal DOM node destruction, updating only what is needed. This is opening new capabilities, such as updating only some nodes, or being able to browse the template as you would browse the DOM.

Another goal has been the ease-of-use as having several templates can become messy and confusing. For that very reason, the template can be fully part of the DOM, without having to inject a template source into the DOM.

The template syntax will feel natural, the engine is customizable and it has a very flexible API that can be enhanced using custom functions or external libraries such as underscore.string.

The engine has been tested in all modern browsers and from IE7 to IE10, mobile and desktop.

Feel free to use it anywhere you like, send issues on Github, and feedback appreciated!

vimeo demo

User interactions with soma-template

2012-12-10T00:00:00Z

As a reminder, soma-template is a DOM-based web template engine that will help you insert content in html pages with native DOM manipulation.

Events have been added to soma-template. You can now easily add user events to elements, such as click, mouse over, key press, mouse down, drag, and so on. The functions called can also received parameters from the current set of data. This allow the event handlers to receive targeted data without searching for its reference, which might greatly reduce the amount of code needed.

The site has been updated, see the events documentation and the full list of events.

The events have been used in the todo demo, the events demo and the people demo.

And here is a video showing the events in action.

vimeo demo

soma.js v2 write scalable javascript apps

2013-05-07T00:00:00Z

soma.js version 2 has finally been released!

Even though it shares the same goals as the previous version, the version 2 is completely different.

What is soma.js?

To set up a landscape, soma.js is a framework created to build scalable and maintainable javascript applications.

So yes, that's another javascript framework. soma.js can be used as an MVC framework but its structure is so flexible that it can be used differently to fit your needs.

Why soma.js?

The following might not ring a bell to everyone, but the only thing developers should care about is writing code that is maintainable. This is sort of an ultimate goal to reach. And sometimes, it can be really hard, even for seasoned teams of developers.

Why should you bother think about that? Well, because a maintainable code will require less work and allow your application to grow. It is that simple.

It will also make you much happier, trust me. Have you never a reach a point looking at your code: "It is really becoming messy now, this will be a nightmare...". So you know what I'm talking about?

Let me tell you something. Real large javascript apps, that are maintainable, don't exist. Yes that's right, they just don't. Instead, you can find large scale javascript apps that are composed of a lot of pieces put together. This is more like it. These pieces can be called modules or other names.

In all successful and maintainable structures, these smaller pieces probably have a common point: they have very small number of dependencies. In other words, these smaller pieces can work on their own and don't know about the application itself. They can be swapped, interfaced. They are meant to do a single job, nothing more, and have no idea what other elements will do with it. They are put together, moved, refactored, enhanced, and so on.

This is the success key of building large javascript applications, or in fact, any application.

This is what soma.js is about. You will write pure plain javascript as you are used to, and the framework will provide tool to help you reduce dependencies and make your code more maintainable and testable.

What is different in soma.js?

One day, and this wasn't using javascript, I've started tackle "frameworks". The idea was simple, they help build something. These interests in frameworks quickly drove me in blog posts showing obsessions about how code should be written, best practices basically.

They all had the same goal: make your developer life easier.

People are talking about their framework of choice, what is good and what is not. Some famous developers offering solutions to solve problems in more effective ways. And so on.

In different languages, I saw something happen. All these highly-coupled code problems, dependencies, non-maintainable code issues, and framework fights, got a solution that has been a revelation for a lot of developers: dependency injection.

Of course, I'm not saying that dependency injection is a solution for everything and should be used everywhere. But where complexity lies, I'm a strong believer in dependency injection. I also think that it has been a turn in a lot of developers' carrier. It is helping, it is pretty, it is simple. You can find literally thousands of blog posts talking about its benefits, in various languages.

That is what soma.js version 2 brings: dependency injection.

How does it look?

I've spent a lot of time explaining the what, why and how. A site is available with tons of examples, guidelines to follow, what is dependency injection, and so on.

Click here to find out more.

Hope that will help some of you having a better time with your own code!

Romu

Bridge between Pact and Postman

2021-07-26T22:00:00Z

If you are commonly using Pact for contract-testing between your backend apps and your front-end apps, there is a little tool that might save you a lot of time.

Contract testing, in general, is a good way of understanding the impact that back-end API changes may have on clients consuming them, before that the issues actually occur.

Pact has an application in their toolkit called a "Pact Broker", on which you can send "Pact files" (JSON files), that contain the interactions that describe the requests made by a consumer.

These Pact files can be very lengthy, depending on the back-end usage, holding hundreds of request interactions.

There is a tool called pmpact that can generate Postman collections from a Pact file.

Postman is a tool to work with requests and APIs. It can store, import and export collections, which are lists of requests ready to be executed.

npm install -g pmpact
pmpact http://my-pact-broker/latest -o postman-collection.json

Once the collection is generated, it just needs to be imported in Postman and all the requests contained in the Pact file will be ready to be executed.

It is also very easy to create Postman environment variables, for example, to switch between a QA host and a production host.

More detail about the Postman usage in the pmpact doc.

Easy CLI with NodeJS

2021-07-28T18:00:00Z

What is a CLI?

To start with some definition, CLI stands for command-line interface.

This is what you use every day with git, curl or other common commands, they are all CLI tools. They are running through what is commonly called a terminal, or a shell.

If you are not too familiar with "building CLI" or even the terminal, it might look like a black box for you. You might even think: "No way I'm going to learn bash, or whatever it is called, to build these tools".

The good news is: you do not need bash to build a CLI tool! Even though I like bash.

You can build CLI tools with a lot of different languages, like: go, python, C++ and even... javascript! NodeJS is great to build CLI tools.

All the following commands will be executed in a Unix Shell (bash).

Here is my favourite NodeJS CLI, type the following in your terminal:

npm install -g cowsay
cowsay "I'm running in NodeJS"

Which will output:

 _______________________
< I'm running in NodeJS >
 -----------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

A little trick, you can also run it without installing it, using npx:

npx cowsay "I'm running in NodeJS"

Get started building a CLI

To create a CLI with NodeJS, there are a few pieces to put together.

Execute a node script

The first part is the be able to execute a node script.

A common way

Create a file
Write some content
Execute it with NodeJS

touch my-script.js
echo 'console.log("Hello");' > my-script.js
node my-script.js

A more elegant way

create a file
Tell the shell in which environment it should run the script (shebang)
Make the file executable with chmod
Execute the file without specifying NodeJS

touch my-script.js
echo '#!/usr/bin/env node' > my-script.js
echo 'console.log("Hello");' >> my-script.js
chmod +x my-script.js
./my-script.js

You can see the same type of file in the cowsay repo: cli.js.

Execute the script as a binary

The second part is to transform this script into a command line.

There is an easy way to do that by adding the script to a bin property of a package.json:

{
    "bin": {
        "my-cli": "./my-script.js"

There is a little bit of magic around this: when this package gets installed, npm will create symlinks for the scripts in a bin folder so that your shell can find the "binaries".

For example, when you install cowsay, the terminal outputs:

/usr/local/bin/cowthink -> /usr/local/lib/node_modules/cowsay/cli.js
/usr/local/bin/cowsay -> /usr/local/lib/node_modules/cowsay/cli.js
+ cowsay@1.5.0
added 41 packages from 10 contributors in 3.028s

These are the symlinks created and they are now ready to use in your terminal.

A little trick for local development, in the folder where the package.json is located, you can simply run:

npm link

This command will also create the symlinks needed. They can be removed with:

npm unlink

Create a compliant CLI

Now you can execute a CLI you made yourself, you can simply write some NodeJS code. You create and modify some files, parse some JSON files, make some asynchronous requests to an API like Github, upload some files to an AWS S3, and so on.

You can now build your own tools, make them do what you need, and execute them easily.

What might seem less easy to do, is to write a proper Unix CLI like others would expect, like:

my-cli -v
my-cli --version
my-cli --help
my-cli do-something
my-cli do-something --some-option

You need to think about writing help output, version output, subcommands, options that can be chained, with short name options, and so on. And of course in a format that would make all your heavy Unix CLI users happy.

Here is a guideline: clig.dev.

Fortunately, some packages provide really good boilerplates for your CLI tools, for example, commander.

Some npm packages will help you to make your CLI pretty and readable with some colours like chalk, while others will help you display complicated tables easily: cli-table3.

Distribution and usage

To distribute your CLI, you can simply publish your package to the npm registry. This is will make it available to everyone, don't forget to write some tests and some thorough documentation!

In terms of usage, you can simply install it:

npm install -g my-cli

Another scenario is if you do not want to publish the npm package because you want to keep the CLI in a private repo, you can simply clone your repo and execute the following:

npm install
npm link

It is also possible to execute the command without installing it before, for example on a CI, by using npx and targeting the package:

npx -p my-npm-package my-cli --help

Dealing with large Pull Requests

2021-07-30T08:00:00Z

Before anything else, I am not going to explain in-depth why large pull requests are very detrimental. Some articles are already doing that very well. See external links below.

In short, they take a long time to review, it is easier to miss some parts and even issues, they might be blocking other pieces of work, and so on.

Do not make large pull requests

Well, that's it, problem solved, just don't make large pull requests!

The problem is, it is easier said than done, and especially in a monorepo.

A monorepo gets dependencies closer to each other. It is easier to work on these dependencies at the same time to drastically reduces workflows time. It is easy to create larger pull requests, and if you don't do so, you may lose some monorepo benefits.

So should we create larger pull requests in a monorepo?

The answer is still no. Large pull requests are so detrimental, especially when you work with multiple teams and more developers, that you should still avoid them at any cost.

How to prevent large pull requests

Having large pull requests issues can come from the moment you are planning your work. For example, when you are meeting with your teams to create tickets to work on.

Try to reduce the size and scope of the tickets, which has a good chance of reducing the size of the pull requests. If a feature is incomplete and not releasable, it is worth spending a bit more time hiding it behind a feature flag and continue the work in another pull request.

How to reduce large pull requests

Something I learned in software development: reduce the human factor. This is a paper from 1979: Human Factors in Software Engineering, so it is no novelty.

I would even say: automate as much as you can!

To drastically reduce large pull requests, let's automate a process to tell our beloved developers that they should probably break down their beautiful work in different pull requests.

Steps to automate a warning

There are several ways to do that. It will depend on the tools you are using.

However, I can give some directions for git and Github.

The steps:

Find out if a pull request is large
Notify the developers in their pull requests

Notify the developers

As it is good practice to walk backward, you always want to start from a user perspective when creating a new feature, so we will start with how to notify the developers.

You can use the Gihub API directly, triggered from some Github webhooks, it would work just fine.

Here is an example with DangerJS (javascript) and a Github Action.

Install DangerJS

npm install danger --save-dev

Create a Github Action workflow file: .github/workflows/danger.yml

You will need to authenticate with a GITHUB_TOKEN, and note that we also install execa.

name: "Danger JS"

on: [pull_request]

jobs:
  build:
    name: Danger JS
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - run: npm install execa
      - name: Danger
        uses: danger/danger-js@9.1.6
    env: \$
      GITHUB_TOKEN: ACTION_SECRET
      DANGER_DISABLE_TRANSPILATION: true

Find out if a pull request is large

Create a DangerJS file: dangerfile.js

This function, executed by DangerJS, will use a custom bash script to retrieve the information we need from git. The number of git insertions and git deletions will be compared to a threshold value of our choice.

const execa = require('execa');

const formatMessage = (title, body) => `<b>${title}</b><br/>${body}`;

(() => {
    const CHANGES_THRESHOLD = 800;
    const pr = danger.github.pr;
    const base = pr.base ? pr.base.ref : 'master';
    const [ insertions, deletions ] = execa.commandSync(`./scripts/git/get-changes.sh ${base}`).stdout.split(',');
    const changes = Number(insertions) + Number(deletions);
    if (changes > CHANGES_THRESHOLD) {
        warn(formatMessage('Pull Request size', `This is a big Pull Request, we found ${changes} changes
        (additions and deletions).<br/>
        The threshold is currently ${CHANGES_THRESHOLD}, we strongly advise that you break down this Pull Request into
        smaller ones to ease the review and merging process.`));
    }
})();

Create a script file: scripts/git/get-changes.sh

This script is retrieving two commit sha: the latest from the branch of the pull request and the latest from the base branch.
A diff with is created from the two commits and note that we exclude the package-lock.json file as they can be large and misleading.

#!/usr/bin/env sh

git --version

CURRENT_COMMIT=$(git rev-parse HEAD)
BASE_COMMIT=$(git rev-parse $1)
git diff --shortstat $CURRENT_COMMIT $BASE_COMMIT ':(exclude)package-lock.json' | \
    sed -E 's/.* ([0-9]+) insertion.* ([0-9]+) deletion.*/\1,\2/'

Make the script file executable: chmod +x scripts/git/get-changes.sh

Conclusion

You now have a Github Action verifying your pull request size. You could even make it a blocker for merging if you so wish.

External links

Anatomy of a perfect pull request