본문 바로가기

fla

html위에플래시올리기


모든 파일은 첨부파일을 다운받으면 확인할 수 있습니다.

서론))
당신은 정중앙 풀스크린 플래시 홈페이지를 만들었습니다. 이제 정보 전달을 위해 게시판을 만들어야 하는데...많은 풀스크린 플래시의 경우(특히 영화 홍보사이트) 대부분 새창열기로 게시판을 처리하거나 아니면 따로 플래시 게시판을 열어 처리라는 경우가 대부분입니다.
새창 열기의 경우 사이트가 지저분하게 보일수 있고 플래시 게시판의 경우 제로보드 만큼 정보 전달력이 뛰어나지 못한 단점이 있습니다.
이제 이런 단점을 보완하고 플래시와 제로보드의 장점을 살려 일체령으로 공존하는 사이트를 만들어 보도록합시다.

1) 전체화면 swf무비 삽입하기

http://namooya.com/lecture/fullFlash/index1.htm
(창을 열고 오른마우스 팝업메뉴의 [소스보기]를 통해 확인할 수 있습니다.)

의 소스는 다음과 같습니다. 이 소스는 같은 폴더에 있는 base.swf란 파일을 보여줍니다.

==========================================>

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html;  charset=">
<TITLE>base</TITLE>
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F0F0F0">
<OBJECT WIDTH="100%" HEIGHT="100%" id="base" ALIGN="">
<PARAM NAME=movie VALUE="base.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=scale VALUE=noscale>
<PARAM NAME=bgcolor VALUE=#747014>
<EMBED src="base.swf" quality=high scale=noscale bgcolor=#747014 WIDTH="100%" HEIGHT="100%" NAME="base" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</BODY>
</HTML>

==========================================>
해석)

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F0F0F0">
==> 좌상귀 경계부의 두꼐를 모두 0으로 지정하고 full 스크린적용시 배경은 플래시 자체 배경에 따르는 것을 원칙으로 합니다. 그러므로 현시점에서 배경의 지정은 별 의미가 없습니다.

<OBJECT WIDTH="100%" HEIGHT="100%" id="base" ALIGN="">
==> swf무비를 심는 object의 머리 태그입니다. 보통 익스플로러 전용태그이고 embed태그보단 그 기능이 더 많습니다. 핵심은 width값과 height값을 100%로 하는 겁니다.

<PARAM NAME=scale VALUE=noscale>
==> 무비의 scale의 속성 패러매터값을 noscale로 지정합니다. 그러면 그 어떤 환경에도 꼭같은 크기의 swf 무비를 보여줍니다.  swf 무비의 바탕색은 htm문서의 바탕색과 같게 할 수도 있고 다르게도 할수 있습니다. 여기서는 구분을 위해 다르게 했습니다.

<EMBED src="base.swf" quality=high scale=noscale WIDTH="100%" HEIGHT="100%" NAME="base" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
==> embed태그는 넷스케이프, 익스플로러 공용태그입니다. object태그와 달리 한꺼번에 각종 속성 패러매터를 지정할 수 있습니다. 내용은 동일합니다.  PLUGINSPAGE의  URL값을 사전에 지정하면 플래시 플러그인이 없을때 플러그인 설치 페이지로 자동으로 넘어가게 됩니다.
이렇게 일반적으로 무비의 삽입은 object 태그와 embed 태그를 같이 사용합니다.

2) 익스플로러에서 전체화면 부르기

http://namooya.com/lecture/fullFlash/index.htm
(창을 열고 오른마우스 팝업메뉴의 [소스보기]를 통해 확인할 수 있습니다.)

전체화면은 보통 html문서를 통해 간접적으로 부릅니다.
swf무비 단독으로 웹에서는 전체화면을 실현시킬수 없고 넷스케이프에서는 전체화면이 실현되지 않습니다. 그래서 보통 익스플로러인지 넷스케이프인지 구분하여 전체화면을 실현시킬 것인지를 결정하는 자바스크립트 함수를 사용하는 경우가 많습니다. 여기서는 익스플로러를 사용한다는 가정에서 바로 전체화면 함수를 사용하겠습니다.

=================================================================>

<html>
<head>
<title>풀스크린 로더</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="Javascript">
<!--
function openwindow(){
window.open("index1.htm","myFlash","fullscreen=yes");
}
//-->
</script>
</head>
<body bgcolor="#660000"  onLoad="openwindow()">
</body>
</html>

