[액션스토리]1화. 역동적인다이나믹텍스트메뉴 만들기

[숀팬]

안녕하세요 웹디모 잠수부대중 한명인 숀팬입니다.
음..제가 취업하기전에 여기 웹디모 카페에서 많은 도움을 받았습니다.
그래서 저도 취업을 준비하시는 모든 웹디모 카페님들에게 도움을 주고자
이렇게 액션이야기를 준비 했습니다.

이 액션이야기의 중점된 방향은 취업을 위한분들에게 조금 도움이 되기위해

개인 홈페이지 및 실무에 사용되는 플래시만 가지고 만들어보겠습니다.

그리고 플래시에서 액션에대해서 설명하겠지만 제설명이 미약할수 있기에.

그런분들은 따로 쪽지를 주시면 알려드리겠습니다.

액션을 하려면 기초부터 해야하지만 기초부터하면 제가 중도에 포기할꺼 같아서

이렇게 액션의 기초를 빼고 바로 활용으로 이야기를 시작하겠습니다.

아참!! 액션이야기라고 해서 무조건 액션만 하지는 않고 모션도 하고 이야기도 하고....ㅋ
아무튼 정성껏 준비해서 올리겠습니다.
정말 허접하고 못만들었다고 머라구 하지마시구 그냥 도움되시는 분들이 계셨으면 좋겠습니다.

액션이야기는 일주일에 1~2회정도 생각하고있습니다

만약 바쁘면...더 못할수 있습니다.

비록 기다리는 사람은 없겠지만 ㅋ 저도 회사일을 다니기때문에.. ㅋ

그리고 이 액션이야기는 절대 스크랩 및 무단복제는 허용되지 않습니다.
이 게시물은 여기 웹디모카페에서만 볼수있게 하고 싶습니다.
만약 인터넷상에서 이 게시물이 돌아다니면 바로 모든 게시물을 삭제하겠습니다.
제발 양해 부탁드립니다.

이제 액션이야기 시작하겠습니다.

1회..메뉴 만들기

홈페이지에서 가장 필요한 부분이 각페이지로 갈수있게 하는 메뉴 입니다.

요즘 메뉴는 거의 99..%플래시로 제작을 하고있습니다.

개인홈페이지에서도 중요한것이 메뉴구성 및 UI인데요

남들보다 특별한 메뉴를 만들고 싶을 텐데요

오늘 만들어 볼것은 약간 독특한 메뉴 입니다.

이메뉴가 웹에 나온지는 꽤 됐는데 나올때 서로 따라 만들어 볼려고 노력도 했고

이걸 액션이 아닌 모션으로 노가다를 해서 만드는사람도 있었습니다. (-_-;; 제가 확인햇음)

바로 세계적인 플래셔인 유고 나카무라 홈페이지에 있는 메뉴 입니다.

참고 사이트는 http://www.yugop.com 입니다.

머 제가 알고 있는 이 메뉴가 그사람이 만든거랑 똑같지는 않겠지만 그래도 비슷합니다;;

아참!! 그리고 이 메뉴는 제가 혼자 공부해서 만든게 아니고 여기저기 지식을 듣고 한거니..

명심해 두시길 바랍니다.

자! 이제 플래시를 켜시길 바랍니다.

이제 메뉴를 하나 생성 하는데요 먼저 좌측 Tool에서 텍스트를 선택합니다.

그리고 하단에 properties(속성)창에서 보면 static Text 와 Dynamic Text , 그리고 Input Text가 있

는데요 Dynamic Text를 선택합니다. 저 3가지를 모르시는분은 내친구 네이버~ GOGO하세요 -_-

자 화면 처럼 다이나믹 텍스트를 선택하시구요 원하는 폰트 및 크기 색깔을 정해주세요

그리고 다이나믹 텍스트 를 선택하시고 속성창에 보시면 embed...라는 곳을 클릭해주세요

이 다이나믹 텍스트를 임베디드텍스트로 바꿀려고하는것입니다.

