jasu's blog

AScodeViewer 1.0 Beta

개인적으로 플래시 코드를 웹상에 올릴 때 하이라이트를 적용하여 편하게 보기 위해서 만들었다. 만들다 보니 플래시 코드뿐만 아니라 다른 코드의 경우도 xml 파일을 수정하는 것으로 적용할 수 있다.

기능적인 요소
기능적인 요소로는 swf에 외부 변수값(코드파일url, 라이라이트 xml, 스타일 xml, selectable) 값을 전달하여 불러들인 xml과 코드, 그리고 코드를 선택 및 복사가 가능하도록 할 것인지를 지정하는 sable 값을 전달하게 된다. 이로서 AScodeViewer.swf 파일에서 코드 하이라이트 및 스타일이 적용된 AScodeViewer를 볼 수 있다.

외부 변수 값을 전달할 때 주의할 점은 크로스도메인 정책에 따라 도메인이 다른 url 경로에 있는 코드나 xml를 불러올 수 없다는 것이다. AScodeViewer.swf 파일이 있는 위치와 같은 도메인 상에 있는 파일을 불러들여야 한다.

사용성에 따른 기능적인 요소로는 오른쪽 하단에 보면 FullScreen mode로 전환할 수 있는 버튼이 있다. 클릭을 할 경우 전체 풀사이즈 화면으로 코드를 볼 수 있는 기능이다.

사용 방법
AScodeViewer을 사용하는 방법은 아래 제공하는 파일을 다운 받아서 사용하고자 하는 계정에 업로드를 하고 아래와 같이 코드를 웹페이지 html상에 넣어주면 된다.

<object width="700" height="400" >
<param name="bgcolor" value="#242424" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="code=TintColor.as&format=as3.xml&style=style_dark.xml&sable=true" />
<param name="movie" value="AScodeViewer.swf" />
<embed src=" AScodeViewer.swf"  flashvars="code=TintColor.as&format=as3.xml&style=style_dark.xml&sable=true" type="application/x-shockwave-flash" allowFullScreen="true" width="700" height="400" bgcolor="#242424" /></embed>
</object>

위에서 보이는 바와 같이 FlashVar에 해당하는 부분의 변수들에 각각의 파일 및 설정 값을 넣어주면 된다. 위 코드의 경우는 swf파일이 있는 같은 폴더 안에 code, format, style 에 해당하는 파일들이 있는 것으로 가정한 것이다.

하이라이트 및 스킨 적용 방법
코드 하이라이트는 플래시 스크립트 에디터로 많이 사용하고 있는 FlashDevelop 프로그램의 language폴더에 있는 xml 데이터를 그대로 사용하였다. FlashDevelop 프로그램을 사용하는 분은 아래 경로에서 사용하고 있는 하이라이트 xml 파일을 취득할 수 있다.

C:\Program Files\FlashDevelop\FirstRun\Settings\Languages

위 경로에서 보면 AS3.xml, AS2.xml, Jscript.xml 등을 볼 수 있는데 AScodeViewer 1.0 Beta에서 지원하는 xml 형태는 AS3.xml, AS2.xml, Jscript.xml, HaXe.xml 이다. 다른 C++ 이나 Java 등의 코드 하이라이트를 사용할 경우에는 위 4개의 파일 중에 아무 파일이나 열어서 해당 언어에서 사용하는 하이라이트 단어들을 등록하고 다른 이름으로 저장하여 사용하면 된다.

AScodeViewer의 스킨 적용은 제공하는 Style_dark.xml 파일이나 style_light.xml 파일을 열어서 해당 부분의 RGB 색상을 변경하여 스킨을 바꿀 수 있다. 아래 이미지를 보면 style.xml 파일에서 지정할 수 있는 부분들을 표시해 놓았다.

아래는 파일로 제공하는 두 가지 스킨을 적용한 예이다. Style_dark.xml 이나 style_light.xml 파일을 수정하여 원하는 색상을 만들어 낼 수 있기 때문에 적용하는 페이지상의 디자인에 맞게 수정하여 사용하면 된다.
왼쪽은 style_dark.xml을 적용한 예이고 오른쪽은 style_light.xml을 적용한 예이다. 왼쪽의 경우 코드 선택이 안되도록 sable = false 값을 적용하였다.

아래 파일을 다운로드 하여 위에서 설명한 대로 원하는 페이지에 적용하면 된다. 블로그 서비스에서는 “외부 멀티미디”어 등에서 youtube 동영상을 임베드 하는 형태로 적용하면 된다. 주의할 점은 위에서 언급한 바와 같이 AScodeViewer.swf 파일이 있는 곳과 불러오는 파일들의 도메인이 같아야 한다는 것이다(같은 도메인 내의 폴더 구분은 상관없다.)

앞으로 버전업의 경우도 FlashDevelop의 기능을 적용할 생각이다. 시간이 허락하는 대로 업데이트 버전을 올려 놓도록 하겠다. 사용하다가 문제점이 있거나 버그 발견 시에는 아래에 댓글로 남겨주시면 많은 도움이 될 것 같다.

AScodeViewer1_0Beta.zip