=========================================================>

function openwindow(){
window.open("index1.htm","myFlash","fullscreen=yes");
}
==> 이 함수가 호출되면 myFlash란 이름의 창으로 같은 폴더에 있는 index1.htm파일을 풀스크린으로 엽니다.

<body bgcolor="#660000"  onLoad="openwindow()">
==> 함수는 로드시에 호출됩니다.

만약 오른쪽의 스크롤바가 보기 싫으면 꼼수지만 다음 링크를 참고하세요.
http://www.namooya.com/zboard/zboard.php?id=flash&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=118

3) 레이어 할당하기

http://namooya.com/lecture/fullFlash/1.jpg
을 확인합니다.

플래시 무비는 700*500 의 절대 크기를 스크린의 정중앙에 항상 유지하고 있습니다.
이때 플래시 무비는 700*500영역을 벋어나는 부분도 그대로 보여줍니다. 그러므로 실제로 플래시 무비의 크기만 고정되었기 때문에 바깥 영역은 스크린의 크기에 따라 달라지게 됩니다.

평소에는 플래시 무비로 모든 것을 보여주더라도 빠르고 신속한 정보을 위해서 제로보드를 사용해야하는 경우가 생깁니다. 그때 필요에 따라 제로보드를 보여주는 영역은 board영역으로 600*350크기의 정중앙 영역이며 플래시 영역안에서 제로보드를 보여주기 위한 유일한 방법은 아이프레임을 이용하는 것입니다.

결국 다음과 같은 문제가 해결되어야 합니다.
1. 작은 창이든 큰 창이든 스크린의 사이즈와 관계없이 항상 같은 영역에 제로보드가 위치해야한다.
2. 단순이 보여주는게 아니라 마우스 이벤트 등 작동이 가능해야한다. 가령 레이어에 가려진 경우 실제 링크가 보이지만 마우스 이벤트가 작동되지 않는 경우도 있다.
3. 필요에 따라 보여주여주고 숨기기

이들을 모두 만족시키기 위해서는 다음의 해결방법을 사용해야합니다.
일단 위의 2가지를 먼저 해결합시다.
1. 테이블의 상대적 위치 영역잡는 기능과 레이어의 고유기능을 적절히 이용해 어떤 스크린에서도 일정 위치에 제로보드가 놓이게 아이프레임을 적용시킨다.
2. 투명 플래시를 이용한다.

이전 index1.htm에서 수정한 문서 index2.htm의 구문들...

http://namooya.com/lecture/fullFlash/index2.htm

===================================================>

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html;  charset=">
<TITLE>base</TITLE>
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F0F0F0">
<center>
<DIV id=Layer1 style="Z-INDEX: 0; WIDTH: 600px; POSITION: relative; HEIGHT: 100%; visibility: visible">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
    <tr valign="middle" align="center">
      <td>
       <IFRAME src="http://www.namooya.com/zboard/zboard.php?id=jdy" name="inner" id="inner" width=600 height=350 frameborder="no" scrolling="auto">
       </IFRAME>
     </td>
    </tr>
  </table>
</div>
</center>
<DIV id=Layer2 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<OBJECT WIDTH="100%" HEIGHT="100%" id="base" ALIGN="">
<PARAM NAME=movie VALUE="base.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=scale VALUE=noscale>
<PARAM NAME=wmode VALUE=transparent>
<EMBED src="base.swf" quality=high scale=noscale WIDTH="100%" HEIGHT="100%" NAME="base" wmode="transparent" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</div>
</BODY>
</HTML>

==================================================>
해석)
<center>
<DIV id=Layer1 style="Z-INDEX: 0; WIDTH: 600px; POSITION: relative; HEIGHT: 100%; visibility: visible">
==> center 태그는 해당 layer를 정중앙에 위치하게 합니다.
<div>태그를 사용한 이유는 2가지 때문입니다.
첫째는 아이프레임을 사용한 table과 중첩된 레이어를 만들기 위해 또 하나는 레이어의 보여주기 레벨(z-index)을 자바스크립트와 플래시의 연동으로 수시로 바꿀수 있게 하기 위해서입니다.

