ACTIONSCRIPT™ 3.0 프로그래밍

Size: px

Start display at page:

Download "ACTIONSCRIPT™ 3.0 프로그래밍"

유리 낭
4 years ago
Views:

1 제 14 장 드로잉 API 사용 14 가져온이미지및아트웍도중요하지만드로잉 API 기능을사용하면 ActionScript 에서선과도형을그릴수있으므로컴퓨터에서빈캔바스처럼응용프로그램을시작하여원하는이미지를만들수있습니다. 그래픽을직접작성할수있는기능은응용프로그램의무한한가능성을열어줍니다. 이장에서다루는기술을통해드로잉프로그램을생성하거나움직이는대화형아트를만들고사용자인터페이스요소를프로그래밍방식으로작성할수있습니다. 목차 드로잉 API 사용의기초 Graphics 클래스이해 선및곡선그리기 내장메서드를사용하여모양그리기 그래디언트선및채우기만들기 드로잉메서드와 Math 클래스사용 드로잉 API를사용한애니메이션 예제 : Algorithmic Visual Generator

2 드로잉 API 사용의기초 드로잉 API 사용소개 드로잉 API는 ActionScript를사용하여벡터그래픽 ( 선, 곡선, 모양, 채우기, 그래디언트 ) 을만들고화면에이를표시하는 ActionScript 내장기능의이름입니다. flash.display.graphics 클래스가이기능을제공합니다. 이러한각클래스에정의된 graphics 속성을사용하여 Shape, Sprite 또는 MovieClip 인스턴스에서 ActionScript로그림을그릴수있습니다. 이러한각클래스의 graphics 속성은실제로 Graphics 클래스의인스턴스입니다. 코드를사용한드로잉에이제막입문한사용자를위해 Graphics 클래스에는원, 타원, 사각형, 모서리가둥근사각형과같은일반도형을쉽게그릴수있는몇가지메서드가포함되어있습니다. 이러한도형은빈선또는채워진모양으로그릴수있습니다. 고급기능을필요로하는사용자를위해 Graphics 클래스에는선과이차베지어곡선을그릴수있는메서드도포함되어있습니다. 이러한메서드는 Math 클래스의삼각함수와함께사용하여필요한도형을만들수있습니다. 일반적인드로잉 API 작업 다음은 ActionScript에서드로잉 API를사용하여수행할수있는작업들로, 이장에서설명하는내용이기도합니다. 모양그리기를위한선스타일및채우기스타일정의 직선및곡선그리기 원, 타원, 사각형등의모양을그리기위한메서드사용 그래디언트선및채우기를사용하여그리기 그래디언트생성을위한행렬정의 드로잉 API에서삼각함수사용 드로잉 API를애니메이션으로통합 중요한개념및용어 다음참조목록에는이장에사용된중요한용어가포함되어있습니다. 앵커포인트 : 이차베지어곡선두끝점중하나입니다. 제어포인트 : 이차베지어곡선의방향및굴곡정도를정의하는포인트입니다. 곡선이제어포인트에닿지는않지만제어포인트를향하는곡선이그려집니다. 좌표공간 : 표시객체에포함된좌표의그래프이며해당객체의자식요소가배치됩니다. 채우기 : 색상선으로그린모양에서단색의내부또는외곽선이없는모양전체를말합니다. 422 드로잉 API 사용

