AUTO
[ID/PW찾기] [회원가입]
뉴스와 정보 (276)
자유 게시판 (392)
가입 인사 (1960)
공지사항 (5)
AJAX 학습 (72)
ASP 질문 (71)
ASP 학습 (271)
MYSQL 학습 (73)
SQLSERVER 학습 (337)
오라클 학습 (66)
데이타베이스 학습 (29)
액션스크립트 학습 (261)
액션스크립트 질문 (65)
퍼온 플래시 (204)
플래시 네비게이션 (59)
플래시 소스 (532)
플래시 연구실 (536)
플래시 질문 (647)
플래시 게임 (53)
플래시 인트로 (44)
플래시 이펙트 (45)
자작 플래시 (83)
태그,HTML 질문 (43)
태그,HTML 학습 (131)
자바,JSP 학습 (161)
자바,JSP 질문 (70)
자바스크립트 학습 (223)
자바스크립트 소스 (73)
자바스크립트 질문 (79)
포토샵 질문 (108)
포토샵 학습 (369)
추천 이미지 (239)
자작 이미지 (81)
퍼온 이미지 (445)
PHP 질문 (62)
PHP 함수 (2658)
PHP 학습 (661)
프로그래밍 학습 (205)
인터넷서버 학습 (346)
인터넷서버 질문 (22)
네이버 속 홈피디자인닷컴
다음 속 홈피디자인닷컴
구글 속 홈피디자인닷컴
엠파스 속 홈피디자인닷컴
야후 속 홈피디자인닷컴
네이트 속 홈피디자인닷컴
싸이월드 홈피디자인닷컴
엠에스엔 홈피디자인닷컴
  홈피디자인닷컴 > 액션스크립트 학습
   
  [플래시] 제1강 3D 흉내내기1(swapDepths로 z축 표현)
  글쓴이 : 손님     날짜 : 05-07-29 01:04     조회 : 4046    
   http://cafe.naver.com/q69/7535 (557)

[플래시] 제1강 3D 흉내내기1(swapDepths로 z축 표현)

 

제17강_3D_흉내내기1.swf
제17강_3D_흉내내기12.swf

 

 

1. 학습목표

   ① swapDepths를 활용하여 원근감을 표현할 수 있다.   

   ② _width와 _height를 활용하여 원근감을 표현할 수 있다. 

 

복습하기(왕 초짜를 위한 액션 9강 삼각함수를 활용한 원운동)

 

angle = 0;
theta = 0;

cx = 100;    //center의 x좌표값이라는 뜻을 줄여 썼습니다.

cy = 100;    //center의 y좌표값이라는 뜻이겠죠? ^^

r = 90:       //반지름을 뜻하는 radius의 첫자를 땄습니다.

_root.attachMovie("ball", "ball", 1);    
function go() {

  angle += 4;            
  theta = angle*2*Math.PI/360;  

  _root.ball._x=cx + r*Math.cos(theta);  
  _root.ball._y=cy + r*Math.sin(theta);

}
setInterval(go, 25);

 

2. 깊이로 원근감 표현하기

 

1. 액션을 활용하여 바탕 화면 한 가운데에 무비클립을 붙여 넣는다.

2. 첫 프레임에 다음과 같은 액션을 적용시켜 무비클립이 단진동하게 만든다.

  

angle = 0;
theta = 0;
cx = 200;
cy = 50;
r = 150;
attachMovie("sun", "sun", 0);   //태양 무비클립을 깊이 0으로 삽입합니다.
sun._x = cx;                          //태양을 무비의 중앙에 위치시킵니다.
sun._y = cy;
attachMovie("earth", "earth", 1);  //지구의 깊이는 초기 값으로 1입니다.
this.onEnterFrame = function() {
   angle += 4;
   theta = angle*2*Math.PI/360;
   earth._x = cx-r*Math.cos(theta);   //좌우로만 단진동시킵니다.
   earth._y = cy;
};

 

3. earth라는 무비클립에 Z라는 변수를 만들어 가상의 z축의 값을 입력하고 이를 swapDepth값에

   적용시킨다.

angle = 0;
theta = 0;
cx = 200;
cy = 50;
r = 150;
attachMovie("sun", "sun", 1);
sun._x = cx;
sun._y = cy;
attachMovie("earth", "earth", 150);
this.onEnterFrame = function() {
   angle += 4;
   theta = angle*2*Math.PI/360;
   earth.Z = r*Math.sin(theta);   //earth무비클립에 Z라는 변수를 생성합니다.
   earth._x = cx-r*Math.cos(theta);
   earth._y = cy;
   earth.swapDepths(earth.Z);   //earht무비클립의 깊이를 조절합니다.
};

 

 

 