<div>태그의 id명을 반드시 지정해 주어야 하며  --> id=Layer1
스타일 지정에서
보여주기 레벨을 0으로 --> Z-INDEX: 0
위치는 절대값이 아닌 상대값으로 --> POSITION: relative;
너비는 절대값으로 보드 너비를 그대로 적용해야하며 --> WIDTH: 600px; POSITION: relative; HEIGHT: 100%;
높이는 별의미 없으므로 일단 100%로 지정합니다. --> HEIGHT: 100%;


  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
    <tr valign="middle" align="center">
==> 레이어 안의 테이블 태그를 또 만드는 이유는 안정적인 위치 지정과 레이어 안의  align속성을 따로 지정할 수 있기 때문입니다. 특히  valign="middle"로 지정하는 것은 그 어떤 스크린 환경에서도 언제나  중앙에 아이프레임이 놓이게 하는 열쇠가 됩니다.


      <td>
       <IFRAME src="http://www.namooya.com/zboard/zboard.php?id=jdy" name="inner" id="inner" width=600 height=350 frameborder="no" scrolling="auto">
       </IFRAME>
     </td>
==><td>태그 안에 아이프레임을 적용시켰습니다. name이나 id의 지정을 공통적으로 "inner"라 지정합니다. 이 "inner"는 플래시에서 이 아이프레임속으로 url링크를 호출할때 타켓지정의 열쇠가 됩니다.
높이를 350으로 지정하는 것은 최종적으로 이 부분에서 합니다.

<DIV id=Layer2 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
==> 중첩된 두번째 레이어 "Layer2"는 z-index를 1으로 두고 앞서 만든 레이어 설정과 똑같이 합니다. 기본적으로 플래시 무비는 보여야하므로 visibility의 설정은 따로 하지 않아도 됩니다.

<PARAM NAME=wmode VALUE=transparent>
==> <OBJECT> 태그안에 무비의 투명화 속성을 부여합니다.

wmode="transparent"
==> <EMBED>태그 안에도 무비의 투명화 속성을 부여합니다.

플래시를 투명하게 만들면 최종적으로 플래시의 배경색은 html의 배경색에 종속됩니다.


4) 게시판 레이어 보였다 않보였다 컨트롤하기

http://namooya.com/lecture/fullFlash/index3.htm

===================================================>

<TITLE>base</TITLE>
<script language=JavaScript>
function Show(divid) {
  divid.style.visibility = "visible";
}
function Hide(divid) {
  divid.style.visibility = "hidden";
}
</script>
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F0F0F0">
<center>
<DIV id=Layer1 style="Z-INDEX: 0; WIDTH: 600px; POSITION: relative; HEIGHT: 100%; visibility: hidden">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
    <tr valign="middle" align="center">
      <td>
       <IFRAME src="http://www.namooya.com/zboard/zboard.php?id=jdy" name="inner" id="inner" width=600 height=350 frameborder="no" scrolling="auto">
       </IFRAME>
     </td>
    </tr>
  </table>
</div>
</center>
<DIV id=Layer2 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<OBJECT WIDTH="100%" HEIGHT="100%" id="base" ALIGN="">
<PARAM NAME=movie VALUE="base.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=scale VALUE=noscale>
<PARAM NAME=wmode VALUE=transparent>
<EMBED src="base.swf" quality=high scale=noscale WIDTH="100%" HEIGHT="100%" NAME="base" wmode="transparent" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</div>
</BODY>
</HTML>

================================================>
<head>태그 안에 있는 자바스크립트 함수는  
추후에 플래시의 버튼액션이나 프레임액션 이벤트 액션을 통해 호출할 함수들입니다. 물론 html 문서에서도 컨트롤 가능합니다.

해석)
function Show(divid) {
  divid.style.visibility = "visible";
}
==> 임의로 지정된 divid 레이어의 보여주기 스타일 값을  "visible"로 지정합니다.
만약 안보였던 레이어라면 보이게  됩니다.

function Hide(divid) {
  divid.style.visibility = "hidden";
}
==> 임의로 지정된 divid 레이어의 보여주기 스타일 값을  "hidden" 로 지정합니다.
만약 보였던 레이어라면 안보이게 됩니다.

<DIV id=Layer1 style="Z-INDEX: 0; WIDTH: 600px; POSITION: relative; HEIGHT: 100%; visibility: hidden">
==> 이제 확인을 위해 게시판이 보여질 레이어의 보이기 스타일을 "hidden"으로 수정합니다.

