Swishmax의 기초, 무조건 따라하기
인터넷박약회 의농 전영태
<Swishmax 는>
1.특징
* Flash보다 쉽고 단시간에 작성. (Flash과 같은 Formating)
* Animation의 종류가 많고 다양하다.(기본 344+속성=4~500?)
* Script로 무비클럽 통제.
* 용량이 적다.
* swf File 하나만 서버에 전송해하면 된다.(이미지는 전송 안해도 된다)
* 사후 수정가능.
* 이미지의 Resize, 절단, 투명, 형태변경, 색상 변경 등 Photoshop의 일부 기능이 가능.
* 단점은 음악이 용량이 큰 MP3와 WAV만 넣을 수 있고 용량이 적은 MID는 넣을 수 없다.
2. 화면 구성
가. 4면으로 구성: 등록된 것은 4개 화면에 모두 나타난다.
* Timeline: Animation을 주는 곳
* Outline: 등록된 Object의 목록표시와 편집기능
* Layout: 작업결과 보는 화면
* Panel: Object의 속성 제어 조정
나. 아이콘, 메뉴 (주로 많이 쓰이는 것)
* 메뉴→ Open(열기), Save(저장), Cut(짜르기), Insert Text(T, 글씨), Insert Image(그림), play movie(▶) , Stop(■), Test play(작업결과 미리보기), Copy(복사), Paste(붙여넣기), Sprite(무비클럽 만들 때), Group (같이 무꾼다)
* Layout→Tool(도구),Select(선택),Pan(손바닥),Scale,View(화면 크게보기,%),Script(스클립트 넣을 때)
* Panel→ Movie(화면의 크기), Shape(개체의 모양), Text(글씨), Transform(위치크기 조절), Align(정열)
3. Animation의 종류
Timeline에서 주는 Animation의 종류는
* 기본 효과: 9개
* 복합 효과: 6개
Appear into position의 하위 효과: 104개
Disappear from position의 하위 효과: 71개
Looping continuously의 하위 효과: 68개
One off의 하위 효과: 22개
Return to start의 하위 효과: 54개
Core Effect의 하위 효과: 10개
합계 344
4.Effect(효과)의수가 매우 많고 다양하다.
효과보기:start를 클릭하세요
음
<알아 두어야하는 기초 효과>
★ 작품을 만드는 일반적인 순서
☞ 작품 만드는 순서
* Insert image(object불러 오기)
* Align(스테이지에 정열)
* 무비 효과(Effect) 넣기
* 설명 글 넣기
* 제목, 음악, 액자등
* Test in player(미리보기 확인)
* 저장(aaa.swi, aaa.swf, aaa.html)
* 서버에 전송 → e-mail, Homepage등에 전송
1.그림 넣고 Move효과를 주고 설명 글 넣기
설정: movie=600＊400
(그림 넣기)
가.그림 aa2.jpg,삽입→Align→Stage→Make same→Align left→Align right
나.1frame에 우 마우스→Slide in from left→effect 더불클릭→Setting창→Duration 30→미리보기→close
다.50frame에 우 마우스→Slide out to right→effect 더불클릭→Setting창→Duration 30→미리보기→close
라.그림 a2.jpg,삽입→Align→Stage→Make same→Align left→Align right
마.50frameframe→Slide in from left→effect 더불클릭→Setting창→Duration 30→미리보기→close
바.100frame에 우 마우스→Slide out to right→effect 더불클릭→Setting창→Duration 30→미리보기→close
(글 넣기)
가.T삽입→입력 "러시아 여름궁전" →서울들국화,크기 36,색 red
나.20frame에 우 마우스→Slide In From Top(15)→close
다.50frame에 우 마우스→Slide Out To Bottom Right(15)→close
라.T삽입→입력"애집트 스핑크스"→서울들국화,크기 36,색 red
마.65frame에 우 마우스→Slide In From Bottom Left(15)→close
바.100frame에 우 마우스→Slide Out To Top Right(15)→close
2.투명효과(Alpha) 내기: 세 가지 방법이 있다. ☞3.투명효과 alpha1.swf
가. (1방법): Move 효과에 의한 방법
이동하는 Object를 투명화하기
* 1//Move(50)/Effect 더불클릭/move setting창 열림/Alpha→fade to alpha 40/ Object를 목표지까지 이동 /close//50
※ alpha값이 “100” 이면 원색, “0” 이면 완전투명,
* Play test
나. (2방법): Transform 효과에 의한 방법
Object를 선택
*1//core effect/transform(50)/end에 책크/scale→start 100(원래 200으로 설정되어있음)/Alpha→start 100% →end 40%/close//50
다. (3방법): Tint panel에 의한 방법
Object를 선택
* 1//move(50)Object를 이동//50
* 우측 Tint panel 클릭/Alpha→Custom, A→40%
3. 돌리기(Angle) ☞ angle.swf, angle-text.swf 5.회전효과, angle-round.html
가. move 효과로 좌우 회전
* 1//move(60)motion텝 / X angle→Rotate cw by→360(반대는 ccw360)/close//60
나. core effect로 좌우 회전
* 1//core effect(60)/3D spin/transform/x spin start 0(원래 90으로 되어있음) → z spin 360/close//60
다. 수직 회전
* 1//Core Effects/3D Spin(60)/x spin→start 0(원래 90으로 되어있음)→ x spin 360/close//60
라. 수평 회전
* Core Effects/3D Spin(60)/x spin→0, y spin→ start 0,→ y spin 360 / close//60
4. Move방향 바꾸기 (아래 그림 좌)
방향 바꾸기 회전하기
(방향 바꾸기)
* 바탕 그림 들판을 삽입→Align→Stage→Make same→Align left, right
* 나르는 개체(독수리)를 삽입 화면의 좌상에 위치, Transform→Anchor point Center
* 60frame//더불클릭, 독수리 주위에 적색 조절점 생김/마우스 드랙으로 독수리 좌로 이동//60
* 61//place//61
* 독수리 위 클릭→Transform→Flipp horizontal(180º방향 바꾸기)
* 61frame을 클릭→Rotate툴을 이용 둑수리의 고개를 아래로 숙인다.
* 75//move(30)/마우스 드랙으로 독수리 우하로 이동/close//104
* 130//place//130
5. 회전하기(위 그림 우)
* 그림 불러오기: 1.코스모스 2.그름 3.헬기
* Out line 밑에서부터 그름, 코스모스, 헬기의 순으로 정열
* 3개의 개체 정열
코스모스와 구름은 마우스로 정열, 헬기는 크기를 적당히 줄이고 화면 좌 밖으로 위치 구름은 Tint패널에서 Alpha 70%으로
* 헬기의 공중 회전은 Outline에서 헬기를 선택→Motion path클릭하여 →헬기의 회전 경로의 기점을 클릭(헬기 가 회전 하지 않은체 부자유스럽게 돈다)→Timeline의 각 Effect의 Setting창을 열고→ Orient to path와 Overridge angle setting의 앞에 책크→Test play하면 헬기가 예제와 같이 제대로 도는 것을 볼 수 있다.
6. 그림자 글 만들기, Copy object , Copy effect
가. Text삽입 "인터넷박약회"라 입력
* Scene을 한번 클릭 → 인터넷박약회, 원본 선택→ 우 마우스 → Copy object
* Scene을 한번 클릭 → paste object (text가 복사되어 2개가된다.)
※가위 표와 X표 사이의 아이콘을 이용해도 된다. 좌측 것은 Copy이고 우측 것은 Paste이다
* copy된 인터넷박약회(윗것)를 선택 색깔을 red로 → 원본(아랫것)을 선택 색을 백색으로
* 마우스로 2개의 text를 겁치게 넣고→ 위치를 약간 이동하여 그림자 형성(방향키로 조정해도 됨)
* Outline에서 2개의 text를 불록→우마우스로 Grouping, Group as Sprite→Sprite의 1 프레임에 place
* Timeline에서 Sprite에 적당한 Effect를 골라서 넣는다.
나. Image에 설명 Text가 따라 다니게 하려면
* Timeline에서 Image의 effect를 전부 불록 주고 → 우 마우스 Copy effect
* 설명 Text의 Sprite에 → 같은 프레임선상에 우 마우스 → Copy effect 한다.
7. 물채의 그림자 만들기 ☞ cow.swf
날뛰는 소의 물위 그림자 땅위 그림자
가. 물 위에 그림자가 비치는 날뛰는 소
(1)개울위 나무다리 그림 삽입하여 Stage에 정치
* Align패널→Stage→Make same줄의 멘 우측 아이콘→위의 Align줄의 좌측것중 한 개, 우측 것중 한 개
(2)날뛰는 소를 삽입→Transform패널→ Anchor point를 center→다리위 좌측에 위치시켜, rotate이용 다리를 건너 가는 방 향으로 각도 조정.
(3)그림자 만들기
* 날뛰는 소를 Copy object한다
* 복사된 소 선택, 우 마우스 → Transform→Flip vertical(수직으로 뒤집기)
* 뒤집은소(그림자)를 물위 다리그림자 위에 대응되는 곳으로 옮기고 각도를 다리그림자를 향하게 저정
* 그림자를 선택 → Tint패널→ Alpha → custom → A 70%
(4)원본 소에 이동 효과 주기 (원본 소와 그린자 소에게 각각 따로 이동 효과를 주어야한다. 다리와 그린자 다리의 각 도가 다 르기 때문이다)
<소를 선택하여>
* 1//place(1)//1
* 2//move(20)/close/effect끝의 21프레임의 효과조절점을 클릭/마우스로 소를 다리 우측으로 이동//21
* 22//place(1)//22
* 소를 선택→Transform→Flip Horizontal→ rotate로 방향 잡고
* 25//move(20)/close/effect끝의 44프레임의 효과조절점을 클릭/소를 원 위치로 이동//44
<그림자 소를 선택하여 위 원본소와 같은 effect를 준다. 단 복사해서는 안된다.>
* 1//place(1)//1
* 2//move(20)/close/effect끝의 21프레임의 효과조절점을 클릭/마우스로 그림자를 다리 우측으로 이동//21
* 22//place(1)//22
* 그림자 소를 선택→Transform→Flip Horizontal→ rotate로 방향 잡고
* 25//move(20)/close/effect끝의 44프레임의 효과조절점을 클릭/그림자를 원 위치로 이동//44
(5)Outline에서 소와 그림자를 불록→Grouping, Group as Sprite→Sprite의 이름을 "날뛰는소"로 부친다.
* 1//place(1)//1
나. 지상의 그림자 (위 그림 참조)
화살을 그려놓고 그림과 같이 정치
* 화살을 복사하여 하나 더 만들고 →Transform→Flip Horizontal으로 수직으로 뒤집는다
* 그림자 선택→ Transform패널→ Anchor point를 custom→ point를 마우스로 화살 그림자 끝으로 이동
* 그림자 Shape패널→색을 어두운 회색→그림자를 원본화살 밑으로 옮기고 화살 끝을 부치고 마춘다.
* 태양의 위치와 그림자의 모양을 고려 조절하기 위하여 rotate로 각도를 맞추고→ 도구 상자에서 reshape또는 resize the shape툴을 이용하여 길 게 쫍게 조정한다.
* outline에서 본체와 그림자를 같이 불록으로 묶고 → 마우스 우측 grouping → group as sprite → 이름을 화살 이라고 붙 인다.
* 화살표가 흔들리게 하려면 group as sprite한 후→ Transform패널→ Anchor point를 custom→ point를 마우 스로 두 화살 끝이 만나는 끝으로 이동시켜→ tiemline에서 좌우로 흔들리는 적당한 move를 준다.
*
1프레임에 place를 넣는다.
8. 멀리 날아가는 새(move에서 크기 조절)
가. 멀리 날아가는 새
* 동영상 새 방향잡고 화면 좌측 하단에 위치, 약간 크게
* 1//place//1
* 2//move(40)/독수리를 우상으로 이동/close//41
* 42//place/transform/flip horizontal(방향 반대로 전환)//42
* 50//move(100)/close/effect 끝 점을 클릭/새를 아주적게 보일까 말까로 줄이고/멀리 밖앝으로 드랙 이동 //149
나. 멀리서 날아오는 새
* 위의 반다로 효과 넣으면 된다. 단 같은 새가 되돌아 올 때는 place를 넣고 방향을 바꾸어야 한다.
9, 화면위로 흘러 올라가는 글 ☞ text-올라가는.swf
* Layout의 Tool에서 네모[Rectangle]을 선택하고 스테이지의 글을 놓을 곳에 네모를 그린다.(네모 하단 선에서 글 이 나타 나고 상단 선에서 글이 살아지게 한다)
* 글꼴, 글 크기. 색상을 정하고 원하는 글을 쓴다.
* 스테이지의 글을 네모틀 아래로 이동 위치시키고, 글이 올라갈 때 네모 밖으로 나가지 않도록 크기 조절.
* 타임라인에서 move(200)주고, (글의 량에 따라서 다름) effect 막대 끝에 있는 효과 조절점에 마우스를 더블 클릭 한 후,아래에 옮겨놓은 글을 마우스로 위쪽으로 드래그 하여 글의 말미가 네모를 완전히 통과 할 때가지 끌어 올린다.
* Outline에서 네모(Shape)를 글 아래로 옮기고→글과 네모 를 같이 불록→ 우 마우스 Grouping → group as Sprite → Use bottom object as mask에 체크
* 올라가는 글의 속도가 빠르면 Duration(프레임수치)을 더 늘려 주면 속도가 느려 진다.
10. 이미지 조각내기(Breaking) ☞break.swf
주:* Regular Grid → 사각형 조각(기본형), Triangular Mesh→그물형, Random Triangles→3각형,
Random Polycons→다각형
* Column5 x Row5 →가로5개 x 세로5개
*Cascade order → 조각형성 형태
가.Outline에서 이미지위 우 마우스(Layout에서 해도된다)→Break→Break into Pieces→Break into Pieces창 이 뜬다 →위표와 같이 설정( 25 쪽으로 조각 )→ OK
나. Timeline에서 효과 넣기(예)
(1) 진입효과
* 1//Appear into position/Spin back and in(40)/Close//40
(2) 퇴출효과
* 60//Disappear from position/Explode down slowly(20)/close//80
* Test play
11. 물결 만들기 ☞ water-물결.swf
<물결 막대를 이용한 방법>
가. 바다나 호수 그림(a.jpg) 1매와, 포토샵에서 그 그림에서 물 부분만 짤라낸 그림(a-1.gif) 1매준비
나. 바다 그림(a.jpg)과 물그림(a-1.gif) 2매를 삽입(물이 위로)→ Align으로 정열
다. 새 창을 열고 물결.swi(물결막대)를 불러내고 복사(copy object)
라. 작업창에 붙여놓기(paste object) → 위치를 .swi의 저변과 물의 밑 부분이 맞도록 내린다.
마. 물결.swi에 move주기
* 1//place(1)//1
* 2//move(50)/transform패널에서/x 각도 -15(바람이 부는 방향, 물결치는 방향)/close//70
* effect막대 끝의 점, 70프레임을 클릭하여 물결.swi를 물 따라 마우스 드랙으로 아래로 끌어 내린다. 물 부분 만 덮 을 정도로.
바. 물결 막대를(swi) 내리고 물(a-1.gif)과 호수 그림(a.jpg) 사이에 위치(메위 물)
사. 물결.swi와 물a-1.gif를 같이 묶어 불록→Grouping → group as Sprite → Use bottom object as mask에 체크 한다.
아.물결의 정도는 transform패널에서 위치(X Y), 크기(W H), 비율(%), 각도 등의 수치를 어느 것이든지 하나만 약간 가감하면 물결이 친다. 그 수치는 test play하면서 경험에 의하여 결정하여야 한다.대략 각도는 .2정도, 비율은 3% 정도, 크기는 5정도, 위치는 3정도 변경 시켜보는 것이 좋다.
아. sprite를 닫고 test play,
<Rectangle로 물결막대 만드는 방법>
물결.swi(물결막대)는 남이 만들어 놓은 소스를 이용하는 것이다. 남의 것을 이용하지 않고 Swishmax에서 바로 물결 막대를 만들어서 이용하면 된다.
가. 호수 이미지 aa.jpg 삽입→Align정열
나.Bezire툴로 물부분을 쩔라 낼 부분을 선택(물보다 약간 적게)→ 빨게진다
다.aa.jpg과 shape를 같이불록→Grouping→group as Shape→예→Shape패널에서 Fill,Clipped image→색이 변함.
라.Modify→Grouping→Ungroup→원색이되고 aa.jpg 2개중,위 것은 짤라낸 물부분이고, 밑의 것은 호수 원그림이다.
마.Rectangle를 선택 화면위에 물 부분을 덮어 남을 만한 네모(Shape)를 그린다.
바.Shape를 선택 modify→Break→Break into→Pieces Break→Regular Grid,Column:0,Row:20,cascade Order→ Random Speed:0 → OK
사.Outline창→Group→Ungroup→Transform패널→H를 10으로→모든shape를 불록→Group as shape→예
자.하나의 shape로 물결 막대가 되었다.나머지는 소스를 이용하는 것과 같은 방법으로 작업한다.
12. mask ☞ mask.swf
가. 바탕 그림 한 장 삽입
나. mask에 나타나게 하는 그림을 삽입
다. rectangle(네모), ellipse(원), autoshape중 어느 것이든지 좋으니 선택해서 화면에 그린다(shape).
라.위 그린 shape를 선택하여 timeline에서 move를 주되, mask로 보고 싶은 곳을 통과하면서 이동, 크기 변 화, 뒤집힘등 다양한 effect를 준다,
마. shape를 아래로(멘위에 mask로 보이는 그림, 그밑에 shape, 멘 아래 바탕 글미의 순)
바. shape와 mask에 나타나게 하는 그림을 불록으로 묶고(shape가 아래) Grouping → group as Sprite → Use bottom object as mask에 체크한다.
사. Sprite를 닫고 test play
13. 흘러가는 이미지 ☞cloud.swf
move를 w=600 h=300
가. 구름 a,jpg를 삽입(w=600,h=300),구름의 위치(X=0 Y=150, Anchor point=center left)
나. a,jpg을 2개 복사하여 으름을 구름1, 구름2, 구름3으로 부침, Outline에서 구름1이 멘 아래로
다. view를 33%로 하고 구름2선택→우 마우스→transform→Flip horizontal→transform패널→X=1200 Y=150
라. 구름3을 선택→transform패널→X=1200 Y=150(구름 3개가 긴 한개의 구름이 된다)
마. Outline에서 구름1, 구름2, 구름3을 불록으로 묶고→grouping→grouping as sprite→transform패널→ Anchor point를 Center left(자동으로 되어있음)
바. sprite선택
* 1//move(600)/setting창에서/X position, move left by 1200/close//601
사. 다시 sprite선택→grouping→grouping as sprite→이름을 흐르는구름→ 1프레임에 place를 준다.
아. test play
14.마우스 Zooming
가.바탕 그림 aa1.jpg 삽입
나.aa2.jpg 삽입
* 1//move(20)/20프레임의 조절점 클릭/그림을 우상 모통이의 조절점을 중앙으로 드랙하여 줄이고/좌하 모통이 의 조절점을 중앙으로 밀어 올려 그림을 줄인다//20
* 30//move(20)/49프레임의 조절점 클릭/우상 모통이의 조절점을 땡겨서 원위치로/좌하 모통이의 조절점을 아 래로 땅 겨서 원 위치로//49
* 60//move(20)/79프레임의 조절점 클릭/우 중앙의 조절점을 중앙으로 드랙하여 줄이고/좌 중앙의 조절점을 중 앙으로 밀고 그림을 줄이고//79
* 90//move(20)/109프레임의 조절점 클릭/같은 요령으로 좌우로 원위치로//109
다.aa3.jpg 삽입
* 마우스로 자기 취향에 맞도록 Animation을 준다
15.이미지 짜르기
아미지 짜르가 꽃의 색갈 바꾸기
가. 원이미지 삽입
나. Brzier를 클릭→line/none, fill/solid, 색 적섹
다, 짜를 범위를 선택→shape→적색
라. 원 이미지와 shape같아 묶어→Group as shape → 아니요
마, shape패널에서- Clipped image→Clipped image→ 원색
바. Grouping-Ungroup
아. Outline에서 처음 삽입한 원이미지(멘 아래 것) 삭제.
* 스핑크스가 움직이는 것은 이미지를 짤랐다는 것을 보여주기 위함
16.이미지 색갈 바꾸기
장미꽃 그림 삽입
가.Bezier툴로 장미꽃을 자른다.(방법은 15번 이미지자르기 참조.다만 15번 라항의 as shapeg할때 "아니요" 대신 "예"로 한다.)
나.장미꽃을 선택하여
*1//move(20)/setting창, color fade to 20% 하늘색/close//20
*35//move(20)/setting창, color fade to 20% 노랑색/close//54
*70//move(20)/setting창, color fade to 20% 청색/close//89
*100//move(20)/setting창, color fade to 20% 주황색/close//119
*120//move(12)/close//131
17.음악 넣기
가.음악은 Scene에 넣어야한다.
* Layout Scene_1에서 Script를 열고, Guide 모드로하여
* Timeline의 Scene의 1프레임에 우클릭→sound, play sound(...)→Import→1.mp3파일을 찾아→열기→Impor 옆에 파 일 1.mp3가 기록된다.
* 1.mp3를 클릭→Sound effect가 활성화→ Sound effect클릭→시험태스트 창이 뜬다
* loop sound에 연주 회수를 기입→play→ok Swish에는 용량이 큰 mp3와 wav는 들어가지만, 용량이 적은 mid 는 들어가지 않는다.
18.Auto Shape
가. Swishmax에 추가된 Auto Shape 버튼에는 □(Rectangle)○(Ellpse) 이외에 ☆ ♡ ..... 등의 도형이 있다.
나. <AutoShape> 버튼의 위치: Tools box안의 손바닥 바로 위에 있는 아이콘, 이것을 눌르면 도형들이 나타 나며, 필요 한 도형을 선택할 수 있다.
다. 사용법
* 녹색 조절점 2개짜리
5각형 도형에서 한가운데에 있는 녹색 조절점은 이 것을 누를 때마다 각이 하나씩 추가되고, 꼭지 점의 녹색 조절 점은 방 향 전환에 사용한다.
* 녹색 조절점 3개 짜리
.5각형 도형에서 한가운데에 있는 녹색 조절점은 누를 때마다 각이 하나 씩 추가, 변에 있는 녹색 조절점을 좌/우 로 회전 시키면 다양한 모양이 생긴다.
.꼭지 점의 녹색 조절점으로 방향을 전환할 수 있다.
19.저장
저장은 000.swi, 000.swf, 000.html로 저장한다. 끝