웹디자인 강의
Flash 플래시와 제로보드 연동 기초 (외부 TXT 파일 호출 하여 뿌려주기)
2005.05.20 18:04
제로보드 스킨 자료실이나 기타 자료들을 훑어보니 제로보드를 플래시와 연동시켜주는 구체적인 방법이나 스킨자료가 만들어진게 없는것 같더군요.
허긴 저도 그걸 붙잡고 작업 해볼라니 제게 최소 몇백씩 지불하지 않는이상, 다른 디자이너나 유저분들을 위해 그 노가다(?)를 시작할라니 도무지 엄두가 나질 않더군요.
그래도 어디에서도 그 연동 관계나 제작 방법에대한 설명을 찾을수 없어 앞으로 틈틈히 시간날때마나 몇단계로 나눠서 제가 알고있는 구체적인 방법들을 하나씩 공개해 드릴까 합니다.
이왕 강의해 드리는 김에, 플래시 초보분들도 쉽게 따라 할 수 있게하기위해 이미지 위주로 설명을 드릴라니 이미지 량이나, 압축파일들 량이 많아, 부득불 제가 만들어 준 제 친구 홈페이지에 링크를 걸어 뒀습니다. 이점 참고하시고 앞으로 몇년간은 짤릴일은 없으니 짤릴 걱정은 안하셔도 되겠네요.
참고로 예제로 사용된 주소나 이미지들은 제 개인홈이 없어 그냥 편의상 친구 홈 디자인 위주로 제작되었습니다.
그럼 첫 시간으로
플래시와 제로보드를 연동시키기 위한 가장 기초 작업이라 할 수 있는 외부 TXT파일에 작성한 각 지정문구(함수)를 호출하여 플래시 내에서 뿌려 주는 방법에 대해 설명해 드리도록 하겠습니다.
아마.... 이 첫 시간 강의만 잘 응용, 연구하여 사용하신다면, 몇몇 분들은 다음시간에 설명해드릴 '제로보드 최근 게시물 만들기'를 굳이 보시지 않더라고 최근 게시물을 플래시로 뿌려줄수 있는 분들도 계실꺼라 생각합니다.
완성예제미리보기연습예제(MX2004버전)연습예제(MX버젼)완성예제(MX2004버전)완성예제(MX버젼)
1. 먼저 상단의 연습예제를 다운받아 압축을 풀어줍니다.
※ 연습예제 sturdy_exercise 폴더에는 memo.txt 하나와 sturdy.fla의 파일이 있습니다.
2. memo.txt 파일을 메모장으로 열어 아래 그림처럼 &title= 란에는 제목을 &memo= 란에는 내용을 입력하여 준뒤 저장후 메모장을 닫아줍니다.
내용은 나중에 적용된 액션효과를 확인이하기 편하도록 되도록 긴 문장을 입력하여 줍니다.
※ 여기서 &title= 는 게시판 호출함수중 해당글의 제목이라 생각하시면 되고, &memo= 란은 해당글의 내용이라 생각하시면 됩니다.
3. 이제 sturdy.fla 파일을 플래시로 열어줍니다.
4. 먼저 가장상단의 액션 레이어를 선택한뒤 액션창에
System.useCodepage = true;
_root.loadVariables("memo.txt");을 입력하여 줍니다.
※ 여기서 System.useCodepage = true;을 입력하는 이유는 한글 깨짐 방지를 위한 것이고(나중에 궁금하면 완성후 첫줄 삭제후 미리보기하여 확인해보세요.^^), _root.loadVariables("memo.txt"); 는 외부 TXT파일의 경로에 해당하는 부분입니다.
5. 액션을 입력하였으면, 제목 레이어를 선택하고 Toolbar에서 Text Tool을 선택하여 줍니다.
6. 이제 아래 그림처럼 제목을 뿌려줄 적절한 곳에, 마우스를 드래그 하여 적절한 크기로, 적절한 곳에 자리를 만들어 줍니다.
※ 완성예제의 포인트 (W:309, H:16, X:67, Y83:)
7. Instance Name란에는 text, 라인 형식은 Single Line, Var에는 title를 입력하여줍니다.
※ 꼭 알아두세요!! Var 지정한 title은 조금전 memo.txt파일의 &title= 란에 입력하였던 내용을 호출하는 것입니다.
8. 이제 내용이 보여줄 자리를 만들어 줄 차례입니다.
역시 Toolbar에서 Text Tool을 선택하고, 마우스를 드래그하여 내용을 뿌려줄 적절한 곳에 자리를 잡아준뒤, Instance Name란에는 text, 라인 형식은 Multiline, Var에는 memo를 입력하여줍니다.
※ Single Line과 Multiline의 차이는, HTML FORM에서 input과 textarea의 차이와 같다고 생각하시면 됩니다. 완성예제의 포인트 (W:309, H:118, X:67, Y104:)
Var 지정한 memo는 조금전 memo.txt파일의 &memo= 란에 입력하였던 내용을 호출하는 것입니다.
9. 이것으로 외부 TXT파일을 호출하는 방법(게시판에 입력된, DB의 테이블에 저장된 내용을 호출하여 뿌려주는 원리와 같음)에 대한것은 끝이 났습니다.
플래시에서 미리보기(Ctrl+Enter)하여 확인하여 보세요.
※ 그림처럼 호출이 제대로 안되는 분들은 2번부터 다시한번 찬찬히 훑어 보시고 문제점을 해결해보세요. 기초적이지만 그만큼 아주 중요한 부분(나중에 최근게시물 뿌려주기를 위한 기초작업)이라 문제를 혼자해결해 보는게 학습에 가장 큰 도움이 될것입니다.
10. 이제 미리보기의 예제처럼 게시물의 내용이 단문이 아니라 장문일 경우 저렇게 작은 장소에서 그 내용을 다 보여줄수가 없습니다. 그렇다면 그 내용들을 다 보여주기위해선 memo부분만 스크롤 시켜 방문자가 직접 특정한 이벤트 효과를 통해 장문의 내용들을 볼 수 있게 하도록 해 보겠습니다.
11. 다시 플래시 편집창으로 돌아가 액션 레이어를 선택한 후 아까 입력하였던 액션 바로 아래부분에
_root.Btn_up.onPress = function() {
_root.onEnterFrame = function() {
_root.memo.scroll--;
};
};
_root.Btn_up.onRelease = function() {
delete _root.onEnterFrame;
};
_root.Btn_down.onPress = function() {
_root.onEnterFrame = function() {
_root.memo..scroll++;
};
_root.Btn_down.onRelease = function() {
delete _root.onEnterFrame;
};
};
를 입력하여 줍니다.
※ 간단하게 설명드리자면 어떤 곳에서 무슨 행동을 하였을때 넌 어떤 행동을 하여라
12. 이제 Library창(라이버리창이 안보이신다면 단축키 Ctrl+L)에서 "버튼 UP"과 "버튼 DW"를 드레그하여 아래그림처럼 각버튼이 들어갈 적절한 장소에 위치시켜 줍니다.
※ 완성예제서의 포인트 버튼 UP(W:34, H:34, X:390, Y88:), 버튼 DW(W:34, H:34, X:390, Y174:)
13. 먼저 "버튼 UP"을 선택하고 Instance Name란에 "Btn_up"이라고 입력합니다.
14. "버튼 DW"을 선택하고 Instance Name란에 "Btn_down"이라고 입력합니다.
※ UP, DW버튼의 Instance Name란에 입력한 것은 액션레이어에 입력한 어떤곳에서 무슨행동을 하였을때중 바로그 어떤 곳에 해당합니다.^^;
15. 이제 모든 작업이 끝났습니다. 미리보기(Ctrl+Enter)하여 완성예제와 똑같이 memo란의 내용이 스크롤되어 보여지는지 확인하여 보세요.^^
※ 스크롤되는 속도를 조절하고 싶으시다구요?
그렇다면 아래 그림처럼 플래시 파일의 기본 속성중 Frame rate값에 입력된 50fps의 수치를 조절해 보세요. 수치가크면 그만큼 동작이 빨라집니다.
이상으로 "플래시와 제로보드 연동 기초 (외부 TXT 파일 호출 하여 뿌려주기)"에 대한 강좌를 마치겠습니다. 플래시를 이용하여 예쁜 파일을 만들기 위해선 물론 알고계신분들도 많겠지만, 제가 얼마전에 알려드린 "플래시에서 포토샵에서 작업한 깔끔한 투명 이미지 임포트 시키는 방법"정도는 기본적으로, 아니 필수로 알아 두셔야 하는 내용이라 생각합니다. 모르시는 분들은 꼭 알아두시길 바라며, 다음 강의('제로보드 최근 게시물 만들기')는 또 시간날때 강의해 드리도록 하겠습니다.
우선 참고로 완성예제와 테스트 게시판만 만들어 플래시와 연동시켜 보았습니다.
예제로 보여주는 방식은 총 2가지로 이번예제에서 알려드리고자 만든 완성예제와 원 드래그(?) 방식의 이벤트 효과를 이용하여 드래그되도록 만들어 보앗습니다.
테스트 게시판에 글을 입력하시고 각각의 텍스트보기 페이지에서 확인해 보시면 될거라 생각되네요.
예전에 어떤분들은 플래시로 왜 게시판을 만드냐고 반문하시는 분들도 계시더군요.
태그가 먹히는것도 아니고 코딩되는것도 짜증나는데 그걸왜 굳이 플래시로 만들어 보여주느냐고요.
이런질문에....
제가 답할수 있는 한마디는......
뽀대나잖아요. ^^;
"플래시와 제로보드 연동 실전예제 테스트 게시판"
테스트 게시판에 새글을 작성하여 확인해보시는건 상관없지만 이왕이면 아무 뜻도 내용도 없는글로 확인하시는것보단 조금 긴글, 좋은글들을 발췌 작성하여 확인해보셨으면하는 작은 소망이 있네요. 혹시모를 뒤에오실 손님들을 위한 작은 배려 차원에서요.^^;
허긴 저도 그걸 붙잡고 작업 해볼라니 제게 최소 몇백씩 지불하지 않는이상, 다른 디자이너나 유저분들을 위해 그 노가다(?)를 시작할라니 도무지 엄두가 나질 않더군요.
그래도 어디에서도 그 연동 관계나 제작 방법에대한 설명을 찾을수 없어 앞으로 틈틈히 시간날때마나 몇단계로 나눠서 제가 알고있는 구체적인 방법들을 하나씩 공개해 드릴까 합니다.
이왕 강의해 드리는 김에, 플래시 초보분들도 쉽게 따라 할 수 있게하기위해 이미지 위주로 설명을 드릴라니 이미지 량이나, 압축파일들 량이 많아, 부득불 제가 만들어 준 제 친구 홈페이지에 링크를 걸어 뒀습니다. 이점 참고하시고 앞으로 몇년간은 짤릴일은 없으니 짤릴 걱정은 안하셔도 되겠네요.
참고로 예제로 사용된 주소나 이미지들은 제 개인홈이 없어 그냥 편의상 친구 홈 디자인 위주로 제작되었습니다.
그럼 첫 시간으로
플래시와 제로보드를 연동시키기 위한 가장 기초 작업이라 할 수 있는 외부 TXT파일에 작성한 각 지정문구(함수)를 호출하여 플래시 내에서 뿌려 주는 방법에 대해 설명해 드리도록 하겠습니다.
아마.... 이 첫 시간 강의만 잘 응용, 연구하여 사용하신다면, 몇몇 분들은 다음시간에 설명해드릴 '제로보드 최근 게시물 만들기'를 굳이 보시지 않더라고 최근 게시물을 플래시로 뿌려줄수 있는 분들도 계실꺼라 생각합니다.
완성예제미리보기연습예제(MX2004버전)연습예제(MX버젼)완성예제(MX2004버전)완성예제(MX버젼)
1. 먼저 상단의 연습예제를 다운받아 압축을 풀어줍니다.
※ 연습예제 sturdy_exercise 폴더에는 memo.txt 하나와 sturdy.fla의 파일이 있습니다.
2. memo.txt 파일을 메모장으로 열어 아래 그림처럼 &title= 란에는 제목을 &memo= 란에는 내용을 입력하여 준뒤 저장후 메모장을 닫아줍니다.
내용은 나중에 적용된 액션효과를 확인이하기 편하도록 되도록 긴 문장을 입력하여 줍니다.
※ 여기서 &title= 는 게시판 호출함수중 해당글의 제목이라 생각하시면 되고, &memo= 란은 해당글의 내용이라 생각하시면 됩니다.
3. 이제 sturdy.fla 파일을 플래시로 열어줍니다.
4. 먼저 가장상단의 액션 레이어를 선택한뒤 액션창에
System.useCodepage = true;
_root.loadVariables("memo.txt");을 입력하여 줍니다.
※ 여기서 System.useCodepage = true;을 입력하는 이유는 한글 깨짐 방지를 위한 것이고(나중에 궁금하면 완성후 첫줄 삭제후 미리보기하여 확인해보세요.^^), _root.loadVariables("memo.txt"); 는 외부 TXT파일의 경로에 해당하는 부분입니다.
5. 액션을 입력하였으면, 제목 레이어를 선택하고 Toolbar에서 Text Tool을 선택하여 줍니다.
6. 이제 아래 그림처럼 제목을 뿌려줄 적절한 곳에, 마우스를 드래그 하여 적절한 크기로, 적절한 곳에 자리를 만들어 줍니다.
※ 완성예제의 포인트 (W:309, H:16, X:67, Y83:)
7. Instance Name란에는 text, 라인 형식은 Single Line, Var에는 title를 입력하여줍니다.
※ 꼭 알아두세요!! Var 지정한 title은 조금전 memo.txt파일의 &title= 란에 입력하였던 내용을 호출하는 것입니다.
8. 이제 내용이 보여줄 자리를 만들어 줄 차례입니다.
역시 Toolbar에서 Text Tool을 선택하고, 마우스를 드래그하여 내용을 뿌려줄 적절한 곳에 자리를 잡아준뒤, Instance Name란에는 text, 라인 형식은 Multiline, Var에는 memo를 입력하여줍니다.
※ Single Line과 Multiline의 차이는, HTML FORM에서 input과 textarea의 차이와 같다고 생각하시면 됩니다. 완성예제의 포인트 (W:309, H:118, X:67, Y104:)
Var 지정한 memo는 조금전 memo.txt파일의 &memo= 란에 입력하였던 내용을 호출하는 것입니다.
9. 이것으로 외부 TXT파일을 호출하는 방법(게시판에 입력된, DB의 테이블에 저장된 내용을 호출하여 뿌려주는 원리와 같음)에 대한것은 끝이 났습니다.
플래시에서 미리보기(Ctrl+Enter)하여 확인하여 보세요.
※ 그림처럼 호출이 제대로 안되는 분들은 2번부터 다시한번 찬찬히 훑어 보시고 문제점을 해결해보세요. 기초적이지만 그만큼 아주 중요한 부분(나중에 최근게시물 뿌려주기를 위한 기초작업)이라 문제를 혼자해결해 보는게 학습에 가장 큰 도움이 될것입니다.
10. 이제 미리보기의 예제처럼 게시물의 내용이 단문이 아니라 장문일 경우 저렇게 작은 장소에서 그 내용을 다 보여줄수가 없습니다. 그렇다면 그 내용들을 다 보여주기위해선 memo부분만 스크롤 시켜 방문자가 직접 특정한 이벤트 효과를 통해 장문의 내용들을 볼 수 있게 하도록 해 보겠습니다.
11. 다시 플래시 편집창으로 돌아가 액션 레이어를 선택한 후 아까 입력하였던 액션 바로 아래부분에
_root.Btn_up.onPress = function() {
_root.onEnterFrame = function() {
_root.memo.scroll--;
};
};
_root.Btn_up.onRelease = function() {
delete _root.onEnterFrame;
};
_root.Btn_down.onPress = function() {
_root.onEnterFrame = function() {
_root.memo..scroll++;
};
_root.Btn_down.onRelease = function() {
delete _root.onEnterFrame;
};
};
를 입력하여 줍니다.
※ 간단하게 설명드리자면 어떤 곳에서 무슨 행동을 하였을때 넌 어떤 행동을 하여라
12. 이제 Library창(라이버리창이 안보이신다면 단축키 Ctrl+L)에서 "버튼 UP"과 "버튼 DW"를 드레그하여 아래그림처럼 각버튼이 들어갈 적절한 장소에 위치시켜 줍니다.
※ 완성예제서의 포인트 버튼 UP(W:34, H:34, X:390, Y88:), 버튼 DW(W:34, H:34, X:390, Y174:)
13. 먼저 "버튼 UP"을 선택하고 Instance Name란에 "Btn_up"이라고 입력합니다.
14. "버튼 DW"을 선택하고 Instance Name란에 "Btn_down"이라고 입력합니다.
※ UP, DW버튼의 Instance Name란에 입력한 것은 액션레이어에 입력한 어떤곳에서 무슨행동을 하였을때중 바로그 어떤 곳에 해당합니다.^^;
15. 이제 모든 작업이 끝났습니다. 미리보기(Ctrl+Enter)하여 완성예제와 똑같이 memo란의 내용이 스크롤되어 보여지는지 확인하여 보세요.^^
※ 스크롤되는 속도를 조절하고 싶으시다구요?
그렇다면 아래 그림처럼 플래시 파일의 기본 속성중 Frame rate값에 입력된 50fps의 수치를 조절해 보세요. 수치가크면 그만큼 동작이 빨라집니다.
이상으로 "플래시와 제로보드 연동 기초 (외부 TXT 파일 호출 하여 뿌려주기)"에 대한 강좌를 마치겠습니다. 플래시를 이용하여 예쁜 파일을 만들기 위해선 물론 알고계신분들도 많겠지만, 제가 얼마전에 알려드린 "플래시에서 포토샵에서 작업한 깔끔한 투명 이미지 임포트 시키는 방법"정도는 기본적으로, 아니 필수로 알아 두셔야 하는 내용이라 생각합니다. 모르시는 분들은 꼭 알아두시길 바라며, 다음 강의('제로보드 최근 게시물 만들기')는 또 시간날때 강의해 드리도록 하겠습니다.
우선 참고로 완성예제와 테스트 게시판만 만들어 플래시와 연동시켜 보았습니다.
예제로 보여주는 방식은 총 2가지로 이번예제에서 알려드리고자 만든 완성예제와 원 드래그(?) 방식의 이벤트 효과를 이용하여 드래그되도록 만들어 보앗습니다.
테스트 게시판에 글을 입력하시고 각각의 텍스트보기 페이지에서 확인해 보시면 될거라 생각되네요.
예전에 어떤분들은 플래시로 왜 게시판을 만드냐고 반문하시는 분들도 계시더군요.
태그가 먹히는것도 아니고 코딩되는것도 짜증나는데 그걸왜 굳이 플래시로 만들어 보여주느냐고요.
이런질문에....
제가 답할수 있는 한마디는......
뽀대나잖아요. ^^;
"플래시와 제로보드 연동 실전예제 테스트 게시판"
테스트 게시판에 새글을 작성하여 확인해보시는건 상관없지만 이왕이면 아무 뜻도 내용도 없는글로 확인하시는것보단 조금 긴글, 좋은글들을 발췌 작성하여 확인해보셨으면하는 작은 소망이 있네요. 혹시모를 뒤에오실 손님들을 위한 작은 배려 차원에서요.^^;
댓글 6
-
정사라
2007.06.29 21:26
감사합니다 이렇게 자세하게 가르쳐주시고 정말 감사합니다..^^ -
김지선
2005.05.20 19:50
좋은 강좌이군요.
그런데 Flash MX 초기버젼에서는 열리지 않네요?
아마 2002년도에 깔았던 것 같은데.. 그 동안 플래쉬는 통 사용하질 않아서요..
MX2004는 아직 구입하질 못 했는지라... -
홈때기~♪
2005.05.21 00:06
MX버전 올렸습니다.
MX2004에서 MX로 버전다운저장시켜 MX에서 정상적으로 불러들일수 있을지는 확인할 수 없어 확인은 못해봤습니다. 한번해보시고 못읽어들이면 알려주세요. 5.0 버젼 설치, 제작후 다시 올려드리겠습니다. -
김지선
2005.05.21 01:02
네.. 잘 됩니다.
아마도 가장 알찬 학습자료가 아니었나 싶네요.
또 좋은 자료가 있으시다면
부탁드리겠습니다.
그럼 ~~~~~~
유익한 시간이었습니다. -
홈때기~♪
2005.05.21 01:30
유익한 시간이셨다니 몇시간동안 강의자료 만든 보람이 이제야 팍팍 느껴지네요.
오랜만에 보람이란 놈을 느끼게해주셔서 고맙습니다. ^^ -
coolboy
2005.05.21 02:28
홈때기님 이미지 박스에 저장해서 작성해주세요..
이런자료 꼭 저장하고싶어요.
좋은 정보 감사드려요..
엔지오 어딘가에 야옹닷컴에서 강좌하다 만 연재강좌가 있었는데.. 못찾겠더군요.