private function setScrollBarStyle(s:UIScrollBar):void{
        s.setStyle("downArrowDisabledSkin", DScrollArrowDown_disabledSkin);
        s.setStyle("downArrowDownSkin", DScrollArrowDown_downSkin);
        s.setStyle("downArrowOverSkin", DScrollArrowDown_overSkin);
        s.setStyle("downArrowUpSkin", DScrollArrowDown_upSkin);

        s.setStyle("upArrowDisabledSkin", DScrollArrowUp_disabledSkin);
        s.setStyle("upArrowDownSkin", DScrollArrowUp_downSkin);
        s.setStyle("upArrowOverSkin", DScrollArrowUp_overSkin);
        s.setStyle("upArrowUpSkin", DScrollArrowUp_upSkin);

        s.setStyle("thumbDownSkin", DScrollThumb_downSkin);
        s.setStyle("thumbIcon", DScrollBar_thumbIcon);
        s.setStyle("thumbOverSkin", DScrollThumb_overSkin);
        s.setStyle("thumbUpSkin", DScrollThumb_upSkin);
        s.setStyle("trackSkin", DScrollTrack_Skin);
}

package viewer.skins{
        import flash.display.DisplayObject;
        import flash.geom.Transform;
        import flash.geom.ColorTransform;

        public class TintColor{
                public function TintColor():void{}
                public static function setTintColor(d:DisplayObject, c:uint, a:Number):void{
                        var resultColorTransform:ColorTransform = new ColorTransform();
                        resultColorTransform.alphaMultiplier = a;
                        resultColorTransform.color = c;

                        var transformation:Transform = d.transform;
                        transformation.colorTransform = resultColorTransform;
                }
        }
}

trace(getResult());
function getResult(a:int=1, b:int=2, c:int=3):Number {
        return (a + b) * c;
}

trace(getResult());
function getResult(a:int=1, b:int=2, c:int=3):Number {
        return a + b * c;
}

lockTest(700, 700);

function lockTest(w:uint, h:uint) {
        var bm:BitmapData = new BitmapData(w,h);
        addChild(new Bitmap(bm));

        trace("lock/Unlock 사용 안함 : "+drawBitmap(bm) + "ms");

        bm.lock();
        trace("lock/Unlock 사용 : "+drawBitmap(bm) + "ms");
        bm.unlock();
}
function drawBitmap(bm:BitmapData):uint {
        var start:uint = getTimer();
        var w:uint=bm.width;
        var h:uint=bm.height;

        for (var x:uint=0; x < w; x++) {
                for (var y:uint=0; y < h; y++) {
                        bm.setPixel(x,y,Math.random()*0xFFFFFF);
                }
        }
        return getTimer() - start;
}

// output
lock/Unlock 사용 안함 : 214ms
lock/Unlock 사용 : 157ms

package{
        import flash.display.Sprite;
        public class FindInstrumentTester extends Sprite{

                public function FindInstrumentTester():void{
                        var inventory:Inventory = new Inventory();
                        initializeInventory(inventory);

                        var properties:HashMap = new HashMap();
                        properties.put("builder", Builder.GIBSON);
                        properties.put("backWood", Wood.MAPLE);
                        var whatBryanLikes:InstrumentSpec = new InstrumentSpec(properties);

                        var matchingInstruments:Array = inventory.search(whatBryanLikes);
                        if(matchingInstruments.length != 0){
                                trace("Bryan, you might like these instruments:");
                                var ilen:int = matchingInstruments.length;
                                for(var i:int=0;i<ilen;i++){
                                        var instrument:Instrument = matchingInstruments[i];
                                        var spec:InstrumentSpec = instrument.getSpec();

                                        trace("We have a " + spec.getProperty("instrumentType") +
                                        " with the following properties:");

                                        var hashMap:HashMap = spec.getProperties();
                                        var jlen:int = hashMap.length;
                                        for(var j:int=0;j<jlen;j++){
                                                var propertyName:String =
                                                String(hashMap.getHashTable()[j].key);
                                                trace("    " + propertyName + ": "
                                                +spec.getProperty(propertyName));
                                        }
                                        trace("  You can have this " +
                                        spec.getProperty("instrumentType") +
                                        " for $" + instrument.getPrice() + "\n---");
                                }
                        }else{
                                trace("Sorry, Bryan, we have nothing for you.");
                        }
                }
                private function initializeInventory(inventory:Inventory):void {
                        var properties:HashMap = new HashMap();
                        properties.put("instrumentType", InstrumentType.GUITAR);
                        properties.put("builder", Builder.COLLINGS);
                        properties.put("model", "CJ");
                        properties.put("type", Type.ACOUSTIC);
                        properties.put("numStrings", 6);
                        properties.put("topWood", Wood.INDIAN_ROSEWOOD);
                        properties.put("backWood", Wood.SITKA);
                        inventory.addInstrument("11277", 3999.95,
                        new InstrumentSpec(properties.clone()));

                        properties.put("builder", Builder.MARTIN);
                        properties.put("model", "D-18");
                        properties.put("topWood", Wood.MAHOGANY);
                        properties.put("backWood", Wood.ADIRONDACK);
                        inventory.addInstrument("122784", 5495.95,
                        new InstrumentSpec(properties.clone()));

                        properties.put("builder", Builder.FENDER);
                        properties.put("model", "Stratocastor");
                        properties.put("type", Type.ELECTRIC);
                        properties.put("topWood", Wood.ALDER);
                        properties.put("backWood", Wood.ALDER);
                        inventory.addInstrument("V95693", 1499.95,
                        new InstrumentSpec(properties.clone()));
                        inventory.addInstrument("V9512", 1549.95,
                        new InstrumentSpec(properties.clone()));

                        properties.put("builder", Builder.GIBSON);
                        properties.put("model", "Les Paul");
                        properties.put("topWood", Wood.MAPLE);
                        properties.put("backWood", Wood.MAPLE);
                        inventory.addInstrument("70108276", 2295.95,
                        new InstrumentSpec(properties.clone()));

                        properties.put("model", "SG '61 Reissue");
                        properties.put("topWood", Wood.MAHOGANY);
                        properties.put("backWood", Wood.MAHOGANY);
                        inventory.addInstrument("82765501", 1890.95,
                        new InstrumentSpec(properties.clone()));

                        properties.put("instrumentType", InstrumentType.MANDOLIN);
                        properties.put("type", Type.ACOUSTIC);
                        properties.put("model", "F-5G");
                        properties.put("backWood", Wood.MAPLE);
                        properties.put("topWood", Wood.MAPLE);
                        properties.remove("numStrings");
                        inventory.addInstrument("9019920", 5495.99,
                        new InstrumentSpec(properties.clone()));

                        properties.put("instrumentType", InstrumentType.BANJO);
                        properties.put("model", "RB-3 Wreath");
                        properties.remove("topWood");
                        properties.put("numStrings", 5);
                        inventory.addInstrument("8900231", 2945.95,
                        new InstrumentSpec(properties.clone()));
                }
        }
}