3 그래디언트 : 한가지색상에서하나이상의다른색상으로점진적으로변하는색상입니다 ( 단색의반대 ). 점 : 좌표공간에서의한위치를나타냅니다. ActionScript에사용되는 2차원좌표계에서는 x축과 y축 ( 점의좌표 ) 위의해당위치로점이정의됩니다. 이차베지어곡선 : 특정수학공식으로정의된곡선유형입니다. 이유형의곡선에서곡선의모양은앵커포인트의위치 ( 곡선의두끝점 ) 와곡선의방향및굴곡정도를정의하는제어포인트를기준으로계산됩니다. 배율 : 객체의원래크기에비례한크기를나타냅니다. 동사로 크기조정 이라고도하는데, 이경우에는객체를늘리거나줄여크기를조절한다는의미를갖습니다. 획 : 색상선으로그린모양에서외곽선부분또는채워지지않은모양의선입니다. 평행이동 : 한좌표공간에서다른좌표공간으로점의좌표를변경합니다. X 축 : ActionScript 에서사용하는 2D 좌표계의수평축입니다. Y 축 : ActionScript 에서사용하는 2D 좌표계의수직축입니다. 이장의예제를사용하여작업 장의내용을따라작업하면서예제코드샘플을직접테스트할수있습니다. 이장은시각적내용그리기를다루므로, 코드샘플을테스트하려면코드를실행한후생성된 SWF의결과를확인해야합니다. 코드샘플을테스트하려면 : 1. 빈 Flash 문서를만듭니다. 2. 타임라인에서키프레임을선택합니다. 3. [ 액션 ] 패널을열고 [ 스크립트 ] 창에코드샘플을복사합니다. 4. [ 컨트롤 ] > [ 무비테스트 ] 를사용하여프로그램을실행합니다. 생성된 SWF 파일에서코드샘플의결과를확인합니다. Graphics 클래스이해 각 Shape, Sprite 및 MovieClip 객체에는 Graphics 클래스의인스턴스인 graphics 속성이있습니다. Graphics 클래스에는선, 채우기및모양을그리기위한메서드와속성이포함됩니다. 내용을그리기위한캔바스로만표시객체를사용하려는경우에는 Shape 인스턴스를사용할수있습니다. Shape 인스턴스는 Sprite 및 MovieClip 클래스의추가기능에대한오버헤드가없으므로다른그리기용표시객체보다성능이뛰어납니다. 그래픽내용을그릴수있는표시객체가필요하고이표시객체가다른표시객체를포함하도록하려는경우에는 Sprite 인스턴스를사용할수있습니다. 다양한작업에사용할표시객체를결정하는자세한방법은 370 페이지의 DisplayObject 하위클래스선택 을참조하십시오. Graphics 클래스이해 423

4 선및곡선그리기 Graphics 인스턴스를사용하여수행되는모든드로잉은선및곡선이있는기본드로잉을기반으로합니다. 따라서모든 ActionScript 드로잉은다음의동일한단계들을통해수행되어야합니다. 선및채우기스타일정의 초기드로잉위치설정 선, 곡선및모양그리기 ( 선택적으로드로잉포인트이동 ) 채우기생성완료 ( 필요한경우 ) 선및채우기스타일정의 Shape, Sprite 또는 MovieClip 인스턴스의 graphics 속성을사용하여그리려면드로잉에사용할스타일 ( 선크기및색상, 채우기색상 ) 을먼저정의해야합니다. Adobe Flash CS3 Professional 또는다른드로잉응용프로그램의드로잉도구를사용할때와마찬가지로, ActionScript를사용하여그릴때는획이나채우기색상을사용할수도있고사용하지않을수도있습니다. 획모양은 linestyle() 또는 linegradientstyle() 메서드를사용하여지정하고, 실선을만들려면 linestyle() 메서드를사용합니다. 이메서드를호출할때가장일반적으로지정하는값은처음 3개의매개변수인선두께, 색상및알파입니다. 예를들어, 다음코드행은 myshape라는 Shape가 2픽셀두께, 빨강 (0x990000) 및불투명도 75% 의선을그리도록지시합니다. myshape.graphics.linestyle(2, 0x990000,.75); 알파매개변수의기본값은 1.0(100%) 이며, 완전히불투명한선을원하는경우이매개변수를해제할수있습니다. linestyle() 메서드는또한픽셀힌트및크기조절모드를위한두개의추가매개변수를사용합니다. 이러한매개변수사용에대한자세한내용은 ActionScript 3.0 언어및구성요소참조설명서에서 Graphics.lineStyle() 메서드에대한설명을참조하십시오. 그래디언트선을만들려면 linegradientstyle() 메서드를사용합니다. 이방법에대해서는 428페이지의 그래디언트선및채우기만들기 에설명되어있습니다. 채워진모양을만들려면드로잉을시작하기전에 beginfill(), begingradientfill() 또는 beginbitmapfill() 메서드를호출하십시오. 그중에서가장기본적인 beginfill() 메서드는채우기색상과채우기색상에대한알파값 ( 옵션 ) 이라는두개의매개변수를사용합니다. 예를들어, 녹색으로채워진모양을그리는경우다음과같은코드를사용할수있습니다 (myshape라는객체에서그린다고가정 ). myshape.graphics.beginfill(0x00ff00); 424 드로잉 API 사용

