움직이는 버튼과 마스크영상

 

1. Properties - Movie Properties를 클릭 후 다음과 같이 설정한다.

- Background color: 검정색, Width: 750, Height: 700, Frame rate: 25, SWF9

2. Layout - View - Automatically adjust~, 100%(또는 Fit Stage in Window)

3. Guides에서 다음과 같이 설정한다.

- Guides: Show, Ruler, Snap

- Grids: Show, Snap, H: 10, V: 10, 개체가 위에 위치

- Snap: Tolerance: 10

4. Stage에서 가이드라인을 다음과 같이 위치한다.

- 수직가이드라인: 45, 55, 695, 705

- 수평가이드라인: 20, 55, 100, 110, 590, 600, 645, 680

5. Outline - Insert - Import! Image - bg를 가져온다

- Transform: O=X, 정가운데

- Align: Align to: Stage

Align: Align Horizontal Center, Align Vertical Center

6. Stage에서 가이드라인과 Zoom Tool, Pen Tool, Subselection Tool, Knife Tool, Fill Transform Tool을 이용하여 버튼을 만든다. Width: 100, Height: 90

- btng: Gradient, 흰색(A: 50), 흰색(A: 0)

- btnt: Solid(#: CD0909)

- btnb: Solid(#: A00707)

7. Layout - Tools - Text Tool - 버튼위에 클릭하고 다음과 같이 설정한다.

- Arial Black, 20, 흰색. Edit: Image1, Transform: O=X, 정가운데, 버튼위에 위치한다.

8. Outline - Image1~btnb - 마우스 우클릭 - Grouping - Group as Movie Clip

- 이름: btn1, Transform: O=X, 정가운데, x: 105, y: 155

9. Outline - btn1에서 마우스 우클릭 - Copy Object - Scene1에서 마우스 우클릭 - Paste(3번) - 각각의 이름을 btn1, btn2, btn3, btn4로 한다.

- btn2: Transform: x: 220, y: 155, Properties: Edit: Image2, btn: 33800C, 174700

- btn3: Transform: x: 335, y: 155, Properties: Edit: Image3, btn: E84A0C, A62F00

- btn4: Transform: x: 450, y: 155, Properties: Edit: Image4, btn: 0D4794, 002960

10. Outline - btn1~4 - 마우스 우클릭 - Copy Object - Scene1에서 마우스 우클릭 - Paste(1번) - 각각의 이름을 btn5, btn6, btn7, btn8로 한다.

- btn5~8을 선택하고, btn4아래로 이동한다.

- btn5~8이 선택된 상태에서 Reshape - Flip Vertical을 클릭한다.

- btn5~8을 각각 펼쳐서 Text를 선택한 후 Reshape - Flip Vertical을 클릭한다.

- btn5: Transform: x: 300, y: 545, Properties: Edit: Image5

- btn6: Transform: x: 415, y: 545, Properties: Edit: Image6

- btn7: Transform: x: 530, y: 545, Properties: Edit: Image7

- btn8: Transform: x: 645, y: 545, Properties: Edit: Image8

11. Outline - btn1~8 - 마우스 우클릭 - Grouping - Group as Movie Clip

- 이름: btn, Transform: O=X, 정가운데

12. Outline - btn - Stage에서 앵커포인트를 원점으로 이동한다.

13. Layout - Tools - Rectangle Tool - Stage

14. Outline - btn - Shape - Properties에서 다음과 같이 설정한다.

- 이름: btn, Width: 100, Height: 45, Line: None, Fill: Solid

- Transform: O=X, 아래가운데, x: 105, y: 100

15. Outline - btn - btn - 마우스 우클릭 - Copy Object - btn에서 마우스 우클릭 - Paste(3번) 한 후 다음과 같이 설정한다.

- 원본 btn은 btn1위에 위치하고, 나머지 btn은 btn2~4위에 위치한다.

- btn2위에 btn: x: 220, y: 100

- btn3위에 btn: x: 335, y: 100

- btn4위에 btn: x: 450, y: 100

16. Outline - btn - btn4개를 선택 후 마우스 우클릭 - Copy Object - btn에서 마우스 우클릭 - Paste - Reshape: Flip Vertical - btn을 드래그하여 우측 아래에 위치한다.

17. Outline - btn - btn, btn1 - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: btn1, O=X, 정가운데, 나머지 btn과 btn2~8도 같은 방법으로 적용한다.

18. Outline - btn - btn1 - btn - Timeline에서 다음과 같이 설정한다.

- 5F에서 더블클릭, 10F에서 더블클릭 후 Transform Tool로 위로 드래그, 15F에서 더블클릭 후 Transform Tool로 아래로 드래그 한다.

18. Outline - btn - btn1 - btn1 - Timeline에서 다음과 같이 설정한다.

- 5F에서 더블클릭 후 Transform Tool로 위로 드래그, 10F에서 더블클릭 후 Transform Tool로 위로 드래그, 15F에서 더블클릭 후 Transform Tool로 아래로 드래그 한다.

19. Outline - btn - btn1 - btn - Timeline에서 효과를 모두 복사한 후 나머지 btn2~4안의 btn에 붙여넣기 한다.

20. Outline - btn - btn1 - btn1 - Timeline에서 효과를 모두 복사한 후 나머지 btn2~4안의 btn2~4에 붙여넣기 한다.

21. Outline - btn - btn5 - btn - Timeline에서 다음과 같이 설정한다.

- 5F에서 더블클릭, 10F에서 더블클릭 후 Transform Tool로 아래로 드래그, 15F에서 더블클릭 후 Transform Tool로 위로 드래그 한다.

22. Outline - btn - btn1 - btn1 - Timeline에서 다음과 같이 설정한다.

- 5F에서 더블클릭 후 Transform Tool로 아래로 드래그, 10F에서 더블클릭 후 Transform Tool로 아래로 드래그, 15F에서 더블클릭 후 Transform Tool로 위로 드래그 한다.

23. Outline - btn - btn5 - btn - Timeline에서 효과를 모두 복사한 후 나머지 btn6~8안의 btn에 붙여넣기 한다.

24. Outline - btn - btn5 - btn5 - Timeline에서 효과를 모두 복사한 후 나머지 btn6~8안의 btn6~8에 붙여넣기 한다.

25. Outline - btn - btn1~8 - Timeline에서 다음과 같이 설정한다.

- btn1~8의 1F에서 빈프레임을 추가한다. btn1~8의 1, 6, 11, 16F에 stop()을 적용한다.

26. Outline - Scene1 - Components - Effects - Filters - DropShadowFilter - Stage

27. Outline - DropShadowFilter의 이름을 btn으로 바꾼다.

28. Outline - 상위 btn - Text를 삭제한다.

29. Outline - 하위 btn - 마우스 우클릭 - Cut Object - 상위 btn - Paste - 하위 btn - 마우스 우클릭 - Grouping - Ungroup - 상위 btn을 합친다.

30. Outline - btn - Transform: O=X, 정가운데, x: 375, y: 350

31. Outline - btn - Parameters에서 다음과 같이 설정한다.

- 검정색, 45, 3, false, false, false, 4, 4, medium, 1

32. Outline - btn - btn1~8 - btn을 선택한 후 A: 0으로 한다.

33. Outline - Scene1 - Layout - Tools - Rectangle Tool - Stage

- Properties: 이름: ibg, Width:660, Height:500, Line: None, Fill: Solid, 회색, A: 100

- Transform: O=X, 위가운데, x: 375. y: 350

34. Layout - Tool - Transform Tool - Stage의 ibg의 아래부분을 위부분으로 겹친다.

35. Timeline - ibg의 10F에 더블클릭 - Stage의 ibg를 원래크기로 만든다. (PF을 해지)

36. Outline - btn - 마우스 우클릭 - Copy Object - Scene1 - 마우스 우클릭 - Paste - 이름: ibg, 펼친 후 안의 개체를 모두 삭제한 후, 하위 ibg를 잘라내고, 상위 ibg안에 붙여넣기 한다.

37. Outline - ibg - ibg - Timeline - ibg의 10F에 stop()을 적용한다.

38. Outline - ibg를 합친 후 Transform: O=X, 정가운데, x: 375, y: 100

39. Outline - Scene1 - Insert - Import! Image - img1~8

- Transform: O=X, 정가운데, x: 375, y: 350

- Properties: 이름: img1~8(위에서 아래로)

40. Outline - img1~8 - 마우스 우클릭 - Copy Object - Scene1 - 마우스 우클릭 - Paste in Place(1번)

41. Layout - Tools - Rectangle Tool - Stage

- Properties: 이름: mask, Width: 640, Height: 480, Line: None, Fill: Solid

- Transform: O=X, 정가운데, x: 375, y: 350

42. Outline - mask - 마우스 우클릭 - Break - Break into Pieces

- Regular Grid, 5, 4, Allow non-triangular pieces, Inflate all pieces by: 0.5, 1번째

43. Outline - mask - 이름: 1~20(위에서 아래로) - 모두 선택 후 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: mask, O=X, 정가운데 - 상위 mask에서 마우스 우클릭 - Grouping - Ungroup - Stop playing at end를 체크한다.

44. Outline - mask - Timeline - 1: 1~5F 우클릭 드래그 - Core Effects - Transform

- Effect: Start: Scale: 0

45. Timeline - 위에서 적용한 효과를 복사한 후 나머지 2~20까지 이어서 붙여넣기 한다.

46. Outline - mask - 마우스 우클릭 - Copy Object - Scene1에 마우스 우클릭 - Paste In Place(7번) - 이름: mask1~8(위에서 아래로)

47. Outline - img1~8을 mask1~8위로 위치한다.

48. Outline - img1, mask1 - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: img1, O=X, 정가운데, Use bottom object as mask를 체크한다.

49. Outline - img2~8, mask2~8을 48번 과정과 같이 적용한다.

50. Outline - img1~8을 무비클립 img1~8 아래에 다음과 같이 위치한다.

- 1, 8, 2, 1, 3, 2, 4, 3, 5, 4, 6, 5, 7, 6, 8, 7

 

51. Outline - img1~img7 - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: img, O=X, 정가운데, 펼치고 선택 후 Timelline에서 다음과 같이 설정한다.

- img1~8F: Movie Control - stop()

- img1, img8: 1F: Place, 2F: Remove(나머지 개체들도 우측 아래 계단식으로 적용한다)

52. Outline - img를 합친 후 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: img, O=X, 정가운데

53. Outline - img를 펼치고 선택 - Timeline에서 다음과 같이 설정한다.

- img: 1과 11F: stop(), - img: 2F - 마우스 우클릭 - Fade - Fade In

54. Outline - Scene1 - Insert - Import! Sound - effect sound1 - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: es

55. Outline - es를 펼치고 선택 후 Timeline - es - 1F: stop()

56. Outline에서 각각의 개체에 스크립트를 적용한다.

- ibg

onFrame (10) {

stop();

_root.img.gotoAndPlay(2);

}

- img

onFrame (11) {

stop();

_root.btn.btn1.gotoAndPlay(2);

}

onFrame (1) {

stop();

}

- btn - btn1

onFrame (6) {

stop();

_root.btn.btn2.gotoAndPlay(2);

}

- btn - btn1

on(rollOver){

_root.btn.btn1.gotoAndPlay(7);

}

on (rollOut,releaseOutside){

_root.btn.btn1.gotoAndPlay(12);

}

on(press){

_root.img.img.gotoAndStop(1);

_root.es.play();

}

* Button 만들기

 

1. Hand Tool로 Stage의 좌측 위 부분을 5시 방향으로 드래그 한다.

2. Zoom Tool로 Stage의 좌측 위 부분을 10시에서 5시 방향으로 드래그 하여 확대한다.

3. Rectangle Tool로 적당히 드래그 한다.

4. Properties에서 다음과 같이 설정한다.

- W/H=100/90, Line: None, Fill: Solid

5. Stage에서 사각형 Shape을 그리드에 딱 맞에 위치시킨다.

6. Pen Tool로 Shape의 좌측위와 우측위 부분을 대각선 방향으로 각각 2개씩 클릭하여 포인트를 추가한 후 좌, 우측의 꼭지점을 클릭하여 삭제한다.

7. Subselection Tool로 Stage의 Shape의 대각선부분에서 마우스 우클릭 - Quadratic을 클릭한다.

8. 좌측위와 우측위의 대각선 부분을 각각 바깥쪽으로 드래그한 후 다시 방향점을 드래그하여 삭제한 꼭지점 자리에 위치시킨다.

9. Selection Tool을 선택한 후 Outline - Shape에서 마우스 우클릭 - Copy Object - Scene1 - 마우스 우클릭 - Paste In Place 한다.

10. Knife Tool로 Stage의 Shape의 위에서 3번째 그리드 라인 위치에서 Shift와 Alt를 같이 누른 후 Shape의 바깥쪽에서 반대쪽으로 드래그하여 Shape을 자른다.

11. Outline에서 자르지 않은 Shape을 맨위로 이동한다.

 

움직이는 버튼과 마스크영상.swf

 

Button_만들기.hwp

 

effect_sound1.mp3

 

 

Button_만들기.hwp

0.01MB

effect_sound1.mp3

0.01MB

움직이는 버튼과 마스크영상.swf

0.71MB