촛불 버튼

 

 

 

 

촛불 버튼

 

 

 

 

1. 작업창 크기; 700*500, 이미지 크기; 700*500, 난이도; ★★★

 

이번 영상은 각종 포토샵 자료를 소스로 제공하면서 가지 수가 많아 압축을 올린다. 여기서 멈추지 말고 소스들을 보면서 이 정도는 나도 만들 수 있다는 생각들을 가지기를 바란다. 만드는 것은 어려울 것이 하나도 없다. 사실 바탕 이미지도 포토샵에서 합성한 것인데 별로 정교하지도 않다. 작업에 필요한 소스들을 하나하나 만드는 재미는 어떤 것과도 바꿀 수 없다.

 

바탕 이미지 1을 불러와 작업창에 맞추고 촛불 png 불러와 벗겨내어 심지로 옮긴다. 이어 각각의 png를 무비클립으로 묶고 이름을 candlelight라 하고 이를 다시 무비클립으로 묶고 아래 스크립트를 각각 적고 플레이를 해보면서 위치를 조정한다.

 

onSelfEvent (load)

{

import! flash.display.BitmapData;

import! flash.geom.Point;

import! flash.filters.*;

candlelight.fire.filters = [new flash.filters.BlurFilter(4, 4, 1)];

speed1 = -7; // 움직임 속도...

offset1 = new Point(0, 0); // 적용될 위치...

pt = new Point(0, 0);

var bitmapData_1:BitmapData = new BitmapData(700, 500, false, 0x00CCCCCC);

onEnterFrame = function()

{

offset1.y -= speed1;

bitmapData_1.perlinNoise(36, 136, 1, 8, 0, 0, 0, 1, [offset1]);

candlelight.filters = [new DisplacementMapFilter(bitmapData_1, pt, 1, 1, 5, 15, "COLOR")];

}

}

 

 

 

 

2. 이를 다시 무비클립으로 묶고 e1이라 표시하고 e1을 열고 타임라인 1, 2 프레임에 스톱, 1프레임에 remove, 2프레임에 place를 준다. 위 무비클립은 같은 작업을 하고 이름을 e2로 한다.

 

 

 

 

3. 이어 70/70으로 동그라미 그려 필타입=none으로 하고 각각 촛불 위에 위치시킨다. 가운데 촛불 e1 위에 있는 투명세이프를 b1, 그 위 세이프를 b2라 한다. 이 둘을 다시 카피해 붙이고 각각 무비클립으로 묶고 b1을 btn1, b2를 btn2라 하고 무비클립으로 열고 1, 2프레임에 스톱을 주고 1프레임에 remove, 2프레임에 place를 준다.

 

 

 

 

4. 바탕2 이미지 불러와 작업창에 맞추고 이어 B-Boy 소스 불러와 역시 350/250에 위치시키고 눈을 감겨 놓는다. 300/320으로 동그라미 그려 필타입=솔리드, 색상=흰색, 투명도 25를 주고 320/240에 위치시키고 이를 카피 하나를 더 만들어 서브 셀렉션툴을 선택하고 오른쪽 위 꼭지점을 700/0으로 이동 시키고 위 그림과 같은 모양이 나오도록 가다듬는다. 이어 이 둘을 블록으로 잡아 그룹핑-그룹 에스 세이프, [아니오]로 하나의 세이프로 만든다.

 

 

 

 

5. 흰색 세이프 선택하고 타임라인 1프레임에 Looping continuously-Surfin_Pistons를 주고 에펙창에서 듀레이션 255, 높이값을 10으로 주고 이를 컨버트 투 무비클립 [예]를 한다. 이어 배경의 Music도 펜툴로 오려 적당한 효과를 준다. 이는 설명 없이 진행한다. 영상의 질을 높이려면 소스를 마구잡이로 사용할 것이 아니라 가능하면 그 이미지를 최대한 살려 돋보이게 하려는 노력이 필요하다.

 

 

 

 

6. 비보이에 어울리는 사운드도 넣어 보자. 아웃라인 씬을 선택하고 빈 무비클립으로 불러와 이름을 song이라 하고 송을 열고 타임라인 1프레임에 사운드-플레이 사운드를 선택하여 나타나는 스크립트창에서 임포트를 클릭해 내 컴에서 원하는 음을 선택하고 열기를 클릭하여 로드된 음악을 선택하여 스크립트에 입력한다. 이어 255프레임에 스톱을 주고 244프레임에 마우스 우클, 사운드-스톱 사운드를 선택하고 스크립트창에 해당 제목을 입력한다.

 

 

 

 