5 채우기메서드를호출하면이전의모든채우기가암시적으로종료된후새메서드가시작됩니다. 획스타일을지정하는메서드를호출하면이전획이대체되지만, 이전에지정한채우기는바뀌지않으며그반대의경우도마찬가지입니다. 선스타일및채우기속성을지정했으면다음단계는드로잉시작점을지정하는것입니다. Graphics 인스턴스에는종이위의펜촉과같은드로잉포인트가있습니다. 드로잉포인트가있는위치가다음드로잉액션이시작되는지점이됩니다. 처음에 Graphics 객체는드로잉포인트 0에서시작하는데,0은드로잉이수행되는객체의좌표공간에서의시작점입니다. 다른포인트에서그리기를시작하려면 moveto() 메서드를먼저호출한다음드로잉메서드중하나를호출하십시오. 이과정은종이에서펜을들어다른위치로옮기는것에견줄수있습니다. 드로잉포인트를지정했으면드로잉메서드인 lineto()( 직선그리기용 ) 및 curveto()( 곡선그리기용 ) 를연속적으로호출하여그리기를수행하십시오. 참고 그리는동안언제든지 moveto() 메서드를호출하여드로잉포인트를다른새로운위치로이동할수있습니다. 그리기단계에서채움색상을지정한경우, endfill() 메서드를호출하여해당채우기를종료하도록 Adobe Flash Player 에지시할수있습니다. 닫힌모양그리기가아닌경우 ( 즉 endfill() 을호출했을때드로잉포인트가모양의시작점에있지않은경우 ), endfill() 메서드를호출하면 Flash Player 가현재드로잉포인트에서가장최근의 moveto() 호출에지정된위치까지직선을그려모양을자동으로닫습니다. 채우기를시작했는데 endfill() 을호출하지않은경우, beginfill()( 또는다른채우기메서드중하나 ) 을호출하면현재채우기가종료되고새로운채우기가시작됩니다. 직선그리기 lineto() 메서드를호출하면 Graphics 객체는현재드로잉포인트에서메서드호출에서두개의매개변수로지정한좌표까지지정한선스타일을사용하여직선을그립니다. 예를들어, 다음코드행은드로잉포인트를 100, 100 좌표에두고 200, 200 좌표까지선을그립니다. myshape.graphics.moveto(100, 100); myshape.graphics.lineto(200, 200); 다음예제에서는높이가 100픽셀인빨강과녹색삼각형을그립니다. var triangleheight:uint = 100; var triangle:shape = new Shape(); // 0, 0 좌표에서시작하는빨강삼각형 triangle.graphics.beginfill(0xff0000); triangle.graphics.moveto(triangleheight/2, 0); triangle.graphics.lineto(triangleheight, triangleheight); triangle.graphics.lineto(0, triangleheight); triangle.graphics.lineto(triangleheight/2, 0); 선및곡선그리기 425

6 // 200, 0 좌표에서시작하는녹색삼각형 triangle.graphics.beginfill(0x00ff00); triangle.graphics.moveto(200 + triangleheight/2, 0); triangle.graphics.lineto(200 + triangleheight, triangleheight); triangle.graphics.lineto(200, triangleheight); triangle.graphics.lineto(200 + triangleheight/2, 0); this.addchild(triangle); 곡선그리기 curveto() 메서드는이차베지어곡선을그립니다. 이곡선은두개의포인트 ( 앵커포인트 ) 를연결하는호를그리며이호는세번째포인트 ( 제어포인트 ) 방향으로구부러집니다. Graphics 객체는현재드로잉위치를첫번째앵커포인트로사용합니다. curveto() 메서드를호출하면 4개의매개변수 ( 제어포인트의 x, y 좌표와두번째앵커포인트의 x, y 좌표 ) 가전달됩니다. 예를들어, 다음코드는 100, 100 포인트에서시작하여 200, 200 포인트에서끝나는곡선을그립니다. 제어포인트가 175, 125이므로오른쪽으로이동하여아래로향하는곡선이만들어집니다. myshape.graphics.moveto(100, 100); myshape.graphics.curveto(175, 125, 200, 200); 다음예제에서는폭및높이가 100픽셀인빨강과녹색원형객체를그립니다. 이차베지어수식의특성상완벽한원이되지는않습니다. var size:uint = 100; var roundobject:shape = new Shape(); // 빨강원모양 roundobject.graphics.beginfill(0xff0000); roundobject.graphics.moveto(size / 2, 0); roundobject.graphics.curveto(size, 0, size, size / 2); roundobject.graphics.curveto(size, size, size / 2, size); roundobject.graphics.curveto(0, size, 0, size / 2); roundobject.graphics.curveto(0, 0, size / 2, 0); // 녹색원모양 roundobject.graphics.beginfill(0x00ff00); roundobject.graphics.moveto(200 + size / 2, 0); roundobject.graphics.curveto(200 + size, 0, size, size / 2); roundobject.graphics.curveto(200 + size, size, size / 2, size); roundobject.graphics.curveto(200, size, 200, size / 2); roundobject.graphics.curveto(200, 0, size / 2, 0); this.addchild(roundobject); 426 드로잉 API 사용

