메뉴 건너뛰기

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 48027
2235 제1강 3ds 시작하기 - 드로잉 명령 익히기-07 [1] file 최승철 2005.03.13 3671
2234 돌멩이 문자 만들기 file wwolf 2008.09.21 3681
2233 (왕초보용) 스타일 팔레트에 나만의 스타일 만들고 저장하기 [11] file 리체 2002.12.13 3686
2232 '별자리를 찿아서' 콘텐츠제작[초등과학] file 윤선미 2006.06.20 3694
2231 (기초강의)포토샵시작하기 file 최승철 2005.04.28 3696
2230 허접한 모양만들기 -_- [11] file Marine 2003.02.14 3698
2229 이번엔 지우개 틀에 대해서 배워볼까합니다 [3] file 정진혁 2003.01.29 3718
2228 블랙홀을 만들자! [8] file w:)style 2002.03.24 3721
2227 사각으로 이미지 자르기 9 문학의향기 2006.07.28 3721
2226 [PSP5-7]구슬만들기 [7] [М ΙDΘR] 2002.08.13 3737
2225 Exclude 필터 꽁수! [6] madito.징퓬 2003.01.28 3737
2224 [gam+zign] 줄무늬 소용돌이 만들기. [12] -릭a 2002.10.31 3740
2223 [퍼니페인트]페인트샵에서 자판에 글씨 넣기 [6] funnyPSP 2002.03.03 3741
2222 빙수강좌3 디자인강좌!! 디자인에관한 지식이 담겼네요.. ^^; [6] file 이동휘 2002.07.15 3741
2221 [PSP5] 간단하게 글자에 태두리 넣기 [7] file emotions 2002.03.02 3745
2220 아래 가이드 선 그리는 것에 대한 보충강의 [5] 리쯔:) 2003.01.15 3749
2219 [힐링포션의 그림판강의] 글씨에 그림입히기 - 클리핑이미지 [5] 힐링포션 2002.05.02 3779
2218 [빛]스포트라이트 [18] [М ΙDΘR] 2002.08.17 3779
2217 [허접시리즈] 번개 효과를 만들어자...-_-;;; [2] Xrezae 2002.11.06 3779
2216 채널에 관한 기초사항 [7] file 무어 2003.01.28 3779