테스트를 해보세요.

나머지는 자질구해 한것인데..
의외로 중요하니까..마무리를 깨끗이 해야합니다.
아무 내용도 없는 blank.htm문서를 만들어..같은 폴더로 올려둡니다.

최종적으로 만든 index3.htm문서를 다시 열고 아이프레임 부분을 수정합니다.
<IFRAME src="blank.htm" name="inner" id="inner" width=600 height=350 frameborder="no" scrolling="auto">

처음 아이프레임 부분은 보여지지 않습니다. 방문객이 제로보드를 보는 경우도 있고 안보고 그냥 나가는 경우가 있는데 아이 프레임을 통해 보이지도 않는
http://www.namooya.com/zboard/zboard.php?id=jdy 페이지를 로드할 필요는 없습니다. 그렇다고 아이프레임에 아무 url도 지정하지 않는다면 브라우저가 "로딩중"이라는 사인을 계속 보냅니다.  결국...로딩 프로세스를 원할할게 하고 사이트의 트래픽을 최소한으로 만들어 효률적인 관리를 위해 "blank.htm"을 이용하는 것입니다.

5) 플래시 무비에서 함수 실행시키기
base.fla파일을 열면 각 종 버튼이 있습니다.
여기에 나와 있는 버튼 액션은 적용의 일부분일뿐 여러가지 방법으로 구사할 수 있습니다.
자동으로 열린다던지..일정 시간이 지나면 게시판 레이어가 보이지 않게된다던지..하는 컨트롤을 플래시에서 할 수 있습니다. 예제와 같은 버튼 액션은 그중에서도 가장 확인이 쉽고 간편한 방법입니다.

[보여진 레이어 아이프레임 링크가기] 버튼 액션
on (release) {
    getURL("http://kr.yahoo.com", "inner");
}

[게시판 링크 보이기]버튼 액션
on (release) {
    getURL("javascript:void(Show(Layer1))");
}

[게시판 레이어숨기기]버튼 액션
on (release) {
    getURL("blank.htm", "inner");
    getURL("javascript:void(Hide(Layer1))");
}
==> 이와 같이 getURL을 이중으로 실행할 수 있습니다.
레이어를 숨길때 blank.htm으로 링크를 바꾸는 것이 브라우저의 부하를 덜 수 있습니다.

[게시판 링크 간 다음 보이기]버튼 액션
on (release) {
    getURL("http://www.namooya.com/zboard/zboard.php?id=jdy", "inner");
    getURL("javascript:void(Show(Layer1))");
}
==> 링크로 url을 호출한 후 보이기 함수를 실행시켜야 보기 좋습니다.

[닫기]버튼 액션
on (release) {
    getURL("javascript:self.close()");
}

만약 플래시 무비의 상황에 따라 게시판이 보여지면서 게시판 레이어에 ///X표시와 같은 플래시 무비가 보여지는 것은 원하지 않거나 마우스 포커싱까지 마음대로 조작///하고 싶다면  
function Show(divid) {
  divid.style.visibility = "visible";
  divid.style.zIndex = 1000;  
}
function Hide(divid) {
  divid.style.visibility = "hidden";
  divid.style.zIndex = 0;
}
로 z-index도 같이 바꿀수 있게 합니다. 이럴 경우 플래시의 좌우측 메뉴는 상관이 없으나 (close버튼) 플래시의 ///상하에 있는 메뉴는 작동하지 않습니다. ///바로 z-index의 변경 때문입니다.
결국 게시판 레이어에 플래시의 오브젝트는 사라지게 됩니다.
이렇듯 방법에 따라 서로 장단점이 있습니다. 구사하고자 하는 효과에 따라 각자 원하는 방법을 사용하세요.

이제 끝났습니다.
최종적으로 만든 index3.htm파일을 index1.htm파일로 이름을 바꾼 다음..
index.htm 를 열어 확인합니다.

꼭지))
아마 하루만에 안될것입니다.
아니 되더라도 너무 많이 헷갈릴 것입니다.
다 완성을 해도 다시 만들 수 있을까 걱정이 될것입니다.
저도 그랬습니다.
하지만 딱 하나 남는게 있습니다. 플래시와 브라우저에서 말하는 레이어의 개념말입니다.