모핑

           

Morphing Image Gallery  

1. Background Color검정색 W=700 H=525 SWF 10

2. Stage에 X Guideline 50, 100, 600, 650, Y Guideline 37.5, 107.5, 417.5, 487.5 하고 Lock을 채운다.

3. 배경 이미지 삽입하고 W700, H525, O=X 센터 X350, Y262.5 이름은 bg

4. 사각형 Shape 그리고 Solid, Line은 None, O=X 센터 X350, Y262.5, W600, H445, 이름 img02, 

5. Timeline img02 행 80F에 W 클릭 Effect 창에서 Morphing에 체크하고    ToolBox의 SubSelction Tools 선택하고 X50, Y37.5 교차점을 마우스로 ↓ 드래그 하여 X50, Y107.5로 내려 교차점 맞춘다.

X50, Y487.5 교차점을 마우스로↑드래그 하여 X50, Y417.5 교차점에 맞춘다.

우측 상 X650, Y37.5 조절점을 마우스로 ← 드래그 하여 X50, Y37.5 우측 하 X650, Y487.5 교차점을 마우스로 ← 드래그 하여 X50, Y487.5에 맞춘다. (Play하면 왼쪽으로 사라지고 겹쳐지는데, 사다리꼴이 되면서 겹쳐진다.)

6. img02 복사 Paste in place하여 속성 창 효과를 지우고 이름을 img01로 하고 img02 의 눈과 자물쇠를 잠금 한다.

7. img01선택 우측 위 X650, Y37.5 조절점을 X650, Y107.5 ↓ 로 내려주고 우측 하 X650, Y487.5 조절점을 X650 Y417.5 ↑로 올려주고 좌측 위 X50, Y37.5 조절점을 X650, Y37.5 → 로 끓어다 놓고 좌측 아래 X50, Y487.5 조절점을 X650, Y487.5 → 로 끓어다놓는다.

8. Time line 80F에 W 클릭하고 Effect 창에서 Morphing에 체크하고 우측 상 X650, Y37.5 교차점을 마우스로 ← 드래그 하여 X50, Y37.5에 맞춘다. 우측 상 X650, Y107.5 교차점을 마우스로 ← 드래그 하여 X50, Y107.5에 맞춘다. 우측 하X650, Y487.5 교차점을 마우스로 ← 드래그 하여 X50, Y487.5에 맞춘다.  우측 하 X650, Y417.5 교차점을 마우스로 ← 드래그 하여 X50, Y417.5에 맞춘다. 

처음의 사각형으로 만들고 잘 되었나 미리보기 하여본다.

9. img01과 img02 함께 선택 Group as Movie Clip 이름 img01로   하고 Stop에 체크하고 Window → Filter → 녹색+ 추가버튼 →   Drop Shadow>Default>추가버튼>Glow>Default

10. img01을 열고 그 속의 img02 선택 Move를 비활성화하고 image8로

바꾸고. (이미지가 깨지면 Fit to Shape 클릭)

11. 다시 Move 효과를 활성화하고 image8을 한 번 더 바꿔주고. 안의 img01선택 효과 비활성화 첫 번째 이미지로 활성화해서 첫 번째 이미지로 이렇게 두 번씩

바꿔주고 +로 닫고

12. img01을 복사 paste in place를 7번 하여 모두 8개 만들고 이름 아래서부터

img01~img08로하고 10번,01번과 같은 방법으로 이미지 모두 바꿔주는데 img02열고

안의 img02는 이전이미지 즉 첫 번째 이미지로 img01은 두 번째로 img03열고 안의 img02는 두 번째 img01은 세 번째로 이렇게 모두 비활성화해서 한번 활성화해서    한번, 두 번씩 바꿔준다

13. Scene_1 선택하고 Text클릭하고 글꼴=Arial Black 크기=16 글자색=흰색 B으로 auto 쓰고 O=X 정 가운데 X=350 Y=262.5 에 배치

14. auto를 Group as Movie Clip 만들고 이름=auto 로 하고 Tint에서    Alpha=Transparent로 하여 투명하게 한다. 맨 아래로 내려주고

15. auto와 img01~img08 동시 선택 우 클릭 Group as Movie Clip 클릭하고 이름을 img로

16. img열고 img11 1F에 Place, 2F에 Remove 이 두 효과 복사하여 위로 

02,03,04,05,06,07,08에 붙여 넣고 img 줄 1~8F에 Stop

17. img열고 auto 선택 Script 열고 onFrame (100){_root.img.play( );}

18. img1~img8 삽입하고 이름 아래서부터 btn01~btn08로 하고, W60,H45

Stage 아래 가이드라인 사이에 나열한다.   btn01은 O=X 센터 X=130 Y=495 btn08은 O=X 센터 X=570 Y=495로 놓고 Window→Align 정렬 img의 이미지 번호와 같은 번호의 이미지인지 확인한다.

19. btn01~btn08 모두선택 우 클릭→Grouping→Group as Movie   Clip 클릭하고 이름=btn으로 하고 O=X 센터 X=350 Y=495로, btn에 Window → Filter 추가버튼 → Drop Shadow Default

