메뉴 건너뛰기

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 48030
131 [플래시 MX 동영상 강좌] 15. 이미지 겔러리 제작하기 [9] 서기 2005.06.03 8367
130 플래시에서 포토샵에서 작업한 깔끔한 투명 이미지 임포트 시키는 방법 [5] 홈때기~♪ 2005.04.19 8285
» ActionScript 2_4 sample [2] 하나둘 2006.07.20 8250
128 테두리 없는 플래시 윈도우 띄워주기 [7] 홈때기~♪ 2005.04.19 8233
127 smooth한 움직임을 표현해보자 [2] 최대호 2007.01.03 8213
126 [플래시 MX 동영상 강좌] 11. 혼합 트위닝 [6] 서기 2005.05.30 8142
125 답답강좌 -ㅂ- 무게감있게 떨어지는 공 [11] file 김지성 2003.01.08 8124
124 [팁] 플래시 웹사이트의 사용성(Usability)을 높이기 위한 10가지 팁 [6] Rootin 2003.02.04 8104
123 스위시강좌 // 불 켜고 끄기 (제작 : 달에 잠긴수련) [1] 문학의향기 2006.08.09 8014
122 아름다운 대한민국 플래시,렉토라강좌 윤선미 2007.02.12 7914
121 스위시맥스6강[Goto액션활용] [1] 에듀멘 2006.02.28 7801
120 [허접팁=_=;;] 플래시루 간단하게 3D 사각형 그리기 [8] file 황현구 2002.12.13 7790
119 [플래시 MX 동영상 강좌] 6. 텍스트 에니메이션 [13] 서기 2005.05.25 7781
118 확대해서 보기(일명 돋보기 효과!!) [5] e-ssine.com 2002.12.13 7748
117 [중급] 가위,바위,보 게임 승패 판정법 [4] file 박승제 2004.04.26 7737
116 [플래시 MX 동영상 강좌] 17. 여러개의 파일을 이용한 홈페이지 제작 [20] 서기 2005.06.06 7732
115 아래 만든메뉴 mx2004 버젼입니다 [1] file 한태종 2007.02.26 7713
114 [중급]telltarget 사용예제 [3] 박은석 2002.10.24 7644
113 [플래시 MX 동영상 강좌] 29. 프리로더의 제작 [11] 서기 2005.07.01 7534
112 [입문]플래쉬의 이해 [7] file 황남운 2004.01.07 7501