메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

■글자가 돌아가는 로고[MX버전]
[참고사이트] http://www.flashkit.com/movies/Scripting/Physics/ActionSc-Greg_Kuw-5865/index.php



▶일단 소스부터 열어 봅시다.
1.소스를 열면 글씨체에 대해 안내문구(경고문구)가 나옴
  _소스 글씨체는 지원 안하므로 Choose Substitue..클릭 →OK클릭
2.Scene1에 보면 레이어가 2개 있음.
  _everything레이어
  _information레이어
3.Scene1_everything레이어 보면 액션이 4프레임에 걸쳐 있음
①1st프레임 액션
if (_root.getBytesLoaded() != _root.getBytesTotal()) {
        _root.displaytext = "loading "+Math.ceil(_root.getBytesTotal()/1000)+"k";
        gotoAndPlay(_currentframe);
} else {
        gotoAndPlay(2);
}

②2nd프레임 액션
xos = 275;
yos = 30;
sineof = 0;
magnitude = 125;
rspeed = 0.0036;
sb = 0.15;
myText = "gxenet.com :: gxenet.com :: gxenet.com :: ";
myLength = myText.length;
i = 1;
for (i; i<=myLength; i++) {
        duplicateMovieClip ("itemMaster", "char"+i, i);
        _root["char"+i]._x = xos;
        _root["char"+i]._y = yos;
        _root["char"+i].letter = myText.charAt(i-1);
}

③3rd프레임 액션
i = 1;
xm = _root._xmouse;
nxm = ((xos-xm)-2*(xos-xm))/6*rspeed;
for (i; i<=myLength; i++) {
        nxn = Math.cos(sineof+sb*i)*100;
        xsubval = Math.abs(Math.cos((sineof+sb*i)/2)*100);
        _root["char"+i]._x = Math.sin(sineof+sb*i)*magnitude+xos;
        _root["char"+i]._alpha = xsubval;
        _root["char"+i]._xscale = nxn;
        _root["char"+i]._yscale = xsubval+15;
}
sineof += nxm;

④4th프레임 액션
gotoAndPlay(_currentframe-1);

4.라이브러리를 열면
  _2개의 무비클립이 있음
①itemMaster
②runner

▶▶(먼저 쉬운 것 부터)..간단히 로고 만들려면 아래 것만 수정하세요.
제가 작업한 것을 설명하면..
(초보이므로 틀린 점이 있으면 고수님께서 리플로 수정해 주세요.)

1.처음에 지원하지 않는 글씨체는 위에 이야기했고.
  즉. 소스 글씨체는 지원 안하므로 Choose Substitue..클릭 →OK클릭
  _이것은 무비클립 itemMaster를 열고(더블클릭) 편집상태로..
  _스테이지에 보이는 빈사각형을  화살표툴로 클릭
  _(Properties보면)
   dynamic Test인데 글씨체에 [Andover]로 되어 있음 →Arial체로 바꿈
   크기는 50으로 되어 있는데 30으로 바꾸면 글씨가 전체적으로 보임.
2.Scene1에 보면 레이어가 2개 있음.
  _아래 제작자 information 레이어는 delete
3.2nd프레임 액션에 있는 문자열 수정
  myText = "gxenet.com :: gxenet.com :: gxenet.com :: ";
  →myText = "nzeo.com :: nzeo.com :: nzeo.com :: ";
4.로고 가로폭은 2nd프레임 액션에서
  magnitude = 125;  // 125수치를 수정
5.[일단 Test Movie하면]
  아래 2가지에 언급(경고창)이 나오는데 ..그냥 확인(OK)클릭
  *Antialias : 텍스트나 만들어진 무비 등을 표현할 때 부드럽게 보여질 수 있도록 계단현상의 이미지를 부드럽게 보여지도록 표현하는 것입니다.
  *Antialias Text : 텍스트까지 부드럽게 보여질 수 있도록 하여주는 옵션입니다.

▶▶▶(액션스크립트)..책으로만 보고 copy하는 수준.
1.①1st프레임 액션
if (_root.getBytesLoaded() != _root.getBytesTotal()) {
        _root.displaytext = "loading "+Math.ceil(_root.getBytesTotal()/1000)+"k";
        gotoAndPlay(_currentframe);
} else {
        gotoAndPlay(2);
}

위 소스는 프리로드입니다.
(즉..로고플래시가 나올 때 시간이 걸리면 ..잠시 로고프래시앞에 자막으로 보여주는 것)
그런데 이 소스는 보고자하는 실제 플래시가 나오는데 시간이 많이 거리면 있으면 좋으나..
위 로고 플래시는 시간이 거리지 않으므로 없어도 됨...소스를 삭제해도 무관
실제로 위 소스를 하나씩 보면