20. Scene_1선택 Import! Animation하고 sign(name)삽입 O=X 센터 x/y=575/20,

이름=name

21. Text 글꼴=preciosa 크기=40 흰색-B 마진↔해제 Edit창에서 창에 “Morphing Image Gallery” O=X 정 가운데 X350, Y20에 놓고 T에 우 클릭 → Grouping → group as Movie Clip하고 이름=title로 한다. Windows>Fillter>Drop Shadow Default

22. 다시 Text 글꼴=Aial Black 크기=16 흰색 B Edit에서 “Show”쓰고 Text 복사 Paste in place 하고 “Hide”로 수정하고 Show 위에 겹쳐진다.

23. 2개의 Text 동시 선택 Group as Movie Clip 이름=sh로 하고 O=X 가운데 X650, Y505

24. 열고 선택 후 sh 줄=1, 2F에 Stop, 우측 위에서 아래로 계단형식    적용(Place, Remove) Fillter 추가 Drop Shadow Default 크릭 +로 닫고

25. 신1선택 Text 글꼴=Aial Black크기=16 흰색 B Edit에서 Scale U/D 로 O=X 센터 우 클릭 Break into Letters로 하고 O=X 센터 X656, Y487.5 T에 우 클릭 → Grouping → ungroup, ungroup된 T모두선택 우 클릭 → Grouping → group as movie clip 이름 Scale로

26. 다시 Text 글꼴=Aial Black크기=16 글자색=흰색 B, Edit에서 "Random" 쓰고 O=X 가운데 X/Y=40/505, Filter 추가 Drop shadow Default

27. Random을 복사 Paste in place하고 "Flip H"으로 수정, O=X 센터  X/Y=40/487.5

28. +로 된 img를 복사 Paste in place하고 이름=img02  아래 원본은 img01로 하고 아래 img01, 위는 img02의 순으로 배치하고 img02를 센터인 상태에 Flip Horizontal 클릭하여 수평으로 뒤집기 한다.

29. img01과 img02을 Group as Movie Clip 클릭 이름=img, img 열고 안의 img01, 1F에 Place, 2F에 Remove, 안의 img02 2F에 Place, img 줄 1, 2F에 Stop

30. Out line에서 순서를 Scene_1, title, name, Flip H, Random, Scale, sh, btn, img, bg

31. Out line 의 각각의 개체에 - Script를 적용한다. (기존 소스 삭제 후 붙여넣기)

▶ img - img01 - auto

onFrame (100){

_root. img. img01.play( ); }

▶ img - img02 - auto

onFrame (100) {_root.img.img02.play();

}

▶ btn

onSelfEvent (load) {

this._visible = 1;

}

▶ btn - btn01

on (press) {

_root.img.img01.gotoAndStop(1);

_root.img.img01.auto.gotoAndPlay(1);

}

on (press) {

_root.img.img02.gotoAndStop(1);

_root.img.img02.auto.gotoAndPlay(1);

}

※ btn01에서 btn08까지 붙여 넣고    

_root.img.img01.gotoAndStop(1); 와   

_root.img.img02.gotoAndStop(1); 에 각각 해당번호   

프레임 수만 2, 3, 4, 5, 6, 7, 8 로 수정하여 줍니다.

▶ sh (기존 소스 아래에 붙여 넣는다.)

on (press) {

if(_root.btn._visible == 1){

_root.btn._visible = 0;

}else{

_root.btn._visible = 1;

}

}

on (press) {

if(_root.title._visible == 1){

_root.title._visible = 0;

}else{

_root.title._visible = 1;

}

}

on (press) {

if(_root.sh._currentFrame == 1){

_root.sh.gotoAndStop(2);

}else{

_root.sh.gotoAndStop(1);

}

}

▶ scale - D

on(press){

if(_root.img._xscale >= 10 &&_root.img._yscale >= 10){

_root.img._xscale = _root.img._xscale - 5;

_root.img._yscale = _root.img._yscale - 5;

}

}

▶ scale- U

on(press){

if(_root.img._xscale <100 &&_root.img._yscale <100){

_root.img._xscale = _root.img._xscale + 5;

_root.img._yscale = _root.img._yscale + 5;

}

}

▶ Random

on (press) {

_root.img.img01.gotoAndStop(1 + random(8));

_root.img.img01.auto.gotoAndPlay(1);

}

on (press) {

_root.img.img02.gotoAndStop(1 + random(8));

_root.img.img02.auto.gotoAndPlay(1);

}

▶ Flip H

on (press) {if(_root.img._currentFrame == 1){

_root.img.gotoAndStop(2);

}else{

_root.img.gotoAndStop(1);

}

}

▶ Title

on (press) {    

if(_root.btn._y == 485){        

_root.btn._y = 40;   

 }else{        

_root.btn._y = 485;    

}

}

on (press) {    

if(_root.title._y == 40){        

_root.title._y = 485;    

}else{        

_root.title._y = 40;    

}

}

on (press) {    

if(_root.random._y == 485){        

_root.random._y = 40;    

}else{        

_root.random._y = 485;   

 }

}

 

 

20120405a.swf

5.27MB