메뉴
ADOBE USER GROUP 대문 따라하기

2010. 12. 24. 08:00



예전에 싸이월드 클럽 메인을 만들면서
ADOBE USER GROUP의 대문에 쓰인 아이디어를 차용했다.
AS3.0 버전, 막코딩으로 찼다.
최대한 빠른시간내에 구현할때는 함수내에 함수를 또 넣는 방식으로 (enterframe event까지 몽땅) 코딩 하곤 하는데
잘 하는 짓은 아닐거다...
 
구현 방식은 간단하다.
화면에 나열되는 뱀(?)은 메인 각도를 처음에 생성하면 그 다음부터는 각도 변화량 만큼 이동하게된다.
해당 지점의 색상을 getPixel로 가져와서 작은 원의 내부를 칠한다.
 
각도 변화량은 20프레임마다 바뀌며
X,Y좌표를 구하기 위해 쓰인 cos과 sin은 바뀌어도 크게 변화되는 건 없다.
 
이외에 bitmapdata 영역밖의 데이터를 가져오는 것을 방지하는 작업을 거쳤고,
뱀이 화면 밖으로 나가면 다시 중앙 부근의 임의의 점으로 오도록 설정되었다.

아래는 사용된 코드다.


var bmd:BitmapData = new BitmapData(500,375,true,0x00ffffff);
var bm:Bitmap = new Bitmap(bmd);
 
addChild(bm)
addChild(border)
addChild(copyright)
 
var bmd2:BitmapData = new BitmapData(540,415,true,0xffffffff);
bmd2.draw(bg)
 
function attachCircle(x_:int, y_:int):void {
        var mc:MovieClip = new MovieClip();
        var clr:int = bmd2.getPixel(x_+20,y_+20);
        mc.graphics.beginFill(clr,1);
        mc.graphics.drawCircle(x_,y_,2);
        mc.graphics.endFill();
        var gf:GlowFilter = new GlowFilter(0x000000,1,1.5,1.5,4);
        mc.filters = [gf];
        bmd.draw(mc);
        //addChild(mc)
}
function startingPoints():void{
        var mainRotation:Number = Math.random()*360
        var mainRotationCount:int = 0;
        var subRotation:Number = Math.random()*16 - 8
        var startX:int = Math.random()*300 + 100
        var startY:int = Math.random()*225 + 75
        stage.addEventListener(Event.ENTER_FRAME, fn);
       
        var curRotation:Number = 0;
        var curX:Number = startX;
        var curY:Number = startY;
       
        function fn(e:Event) {
                curRotation = curRotation + subRotation
                curX = curX + 4*Math.sin((mainRotation + curRotation)*Math.PI/180);
                curY = curY + 4*Math.cos((mainRotation + curRotation)*Math.PI/180);
                attachCircle(curX,curY)
                mainRotationCount++;
                if (mainRotationCount >20) {
                        subRotation = Math.random()*16 - 8
                        mainRotationCount = 0
                }
                if (curX > 510 || curX < -10 || curY > 385 || curY < -10) {
                        curX = Math.random()*300 + 100
                        curY = Math.random()*225 + 75
                }
        }
}
 
startingPoints();
startingPoints();
startingPoints();
startingPoints();
startingPoints();
startingPoints();