메뉴 건너뛰기

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 사용자 인터페이스) 마지막은 액션스크립트사전입니다. 그래서 중간으로 넘어가면 샘플이 있어도
초보자가 보기에는 무지 어려워 진도가 나가지 않습니다.
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48026
2235 [힐링포션의 그림판강의] 그림판의 실행, 브러시 크기조절, 색편집 [5] 힐링포션 2002.05.02 3043
2234 [힐링포션의 그림판강의] 글씨에 그림입히기 - 클리핑이미지 [5] 힐링포션 2002.05.02 3779
2233 [힐링포션의 그림판강의] 텍스트 꾸미기 몇가지 [3] 힐링포션 2002.05.02 3535
2232 [힐링포션의 그림판강의] 패턴채우기와 그라데이션 [5] 힐링포션 2002.05.02 4646
2231 중심을 맞추셔야죠... [6] file :)제원 2002.05.03 3108
2230 [리니강좌] 삭제부탁 [2] 리니 2002.05.03 4564
2229 태극기 찍기;; [12] 정낙훈(xynex) 2002.05.05 9111
2228 [디피강좌6]Dark Green Difications[수정1] [16] file Difications 2002.05.05 8107
2227 구띠 강좌입돠~.. 물방울 만들어 먹기.. 아... 쉽다~ [42] file 구띠 2002.05.06 23062
2226 불타는 글자 맹글기;; [7] file 엔플  ̄▽ ̄γ 2002.05.07 8249
2225 허접한 박스 만들기-_-a;;;; [11] 가마ㆀ 2002.05.08 7077
2224 -플래쉬로 CD 회전시키기- [33] 희준품속 2002.05.08 18726
2223 Chals's 핸드폰 도트!!! [27] file 임철수 2002.05.09 11641
2222 [Chals] 포토샵의 꼼수 - 전문가들의 X - File (01) - [10] file Chals 2002.05.10 9649
2221 기업마크회전하기 [4] 강재형 2002.05.10 6805
2220 얼굴에서 흉터, 점을 감쪽같이 지우자. (포토샵6.0) [13] 박재석 2002.05.11 8236
2219 포토샵에서 일괄 처리라고 들어보셨나요? [6] 박재석 2002.05.11 6293
2218 [퍼니페인트]쉽고 간단한 브러쉬 만들기 [1] file funnyPSP 2002.05.11 5200
2217 포토샵에도 법칙이 있다~!!! [8] 이용인 2002.05.12 9409
2216 [퍼니페인트]흔적 살며시 없애버리기 [5] file funnyPSP 2002.05.12 6957