본문 바로가기

무언가 만들기 위한 지식/Action Script

드로잉 메소드(Drawing Method)

플래쉬 메뉴의 왼쪽의 어떠한 메뉴들도 실제로 스크립트로 모두 구현이 가능하다.
그중에 드로잉 부분에 대해 알아보자.
드로잉을 스크립트로 짜게된다면 동적으로 선이나 도형을 보여줄 수 있게된다.
그점을 이용하여 다양한 효과를 낼 수 있다.

이에 관련하여 좀 흥미진진한 것을 하나 만들어 보았다.
다음 코드들은 탄력을 갖고 고무줄처럼 움직이는 4개의 점을 잇는 선들이다.

두개의 코드가 있는데 첫번째는 _root의 타임라인에 있는 코드고 두번쨰는 cir인스턴스 마다 첫번째 프래임에 있는 코드이다.


위는 앞에서 언급한바와 같이 선을 긋는 스크립트 코드이다.
createEmptyMoveClip은 단순히 빈 무비클립을 생성해 주는 것이다. 첫번째 매개변수는 생성된 인스턴스 이름이며, 두번째는 Depth이다.

매번 프래임 실행시마다 라인을 그린다. 만약 여기서 mc.clear()란 부분을 제외한다면 엄청 난 선들이 생성되어 버벅거릴 것이다. 더욱이 fps가 높다면 컴퓨터가 버벅거릴 것이다. clear()란 선들 및 기타 그려진 도구들을 지워준다. 즉 매프래임마다 다지우고 새로 만들기 때문에 하나의 선이 계속 움직이는 것처럼 보인다.

선을 그려주기위해서는 먼저 선스타일을 필수적으로 정해야 한다.

양식 : lineStyle(굵기,rgb,알파값)

굴기는 정수형이고 rgb는 총 (255,255,255)가 연속된 수니 총 24자리의 2진수가 필요하다. 위의 0x000000는 000000000000000000000000를 16진수로 표현한 것이다.(2진수의 4자리는 16진수의 1자리-16진수는 많은 2진수를 표현하기 쉽다.), 마지막은 알파값(투명도)이다. 그밖에 또 여러 옵션이 있지만 쓰이는것은 대부분이 정도 일 것이다.

다음 선의 시작점 셋팅은 moveTo(x좌표, y좌표)를 통해 한다. 이는 선을 시작할 좌표를 정해주는 것이다.
선의 마지막 점 셋팅은 lineTo(x좌표, y좌표)로 할 수 있다. lineTo를 연속으로 써준다면 연속적인 라인을 생성할 수 있다.

마지막 swapDepths는 깊이설정을 통해 선이 아래로 보이게 하기 위함이다.


다음 코드들은 각 cir(4개의 cir가 존재함-동그라미 객체)내의 첫번째 프래임에 작성된 코드이다.


   다음은 cir(원모양)들의 움직임을 등록한 코드이다.
간단하게 요약하자면 마우스와 해당 cir과의 거리를 구한다. 거리구하는 방식은 피타고라스의 공식을 이용하여 대각선의 거리를 구하는 것이다.
그 거리가 일정 거리(위에서는 30) 이내라면 마우스를 따라 움직이고 그렇지 않다면 진동의 움직임으로 초기위치로 대돌아 간다. 복잡해 보아도 이전에 부드러움 무비움직임에서 언급한 2)감속에 의한 움직임 과 3) 진동에 의한 움직임 2개를 으용한 것 뿐이다.

완성된 모습은 다음과 같다.