마우스따라 옆으로 움직이는 버튼

effect sound1.m... (12kb)
img.zip (557kb)
flower.png (26kb)
flower.swi (1277kb)
sm312.swf (665kb)
스위시맥스3 작품12.hwp (33kb)

* 스위시맥스3 작품 12

 

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

- Background color: 검정색, Width: 700, Height: 500, 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에서 가이드라인을 다음과 같이 위치한다.(위치 후 Lock)

- 수직가이드라인: 20, 90, 100, 350, 600, 610, 630, 685

- 수평가이드라인: 52.5, 62.5, 250, 437.5, 447.5

5. Outline - Insert - Import! Image - bg

- Properties: 이름: bg, W/H=700/500

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

6. Layout - Tools - Rectangle Tool - Workspace

- Properties: 이름: btn1, W/H=610/40, Line: None, Fill: Solid

Workspace에서 Zoom Tool, Hand Tool, Pen Tool, Subselection Tool을 이용하여 버튼을 만든다.

7. Layout - Tools - Text Tool - Stage

- Androgyne, 16, 흰색. Edit: Image 1, Transform: O=X, 정가운데, x: 57, y: 82.5

8. Outline - Image 1, btn1 - 마우스 우클릭 - Grouping - Group as Movie Clip

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

9. Outline - btn1을 펼치고 선택 - Timeline

- Image 1: 1~5F 우클릭 드래그 - Fade - Fade In

- btn1: 1~5F 우클릭 드래그 - Fade - Fade In,

10F 더블클릭: 우측으로 이동, 15F 더블클릭: 좌측으로 이동

- btn1: 1F 빈프레임 추가, 1, 6, 11, 16F stop()

10. Outline - btn1에서 마우스 우클릭 - Copy Object - Scene1에서 마우스 우클릭 - Paste(7번) - 각각의 이름과 위치를 위에서부터 btn1~8로 한다.(내용도 바꾼다)

Stage에서도 Outline의 순서와 맞게 위에서 아래로 위치한다.

11. Outline - btn1~8 - Align

- Align to: All Selected, Distribute: Distribut Vertical Center

12. Layout - Tools - Rectangle Tool - Stage

- Properties: 이름: th1, W/H=40/30, Line: None, Fill: Image

- Transform: O=X, 정가운데, x: 657.5, y: 82.5

13. Outline - th1 - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: th1

14. Outline - th1을 펼치고 선택 - Timeline

- th1: 1~5F 우클릭 드래그 - Fade - Fade In

- th1: 1F 빈프레임추가, 1, 6F stop()

 

15. Outline - th1에서 마우스 우클릭 - Copy Object - Scene1에서 마우스 우클릭 - Paste(7번) - 각각의 이름을 위에서부터 th1~8로 한다.

- th2: x: 657.5, y: 130.35, - th3: x: 657.5, y: 178.2

- th4: x: 657.5, y: 226.05, - th5: x: 657.5, y: 273.95

- th6: x: 657.5, y: 321.8, - th7: x: 657.5, y: 369.65

- th8: x: 657.5, y: 417.5

16. Outline의 th1~8을 펼쳐서 Open Image 한다.

17. Outline의 btn1~8을 펼쳐서 btn1~8의 면색을 eyedropper로 해당 이미지에서 추출하여 적용한다.

- btn1: #6F9504, - btn2: #D1AE00, - btn3: #FDDF3F, - btn4: #F27F12

- btn5: #1D4A33, - btn6: #FB7880, - btn7: #60834D, - btn8: #0A4EBD

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

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

20. Outline - btn - Text를 삭제한다.

21. Outline - th1~btn8 - 마우스 우클릭 - Cut Object - btn - Paste In Place

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

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

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

24. Outline - btn - 마우스 우클릭 - Copy Object - Scene1 - 마우스 우클릭 - Paste In Place - 이름: ibg - ibg를 펼쳐서 안의 개체를 모두 지운다.

25. Outline - Scene1 - ibg - Layout - Tools - Rectangle Tool - Stage

- Properties: 이름: ibg, W/H=520/395, Line: None, Fill: Solid(FBD3ED), O=X, 정가운데, Parameters: distance: 5

26. Outline - ibg - Transform: O=X, 정가운데, x: 350, y: 250,

27. Outline - ibg - Timeline

- ibg: 10F: stop(), 1~10F: 우클릭 드래그 - Fade - Fade In

28. Outline - Scene1 - Insert - Import! Image - img - img1

- Properties: 이름: img1, W/H=500/375, Line: None, Fill: Image, O=X, 정가운데, x/y=350/250

