<플래시 북 프로그램 활용편> 1. 스킨 영역에 광고란 삽입 1) 아이템 추가 ① 광고란을 삽입하고자 하는 스킨을 SDF Designer 프로그램에 불러옵니다. ② 윈도우 탭 목록에서 ‘Main’ 윈도우 탭을 선택하여 ‘Main’ 작업창을 활성화 합니다. ③ 아이템 탭에서 ‘General’ 아이템을 선택하고 ‘아이템추가’ 버튼을 누릅니다. ④ ‘인스턴스 네임’ 란에서 추가된 ‘General’ 아이템의 이름을 ‘AD’로 수정합니다.
General object
②
생성
①
2) ‘AD’아이템 작업창에 투명버튼 만들기 ① 프로그램 왼쪽 도구 박스의 ‘투명버튼’을 누른다음 작업영역에 마우스 왼쪽을 누른 상태로투명버튼 영역을 지정합니다. 투명버튼이 생성되면 ‘투명버튼’을 한번 더 눌러 투명버튼 작업을 해제합니다. ② 생성된 투명버튼의 인스턴스 네임을 ‘ad1’ 으로 수정합니다.
① ② 투명버튼그리기
3) 함수 추가 ① ‘ad1’ 투명버튼 오브젝트를 선택한 후 함수 목록에서 ‘loadMovie_SDF()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다.
①
② ②함수 편집 창에서 ‘이벤트’ 란에서 ‘onLoad’ 를 선택하고 ‘함수’란에 아래와 같이 입력합니다.
이상의 작업이 완료되면 ‘도구 박스’에서 ‘츨판하기’를 눌러 스킨파일을 완성합니다.
4) 광고파일 등록 위 ‘함수’란에 입력한 경로(예: http://www.exform.com/a/AD/ad1.swf) 에 ‘ad1.swf’ 라는 파일명의 플래시 광고 파일을 등록해 놓습니다. 5) 스킨 실행 스킨 파일을 익스플로러나 플래시플레이어로 실행하면 아래와 같은 보안관련 설정창이 나타납니다. 이는 로칼PC에 있는 스킨파일이 웹으로 접속(http://www.exform.com/a/AD/ad1.swf))하려고 하기 때문입니다.
해당 스킨 파일을 웹상에서 실행하게되면 보안관련 설정창이 나타나지 않습니다. 따라서 로칼에서 실행할 때 보안관련 설정창을 피하시려면 아래와 같은 별도의 플래시 어플리케이션을 사용하시면 편리합니다. <플래시 파일을 실행할 수 있는 어플리케이션> -곰플레이어 -SWF Opner -기타 플래시 파일 실행 프로그램
2. 플래시북 프린트 기능과 SA플레이어 버전 관계 1) 최신 업데이트(4 차) 된 SDF PageMaker 프로그램에서'publish' 한 플래시북 파일은 SAFlashPlayer 버전 8.0 이하에서는 프린트기능이 정상작동하지 않습니다. 2) exe(실행파일)로 만들경우에도 SAFlashPlayer9.0 버전을 사용하여 '프로젝트 생성' 을 해야합니다.
저장할 위치 선택
3) 결과
파일을 열었을 때 다음과 같은 보안경고가 나타나면 ‘실행(R)’을 선택합니다.
위와 같이 나타납니다.
또한, Flash Player8.0 에서는 페이지 확대시 스킨(뷰어)영역이 깨지는 현상이 나타남
<Flash Player 8.0 에서 확대시 비정상적 작동> 'publish' 된 플래시북 파일을 SAFlashPlayer 로 실행시키고자 할경우에는 버전이 9.0 이상의 것을 사용해야 합니다.
<Flash Player 9.0 에서 확대시 정상적 작동>
3. ‘그리기’ 기능 만들기 1)아이템 추가 1-1.Drawing 아이템 추가 ① ‘그리기’기능을 삽입하고자 하는 스킨을 SDF Designer 프로그램에 불러옵니다. ② 윈도우 탭 목록에서 ‘Main’ 윈도우 탭을 선택하여 ‘Main’ 작업창을 활성화 합니다. ③ 아이템 탭에서 ‘Drawing’ 아이템을 선택하고 ‘아이템추가’ 버튼을 누릅니다. ④ ‘인스턴스 네임’ 란에서 추가된 아이템의 이름을 ‘Drawing’로 수정합니다.
Drawing object
②
생성
①
1-2. 그리기(Drawing)버튼 삽입 1-2-1. 버튼 이미지 추가
1-2-2. 버튼에 함수 추가 ① ‘그리기’ 버튼을 선택한 후 함수 목록에서 ‘viewTogle_SDF()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다. (‘롤오버 버튼’ 란에 체크)
2) ‘Drawing’아이템 작업창에 그리기 도구 만들기 ① 프로그램 오른쪽 도구 박스의 ‘스킨 불러오기’을 누르면 대화창이 생성됩니다. 미리 제작된 그리기 도우용 이미지를 불러옵니다.
②
①
아래와 같이 같이 이미지들을 나열합니다.(이미지 네임_ drawing/eraser/clear/end/drawing_bg.swf)
Drawing image
3)함수 추가 3-1. 그리기(Drawing)버튼에 함수추가 ① ‘drawing.swf’ 이미지를 선택한 후 함수 목록에서 ‘DrawingSetting_SDF()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onLoad’ 를 선택하고 ‘함수’란에 아래와 같이 입력합니다.
③ ‘drawing.swf’ 이미지를 선택한 후 함수 목록에서 ‘DrawingSetting_SDF()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
④ 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택하고 ‘함수’란에 아래와 같이 입력합니다
3-2. 지우개(eraser)버튼에 함수 추가 ① ‘eraser.swf’ 이미지를 선택한 후 함수 목록에서 ‘SDF_eraser()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택 합니다.
3-3. 지우기(clear)버튼에 함수 추가 ① ‘clear.swf’ 이미지를 선택한 후 함수 목록에서 ‘SDF_clearDraw()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다.
3-4. 그만하기(end)버튼에 함수 추가 ① ‘end.swf’ 이미지를 선택한 후 함수 목록에서 ‘SDF_stopDraw()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다.
3-5. ‘그리기’ 도구 박스 이동 기능 만들기 ① ‘Drawing_bg.swf’ 이미지를 선택한 후 함수 목록에서 ‘stsrtDragWin_SDF()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onPress’ 를 선택합니다.
③‘Drawing_bg.swf’ 이미지를 선택한 후 함수 목록에서 ‘stsrtDragWin_SDF()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
④ 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다.
이상의 작업이 완료되면 ‘도구 박스’에서 ‘츨판하기’를 눌러 스킨파일을 완성합니다.
4.결과
<참고> 1. 그리기 기능은 확대페이지에서는 동작하지 않습니다. 2. 그리기 기능을 사용해 그려진 그림은 페이지를 넘기면 사라지게 됩니다.(Ver 1.6) 3. 그리기 기능을 사용해 그려진 그림을 저장하려면 서버와 연동되어야 하며 이를 위해서는 로그인 기능과 함께 서버에 그리기 내용 저장기능을 구축해야 합니다.(자세한 사항은 개발사에 문의하시기 바랍니다.)
4.‘메모’ 기능 만들기 4-1. ‘메모’ 아이템 추가 메모(Memo)기능은 아이템을 추가하지 않습니다. 4-2. ‘메모’(Memo)버튼 삽입 4-2-1. 버튼 이미지 추가
4-2-2. 버튼에 함수 추가(버튼네임_Memo.swf) ① ‘Memo.swf’ 버튼을 선택한 후 함수 목록에서 ‘MemoSetting_SDF%test.txt’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onLoad’ 를 선택합니다. (‘롤오버 버튼’ 란에 체크)
③‘ Memo.swf’ 이미지를 지정한 후 함수 목록에서 ‘SDF_memo’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
④ 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다.(‘롤오버 버튼’ 란에 체크)
이상의 작업이 완료되면 ‘도구 박스’에서 ‘츨판하기’를 눌러 스킨파일을 완성합니다 4 .결과
※
참고
:메모를 입력하는 텍스트 박스입니다.
: 메모장을 최대화/최소화합니다.
: 메모를 시작합니다.
: 메모장를 닫습니다.
5. ‘컨트롤박스(ControlBox)’ 페이지 자동 넘김 속도 조절 방법 5-1. 페이지 넘김 스피드바(speed bar)에 오브젝트선택 ① ‘speedBar.swf’ 이미지를 선택한 후 함수 목록을 선택합니다.
5-2. 함수 수정 ① 오브젝트 속성 패널에서 다음과 같이 함수를 수정합니다.
②함수 편집 창에서 값(기본값, 최소값, 최대값)설정 예)
초기값은 4 초설정
최소값은 1 초 최대값은 8 초설정
5-3. 결과
초기값은 4 초설정
최대값은 8 초설정
최소값은 4 초설정
5.전체 창 닫기 버튼 만들기. 5-1.. ’스킨불러오기’에서 사전에 제작된 버튼을 불러옵니다.(예_close.swf)
5-2. 함수 추가 5-2-1. ‘FSCOMMENT()’ 함수 설정 이 함수는 플래시 플래이어 SA프로그램에서 실행되는 플래시북을 닫습니다. ① ‘close.swf’ 이미지를 지정한 후 함수 목록에서 ‘FSCOMMAND()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다.
② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다. 함수창에 ‘FSCOMMAND%quit’ 넣습니다. (오버 버튼’ 란에 체크).
5-2-2. SDF_globalFunction() 함수 설정 이 함수는 exe(실행파일)로 제작된 플래시북을 닫습니다. ① ‘close.swf’ 이미지를 지정한 후 함수 목록에서 ‘SDF_globalFunction()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다.
② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다. 함수창에 ‘SDF_globalFunction%SDFExit’넣습니다.(오버 버튼’ 란에 체크).
5-2-3. EXTERNAL_Function()함수 설정 이 함수는 웹브라우저(IE)에서 실행되는 플래시북을 닫습니다. ① ‘close.swf’ 이미지를 지정한 후 함수 목록에서 ‘EXTERNAL_Function()’함수를 선택하고 ‘함수추가’버튼을 누릅니다.
② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’ 를 선택합니다. 함수창에 ‘EXTERNAL_Function%function_close’ 넣습니다.(오버 버튼’ 란에 체크).
[참고] EXTERNAL_Function() 함수를 사용하여 웹브라우저를 닫는기능을 만들땐 플래시북을 설정시키는 행당 html에는 다음과 같은 Java Script를 추가해야 합니다. -추가할 Java Script <script> function function_close(){ window.close(); } </script>
ě&#x2DC;&#x2C6;) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>publish_adu</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body leftmargin="0" topmargin="0"> <script src="publish_adu.js"></script> <script> function function_close(){ window.close(); } </script> </body> </html>
5-3. 결과 파일 5-3-1. flash player 9 일 때,
버튼클릭시 창닫힘
5-3-2. internet explorer 일때,
<수정후> ※
SDF designer의 함수추가 이외의 소스추가를 하여야 익스플러에서 닫기 버튼 실행가능
6. 플래시북 페이지 지정하여 실행하기 다음은 웹브라우저에서 플래시북을 실행할 때 페이지를 지정하여 실행하는 방법입니다. 1. PageMaker 프로그램을 사용하여 출판할 때 아래와 같이 설정한 후 '내보내기'를 합니다. '메뉴 > 선택사항 > 내보내기 설정' 에서 'HTML + SWF' 또는 "HTML + SWF + Page폴더'를 선택합니다
2. 출판된 결과 파일중 확장자가 js파일을 '메모장'에서 아래와 같이 수정합니다. ---수정전--<셋째줄> document.write('<param name="movie" value="sample.swf" />') ---수정방법--document.write('<param name="movie" value="sample.swf? BOOKLOAD_FIRSTPAGE=pageNum" />') 위 'pageNum' 부분에 페이지 번호를 입력합니다. ---수정후--document.write('<param name="movie" value="publish_ggg.swf? BOOKLOAD_FIRSTPAGE=3" />')
7. 플래시북 풀 스크린 버튼 만드는 방법 7-1. SDF designer 프로그램에서 풀 스크린 전환용 버튼을 추가합니다.(예_full.swf)
7-2. 함수 추가(추가한 버튼에 아래와 같이 두개의 함수를 추가 합니다.) 7-2-1.’ EXTERNAL_Function%fullScreen’ 함수 추가 ① ‘full.swf’ 이미지를 지정한 후 함수 목록에서 ’ EXTERNAL_Function’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다.
② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’를 선택합니다. 함수창에 ‘FSCOMMAND%fullScreen’ 넣습니다. (오버 버튼’ 란에 체크).
7-2-2.’ FSCOMMAND%fullScreen%true’ 함수 추가 ① ‘full.swf’ 이미지를 지정한 후 함수 목록에서 ’FSCOMMAND함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’를 선택합니다. 함수창에 ‘FSCOMMAND%fullScreen%ture’ 넣습니다. (오버 버튼’ 란에 체크).
7-3. 플래시북을 실행하는 html 소스에 아래와 같은 스크립트를 <body> ... </body> 사이에 추가합니다. ---추가할 스크립트--<script> // 풀스크린 실행 function fullScreen(){ window.open("publish_ggg.html","","fullscreen=yes"); } // 'ESC' 버튼 눌렀을 경우 일반 화면을 돌아감 var dom=0; function keydownhandler(key){ if(document.all) key=window.event; if(dom==3) var EventStatus=key.srcElement.tagName; else if(dom==1) var EventStatus = key.target.nodeName; var kCode=""; var sCode=""; if(dom==3){ if(key.keyCode>0){ sCode=String.fromCharCode(key.keyCode); kCode=key.keyCode; } }else{ ee=key.keyCode; if(key.charCode>0){ sCode=String.fromCharCode(key.charCode); } } if(dom==3 && kCode==27){
window.close(); return true; } } function input(){ dom=document.all ? 3 : (document.getElementByld ? 1 : (document.layers ? 2 : 0)); document.onkeydown = keydownhandler; } input(); </script> 8.페이지 넘김 효과음 만드는 방법 8-1. 작업창의 ‘BookArea’ 영역을 선택합니다.
8-2. 도구박스에서 ‘투명버튼’을 선택한 다음 시작지점을 지정해줍니다.
8-3. 함수추가 ① ‘full.swf’ 이미지를 지정한 후 함수 목록에서 ’loadMovie_SDF()’함수를 선택하고 ‘함수추가’버튼을 누릅니다. ②
①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onPageStart’’를 선택합니다. 함수창에 ‘loadMovie%Pagesound.swf(url)%BookArea(winName)%instence_name_(skinName)’ 넣습니다.
9.플래시북을 풀 스크린으로 전환하는 버튼을 만드는 방법입니다. 9-1. SDF designer 프로그램에서 풀 스크린 전환용 버튼을 추가합니다.
9-2. 추가한 버튼에 아래와 같이 두개의 함수를 추가 합니다. 9-2-1.함수 1: EXTERNAL_Function() ① ‘full.swf’ 이미지를 지정한 후 함수 목록에서 ’EXTERNAL_Function()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
②함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’를 선택합니다. 함수창에 ‘EXTERNAL_Function%fullScreen’ 넣습니다. (오버 버튼’ 란에 체크).
9-2-2.함수 2 : FSCOMMAND 함수추가 ① ‘full.swf’ 이미지를 지정한 후 함수 목록에서 ’ FSCOMMAND()’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’를 선택합니다. 함수창에 ‘FSCOMMAND%fullScreen%ture’ 넣습니다. (오버 버튼’ 란에 체크).
9-3. 플래시북을 실행하는 html 소스에 아래와 같은 스크립트를 <body> ... </body> 사이에 추가합니다. ---추가할 스크립트--<script> // 풀스크린 실행 function fullScreen(){ window.open("publish_ggg.html","","fullscreen=yes"); } function fullClose(){ window.close(); } // 'ESC' 버튼 눌렀을 경우 일반 화면을 돌아감 /* 풀스크린에서 플래시 화면을 누르고 'ESC'를 누를 경우 닫히지 않기 때문에 플래시가 아닌 여백에 마우스 버튼을 클릭 하고 ESC를 눌러서 꺼야 함 대체 방법으로 4,5 번에 나와있는 닫기 버튼을 이용하여 풀스크린을 꺼야함*/ var dom=0; function keydownhandler(key){ if(document.all) key=window.event; if(dom==3) var EventStatus=key.srcElement.tagName; else if(dom==1) var EventStatus = key.target.nodeName; var kCode=""; var sCode=""; if(dom==3){ if(key.keyCode>0){ sCode=String.fromCharCode(key.keyCode); kCode=key.keyCode; } }else{ ee=key.keyCode; if(key.charCode>0){ sCode=String.fromCharCode(key.charCode); } } if(dom==3 && kCode==27){ window.close(); return true; } } function input(){ dom=document.all ? 3 : (document.getElementByld ? 1 : (document.layers ? 2 : 0)); document.onkeydown = keydownhandler; } input(); </script>
9-4. SDF designer 프로그램에서 닫기 버튼을 추가합니다.
9-5. 추가한 버튼에 아래와 같이 두개의 함수를 추가 합니다. 함수 1 : FSCOMMAND%quit ① ‘close.swf’ 이미지를 지정한 후 함수 목록에서 ’ FSCOMMAND’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’를 선택합니다. 함수창에 ‘FSCOMMAND%quit ‘ 넣습니다. (오버 버튼’ 란에 체크).
함수 2 : EXTERNAL_Function%fullClose ① ‘close.swf’ 이미지를 지정한 후 함수 목록에서 ’ EXTERNAL_Function’ 함수를 선택하고 ‘함수추가’버튼을 누릅니다. ② ①
② 함수 편집 창에서 ‘이벤트’ 란에서 ‘onRelease’를 선택합니다. 함수창에 ‘EXTERNAL_Function%fullClose’ 넣습니다. (오버 버튼’ 란에 체크).