7 내장메서드를사용하여모양그리기 ActionScript 3.0에는원, 타원, 사각형, 모서리가둥근사각형등의일반모양을쉽게그릴수있는몇가지메서드가포함되어있습니다. Graphics 클래스의 drawcircle(), drawellipse(), drawrect(), drawroundrect() 및 drawroundrectcomplex() 메서드가이에해당합니다. 이러한메서드는 lineto() 및 curveto() 메서드대신사용할수있습니다. 하지만이러한메서드를호출하기전에선및채우기스타일도지정해야합니다. 다음예제에서는폭과너비가 100픽셀인빨강, 녹색및파랑사각형을그리는예제를다시구성한것입니다. 다음코드는 drawrect() 메서드를사용하고채우기색상의알파를 50%(0.5) 로지정합니다. var squaresize:uint = 100; var square:shape = new Shape(); square.graphics.beginfill(0xff0000, 0.5); square.graphics.drawrect(0, 0, squaresize, squaresize); square.graphics.beginfill(0x00ff00, 0.5); square.graphics.drawrect(200, 0, squaresize, squaresize); square.graphics.beginfill(0x0000ff, 0.5); square.graphics.drawrect(400, 0, squaresize, squaresize); square.graphics.endfill(); this.addchild(square); Sprite 또는 MovieClip 객체에서 graphics 속성으로만든드로잉내용은항상해당객체에포함된모든자식표시객체의뒤에나타납니다. 또한 graphics 속성내용은별도의표시객체가아니므로 Sprite 또는 MovieClip 객체의자식목록에나타나지않습니다. 예를들어다음 Sprite 객체는 graphics 속성을사용하여그린원으로, 해당자식표시객체목록에 TextField 객체가있습니다. var mysprite:sprite = new Sprite(); mysprite.graphics.beginfill(0xffcc00); mysprite.graphics.drawcircle(30, 30, 30); var label:textfield = new TextField(); label.width = 200; label.text = "They call me mellow yellow..."; label.x = 20; label.y = 20; mysprite.addchild(label); this.addchild(mysprite); TextField 는 graphics 객체로그린원형의위쪽에표시됩니다. 내장메서드를사용하여모양그리기 427