기본 디폴드 폰트를 사용하실경우 저걸 안해줘두 되지만 다른 폰트를 사용할시 웹상에서도

저폰트 글꼴을 보기 위해서는 임베디드폰트로 만들어줘야 합니다 하지만 용량이 늘어납니다

자 임베디드 폰트를 선택하시구 원하는 사항을 선택해주시고 ok버튼을 눌러줍니다.

이 메뉴는 아직 영어로만 구현 되는 단점(?) 물론 한글도 됩니다. 자간까지 알아야 가능합니다

그능력은 제 밖이라 ㅠㅠ 아무튼 저렇게 선택하시고 다시 속성창에 보시면 물론 대부분사람들이

아시겠지만 다이나믹 텍스트는 변수도 줄수있고 인스턴스 네임도 줄수 있습니다.

자 속성창에 var 라는 곳에 "txt" 를 입력하고 인스턴스네임에다가 "_txt"를 입력합니다.

var 는 변수를 지정해 주는곳으로 변수를 사용하여 다이나믹 텍스트에 뿌려줍니다

또 인스턴스부분은 보통 무비클립처럼  움직임 및 색깔 크기등을 제어할수있습니다.

자 이제 이렇게 했으면 다이나믹텍스트를 선택한후에 f8키를 눌러 무비클립으로 만듭니다.

자 무비클립으로 만든후에 이 무비클립을 더블클릭후에 무비클립안으로 들어갑니다.

안으로 들어오면 다시 다이나믹텍스트가 있습니다.

자 이제 레이어를 추가후에 다이나믹텍스트영역을 전부 덮어줄만한 투명버튼을 만듭니다

그리고 인스턴스네임에다가 "btn"를 적어줍니다.

음.. 혹시 투명버튼을 어떻게 만드는지 모르시는분은 없을꺼라 생각됩니다. 모르시는분은 아직 기초가 부족하시니... 이 내용을 보셔두 이해를 못할듯합니다...

자 이렇게 준비 되셨으면 모든 준비는 끝입니다.

이제 레이어를 하나 추가후에 1번프레임을 선택후 f9을 눌러 액션창을 엽니다.

아참!! 이 액션스토리는 액션을 하나하나에대해 자세히 설명하고 이해 해드리는 목적이 아니라...

전체적으로 어떻게 생각이되서 어떻게 돌아가는 원리에 대해 설명을 드리는게 목적입니다.

전자의 목적이 되버리면 기초부터 알려드려야하고 또한 스크롤의 압박과 시간이 만만치 않기에...

전자를 이해하시려면 바로 f1키로 gogo!!하셔서 자세히 help도움을 받으시길....

자 이 동적텍스트메뉴는 전체적으로 보면 각각의 한자한자가 기준이되는 처음 문자로부터 순서대로

보여주면서 원래의 문자로 돌아가는 원리입니다.

무슨말인지 모르시겠죠;; 저도 저 글에대해서 이해가 안됩니다..

자 이 메뉴를 만들기 위해서는 각각의 text에관한 액션을 이해하셔야하는데요..

무쟈게 많습니다 관련된 액션은 -_-;; 그걸 다 설명을 드리기에는 ㅠㅠ

여기 메뉴에 들어가는 2가지 액션만 설명드리겠습니다

원리는 만약 A라는 무자가 있습니다 이 A의 아스키코드의 값을 읽어드려서..

처음 기준점 예로 * 라고하면 *의 아스키코드값을 읽어드려서 *~A까지 순서대로 아스키값을 받습니다

그리고 순서대로 받은 아스키값을 다시 문자로 변환해서 다이다믹텍스트에 뿌려줍니다.

무슨말인지 이해가 되시겠죠 ^^;; 문자를 그대로 읽어들이지 못하니까 아스키값으로 변환해서 읽고 다시 뿌릴때는 무자로 뿌려주는 원리입니다.