29. Outline - img1 - Timeline - img1: 10F: 더블클릭 - PF해지 - Transform - height: 0 - x: 350, y: 82.5(수평가이드라인을 위치한다)

30. Outline - img1 - Timeline - img1: 10F: PF적용 - Tools - Transform Tool - Stage에서 원래 크기로 높이를 조절한다 - 20F: 더블클릭 - 높이를 줄인다.

31. Outline - img1 - 마우스 우클릭 - Convert - Convert to Movie Clip - 예 - Stop playing at end 체크해제 - 펼치고 선택 - Timeline

- img1: 1F: 빈 프레임 추가, 1, 11, 21F: stop()

32. Outline - Scene1 - img1을 O=X, 정가운데로 한 후 복사/제자리 붙이기(7번)를 하고, 순서를 다음과 같이 한다. img1을 맨위로 이동한다.

- img2: x: 350, y: 130.35, - img3: x: 350, y: 178.2, - img4: x: 350, y: 226.05

- img5: x: 350, y: 273.95, - img6: x: 350, y: 321.8, - img7: x: 350, y: 369.65

- img8: x: 350, y: 417.5(각각의 y좌표로 수평가이드라인을 위치한다)

33. Outline - img1~8을 각각 펼친 후 Tools - Transform Tool - 이미지의 크기를 원래크기대로 높이를 조절한다. Open Image한다.

34. Outline - img1~8 - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: img, O=X, 정가운데

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

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

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

 

- ibg

onFrame (10) {

stop();

_root.btn.btn1.gotoAndPlay(2);

_root.btn.th1.gotoAndPlay(2);

}

- btn - th1

onFrame (1) {

stop();

}

onFrame (6) {

stop();

_root.btn.th2.gotoAndPlay(2);

}

on (rollOver) {

_root.btn.btn1.gotoAndPlay(7);

}

on (rollOut,releaseOutside){

_root.btn.btn1.gotoAndPlay(12);

}

on(press){

_root.es.play();

_root.img.img1.gotoAndPlay(2);

_root.img.img2.gotoAndPlay(12);

_root.img.img3.gotoAndPlay(12);

_root.img.img4.gotoAndPlay(12);

_root.img.img5.gotoAndPlay(12);

_root.img.img6.gotoAndPlay(12);

_root.img.img7.gotoAndPlay(12);

_root.img.img8.gotoAndPlay(12);

}

- btn - btn1

onFrame (1) {

stop();

}

onFrame (6) {

stop();

_root.btn.btn2.gotoAndPlay(2);

}

onFrame (11) {

stop();

}

onFrame (16) {

stop();

}

- btn - btn8

onFrame (1) {

stop();

}

onFrame (6) {

stop();

_root.img.img1.gotoAndPlay(2);

}

onFrame (11) {

stop();

}

onFrame (16) {

stop();

}

 

 

 

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

- Properties: W/H=700/500, Line: none, Fill: Solid

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

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

- Properties: W/H=520/395, Line: none, Fill: Solid

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

40. Outline - 2개의 사각형 쉐입 선택 - 마우스 우클릭 - Grouping - Group as Shape - 예 - 이름: mbg - O=X, 정가운데, x/y=350/250

41. Outline - Scene1 - Insert - Import! Animation - flower - Import!

- Transform: O=X, 정가운데, x/y=-12/0

42. Outline - flower, mbg - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: flowerud - 마우스 우클릭 - Copy Object - 마우스 우클릭 - Paste In Place(3번) - 위에서 아래로 flowerud, flowerdu, flowerrl, flowerlr 로 이름을 바꾼다.

43. Outline - flowerud~flowerlr - 마우스 우클릭 - Grouping - Group as Movie Clip - 이름: flower - O=X, 정가운데

44. Outline - flower - Timeline

- flower: 1~4F: stop()

- flowerud: 1F: Place, 2F: Remove, - flowerdu: 2F: Place, 3F: Remove

- flowerrl: 3F: Place, 4F: Remove, - flowerlr: 4F: Place

45. Outline - ibg - 마우스 우클릭 - Copy Objcet - Scene1 - 마우스 우클릭 - Paste - 이름: fbtn - fbtn을 펼쳐서 그 안의 개체를 지운다. - Inser - Import! Image - flower

- Reshape: O=X, 정가운데, xscale/yscale=50/50

46. Outline - fbtn - O=X, 정가운데, x/y=655.75/466.25

47. Outline - fbtn - Timeline

- fbtn: 10F: stop()

- flower: 1~10F: 우클릭 드래그 - Fade - Fade In

48. Outline - fbtn - Script

on(press){

if(_root.flower._currentFrame == 4){

_root.flower.gotoAndStop(1);

}else{

_root.flower.nextFrame();

}

}