- 복제를 이용해 Grid(격자)모양을 만들어 보는 예제.
[code as3]
package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;
import flash.events.IEventDispathcer;
import flash.geom.ColorTransform;
public class Duplicate_pattern extends Sprite
{
public function Duplicate_pattern()
{
super();
seedBox = new Sprite();
seedBox.x = 80;
seedBox.y = 20;
addChild( seedBox );
createButton();
}
private var seedBox:Sprite;
private var normalBtn:Sprite;
private var alphaBtn:Sprite;
private var scaleBtn:Sprite;
private var colorBtn:Sprite;
private var row:int = 8;
private var col:int = 10;
private var tot:int = row * col;
private var gap:Numer = 30;
private function createButton() : void
{
var g:Graphics;
if( !normalBtn )
{
normalBtn = new Sprite();
g = normalBtn.graphics;
g.clear();
g.beginFill( 0xFFFFFF, 1 );
g.drawRect( 0, 0, 50, 20 );
g.endFill();
normalBtn.x = 20;
normalBtn.y = 20;
normal.buttonMode = true;
addChild( normalBtn );
configListener( normalBtn );
}
if( !alphaBtn )
{
alphaBtn = new Sprite();
g = alphaBtn.graphics;
g.clear();
g.beginFill( 0xFFFFFF, 1 );
g.drawRect( 0, 0, 50, 20 );
g.endFill();
alphaBtn.x = 20;
alphaBtn.y = normalBtn.y + gap;
alphaBtn.buttonMode = true;
addChild( alphaBtn );
configListener( alphaBtn );
}
if( !scaleBtn )
{
scaleBtn = new Sprite();
g = scaleBtn.graphics;
g.clear();
g.beginFill( 0xFFFFFF, 1 );
g.drawRect( 0, 0, 50, 20 );
g.endFill();
scaleBtn.x = 20;
scaleBtn.y = alphaBtn.y + gap;
scaleBtn.buttonMode = true;
addChild( scaleBtn );
configListener( scaleBtn );
}
if( !colorBtn )
{
colorBtn = new Sprite();
g = colorBtn.graphics;
g.clear();
g.beginFill( 0xFFFFFF, 1 );
g.drawRect( 0, 0, 50, 20 );
g.endFill();
colorBtn.x = 20;
colorBtn.y = scaleBtn.y + gap;
colorBtn.buttonMode = true;
addChild( colorBtn );
configListener( colorBtn );
}
}
private function configListener( dispatcher:IEventDispatcher ) : void
{
dispatcher.addEventListener( MouseEvent.CLICK, btnClickHandler );
}
private function btnClickHandler( e:MouseEvent ) : void
{
switch( e.target )
{
case normalBtn :
createNormal();
break;
case alphaBtn :
createAlpha();
break;
case scaleBtn :
createScale();
break;
case colorBtn :
createColor();
break;
}
}
private function removeAllChild() : void
{
while( seedBox.numChildren )
{
seedBox.removeChildAt( 0 );
}
}
private function createNormal() : void
{
removeAllChild();
var i:int = 0;
for( i = 0; i < tot; i++ )
{
var temp:Sprite = new Seed();
temp.x = ( i % col ) * 40 + gap;
temp.y = Math.floor( i / col ) * 40 + gap;
seedBox.addChild( temp );
}
}
private function createAlpha() : void
{
removeAllChild();
var i:int = 0;
for( i = 0; i < tot; i++ )
{
var temp:Sprite = new Seed();
temp.x = ( i % col ) * 40 + gap;
temp.y = Math.floor( i / col ) * 40 + gap;
temp.alpha = i / tot;
seedBox.addChild( temp );
}
}
private function createScale() : void
{
removeAllChild();
var i:int = 0;
for( i = 0; i < tot; i++ )
{
var temp:Sprite = new Seed();
temp.x = ( i % col ) * 40 + gap;
temp.y = Math.floor( i / col ) * 40 + gap;
temp.scaleX = temp.scaleY = i / tot;
seedBox.addChild( temp );
}
}
private function createColor() : void
{
removeAllChild();
var i:int = 0;
for( i = 0; i < tot; i++ )
{
var temp:Sprite = new Seed();
temp.x = ( i % col ) * 40 + gap;
temp.y = Math.floor( i / col ) * 40 + gap;
var ct:ColorTransform = new ColorTransform();
ct.color = Math.random() * 0xFFFFFFFF;
temp.transform.colorTransform = ct;
seedBox.addChild( temp );
}
}
}
}
[/code]
- 복제하는 형태는 앞서 한 예제에서 같은 형태이고 복제한것을 Grid 형태로 찍는 것이다. 그리고 또 다른점
은 버튼을 fla파일에서 직접 만들어 넣었다면 이번 예제에서는 Graphics클래스를 이용하여 만든다.
처음 맨 밑바닥의 도화지 역할을 하는 seedBox를 Sprite로 객체를 생성하여 addChild해주고, 버튼들도
그 위에 좌표를 설정해주어 각각 만들어 준다.
161번째 줄은 버튼을 클릭할 때마다 생성되는 seedBox를 지우고 다시 그려주는 부분이다.
버튼을 누를때마다 각각의 seed 무비들이 마구 나오면 알아볼 수 없기 때문에 numChild라는 속성을 이용
하여 numChild가 있다면( numchild = 1 ) removeChildAt이라는 속성으로 지워준다. numChild가 한개라서
1이지만 지울때의 메소드에서는 인덱스로 인식하기때문에 0이라고 해준다.
격자로 찍기 위해서 공식을 이용하여 x와 y좌표에 적용시키면 되는데 위에서는 가로 10줄, 세로 8줄로 미리
정의를 하고 나머지공식을 이용하여 공식을 만들었다.
for문에서 tot까지 계속해서 1씩 증가하는 i 변수와 고정값인 col변수를 나누어 나오는 나머지와 seed클래스
에서 생성되는 무비클립이 적정한 크기로 떨어져서 생성되도록 40을 곱하고 30을 더해준다. y좌표도 마찬가
지로 공식을 구하여 적용시킨다. i 인덱스가 0부터 시작하므로 Math클래스에서 내림메소드 floor를 이용하
여 적용시킨다.
이렇게 x좌표와 y좌표의 결과를 찍어보면,
30 / 30
70 / 30
110 / 30
150 / 30
190 / 30
230 / 30
270 / 30
310 / 30
350 / 30
390 / 30
30 / 70
70 / 70
110 / 70
150 / 70
190 / 70
230 / 70
270 / 70
310 / 70
350 / 70
390 / 70
30 / 110
70 / 110
110 / 110
150 / 110
190 / 110
230 / 110
270 / 110
310 / 110
350 / 110
390 / 110
....
이런 값이 적용되어 80개의 seed가 위와 같은 모양으로 찍히게 된다. 열의 간격은 나머지가 똑같은 수로
나누기 때문에 패턴이 같은 식으로 나오게 되고, 행의 간격은 40씩 증가하게 되는 결과가 나온다.
댓글 없음:
댓글 쓰기