본문 바로가기
강좌 모음/플래시(Flash) 강좌

3-18. 마스크

by 리치샘 2016. 6. 23.

제3장 애니메이션 기초

18. 마스크 효과


    마스크(Mask)는 무엇인가를 덮어서 가린다'는 뜻입니다. 입을 가리는 마스크를 생각해보면 될 것 같은데, 이 경우 마스크는 타인이 보기에는 입이 가려져 보이지 않게 되지만, 플래시 마스크는 반대 개념으로 생각을 해야 합니다.
    즉, 마스크가 씌워진 부분만 보이게 된다는 것입니다.
    - 참고 자료 : 마스크의 개념

    http://prezi.com/pmt9etltn5fn/?utm_campaign=share&utm_medium=copy&rc=ex0share

    마스크 효과는 마스크 당하는 레이어(Masked Layer)와 마스크 레이어(Maks Layer)가 짝을 이루어야 합니다.
    마스크 레이어 하나에 마스크 당하는 레이어는 1개 이상이 될 수도 있습니다.

    여기서는 마스크 효과를 이용하여 서치 라이트를 만들어보겠습니다.

    mask01_ex.fla

    완성된 예제입니다.


    [만드는 방법]

    아주 간단합니다. 마스크 당하는 레이어에 그림 등을 넣고, 레이어를 추가합니다.  이 레이어 이름 위에서 마우스 오른쪽 버튼을 눌러 메뉴 중 [마스크; Mask]를 선택합니다. 


1. 마스크 당하는 레이어 만들기

    위의 예제 파일을 플래시에서 열어보면 아래 그림과 같이 에펠탑에서 본 파리 시내 전경 사진이 들어 있는 레이어와 가장자리가 부드럽게 처리된 하얀색의 원이 들어 있는 Mask 레이어 등 2개의 레이어로 구성되어 있음을 알 수 있을 것입니다.

    여러 장의 사진을 붙여서 만든 파노라마 사진이어서 가로로 긴 사진입니다. 따라서 무비의 크기도 사진의 사이즈에 맞게 가로 600, 세로 150 픽셀로 설정해두었습니다.

2. 마스크 레이어 만들기

    이제 파리 레이어는 잠금 장치를 해두고, Mask 레이어에서 작업하겠습니다.
    원을 선택한 후 원을 사진 위로 자유롭게 이동하는 애니메이션을 만들어 보십시오.

    원이 그래픽 심볼로 등록되어 있으므로 키프레임에 있는 원을 선택한 후 크기, 색상 등을 변경할 수도 있습니다.
    그렇게 하면 더욱더 다이나믹한 효과를 얻을 수 있습니다.

    * 파리 그림이 보이지 않을 때는 Mask 레이어의 프레임 길이만큼 프레임을 늘려주면 됩니다.(F5키 이용)

    마스크 효과를 내는 방법은 아주 간단합니다.
    아래 그림과 같이 마스크로 만들어줄 레이어를 선택한 후 마우스 오른쪽 단추를 눌러 [마스크]를 실행하면 되는 것입니다.

    그러면 마스크당한 레이어와 마스크 레이어의 포함 관계를 다음 그림과 같이 보여줍니다.
    동시에 스테이지에는 마스크로 사용한 원 영역만 보이게 됩니다.

    Ctrl + Enter키를 눌러 무비를 만들어보십시오.


    또 다른 예제 
    다음 무비는 파리 사진을 부분적으로 확대 축소하여 동적인 효과를 좀더 강하게 만든 예입니다.
    여러분도 만들어보십시오.



3. [예제1] 마스크를 이용한 그래프

    간단한 액션과 음향 효과를 사용하긴 했습니다만, 마스크를 사용하면 다음과 같은 그래프를 만들 수도 있습니다.



4. [예제 2] 역발상 마스크

    일반적으로 아래의 그림 일부를 보이게 하는 객체를 이용하여 마스크 효과를 만드는데 비해 이 예제는 아래의 그림이 움직이게 하고 그 위에 글을 얻어 만든 마스크 효과입니다.
    (제작하는 방법은 영상시 만들기에서 다루겠습니다)