7. 바탕2 이미지부터 모두를 무비클립으로 묶고 다시 한 번 무비클립으로 한 다음, 이름을 boy라 하고 보이를 열고 1프레임에 스톱, 51-70프레임에 Appear into position-Fade_Std fade in을 주고 70프레임에 스톱을 준다. 오늘 영상은 메인을 한 영상으로만 한다. 여러분은 시도 넣고 다양한 화면을 연출해보기를 바란다.

 

 

 

 

8. 이제 바탕도 장식해 보자. 바탕 이미지를 카피해 카피한 이미지를 무비클립으로 묶고 bg라 하고 bg를 열고 1프레임에 스톱, 2-30프레임에 무비를 주고 윈도우-틴에서 알파 투명도를 50으로, 칼라 어드밴스에서 R 옵션값을 1000으로 준다.

이어 깜박임 소스 불러와 420/180에 위치시키고 로테이션 30을 준 다음, 이를 무비클립으로 묶고 e3라 하고 e3를 열고 1프레임에 스톱, 2프레임에 페이드-인을 주고 51프레임에 페이드-아웃을 주고 60프레임에 스톱을 준다. 이어 아웃라인에서 e2 위에 위치시킨다.

 

 

 

 

9. 버튼 이미지 불러와 650/450에 위치시키고 이를 무비클립으로 묶고 이름을 btn3라 하고 btn3를 열고 타임라인 1프레임에 스톱을 주고 236프레임에 Appear into position-Fade_Std fade in을 주고 255프레임에 스톱을 준다. 이제 마지막으로 마우스 커서 불러와 350/250에 위치시킨다. 이 이미지 역시 포토샵에서 작업한 것인데 마음에는 별로 들지 않는다. 그러나 워낙 이런 면에는 약해서 손대면 손댈수록 이상해져 그냥 올린다. 이어 각각 해당 되는 곳에 스크립트를 적는다. 스크립트는 메모장에 적는다.

 

* 이번 영상은 그냥 따라만 하면 실력 향상에 아무 도움도 안 된다. 이런 걸 굳이 강좌에 넣는 것은 소스들을 잘 활용해 스토리를 만들고 이미지들을 포토샵에서 작업에 그 영상에 맞게 조정하는 팁들을 소개하는 것이다.

 

 

 

 

 

 

 

 

* b1 투명세이프를 선택하고

on (release) {
   e1.nextFrameAndPlay();
   btn2.nextFrameAndPlay();
}

* b2 투명세이프를 선택하고

on (release) {
    e2.nextFrameAndPlay();
    btn1.nextFrameAndPlay();
}

* btn1/b1을 선택하고

on (release) {
    _parent.bg.gotoAndPlay(2);
    _parent.e1.gotoAndStop(2);
    _parent.e2.gotoAndStop(2);
    _parent.boy.gotoAndPlay(2);
    _parent.e3.gotoAndPlay(2);
    _parent.btn3.gotoAndPlay(2);
}

* btn2/b2을 선택하고

on (release) {
    _parent.bg.gotoAndPlay(2);
    _parent.e1.gotoAndStop(2);
    _parent.e2.gotoAndStop(2);
    _parent.boy.gotoAndPlay(2);
    _parent.btn3.gotoAndPlay(2);
    _parent.e3.gotoAndPlay(2);
}

 

 

* btn3/버튼 이미지를 선택하고

on (release) {
    _parent.boy.gotoAndStop(1);
    _parent.bg.gotoAndStop(1);
    _parent.btn1.gotoAndStop(1);
    _parent.btn2.gotoAndStop(1);
    _parent.e1.gotoAndStop(1);
    _parent.e2.gotoAndStop(1);
    _parent.e3.gotoAndStop(1);
    this.gotoAndStop(1);
}

 

 

촛불버튼.swf

 

강좌소스-촛불버튼.zip [저작권위반의심, 본인만 확인가능]

 

촛불버튼.swf

1.74MB

강좌소스-촛불버튼.zip

1.81MB