8 그래디언트선및채우기만들기 graphics 객체는또한단색보다그래디언트를사용하여획및채우기를그릴수있습니다. 그래디언트획은 linegradientstyle() 메서드를사용하여만들고, 그래디언트채우기는 begingradientfill() 메서드를사용하여만듭니다. 두메서드모두동일한매개변수를사용합니다. 처음 4개의매개변수인유형, 색상, 알파, 비율은필수항목입니다. 나머지 4개의매개변수는선택사항이지만고급사용자정의시유용합니다. 첫번째매개변수는만들려는그래디언트유형을지정하며사용할수있는값은 GradientFill.LINEAR 또는 GradientFill.RADIAL입니다. 두번째매개변수는사용할색상값의배열을지정합니다. 선형그래디언트에서는색상이왼쪽에서오른쪽으로배열되고방사형그래디언트에서는안쪽에서바깥쪽으로배열됩니다. 배열색상의순서는그래디언트에서색상이그려지는순서를나타냅니다. 세번째매개변수는이전매개변수의해당색상에대한알파투명도값을지정합니다. 네번째매개변수는비율, 즉각색상이그래디언트에서가지는강도를지정합니다. 사용할수있는값은 0에서 255까지입니다. 이러한값은폭이나높이를나타내는것이아니라그래디언트에서의위치를나타냅니다. 즉, 0은그래디언트의처음을나타내고 255 는그래디언트의끝을나타냅니다. 비율의배열은순차적으로증가해야하며두번째및세번째매개변수에지정된색상및알파배열과동일한항목수를가져야합니다. 다섯번째매개변수인변형행렬은선택사항이지만간단한방법으로그래디언트의모양을효율적으로제어할수있으므로흔히사용됩니다. 이매개변수는 Matrix 인스턴스를사용합니다. 그래디언트에대한 Matrix 객체를만드는가장쉬운방법은 Matrix 클래스의 creategradientbox() 메서드를사용하는것입니다. 그래디언트에사용할 Matrix 객체정의 flash.display.graphics 클래스의 begingradientfill() 및 linegradientstyle() 메서드를사용하면모양에사용할그래디언트를정의할수있습니다. 그래디언트를정의하는경우행렬을이러한메서드의매개변수중하나로제공합니다. 행렬을정의하는가장쉬운방법은 Matrix 클래스의 creategradientbox() 메서드를사용하여그래디언트정의에사용되는행렬을만드는것입니다. creategradientbox() 메서드에전달되는매개변수를사용하여그래디언트의크기, 회전및위치를정의합니다. creategradientbox() 메서드는다음과같은매개변수를사용합니다. 그래디언트상자폭 : 그래디언트가펼쳐지는폭 ( 단위 : 픽셀 ) 그래디언트상자높이 : 그래디언트가펼쳐지는높이 ( 단위 : 픽셀 ) 그래디언트상자회전 : 그래디언트에적용될회전 ( 단위 : 라디안 ) 수평이동 : 그래디언트가수평으로이동되는정도 ( 단위 : 픽셀 ) 428 드로잉 API 사용

9 수직이동 : 그래디언트가수직으로이동되는정도 ( 단위 : 픽셀 ) 예를들어다음과같은특성을갖는그래디언트를검토하십시오. GradientType.LINEAR ratios 배열이 [0, 255] 로설정된녹색과파랑의두색상 SpreadMethod.PAD InterpolationMethod.LINEAR_RGB 다음예제에서는 creategradientbox() 메서드의 rotation 매개변수만다르고다른모든설정은동일한그래디언트를보여줍니다. width = 100; height = 100; rotation = 0; tx = 0; ty = 0; width = 100; height = 100; rotation = Math.PI/4; // 45 tx = 0; ty = 0; width = 100; height = 100; rotation = Math.PI/2; // 90 tx = 0; ty = 0; 그래디언트선및채우기만들기 429

10 다음예제에서는녹색에서파란색으로바뀌는선형그래디언트효과를보여줍니다. 이때 creategradientbox() 메서드의 rotation, tx 및 ty 매개변수만다르고다른모든설정은동일합니다. width = 50; height = 100; rotation = 0; tx = 0; ty = 0; width = 50; height = 100; rotation = 0 tx = 50; ty = 0; width = 100; height = 50; rotation = Math.PI/2; // 90 tx = 0; ty = 0; width = 100; height = 50; rotation = Math.PI/2; // 90 tx = 0; ty = 50; 다음예제와같이 creategradientbox() 메서드의 width, height, tx 및 ty 매개변수는방사형그래디언트채우기의크기와위치에도영향을줍니다. width = 50; height = 100; rotation = 0; tx = 25; ty = 0; 430 드로잉 API 사용