package{
        public class Inventory{
                private var inventory:Array;
                public function Inventory():void{
                        inventory = new Array();
                }
                public function addInstrument(serialNumber:String,
                price:Number,
                spec:InstrumentSpec):void{
                        var instrument:Instrument = new Instrument(serialNumber,
                        price,
                        spec);
                        inventory.push(instrument);
                }
                public function get(serialNumber:String):Instrument{
                        var len:int = inventory.length;
                        for(var i:int=0;i<len;i++){
                                if(inventory[i].getSerialNumber() == serialNumber){
                                        return inventory[i];
                                }
                        }
                        return null;
                }
                public function search(searchSpec:InstrumentSpec):Array{
                        var matchingInstruments = new Array();
                        var len:int = inventory.length;
                        for(var i:int=0;i<len;i++){
                                if(inventory[i].getSpec().matches(searchSpec)){
                                        matchingInstruments.push(inventory[i]);
                                }
                        }
                        return matchingInstruments;
                }
        }

}

package{
        public class Instrument{
                private var serialNumber:String;
                private var price:Number;
                private var spec:InstrumentSpec;
                public function Instrument(serialNumber:String,
                price:Number,
                spec:InstrumentSpec) {
                        this.serialNumber = serialNumber;
                        this.price = price;
                        this.spec = spec;
                }
                public function getSerialNumber():String {
                        return serialNumber;
                }
                public function getPrice():Number{
                        return price;
                }
                public function setPrice(newPrice:Number):void{
                        price = newPrice;
                }
                public function getSpec():InstrumentSpec{
                        return spec;
                }
        }
}

package{
        public class InstrumentSpec{
                private var properties:HashMap;
                public function InstrumentSpec(properties:HashMap=null):void{
                        if (properties == null) {
                                this.properties = new HashMap();
                        } else {
                                this.properties = new HashMap(properties);
                        }
                }
                public function getProperty(propertyName:String):*{
                        return properties.getValue(propertyName);
                }
                public function getProperties():HashMap{
                        return properties;
                }
                public function matches(otherSpec:InstrumentSpec):Boolean{
                        var otherHashMap:HashMap = otherSpec.getProperties();
                        var len:int = otherHashMap.length;

                        var hashTable:Array = otherHashMap.getHashTable();

                        for (var i:int=0; i<len; i++ ) {
                                var propertyName:String = String(hashTable[i].key);

                                if (String(properties.getValue(propertyName)) !=
                                String(otherHashMap.getValue(propertyName))) {
                                        return false;
                                }
                        }
                        return true;
                }
        }
}