자 액션을 적기전에 그럼 테스트를 한번 해보겠습니다

새창을 열고 1번프레임을 선택후 f9를 눌러 액션창을 열고 다음과 같은 액션을 적어봅니다.

trace("b".charCodeAt());
trace("B".charCodeAt());
trace("가".charCodeAt());
trace("하".charCodeAt());

이렇게 적어 주신다음에 실행을 하면 다음과 같은 출력값이 나타납니다.

b,B,가,하 라는 문자의 아스키값이 나타내어졌는데 여기서 적용된 함수는 charCodeAt()입니다.

charCodeAt()함수는 각각의 문자들을 문자들의 아스키값을 변환해주는 함수입니다.

자 그러면 이 아스키값을 다시 문자를 변환해주는 함수를 알아보면 String.fromCharCode(아스키값)

이라는 함수가 있습니다.

한번 액션창에다가 trace(String.fromCharCode(99));라고 적어보시고 실행 해보시면

소문자 c가 나올껍니다.

자 이제 이제 새창을 닫고 다시 원래 페이지로 가셔서 액셕을 입력해 보면..

function ready(){
 readyCode = [];
 targetCode = [];
 currentCode =[];
 
 for(var i=0; i<str.length; i++){
  readyCode[i] ="*".charCodeAt(0);
  currentCode[i] = "*".charCodeAt(0);
  targetCode[i] = str.charCodeAt(i);
 }
}
function displayText(){
 this.onEnterFrame = function(){
  txt = ""; 

  for(var i=0; i<str.length; i++){
   currentCode[i] +=(0.20-i/200)*(targetCode[i] - currentCode[i]);
   txt =txt +String.fromCharCode(Math.round(currentCode[i]));
   
  }
  if(txt ==str) delete this.onEnterFrame;  
 };
}
ready();
displayText();

btn.onRollOver = function(){
ready();
 displayText();
 img.gotoAndStop(2);
 _txt.textColor= 0xEF6C7B;
};
btn.onRollOut = function(){
 ready();
 displayText();
 img.gotoAndStop(1);
 _txt.textColor= 0xAE2D3C
};

위와 같이 입력해보면 됩니다. 헉!! 많이 길어졌져;;; 하지만 이렇게 적어줘야합니다.ㅋㅋ

이제 하나하나씩 집고 가봅시다.

function ready(){
 readyCode = [];
 targetCode = [];
 currentCode =[];
 
 for(var i=0; i<str.length; i++){
  readyCode[i] ="*".charCodeAt(0);
  currentCode[i] = "*".charCodeAt(0);
  targetCode[i] = str.charCodeAt(i);
 }
}

자!! 여기서 보면 ready()라는 함수를 만들어 선언을 하였습니다. 이 ready()함수는 처음 실행을 했을때

디폴트로 선언을 해줘야하는 부분을 적은건데요 먼저 readyCode ,targetCode,currentCode라는 배열을 선언했습니다 배열로 선언하는 이유가 예로들어 PHOTO라는 문구는 우리에게는 단언라고 생각되겠지만 엄연히 P,H,O,T,O 라는 각각의 단어가 줄을 이어 만들어진 것입니다. 각각의 단어이죠 그래서 배열을 선언하여 P,H,O,T,O라는 각각의 단어을 한곳에 뿌려주기위해서 배열을 선언한것입니다.

자 저 3개의 배열은 어떤 배열인지 확인해보겠습니다.

먼저 readyCode[]은 첫시작하는 문자를 나타내는데 이건 처음문자가 무엇부터 시작해서 원하는 문자까지 바꿔줄껏인가를 나타냅니다.

targetCode[]는 끝을 나타내는 문자배열인데 처음 시작해서 어떤글짜에서 멈춰야하는지 나타내는 배열입니다.

그리고 currentCode[]은 현제 상태의 배열을 말합니다 문자를 변화를 줘도 소위 역동적으로 변화 를 주기위해서 처음에는 빠르게 변화하다가 끝문자가 도착할수록 늦어지게 해주는 효과를 주기위해서 배열을 추가하였습니다.

