16.10.12. Auto방식과 Button방식의 형태를 통한 액션 이해

<Auto방식과 Button방식의 형태를 통한 액션 이해> (16.10.12)              p2-1
1. Movie 설정....720X540.  배경색:회색.
2. Content로 이미지 5장(번호:1~5) 등록시키고, 그중 1번이미지를 불러오기 한다.
3. W=720, H=540, O=X 센터, X=360, Y=270으로 한다.
4. 이미지 선택, 오른쪽 클릭, Break, Break into pieces클릭, 생긴 창에서 Coloms:5, Raws:4, Allow체크, Inflate(0.2)체크,Cascade order 맨위줄 좌 1번째 체크하고 OK클릭.
5. 생성된 Group을 우클릭, Grouping에서 Ungroup 클릭(그룹이 해체되는 것임...20 pieces임).
6. 조각난 것 모두(20개) 선택, 1F에 우클릭,Appear...Kerning-Kern in 클릭.
7. 타임라인에서 맨위의 것과 맨아래의 것은 그대로 두고, 그다음 것부터 내려오면서, 또 올라가면서 효과막대 1F의 것을 6,11,16,21,26,31,36,41,46F으로 밀면 아래의 그림과 같게 된다.

8. 다시 모두 선택, 80F에 우클릭,Return to start...Rotate-Turn을 클릭한다.
9. Scene-1 클릭,T툴 클릭, 창에 클릭 (Arial. 36. 청색. B 로 설정), Edit클릭하여 “1번 이미지” 라고 입력하고 Apply클릭한다. O=X 센터, X=360, Y=420 으로 한다.
다시,메뉴에서 Window, Filters, 창에서 녹십자 클릭, Glow, blur2_ 클릭한다. 창 닫고.
10. 글자라인을 클릭하고, 100F에 우클릭, Core effects, Transform 클릭하고, 150F에 Place클릭한다.
11. 아웃라인의 모두를 선택해서 무비클립으로 묶고, stop에 체크하고, 이름:a1 으로 한다.
12. a1을 복사하여 총5개로 한다. 이름을 a1 ~ a5 로 한다.
13. a2 열고, T의 1번이미지를 클릭하여, Edit를 클릭하고, 창에서 “2번이미지”로 수정하고, 그 아래의 모두(20개)를 선택하여 2째이미지로 교체한다.
14. a3,a4,a5도 동일하게 작업한다.
15. a1~a5 모두 선택하여 무비클립으로 묶고, 이름:img로 한다.
16. img열고, 선택하고, img라인의 1F부터 6F까지 스톱을 준다.
17. a1라인의 2F:Place, 3F:Remove를 주고, 두효과를 함께 선택하여 복사해서 위로 올라가면서 a2의 3F에, a3의 4F, a4의 5F에 붙여넣기하고, a5의 6F에는 Place 준다.
18. 이상은 각각의 이미지에 place,remove. 무비클립에 stop의 효과를 줬다.(일명:Action효과주기).

19. 이어서...아웃라인의 img가 열려있는 상태에서 img를 선택하고, Insert Movie Clip을 클릭하여, 생성된 것을 이름:auto 로 하고, 맨아래로 내리고, 선택,Script클릭,Add Script,Events,Frame,on(Frame)을 클릭하고 프레임수를 150으로 하고, 다시 Add Script. Movie Control, Play 클릭하고, Target에서 _parent를 클릭한다.
이것이 Auto 방식이 된다.(play movie했을 때 기존의 방식과 조금 차이가 있음)

  <버튼만들기>                                                                   p2-2
20. img 닫고, Scene1클릭, 사각툴 클릭(라인:실선,2,빨강색, Solid,청색으로 설정), 창에 드래그, W:50, H:50, O=X센터, X=150, Y=480으로 하고, 복사하여 총5개로 하고, 이름: b1 ~ b5 로 한다.
21. b5를 선택하고 X=600으로 하고, b1 ~  b5를 함께 선택하고 얼라인 정렬한다.
22. b1~b5 모두 선택하고, Convert to button을 클릭하고, over에 체크한다.
23.선택툴(화살표) 선택, b1 열고, over의 b1을 선택하고, Solid를 Image로 바꾸고. 1번째 이미지를 선택하고, Fit to shape 해준다.
24. b2을 열고, 마찬가지의 방법으로 2번째 이미지를 클릭하여 이미지로 교체하고, Fit to shape한다. b3 ~ b5도 동일하게 작업한다.
25. b1~b5 모두 선택하여 무비클립으로 묶고 이름:btn 으로 한다.
이상 버튼만들기 작업이다.

 <버튼에 스크립트 주기>
24. btn열고,b1선택하고, Script, Add script, Events, Button, on release 클릭.
다시 Add script, Movie control, Goto and play, gotoAndPlay(Frame)클릭하고, Target에서 _parent.img 를 선택하고, 프레임수를 2로 한다.
25. 완성된 Script를 복사하여, b2선택하고 창에 붙여넣기하고, 프레임수를 3으로 수정한다.
26. b3,b4,b5 도 동일한 작업을 하는데, 프레임수를  4,5,6 으로 한다.
27. 일반 작업창으로 하고, btn을 닫는다.
이상 버튼의 Script 작업이다. 현상태에서 play movie해본다.

<next버튼(다음버튼) 만들고 script 주기>
28. 이어서 Scene1 클릭, T 툴 클릭, 작업창의 적당한 곳에 클릭(Arial,36,녹색,B 설정), Edit클릭,창에서 next 입력한다.
29. O=X 센터, X=650, Y=410으로 한다.
30. 아웃라인에서 T(next)를 선택하고, Convert to Button 으로 하고, 선택툴을 선택하고, over 와 down 에 체크한다.
31.Button을 열고,over 와 down 열고, 색상을 각각 다르게 한다.
32.Button 닫고,무비클립으로 묶고, 이름:“next버튼”으로 하고, 다시 열고, Button선택하고, Script, Add Script, Events, Button, on(press).  다시 Add Script, Movie Control, Goto and play, nextFrameAndPlay 클릭하고, Target에서 _parent.img를 선택하고, 프레임수는 1로 한다.
이상의 작업은 next 버튼 만들고, 스크립트주기 이다.

<prev버튼(이전버튼) 만들고 script 주기>
32.Scene1클릭,T클릭,작업창의 next 좌측옆에 클릭, Edit에서 prev 입력.
33.O=X 센터, X=550, Y=410.
34. 이후의 Convert to button 으로 하고 부터는 ~~~ next버튼 만들기와 동일하게하다가,
35. nextFrameAndPlay 대신에 prevFrameAndPlay를 클릭하면 된다.
 나머지는 동일함.
36.이상으로 모든 작업은 끝이고, play movie해본다.
37.프레임수 와 스크립트 관련은 공부하면서 설명드리겠습니다.

10-12.공부 자료-.swi

10-12.공부자료.hwp

캡처2.jpg

관련

첨부된 파일 3개▼