package{
        import flash.utils.ByteArray;
        public class HashMap{
                private var hashTable:Array;
                public function HashMap(hm:HashMap=null):void{
                        if (hm == null) {
                                hashTable = new Array();
                        } else {
                                hashTable = hm.getHashTable();
                        }
                }
                public function put(k:*, v:*):*{
                        var len:int = length;
                        for(var i:int=0;i<len;i++){
                                if(hashTable[i].key == k){
                                        hashTable[i].key = k;
                                        hashTable[i].value = v;
                                        return v;
                                }
                        }
                        hashTable.push({key:k, value:v});
                        return v;
                }
                public function remove(k:*):Boolean{
                        var len:int = length;
                        for(var i:int=0;i<len;i++){
                                if(hashTable[i].key == k){
                                        hashTable.splice(i,1);
                                        return true;
                                }
                        }
                        return false;
                }
                public function getValue(k:*):*{
                        var len:int = length;
                        for(var i:int=0;i<len;i++){
                                if(hashTable[i].key == k){
                                        return hashTable[i].value;
                                }
                        }
                        return null;
                }
                // this function for test
                public function allTrace():void{
                        var len:int = length;
                        for(var i:int=0;i<len;i++){
                                trace(String(hashTable[i].key)+" : "+String(hashTable[i].value));
                        }
                }
                public function getHashTable():Array{
                        return hashTable;
                }
                public function setHashTable(hashTable:Array):void{
                        this.hashTable = hashTable;
                }
                public function get length():int{
                        return hashTable.length;
                }
                public function clone():HashMap{
                        var hm:HashMap = new HashMap();
                        var hashTableBA:ByteArray = new ByteArray();
                        hashTableBA.writeObject(hashTable);
                        hashTableBA.position = 0;
                        var ary:Array = hashTableBA.readObject() as Array;
                        hm.setHashTable(ary);
                        return hm;
                }
        }
}

package{
        public class Builder{
                public static const FENDER = "Fender";
                public static const MARTIN = "Martin";
                public static const GIBSON = "Gibson";
                public static const COLLINGS = "Collings";
                public static const OLSON = "Olson";
                public static const RYAN = "Ryan";
                public static const PRS = "PRS";
        }
}

// InstrumentType.as

package{
        public class InstrumentType{
                public static const GUITAR = "Guitar";
                public static const BANJO = "Banjo";
                public static const DOBRO = "Dobro";
                public static const FIDDLE = "Fiddle";
                public static const BASS = "Bass";
                public static const MANDOLIN = "Mandolin";
        }
}

// Type.as

package{
        public class Type{
                public static const ACOUSTIC = "acoustic";
                public static const ELECTRIC = "Belectric";
        }
}

// Wood.as

package{
        public class Wood{
                public static const INDIAN_ROSEWOOD = "Indian Rosewood";
                public static const BRAZILIAN_ROSEWOOD = "Brazilian Rosewood";
                public static const MAHOGANY = "Mahogany";
                public static const MAPLE = "Maple";
                public static const COCOBOLO = "Cocobolo";
                public static const CEDAR = "Cedar";
                public static const ADIRONDACK = "Adirondack";
                public static const ALDER = "Alder";
                public static const SITKA = "Sitka";
        }
}

package{
        import flash.display.Sprite;
        public class FindGuitarTester extends Sprite{
                private var inventory:Inventory;
                private var whatErinLikes:GuitarSpec;
                private var matchingGuitars:Array;
                public function FindGuitarTester():void{
                        inventory = new Inventory();
                        initialize();
                }
                private function initialize():void{
                        initializeInventory(inventory);
                        whatErinLikes = new GuitarSpec(Builder.FENDER, "Stratocastor", Type.ELECTRIC, 6, Wood.ALDER, Wood.ALDER);
                        matchingGuitars = inventory.search(whatErinLikes);
                        if (matchingGuitars != null) {
                                trace("Erin, you might like these guitars:");
                                var len:int = matchingGuitars.length;
                                for (var i:int=0;i<len;i++) {
                                        var guitar:Guitar = matchingGuitars[i];
                                        var spec:GuitarSpec = guitar.getSpec();
                                        trace("  We have a " +
                                        spec.getBuilder() + " " + spec.getModel() + " " +
                                        spec.getType() + " guitar:\n     " +
                                        spec.getBackWood() + " back and sides,\n     " +
                                        spec.getTopWood() + " top.\n  You can have it for only $" +
                                        guitar.getPrice() + "!\n  ----");
                                }
                        } else {
                                trace("Sorry, Erin, we have nothing for you.");
                        }
                }
                private function initializeInventory(inventory:Inventory):void {
                        inventory.addGuitar("11277", 3999.95, new GuitarSpec(Builder.COLLINGS, "CJ", Type.ACOUSTIC, 6, Wood.INDIAN_ROSEWOOD, Wood.SITKA));
                        inventory.addGuitar("V95693", 1499.95, new GuitarSpec(Builder.FENDER, "Stratocastor", Type.ELECTRIC, 6, Wood.ALDER, Wood.ALDER));
                        inventory.addGuitar("V9512", 1549.95, new GuitarSpec(Builder.FENDER, "Stratocastor", Type.ELECTRIC, 6, Wood.ALDER, Wood.ALDER));
                        inventory.addGuitar("122784", 5495.95, new GuitarSpec(Builder.MARTIN, "D-18", Type.ACOUSTIC, 6, Wood.MAHOGANY, Wood.ADIRONDACK));
                        inventory.addGuitar("76531", 6295.95, new GuitarSpec(Builder.MARTIN, "OM-28", Type.ACOUSTIC, 6, Wood.BRAZILIAN_ROSEWOOD, Wood.ADIRONDACK));
                        inventory.addGuitar("70108276", 2295.95, new GuitarSpec(Builder.GIBSON, "Les Paul", Type.ELECTRIC, 6, Wood.MAHOGANY, Wood.MAHOGANY));
                        inventory.addGuitar("82765501", 1890.95, new GuitarSpec(Builder.GIBSON, "SG '61 Reissue", Type.ELECTRIC, 6, Wood.MAHOGANY, Wood.MAHOGANY));
                        inventory.addGuitar("77023", 6275.95, new GuitarSpec(Builder.MARTIN, "D-28", Type.ACOUSTIC, 6, Wood.BRAZILIAN_ROSEWOOD, Wood.ADIRONDACK));
                        inventory.addGuitar("1092", 12995.95, new GuitarSpec(Builder.OLSON, "SJ", Type.ACOUSTIC, 12, Wood.INDIAN_ROSEWOOD, Wood.CEDAR));
                        inventory.addGuitar("566-62", 8999.95, new GuitarSpec(Builder.RYAN, "Cathedral", Type.ACOUSTIC, 12, Wood.COCOBOLO, Wood.CEDAR));
                        inventory.addGuitar("6 29584", 2100.95, new GuitarSpec(Builder.PRS, "Dave Navarro Signature", Type.ELECTRIC, 6, Wood.MAHOGANY, Wood.MAPLE));
                }
        }
}