그다음에 for문이 돌아가는데요 한번보시면

for(var i=0; i<str.length; i++){
str.length값만큼증가 인데.. 여기서 length()는 문자의 갯수를 말을 합니다 즉, str이라는 문자의 갯수만큼증가하라는 소리인데 str은 메뉴의 하나를 말을 하겠죠 나중에 str로 메뉴를 넣어줄껍니다.

readyCode[i] ="*".charCodeAt(0);
  currentCode[i] = "*".charCodeAt(0);
  targetCode[i] = str.charCodeAt(i);
이부분을 보면 readyCode[i]="*".charCodeAt(0);부분은 처음 문자를 * 로 시작하겠다고 말을 하것이고 targetCode[i]=str.charCodeAt(i);는 마지막 글자를 str의 문자로 하겠다고 선언했습니다.

종합해보면 일단 str에 들어가는 문자의 갯수만큼 반복하여 처음 문자는 * 로 시작해서 str의 들어가있는 문자까지 보여주고 멈추겠다는 소리입니다.

그다음 액션을 보시면

function displayText(){
 this.onEnterFrame = function(){
  txt = ""; 

  for(var i=0; i<str.length; i++){
   currentCode[i] +=(0.20-i/200)*(targetCode[i] - currentCode[i]);
   txt =txt +String.fromCharCode(Math.round(currentCode[i]));
   
  }
  if(txt ==str) delete this.onEnterFrame;  
 };
}

displayText()함수라고 선언을 합니다. 여기 displayText()함수는 이제 처음과 끝을 보여줄 문자가 선언됐으니 처음부터 끝까지 부드럽게 변화를 주면서 돌아가는 효과를 선언하는 함수입니다.

중요한부분을 보면 일단 txt =" "; 이부분은 아까 다이나믹 텍스트에서 변수를 txt로 선언을 했는데 이 txt는 현제 빈텍스트라고 선언한것입니다.

그리고 다시 for문을 돌리는데요 for문을 돌리는건 다들 아시겠죠? 각각의 단어를 다 돌려야 하기때문에 선언했습니다. 그밑에보면..currentCode[i] +=(0.20-i/200)*(targetCode[i] - currentCode[i]);
이부분이 있는데 이건 처음부터 끝까지 돌면서 보여주는데 이 보여주는 효과를 좀 부드럽게 보여줘라라고 선언 한 부분입니다.

+= 이건 -_- 다 아시겠죠? ;; 혹시몰라 설명드리겠습니다 저 액션에 +=는 다시 풀어쓰면 이렇게 됩니다.

currentCode[i] = currentCode[i]+ (0.20-i/200)*(targetCode[i] - currentCode[i]);

현제타겟 = 현제타겟+ (0.20-i/200)*(끝타겟 -현제타겟); 이라는 말입니다. 많이 본 공식이죠 -0-;

그다음 txt =txt +String.fromCharCode(Math.round(currentCode[i])); 이액션이 가장중요한데요

한마디로 설명하자면 아스키값으로 된것을 다시 문자로 변환해서 다이나믹텍스트에 뿌려줘라  라는

말입니다. 왜 이렇게 되나요? 라고 물으시면 -_- 난감합니다;;  아무튼 여기서 이해가 안될께

Math.round();인데요 이건 머냐하면 이건 한마디로 소수로된값이 있으면 반올림해서 정수로 만드라는것입니다. Math오브젝트중에 하나인데 더 많은걸 알고 싶으시면 네이버 GO!go!;;

소수값이 왜나오냐고 물으시면 그전 액션에서 보시면 (0.2-i/200) 이걸 적용되면 소수값이 나오니까 그렇게 적용시킨것입니다. 자 다음을 보면

if(txt ==str) delete this.onEnterFrame;  
인데요 이건 다들 아시겠죠? txt와 str이 같게되면 위의 onEnterFrame을 삭제하라는 소리입니다.

if문이 이상해요 왜 저렇게 써요? 라고 말하시면 -_- 정석대로 쓰셔도 됩니다

다만 if문안에 내용이 한줄일경우는 저렇게 걍 붙여서 써두 적용이 됩니다.

정석대로 쓰면

if(txt ==str){

     delete this.onEnterFrame;

}

이렇게 나오겠죠 -0-;; 너무 길어지지 않습니까? 한줄로 줄여주세염 ㅋㅋ

자 그다음 보시면...

ready();
displayText();

btn.onRollOver = function(){
 ready();
 displayText();
 _txt.textColor= 0xEF6C7B;
};
btn.onRollOut = function(){
 ready();
 displayText();
 _txt.textColor= 0xAE2D3C
};

ready()와 displayText()함수를 실행하라.

투명버튼 btn을 오버했을때 ready()와 displayText()함수를 실행하라.또 그안에 다이나믹텍스트의

색깔은 EF6C7B이다

여기서 색깔표앞에다가 0x를 왜 붙이냐면 -0- 16진수로 나타내었기때문에 이렇게 적용된것입니다

그 밑부분도 보시면 투명버튼 btn을 롤아웃했을때 ready()와 displayText()함수를 실행하라.또 그안에 다이나믹텍스트의

색깔은 AE2D3C이다 라고 설명드릴수 있습니다.

휴 다 끝났네염! 약간 어렵나요? ㅎㅎ 이제 거의 끝났습니다. 이제 한번 실행을 해볼까요?

실행해보세여!!!

........ 먼가 보이시나요? 먼가 보이시면 다시 처음으로 돌아가서 따라해보시길... 아무것도 안나타나야

정상입니다 왜냐하면 str에다가 어떤 메뉴를 들어가는 선언도 안했으니 아무것도 안나온것이죠 -0-

자 이제 선언해보겠습니다!

지금 무비클립 안에서 액션을 적어주셨고 현제 메뉴라는 무비클립 안에 있으시죠?

이제 밖으로 나옵니다 어떻게 나가요? 라고 물으시면 -_-;;; 바탕에 따불클릭....

자 이제 밖으로 나오시면 최상위(_root)로 되어있는데요 이제 이 무비클립을 선택후에 f9를 열어서

액션창을 엽니다 꼭!!!! 무비클립을 선택후 액션창을 여세요

액션창을 여시고 다음과 같은 액션을 적어줍니다.

onClipEvent(load){
 str = "PROFILE";
}

자 이액션은 설명안드려도 무슨말인지 아시겠죠? 무비가 실행할때 str ="PROFILE"이라는 소리입니다.

자 이제 다 됐습니다.

한번 실행을 해보시기 바랍니다 그럼 멋진(?) 역동적인 텍스트 메뉴가 하나 생성 됐을껍니다.

추가는 어떻게 하나요? 라고 궁금하실텐데 그냥 무비클립을 하나더 복사해서 액션에서 메뉴명만

바꿔주시면 됩니다. 무비클립을 복제했다고 해도 그 해당 액션은 수정해도 똑같이 수정안되니...

그점 명심하시구 한면 4~5개를 복제해서 str부분에 다른 메뉴명을 넣어서 만들어 보세요

그럼 그래도 조금 멋진 메뉴가 완성 될것입니다 ^^;

휴~!! 드디어 1회가 끝났습니다 이글을 쓰는데 무려 4간이나 걸렸습니다 중간에 뒤로가기가 눌러져서 3번 글이 날라갔습니다;;; 말로 설명하면 30분이면 충분하는데 ;; 괜히 뻘짓인가 싶기도 하네요 ㅎㅎ
그래도 분명 도움이 되실분이 있을꺼라 생각하고 이야기를 시작해보았습니다.

한번 따라해보시고 답글로 예제를 올려보시기 바랍니다.

다음 2회때 제가 만든 메뉴(fla)버젼을 올리겠습니다 ^^

답글에 직접만들어보신 메뉴가 없으시면 이 글이 도움이 안되는건줄 알고 바로 삭제하겠습니다;;;

혹시나 제가 실수했던거나 궁금한게 있으면 리플달아주시기 바랍니다.

그럼 즐겁게 만들어보시기 바랍니다

다음 2회;; 언제가 될지 모르겠지만 (... 지금 왜이걸했을까 무쟈게 후회중 ㅠㅠ)

그때 뵙겠습니다

[미스디쟌]

이거 반달양이 궁금해하던 내용인데 ~ 워 수고많이 하셨어여~ 나중에 따라해봐야지!

[단발이]

반달양이 아니고 단발군이겠지.. -ㅅ-

[종이]

만드시는데 정말 고생하셨을것 같은..

[숀팬]

/미스디쟌/오늘따라해보세염~!!오늘답글하나라도안올라오면 삭제!!/종이/죽을꺼같았어염 회사눈치보면서 ㅋ

[현무]

오오..잘보고 갑니다

[이오oiiov]

오호..이런거였군요.. 처음부터 끝까지 다 따라해봤습니다.. 큰 도움이 됐습니다..^^

[윤그리]

^^ 숀팬님 다음 수업글도 기대되네요~ ^^

[숀팬]

ㅎㅎ다음수업은 머할지 벌써부터 고민입니다. 어떤거 하면 좋을까요? ㅋㅋ 다음시간은 창 resize 나 http://www.action-scripter.com/ 여기 나온 땡굴님사이트의 부드러운정렬을 할지... 1번할지 2번할지 .. 선택해주세요 ^^

[윤그리]

간단한 창 리사이징부터가 좋겠네요 ^^)/