2. 깊이와 크기로 원근감 표현하기

 

1. z축의 값으로 크기를 조절한다.

angle = 0;
theta = 0;
cx = 200;
cy = 50;
r = 150;
attachMovie("sun", "sun", 0);
sun._x = cx;
sun._y = cy;
attachMovie("earth", "earth", 1);
this.onEnterFrame = function() {
   angle += 4;
   theta = angle*2*Math.PI/360;
   earth.Z = r*Math.sin(theta);
   earth._x = cx-r*Math.cos(theta);
   earth._y = cy;
   earth.swapDepths(earth.Z);
   earth._width = earth._height=30+earth.Z/10; 

   //earht.Z의 최대가 150, 최소가 -150이므로 earth무비클립의 최대값은 45이고

   //최소값은 15입니다.
};

 

 


2. 후기 :  간단한 것 같아도 기획하고 구현하는 것이 그렇게 쉽지 않습니다.

     우선 지구가 왼쪽에서 오른쪽으로 회전하도록 하기 위해 earth._x=cx-r*Math.cos(theta)를

   썼습니다. 가운데 있는 -부호가 아닌 +이면 맨 오른쪽에서부터 시작되고 cos이 아닌 sin을

   이용하면 가운데에서부터 시작합니다.

     z축의 값은 맨 지구가 맨 왼쪽에 있을때가 0이고 태양 앞으로 나올땐 +로 커지고 태양 뒤로 들어

   갈땐 -로 커져야합니다. 이를 구현할 수 있는 함수는 sin함수이고 최대로 튀어 나왔을 때의 값이

   반지름과 같으면 될 것 같아서 그 앞에 반지름을 곱한 earth.Z=r*Math.sin(theta) 식이 된 것입니

   다.

     자세히 살펴보면 태양이 가끔 깜빡거립니다. 지구와 태양의 깊이가 같을 때에 그렇습니다. 이를

   수정할까 하다가 그냥 놔뒀습니다. 어차피 지구의 깊이가 정확히 0이 되는때가 매우 드믈거든요.

   ^^

     지구의 크기를 기본값을 얼마로 할지 얼마나 커지고 작아지게 할 것인지를 고민했습니다. 삼각

   함수를 활용하여 공간적으로 정확히 표현할까 하다가 그냥 쉽게 접근하라고 임의적으로 구현했

   습니다. 이어지는 강좌에서는 이를 구현해 보도록 하겠습니다.

 

 

3. 과제

 

1. 상하로 운동하게 하면서 원근감을 표현하려면 어떻게 해야할까? (힌트:_y)

 

* 잘 이해 안되는 코드나 구문에 대해 덧글로 질문해 주세요. ^^

 

 

   

 
뉴스와 정보 · 자유 게시판 · 가입 인사 · 공지사항 · AJAX 학습 · ASP 질문 · ASP 학습 · MYSQL 학습 · SQLSERVER 학습 · 오라클 학습 · 데이타베이스 학습 · 액션스크립트 학습 · 액션스크립트 질문 · 퍼온 플래시 · 플래시 네비게이션 · 플래시 소스 · 플래시 연구실 · 플래시 질문 · 플래시 게임 · 플래시 인트로 · 플래시 이펙트 · 자작 플래시 · 태그,HTML 질문 · 태그,HTML 학습 · 자바,JSP 학습 · 자바,JSP 질문 · 자바스크립트 학습 · 자바스크립트 소스 · 자바스크립트 질문 · 포토샵 질문 · 포토샵 학습 · 추천 이미지 · 자작 이미지 · 퍼온 이미지 · PHP 질문 · PHP 함수 · PHP 학습 · 프로그래밍 학습 · 인터넷서버 학습 · 인터넷서버 질문· 플래시 샘플 소스 · 플래시 채팅방 · 플래시 미니홈피 · 플래시 갤러리 · 플래시 RSS리더 · 플래시 PHP 사전 · 플래시 우편번호 찾기 · 플래시 한자게임 · 플래시 달력과시계 · 플래시 포토라이브러리 · 랜덤이미지 · 플래시 달력과시계 · 한글 도메인 · 네이버 블로그 스크랩 · 싸이월드 미니홈피 갤러리 · 싸이월드 미니홈피 등록 · 프로게이머 랭크 · 홈페이지정보 블로그
Copyright ⓒ hompy.info. All rights reserved.