// Inventory.as

package{
        public class Inventory{
                private var guitars:Array;
                public function Inventory():void{
                        guitars = new Array();
                }
                public function addGuitar(serialNumber:String, price:Number, spec:GuitarSpec):void{
                        var guitar:Guitar = new Guitar(serialNumber, price, spec);
                        guitars.push(guitar);
                }
                public function getGuitar(serialNumber:String):Guitar{
                        var len:int = guitars.length;
                        for(var i:int=0;i<len;i++){
                                if(guitars[i].getSerialNumber() == serialNumber){
                                        return guitars[i];
                                }
                        }
                        return null;
                }
                public function search(searchSpec:GuitarSpec):Array{
                        var matchingGuitars = new Array();
                        var len:int = guitars.length;
                        for(var i:int=0;i<len;i++){
                                if(guitars[i].getSpec().matches(searchSpec)){
                                        matchingGuitars.push(guitars[i]);
                                }
                        }
                        return matchingGuitars;
                }
        }

}

// GuitarSpec.as

package {
        public class GuitarSpec {
                private var builder:String;
                private var model:String;
                private var type:String;
                private var numStrings:int;
                private var backWood:String;
                private var topWood:String;

                public function GuitarSpec(builder:String, model:String, type:String, numStrings:int, backWood:String, topWood:String) {
                        this.builder = builder;
                        this.model = model;
                        this.type = type;
                        this.numStrings = numStrings;
                        this.backWood = backWood;
                        this.topWood = topWood;
                }

                public function getBuilder():String {
                        return builder;
                }

                public function getModel():String {
                        return model;
                }

                public function getType():String {
                        return type;
                }

                public function getNumStrings():int {
                        return numStrings;
                }

                public function getBackWood():String {
                        return backWood;
                }

                public function getTopWood():String {
                        return topWood;
                }

                public function matches(otherSpec:GuitarSpec):Boolean {
                        if (builder != otherSpec.getBuilder()) {
                                return false;
                        }
                        if ((model != null) && (model !="") && (model.toLowerCase() != (otherSpec.getModel().toLowerCase()))) {
                                return false;
                        }
                        if (type != otherSpec.getType()) {
                                return false;
                        }
                        if (numStrings != otherSpec.getNumStrings()) {
                                return false;
                        }
                        if (backWood != otherSpec.getBackWood()) {
                                return false;
                        }
                        if (topWood != otherSpec.getTopWood()) {
                                return false;
                        }
                        return true;
                }
        }
}

package{
        public class Guitar{
                private var serialNumber:String;
                private var price:Number;
                private var spec:GuitarSpec;
                public function Guitar(serialNumber:String, price:Number, spec:GuitarSpec):void{
                        this.serialNumber = serialNumber;
                        this.price = price;
                        this.spec = spec;
                }
                public function getSerialNumber():String{
                        return serialNumber;
                }
                public function getPrice():Number{
                        return price;
                }
                public function setPrice(newPrice:Number):void{
                        price = newPrice;
                }
                public function getSpec():GuitarSpec{
                        return spec;
                }
        }
}

package{
        public class Builder{
                public static const FENDER = "Fender";
                public static const MARTIN = "Martin";
                public static const GIBSON = "Gibson";
                public static const COLLINGS = "Collings";
                public static const OLSON = "Olson";
                public static const RYAN = "Ryan";
                public static const PRS = "PRS";
        }
}

package{
        public class Wood{
                public static const INDIAN_ROSEWOOD = "Indian Rosewood";
                public static const BRAZILIAN_ROSEWOOD = "Brazilian Rosewood";
                public static const MAHOGANY = "Mahogany";
                public static const MAPLE = "Maple";
                public static const COCOBOLO = "Cocobolo";
                public static const CEDAR = "Cedar";
                public static const ADIRONDACK = "Adirondack";
                public static const ALDER = "Alder";
                public static const SITKA = "Sitka";
        }
}

package{
        public class Type{
                public static const ACOUSTIC = "acoustic";
                public static const ELECTRIC = "Belectric";
        }
}