getBytesLoaded() : 이미 로딩이 끝난(Loaded) 바이트 수(Bytes)를 반환(get)
getBytesTotal()  : 전체 데이트 스트림의 총(Total) 바이트 수(Bytes)를 반환(get)
a = Math.ceil(b) : 올림한 정수값..실예는 큰 책을 보세요.
여기서 Math.ceil(_root.getBytesTotal()/1000) 는 아마 %를 표시하기 위해 값을 ...
즉. "k" = %이면 langing 90% 이렇게 ..물론 수치 90은 진행에 따라 변함.
[해석하면]
진행되는(진행된) 로딩바이트수가 전체(총) 실제 보고자 하는 플래시 스트림 바이트수와 같지 않으면
스테이지(_root) displaytext사각형박스에 loading 수치%를 표시
그리고 현재 프레임(_currentframe)을 계속 나아가고
Loaded된 바이트수가 Total과 같으면(Total에 도달하면)
2프레임으로 가서 (실제 보고자하는 로고플래시를 보여라.)

2.②2nd프레임 액션
    _무비크립(플래시로고 처음위치)
     xos = 275;
     yos = 30;
         위 샘플에서는 스테이지크기 300 ×60   xos(x좌표) = 150으로 했음

  
    _duplicateMovieClip메소드 및 배열은  
         ActionScript 2-3 sample 참조
    _배열에 대해 자세한 것은(배열에 대해서 참조/for문도 같이 있음)
     http://namooya.com/zboard/search.php?my_group=2&my_target=_blank&keyword=배열
    _myText.charAt(i-1); 에서 charAt(i-1)는 의미를 모르겠음.
         로고의 문자열을 itemMaster(dynamic text/변수명 letter)무비클립에 넣는데...

3.③3rd프레임 액션
  _3rd 액션스크립트는 수식임(초기값은 2nd프레임 스크립트)
  _참조로 nxm = ((xos-xm)-2*(xos-xm))/6*rspeed; 값이 플러스이면 항상 "+"방향 오른쪽
   즉 nxm = Math.abs(((xos-xm)-2*(xos-xm))/6*rspeed);

4.실제 적용 액션스크립트(샘플로고)
①1st프레임 액션
//생략 그리고 Scene1에 information 레이어도 delete &라이브러에서 runner무비도 삭제

②2nd프레임 액션
xos = 150;    // 스테이지크기 300 ×60
yos = 30;
sineof = 0;
magnitude = 100;  //로고의 폭
rspeed = 0.0036;
sb = 0.15;
myText = "nzeo.com :: nzeo.com :: nzeo.com :: ";
myLength = myText.length;
i = 1;
for (i; i<=myLength; i++) {
        duplicateMovieClip ("itemMaster", "char"+i, i);
        _root["char"+i]._x = xos;
        _root["char"+i]._y = yos;
        _root["char"+i].letter = myText.charAt(i-1);
}

③3rd프레임 액션
i = 1;
xm = _root._xmouse;
nxm = -1*Math.abs(((xos-xm)-2*(xos-xm))/6*rspeed);   // 항상 왼쪽방향
for (i; i<=myLength; i++) {
        nxn = Math.cos(sineof+sb*i)*100;
        xsubval = Math.abs(Math.cos((sineof+sb*i)/2)*100);
        _root["char"+i]._x = Math.sin(sineof+sb*i)*magnitude+xos;
        _root["char"+i]._alpha = xsubval;
        _root["char"+i]._xscale = nxn;
        _root["char"+i]._yscale = xsubval+15;
}
sineof += nxm;

④4th프레임 액션
gotoAndPlay(_currentframe-1);

*_xmouse값에 따라 속도차이를 느낄 것입니다.
속도가 너무 빠르면 일정값에 조건(if문)을 추가하세요.
3rd프레임 액션에서 sineof += nxm; 위에 if문 추가
..중략
}
if (nxm < -0.05) {                          
    nxm = -0.05;
}
sineof += nxm;

[후기]
1.*.fla 원래 소스는 사이트에 있음.(공개소스)
http://www.flashkit.com/movies/Scripting/Physics/ActionSc-Greg_Kuw-5865/index.php
2.프리로드 플래시 이미지 그리는 법
http://yawoong.com/board/view.php?id=tutorial_dewloo4&no=28
3.프리로드 소스 및 적용하는 이해는 아래 플래시소스를 보시면 좋을 것으로 사료됨.
http://blog.naver.com/lm01?Redirect=Log&logNo=60025408549
4.위 프리로드는 홈페이지가 늦게 뜰때 앞에 보이는 php프리로드와 다름.
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=35350&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B7%CE%B5%F9&sop=and&page=3
5.플래시하는 나의 생각
http://www.goody.pe.kr/
goody는 이렇게 생각합니다.
플래시를 취미로 하는 사람에게, 저 goody처럼 그냥 좋아서 배우는 사람에게 개발자들이나  만들어 낼 정도의 액션스크립트를 배워서 썩먹는 다는 것은 너무나 힘든 일입니다. 그러나 가끔은 자신의 홈피나, 작품에 넣어 보고 싶은 욕망은 있습니다. 이럴 때, 오픈된 소스를 고치는 것도 쉬운일은 아닙니다. 무슨 뜻인지 알아야 고치던 말던 하지요.
_저는 이제 시작하는 초보이므로 더욱더 모름..큰 책을 보고 있으면 앞에 조금은 기초이고 중간은 UI(user interface 사용자 인터페이스) 마지막은 액션스크립트사전입니다. 그래서 중간으로 넘어가면 샘플이 있어도
초보자가 보기에는 무지 어려워 진도가 나가지 않습니다.