11 다음코드는마지막에보여준방사형그래디언트를만듭니다. import flash.display.shape; import flash.display.gradienttype; import flash.geom.matrix; var type:string = GradientType.RADIAL; var colors:array = [0x00FF00, 0x000088]; var alphas:array = [1, 1]; var ratios:array = [0, 255]; var spreadmethod:string = SpreadMethod.PAD; var interp:string = InterpolationMethod.LINEAR_RGB; var focalptratio:number = 0; var matrix:matrix = new Matrix(); var boxwidth:number = 50; var boxheight:number = 100; var boxrotation:number = Math.PI/2; // 90 var tx:number = 25; var ty:number = 0; matrix.creategradientbox(boxwidth, boxheight, boxrotation, tx, ty); var square:shape = new Shape; square.graphics.begingradientfill(type, colors, alphas, ratios, matrix, spreadmethod, interp, focalptratio); square.graphics.drawrect(0, 0, 100, 100); addchild(square); 그래디언트채우기의폭과높이는 Graphics 객체로그린폭이나높이가아닌그래디언트행렬의폭과높이에따라결정됩니다. Graphics 객체를사용하여그리면그래디언트행렬의해당좌표에존재하는객체가그려집니다. Graphics 객체의 shape 메서드중하나 ( 예 : drawrect()) 를사용하더라도그려지는모양의크기까지그래디언트를확장할수는없습니다. 그래디언트의크기는그래디언트행렬자체에지정해야합니다. 다음을통해그래디언트행렬의차원과드로잉자체의차원간에존재하는시각적차이를확인할수있습니다. var myshape:shape = new Shape(); var gradientboxmatrix:matrix = new Matrix(); gradientboxmatrix.creategradientbox(100, 40, 0, 0, 0); myshape.graphics.begingradientfill(gradienttype.linear, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientboxmatrix); myshape.graphics.drawrect(0, 0, 50, 40); myshape.graphics.drawrect(0, 50, 100, 40); 그래디언트선및채우기만들기 431

12 myshape.graphics.drawrect(0, 100, 150, 40); myshape.graphics.endfill(); this.addchild(myshape); 이코드는빨강, 녹색, 파랑이똑같이배분된동일한채우기스타일을사용하여세가지그래디언트를그립니다. 그래디언트는픽셀폭이각각 50, 100, 150 인 drawrect() 메서드를사용하여그려집니다. begingradientfill() 메서드에지정된그래디언트행렬은 100 픽셀의폭을사용하여만들어집니다. 즉, 첫번째그래디언트에는그래디언트스펙트럼의반만포함되고, 두번째그래디언트에는스펙트럼전체가포함되며, 세번째그래디언트에는스펙트럼전체를포함하면서추가적으로 50 픽셀의파랑이오른쪽으로확장됩니다. linegradientstyle() 메서드는그래디언트를정의하는것외에는 begingradientfill() 과유사하게동작하지만그리기전에 linestyle() 메서드를사용하여획두께를지정해야합니다. 다음코드는빨강, 녹색및파랑그래디언트획을가진상자를그립니다. var myshape:shape = new Shape(); var gradientboxmatrix:matrix = new Matrix(); gradientboxmatrix.creategradientbox(200, 40, 0, 0, 0); myshape.graphics.linestyle(5, 0); myshape.graphics.linegradientstyle(gradienttype.linear, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientboxmatrix); myshape.graphics.drawrect(0, 0, 200, 40); this.addchild(myshape); Matrix 클래스에대한자세한내용은 414 페이지의 Matrix 객체사용 을참조하십시오. 드로잉메서드와 Math 클래스사용 Graphics 객체는원과사각형을그리지만특히드로잉메서드를 Math 클래스의속성및메서드와함께사용할경우보다복잡한형태를그릴수도있습니다. Math 클래스에는일반적인수학적비율을나타내는상수가포함되어있습니다. 예를들어, 원주율에대한상수인 Math.PI ( 약 ) 가이에해당합니다. 또한 Math.sin(), Math.cos() 및 Math.tan() 등의삼각함수에대한메서드도포함합니다. 이러한메서드및상수를사용하여모양을그리면특히반복또는재귀와함께사용할경우더욱동적인시각효과를만들수있습니다. Math 클래스의많은메서드는원치수를각도단위가아닌라디안단위로예상하므로, Math 클래스의일반적인용도는이두유형의단위를상호변환하는것입니다. var degrees = 121; var radians = degrees * Math.PI / 180; trace(radians) // 다음예제에서는사인파와코사인파를만들어특정한값에대한 Math.sin() 메서드와 Math.cos() 메서드의차이점을강조표시합니다. var sinwaveposition = 100; var coswaveposition = 200; var sinwavecolor:uint = 0xFF0000; 432 드로잉 API 사용