Collide 이벤트를 가지고 형광등을 표현해 봤다. 형광등의 진공 유리관에도 collide 이벤트를 적용하려고 했었는데 SpringConstraint에서 이벤트 반응을 하지 않는다. 구조상으로는 SpringConstraint -> AbstractConstraint -> AbstractItem -> EventDispatcher 와 같은 상속관계를 갖고 있음에도 이벤트에 반응하지 않는 것이 좀 이상하다.

일단은 진공관에 대한 이벤트 반응과 collidable을 false로 해 놓았다.

기존에 만들었던 APE의 UML에서 Association 표기가 없었던 것을 추가하고 기존에 잘못 되었던 부분을 수정했다. 클래스 소스를 기준으로 작성된 class diagram이므로 정확하지 않을 수 있지만 대체적으로 package를 분석하는데 도움이 될 것 같다.

아래 풀사이즈 jpg이미지와 플래시로 만들어 놓은 파일을 올려놓는다.  

아래는 위 클래스를 이용하여 동적으로 TextField의 사이즈를 변경하는 예이다.

package jasu.display{
        import flash.text.TextField;
        public class CutTextField {
                private var _tf:TextField;
                private var _t:String;
                public function CutTextField(tf:TextField):void {
                        _tf = tf;
                        _t = tf.text;
                        cutText();
                }
                public function cutText():void {
                        if (_tf.maxScrollH > 0) {
                                _tf.appendText("...");
                                while (_tf.maxScrollH > 0) {
                                        var str:Array=_tf.text.split("");
                                        var len:int = str.length;
                                        str.splice(len - 4,1);
                                        _tf.text=str.join("");
                                }
                        }
                }
                public function setTextField(tf:TextField):void {
                        _tf = tf;
                        _t = tf.text;
                }
                public function getTextField():TextField {
                        return _tf;
                }
                public function set width(w:int):void {
                        _tf.width = w;
                        _tf.text = _t;
                }
                public function get width():int {
                        return _tf.width;
                }
                public function set text(t:String):void {
                        _tf.text = _t = t;

                }
                public function get text():String {
                        return _t;
                }
        }
}

var a:int = 0;
var b:String = 'hgoe';
trace(a, b); // Output: 0 hoge

var len:Number = list.length;
for (var i:Number = 0; i < len; ++i) {
        trace(list[i]);
}

for each (var element:Object in list) {
        trace(element);
}

function f(arg1:int, arg2:int = 2):void
{
        trace(arg1, arg2);
}
f(3, 4); // Output: 3 4
f(3); // Output: 3 2

function output(separator:String, ...rest:Array):void
{
        trace(rest.join(separator));
}
output(':', 1, 2, 3, 4); // Output: 1:2:3:4
output('.', 'a', 'b', 'c'); // Output: a.b.c

var element:* = list[0];

public class SelectedEvent extends Event
{
        public static const SELECTED:String = 'selected';
}

loop: for (var i:int = 0; i < 2; i++) {
        for (var j:int = 0; j < 3; j++) {
                if ((i == 1) && (j == 0)) {
                        break loop;
                }
                trace(i, j);
        }
}
/* Output:
0 0
0 1
0 2
*/

var obj:Object = {abc: 1, def: 2};
trace('abc' in obj); // Output: true
trace('ghi' in obj); // Output: false

var s:Sprite = new Sprite();
trace(s is Sprite); // Output: true
trace(s is DisplayObject); // Output: true
trace(s is String); // Output: false

var s:Sprite = new Sprite();
trace(s instanceof Sprite); // Output: true
trace(s instanceof DisplayObject); // Output: false

var s:Sprite = Sprite(new Array());

var s:Sprite = new Array() as Sprite;
trace(s);  // Output: null ← 형태 지정으로 null을 반환한다.
var n:Number = new Array() as Number;
trace(n);  // Output: 0 ← Number의 디폴트값은 0

APEngine.addMasslessForce(new Vector(0,3));

APEngine.addForce(new VectorForce(false,0,3));

public static const COLLIDE:String = "collide";
public static const FIRST_COLLIDE:String = "firstCollide";

APE

먼저 처음 접했던 것은 APE 물리엔진이었다. 이것은 AS2 버전으로 이미 알려졌던 Flade 엔진을 AS3로 고치면서 새롭게 APE라는 이름으로 나오게 되었다. 위 3개의 엔진 중에 가장 심플한 클래스 구조를 가지고 있다. 19개의 클래스 중에 public 클래스는 불과 12개 밖에 되지 않기 때문에 소스를 분석하는데도 그리 어렵지 않을 것 같다.

아직 AS2버전에 있던 기능들을 모두 APE에 적용한 상태는 아니기 때문에 앞으로 버전업을 통해서 추가될 것으로 기대된다. 기본적으로 정방형 형태와 파티클 형태인 원들을 만들 수가 있는데 wheel과 같이 자동차 바퀴와 같은 파티클을 통해서 역학운동 표현이 가능하다.

그러나 아직까지 많은 기능을 포함하고 있지 않기 때문에 표현의 범위가 적다. 다각형을 표현할 경우 파티클들의 조합으로 가능할 것으로 생각되지만 실질적인 클래스를 지원하고 있지 않기 때문에 파티클들을 extends 해서 사용할 필요가 있다.