[{夢e}]

와웅... 멋지십니다.. 액숀대가 숀팬님 다음 강의 기달께요~ ^0^ 감사 감사

[숀팬]

네 윤그리님 말대로 2화는 간단한 창 리사이징을 하겠습니다 리사이징은 액션에 중요한것은 없고 자바스크립트가 중요한데 제가 자바스크립트는 딸려서 잘설명될지 모르겠네염;; 아무튼 2화는 오늘 준비해서 낼올리겠습니다 ㅎㅎ

[비싼늠]

ㄲ ㅑ ~ 숀팬님 굿임둥 몇번보고 이해하렵니다 한번보고 이해하는것은 과다한 욕심인듯....

[숀팬]

아 비싼늠님 이제 보시는군요 ㅎㅎ 아 덴장!! 만들고있다가 또 이 개샤꾸 엘자전자가 저녁에 일던져주네요 역시나 낼아침에 컨펌! 아써글...엘쟈 후...2화는 낼 힘들꺼 같습니다 OTL

[♡서지♡]

천천히 하셔여..잘보고 갑니다.^^

[배짱]

숀팬님.. 대단하심..--b 냐하~ 재미있어요..ㅋ

[하울]

좋아요 액션강좌~~!! 요즘 플래시 책 매일 보면서 새로운 것을 배워가고 있는데 재밌어요^^ 많은 도움이 될 것 같아요~감사감사~(^-^)b

[음트트트]

오호 ㅎㅎㅎ 이해하기 쉽게 모를것 같은 부분만 핵심 적으로 설명해 주시다니 ㅜㅜ... ㅡ.,ㅡ^ 위에 슬라이드 공식 부분에서 "많이 본 공식이죠 -0-;" << ㅡㅡ;;;; 피식 ㅡㅡ;;;; 액션너무 어렵네요 ㅡ.,ㅡ;;;; 저희사장님이 저보고 저거 만들라고 그러시면 -ㅅ-;; 저도 모션으로 만들듯 ㅋㅋ 강의잘바습니다 ㅎㅎㅎ 넘 유익했어요 ㅎ

[풀그림]

잘봤습니다~~따라해봤구요..결과값 나오니..기분좋네요