13 var coswavecolor:uint = 0x00FF00; var wavemultiplier:number = 10; var wavestretcher:number = 5; var i:uint; for(i = 1; i < stage.stagewidth; i++) { var sinposy:number = Math.sin(i / wavestretcher) * wavemultiplier; var cosposy:number = Math.cos(i / wavestretcher) * wavemultiplier; } graphics.beginfill(sinwavecolor); graphics.drawrect(i, sinwaveposition + sinposy, 2, 2); graphics.beginfill(coswavecolor); graphics.drawrect(i, coswaveposition + cosposy, 2, 2); 드로잉 API 를사용한애니메이션 드로잉 API를사용하여내용을만들면내용을한번만배치하도록제한되지않는다는장점이있습니다. 그릴때사용하는변수를유지하거나수정하여드로잉내용을수정할수있습니다. 특정프레임기간동안또는타이머를사용하여변수를변경하거나다시그림으로써애니메이션을전달할수있습니다. 예를들어, 다음코드는 Event.ENTER_FRAME 이벤트수신을통해각전달프레임으로표시를변경하고현재각도를증가시켜 graphics 객체를지우고업데이트된위치에서다시그리도록지시합니다. stage.framerate = 31; var currentdegrees:number = 0; var radius:number = 40; var satelliteradius:number = 6; var container:sprite = new Sprite(); container.x = stage.stagewidth / 2; container.y = stage.stageheight / 2; addchild(container); var satellite:shape = new Shape(); container.addchild(satellite); addeventlistener(event.enter_frame, doeveryframe); function doeveryframe(event:event):void { currentdegrees += 4; var radians:number = getradians(currentdegrees); var posx:number = Math.sin(radians) * radius; var posy:number = Math.cos(radians) * radius; 드로잉 API 를사용한애니메이션 433

14 satellite.graphics.clear(); satellite.graphics.beginfill(0); satellite.graphics.drawcircle(posx, posy, satelliteradius); } function getradians(degrees:number):number { return degrees * Math.PI / 180; } 현저히다른결과를얻기위한실험으로 currentdegrees, radius, satelliteradius 및해당코드의시작부분에있는초기난수변수를수정해볼수있습니다. 예를들어, radius 변수를감소시키거나 totalsatellites 변수를증가시켜봅니다. 다음은드로잉 API 를시각적으로표시하는방법을보여주는예제로서, 시각적으로는복잡하지만생성원리는단순합니다. 예제 : Algorithmic Visual Generator Algorithmic Visual Generator 예제에서는원궤도를따라움직이는여러가지 위성 또는원형을스테이지에동적으로그립니다. 살펴본기능은다음과같습니다. 드로잉 API 를사용하여동적모양을가진기본모양그리기 드로잉에사용된속성과사용자상호작용연결 각프레임에서스테이지를지우고다시그려서애니메이션전달이전하위섹션의예제에서는 Event.ENTER_FRAME 이벤트를사용하여단일 위성 또는애니메이션을적용했습니다. 이예제에서는이를바탕으로여러위성의시각적표시를즉시업데이트하는각종슬라이더의제어판을만듭니다. 이예제는코드를외부클래스로정형화하고위성생성코드를루프내에포함시켜각위성에대한참조를 satellites 배열에저장합니다. 이샘플에대한응용프로그램파일을구하려면 learn_programmingas3samples_flash_kr을방문하십시오. 응용프로그램파일은 Samples/ AlgorithmicVisualGenerator 폴더에있습니다. 이폴더에는다음과같은파일이있습니다. 파일 AlgorithmicVisualGenerator.fla com/example/programmingas3/ algorithmic/ AlgorithmicVisualGenerator.as 설명 Flash(FLA) 또는 Flex(MXML) 형식의기본응용프로그램파일입니다. 스테이지에대한위성을드로잉하고제어판의이벤트에응답하여위성드로잉에영향을미치는변수를업데이트하는등의기본응용프로그램기능을제공하는클래스입니다. 434 드로잉 API 사용