하지만 비교적 간단한 방법으로 표현이 가능하기 때문에 사용상에 어려움은 없다. API 문서를 지원하지만 원본 소스를 직접 보고 테스트 해보는 것이 도움이 될 것 같다.

 
Revive

Revive는 두 번째로 접하게 된 물리 엔진이다. 2005, 2006 MAX conference에도 스피커로 참여했던 Andre michelle이 만든 엔진이다. Revive의 경우는 베이지어 곡선 처리가 가능하여 surface 표현할 때 곡선처리가 가능하다. 물리엔진의 계산 표현이 비교적 정교하여 움직임이 매끄럽고 속도가 빠르다. 마우스 이벤트에 대해 기본적으로 제공하고 있기 때문에 약간의 확장을 통해서 마우스를 통한 인터렉션이 자유롭다.

엔진의 API문서는 제공되고 있지 않으며 소스코드에 있는 몇 개의 샘플을 통해서 충분히 손쉽게 사용해 볼 수 있다. 다운 받은 엔진의 소스를 그대로 사용할 경우 몇 가지 error를 발견할 수 있는데 이는 단순한 package의 import를 하지 않은 것이기 때문에 필요한 package를 import하여 사용해야 한다. 이는 아무래도 앙드레미쉘이 class path를 default로 설정해 놓은 상태에서 클래스를 저장하여 에러를 발견하지 못한 듯 싶다.

Revive도 파티클의 조합으로 다각형을 표현해 볼 수 있는데 경계가 되는 파티클들이 범위를 벗어났을 때 약간을 오류가 발생하고 있어서 다각형의 경우는 새로운 기능이 확장되어야 할 듯 싶다. 이 문제로 Revive package 외에 physics package를 만들어 놓았는데 physics 패키지에서는 경계 부분의 오류를 바로잡은 다각형을 지원하고 있다. 하지만 클래스 자체가 사용하기 용이하게 제작되어 있지 않은 관계로 앞으로 업데이트에 기대를 가져봐야 할 것 같다.

 
클래스 구조

* de/
    o popforge/
        + revive/

                      # application/ - 어플리케이션
                            * SceneContainer.as – 뷰어
                            * Simulation.as - 물리 엔진

                      # display/ - 표시
                            * ExtDrawAPI.as – Graphics을 사용하고 호를 그리는 확장
                            * IDrawAble.as – 표시오브젝트 관련 Interface

                      # forces/ - 힘
                            * FixedSpring.as - 고정 용수철
                            * IForce.as - 힘을 가지는 오브젝트를 위한 Interface
                            * Spring.as - 용수철

                      # geom/ - 지오메트리
                            * BezierCubic.as – 3 베이지어곡선
                            * BezierQuadric.as - 4 베이지어곡선
                            * BoundingBox.as - 바운딘
                            * ICurve.as - 곡선을 위한 Interface
                            * Vector.as - 2 차원 벡터

                      # member/ - 물체
                            * Immovable.as - 움직이지 않는 물체의 base class
                            * ImmovableBezierQuadric.as - 움직이지 않는 4 베이지어곡선
                            * ImmovableCircleInner.as - 움직이지 않는 원
                            * ImmovableCircleInnerSegment.as - 움직이지 않는 호
                            * ImmovableCircleOuter.as - 움직이지 않는 원
                            * ImmovableCircleOuterSegment.as - 움직이지 않는 호
                            * ImmovableGate.as
                            * ImmovableGroup.as - 움직이지 않는 그룹
                            * ImmovablePoint.as - 움직이지 않는 점
                            * Movable.as - 움직이는 물체의 base class
                            * MovableCircle.as - 움직이는 원
                            * MovableParticle.as - 움직이는 점
                            * MovableSegment.as - 움직이는 선

                      # resolve/
                            * DynamicIntersection.as - 동적 접점
                            * IDynamicIntersectionTestAble.as - 동적인 접점을 테스트하는Interface
                            * IResolvable.as

        + surface/ - 인터페이스

                      # display/ - 표시
                            * DefaultTextFormat.as - 이 라이브러리의 디폴트 텍스트 포맷
                            * FPSCounter.as - FPS 카운터

                      # io/ - IO
                            * PopKey.as – 키 코드 상태를 관리
                            * PopMouse.as - mouse button의 상태를 관리

                      # valuation/ -
                            * Potentiometer.as – 미터

Fisix

Fisix 엔진은 0.5 alpha버전으로 공개되어 있으나 위의 APE, Revive 보다 많은 기능을 포함하고 있다. 소스를 다운로드 하면 API문서, 라이브러리, 샘플 6개와 나머지 라이선스와 관련된 텍스트 파일을 볼 수 있다. Public 클래스는 47개 정도 되어 꽤 많은 기능을 제공하고 있다. as파일은 없으며 swc 파일만을 배포하고 있는 듯 하다.

제공하는 샘플
* Example1 … 타이머, 엔진 표현, 직선 표면 1 개, 차 바퀴
* Example2 … ENTER_FRAME , 엔진 표현, 차 바퀴
* Example3 … ENTER_FRAME , 엔진 표현, 용수철, 마우스 interaction
* Example4 … 숫자 키1 ~4 ,5 ~6 모드 변환, 파티클의 자동 삭제
* Example5 … 로프, SWF 부품(타이어)
* Example6 … 유모차

Fisix 엔진의 경우는 직접적으로 많이 접해보지 않았기 때문에 다음 기회에 포스트해 보도록 하겠다.

3개 엔진을 접해본 결과 결과적으로 기능적인 면에서는 Fisix가 우위를 점하고 있다고 하겠다. 또한 커뮤니티 사이트도 비교적 활발하게 운영되고 있는 것을 높이 평가할 만 하다. 하지만 구체적은 클래스 구조를 탐구하기 어려운 부분이 있고 다기능으로 인한 클래스 구조의 복잡함은 응용에 있어서 까다로운 부분이 없지 않다.

APE의 경우는 Flade 엔진을 개선한 부분도 있으나 아직까지 많은 기능을 포함하고 있지 않기 때문에 응용 과정에서 기존의 클래스를 확장하여 가공할 필요가 있다. 하지만 기본적으로 원본 클래스를 가공하여 사용하는 것은 라이센스의 규약에 있어서 문제가 될만한 것이기 때문에 기존의 클래스를 가공하기 보다는 확장을 통해서 기능을 추가해 사용해야 할 것으로 보인다.

클래스 구조가 비교적 단조롭기 때문에 물리엔진 보다는 잘 짜여진 클래스 구조를 공부하는데 도움이 될만한 자료라고 생각된다.

Revive의 경우는 앙드레미쉘의 개인적인 성향이 강한 물리엔진이기 때문에 약간의 범용적이지 않은 부분도 보이지만 엔진으로서의 가치와 앞으로 문제점을 보완한다면 충분히 좋은 엔진이 될 것으로 기대된다. 개인적으로는 physics 패키지와 revive 패키지를 적절히 접목하여 좀더 구체적이고 단단한 물리엔진을 만들면 좋을 것 같다.

physics와 revive 패키지를 분석해 본 결과 세밀한 코드 자체에는 비슷한 부분이 있지만 전체적인 흐름(구조)에서는 다른 형태를 가지고 있어서 이 둘을 하나로 혼합하기에는 적지 않은 시간과 생각이 필요할 듯 싶다. 하지만 앙드레미쉘의 열정이라면 언젠가는 지금보다 바람직한 물리엔진을 만들어 내지 않을까 기대해 본다.

    *  기본
          o for 루프로 배열내 참조를 하는 경우는 미리 배열의 길이를 구하여 변수를 int/uint 형태로 한다.
          o 다른 클래스의 정수는 일단 로컬의 변수에 값을 대입하고 나서 루프를 사용한다.
          o 로컬 변수 선언은1 행으로 정리한다.
          o (AS2와 같이) 조건문이나 명령문을 고쳐 쓰지 않는다.
          o Object 형태는 사용하지 않는다.
          o 배열의 요소를 읽을 때는 형태 캐스트를 한다.
          o 가능한 한, int 형태를 사용한다
          o Point 형태나 Rectangle 형태등 잘 사용하는 오브젝트의 정수를 만들어 돌린다.
          o 패키지 변수·정수나 패키지 함수를 사용해서 가능한 한 클래스명 참조를 줄인다.
          o (.graphics나.transform 등의) 글로벌getter 프롭퍼티를 2 회이상 사용하는 경우는 로컬 변수에 대입해 사용한다.
          o getDefinitionByName(getQualifiedClassName(object))를 사용하는 대신에 커스텀 리플렉션 메소드를 만든다.
    * 표시
          o 프레임마다 비트 맵 처리가 필요한 경우, 미리 비트 맵 데이터를 작성하여 fillRect()/copyPixels()를 사용한다.
          o mx.utils.GraphicsUtil.drawRoundRectComplex()보다 flash.display.Graphics.drawRoundRectComplex()를 사용한다.
    * 비트 연산화
          o 2 의 누승을 곱하는 경우는 왼쪽 시프트를 사용한다.
          o 2 의 누승을 나누는 경우는 오른쪽 시프트를 사용한다.
          o int 정수 변환은 「>> 0 」
          o int 형태의 변수 교체에는 XOR 연산을 사용한다.
          o 부호의 변환에는 NOT 연산이나 XOR 연산을 사용한다.
          o 2 의 누승으로 나머지를 취할 때는 AND 연산을 사용한다.
          o AND 연산으로 짝수 판단한다.
          o Math.abs()를 사용하지 말고 절대치를 요구한다.
          o 2 개의 int 형태 변수의 부호가 일치할지를 조사할 때는 「eqSign = a ^ b >= 0; 」형태를 사용한다.
          o R5G5B5로부터 R8G8B8 에의 변환에는 비트 시프트를 사용한다.

    * TextField.text에 문자열을 추가할 때는 「+= 」으로 연결하는 것이 아니라 appendText()를 사용한다.
    * 필터의 blurX, blurY 프롭퍼티의 값은 2의 누승으로 한다.
    * 변수 중에 가능한 것은 할 수 있는 한 정수화 한다.
    * 루프의 내부로부터 가능한 처리를 줄인다.
    * 참조는 할 수 있는 한 짧게 한다.