15 파일 com/example/programmingas3/ algorithmic/controlpanel.as com/example/programmingas3/ algorithmic/satellite.as 설명 몇개의슬라이더로사용자상호작용을관리하고상호작업발생시이벤트를전달하는클래스입니다. 중앙포인트주위를궤도로회전하는표시객체를나타내고현재드로잉상태와관련된속성을포함하는클래스입니다. 리스너설정 응용프로그램은먼저세개의리스너를만듭니다. 첫번째리스너는제어판에서전달이벤트를수신하며위성재구성이필요합니다. 두번째리스너는 SWF 파일의스테이지크기변경사항을수신합니다. 세번째리스너는 SWF 파일의각전달프레임을수신하고 doeveryframe() 함수를사용하여그리기를다시수행합니다. 위성만들기 이러한리스너가설정되면 build() 함수가호출됩니다. 이함수는먼저 clear() 함수를호출하여 satellites 배열을비우고스테이지에대한이전드로잉을모두지웁니다. 제어판이이와같은이벤트를보낼때마다 ( 예를들어색상설정이변경될때마다 ) build() 함수를다시호출할수있으므로이과정이필요합니다. 이경우위성을제거하고다시만들어야합니다. 그런다음함수는생성에필요한초기속성 ( 예 : 궤도의임의위치에서시작하는 position 변수, 이예제에서위성이생성되면변경되지않는 color 변수 ) 을설정하여위성을생성합니다. 각위성이생성되었으면해당참조가 satellites 배열에추가됩니다. doeveryframe() 함수가호출되면해당함수가이배열의모든위성에대해업데이트됩니다. 위성위치업데이트 doeveryframe() 함수는응용프로그램의애니메이션프로세스의핵심요소로서, SWF 파일의프레임속도와동일한속도로각프레임마다호출됩니다. 그리기변수는약간씩달라지므로이함수는애니메이션모양을전달합니다. 함수는먼저이전드로잉을모두지우고배경을다시그립니다. 그런다음각위성컨테이너를반복하여각위성의 position 속성을증가시키고제어판의사용자상호작용으로인해변경되었을수있는 radius 및 orbitradius 속성을업데이트합니다. 마지막으로위성은 Satellite 클래스의 draw() 메서드를호출하여새로운위치로업데이트됩니다. 카운터 i는 visiblesatellites 변수까지만증가됩니다. 제어판을통해표시되는위성의수를사용자가제한한경우루프의나머지위성은다시그려지지않고숨겨져야하기때문입니다. 이러한경우는그리기를담당하는루프바로다음의루프에서발생합니다. doeveryframe() 함수가완료되면 visiblesatellites 수가화면위치에서업데이트됩니다. 예제 : Algorithmic Visual Generator 435

16 사용자상호작용에대한응답 사용자상호작용은제어판을통해발생하며 ControlPanel 클래스에서관리합니다. 이클래스는각슬라이더의개별적인최소값, 최대값및기본값과함께리스너를설정합니다. 사용자가이러한슬라이더를이동하면 changesetting() 함수가호출되며이함수는제어판의속성을업데이트합니다. 변경사항으로인해표시를재구성해야하는경우이벤트가전달되어기본응용프로그램파일에서처리됩니다. 제어판설정이변경되면 doeveryframe() 함수는업데이트된변수를사용하여각위성을그립니다. 구체적인사용자정의 이예제는드로잉 API를사용하여시각적표시생성방법을보여주는간단한예제로서, 비교적간단한코드행을사용하여꽤복잡해보이는대화형환경을만듭니다. 하지만이예제를약간수정하여기능을추가할수있습니다. 몇가지아이디어는다음과같습니다. doeveryframe() 함수는위성의색상값을증가시킬수있습니다. doeveryframe() 함수는시간경과에따라위성반경을축소하거나확장할수있습니다. 위성반경은원형일필요가없습니다. 예를들어, Math 클래스를사용하여사인파에따라이동할수있습니다. 위성은다른위성과의히트감지를사용할수있습니다. 드로잉 API를사용하여 Flash 제작환경에서시각효과를생성함으로써런타임에기본모양을그릴수도있습니다. 하지만손으로제작할수없는다양하고넓은범위의시각효과를생성하는데도사용될수있습니다. ActionScript 제작자는드로잉 API와약간의수학기능을사용하여여러가지다양한작품에생동감을불어넣을수있습니다. 436 드로잉 API 사용

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var