애플민트의 액션스크립트

SSO(Single Sign On) : 통합 인증 로그인, 단일 사용 승인

2011-08-10T09:16:00.006+09:00

# JOSS (Java Open Single Sign-On)

SSO란 Single Sign On 의 약자로 여러개의 사이트에서 한번의 로그인으로 여러가지 다른 사이트들을 자동적으로 접속, 사용하는 방법을 말한다.

일반적으로 서로 다른 시스템, 서로 다른 사이트에서는 각각의 사용자 정보를 관리하게 된다.

하지만 필요에 의해서 각각의 사용자 정보를 연동하여 사용해야 할 경우가 생긴다.

이때 하나의 사용자 정보를 기반으로 여러 시스템을 하나로 개발하기에는 많은 어려움이 따른다. 따라서 각각의 정보를 그대로 두고 통합인증을 사용하게 된다.

이때 각각의 시스템에 로그인할 때 통합 인증 정보가 있는지 확인하고 통합인증정보가 있을경우 타 시스템에서 자동으로 로그인 가능하도록 처리하고, 없을 때는 로그인하면서 통합인증정보를 생성하여 다른 시스템에서 참조 가능하도록 하는 것이다.

** SSO와 세션 클러스터링 의미비교

Single Sign On(통합인증)을 "하나의 아이디/패스워드로 여러 어플리케이션에 접근할 수 있도록 관리하는
통합시스템"을 의미하는 개념적인 층위의 용어라고 할 때, 자바에서의 세션 클러스터링은 이를 구체화한 실제 방법론중의 하나, 즉 SSO의 하위개념으로 해석할 수 있을 듯 합니다.

또한, 자바 세션 클러스터링은 일반적 SSO의 기능인 사용자의 로그인 여부 판별과 고유 아이디 인증을 넘어서, 단일 어플리케이션 상황에서와 마찬가지의 세션 스코프 유지를, 별개의 어플리케이션 또은 물리서버 사이에서도 가능하도록 하는 데에 초점이 맞춰져 있는 논제같습니다.
즉, 다수의 어플리케이션간에 세션 스코프를 연결하고, 스코프에 저장되는 자바 오브젝트들의 상태를 유지할 수 있도록 보장하는 것입니다.

** A,B,C,D 서버가 있다고 할 때의 일반적인 SSO 구현방식

** 1.
사용자가 로그인을 성공할 경우 로그인 처리 페이지가 A,B,C,D 서버에 있는 각각의 loginok.jsp 페이지를
IFRAME을 통해 동시에 호출합니다.
이때, A,B,C,D 서버의 loginok.jsp 페이지는 해당 브라우저 사용자에 대해 로그인 처리를 하고, Requset에 담겨온 loginid를 이용해서 세션에 사용자정보를 담습니다. 로그아웃도 마찬가지로 처리합니다.
4개의 세션이 별개로 생기는 셈이지만, 이는 모두 공통된 하나의 브라우저에 대응하므로, 브라우저가
종료되면 동시에 소멸됩니다.
세션간의 연동(객체 전달같은)은 불가능하지만, 하나의 브라우저에 대해서 각각의 어플리케이션이
동일한 인증상태를 유지하고 있고, 각각의 세션에 저장된 사용자 정보가 동일한 것이라는 무결성을
획득할 수 있습니다.

** 2.
쿠키를 이용하는 방법 (가장 대중적, 메인 도메인이 같을 때)
로그인하면, 고유의 키를 만들어 쿠키에 저장합니다. 각각의 사이트에서는 쿠키에 담긴 이 키값의 여부로, 로그인 여부를 판단하고 세션을 생성하며 키값에 따른 고유한 사용자 정보를 뽑아와 세션에 저장합니다.
로그아웃시에는 쿠키를 지워줍니다.

** 3.
하나의 서버에서 인증처리를 전담하는 방법
로그인과 세션을 관리하는 A서버의 a페이지를, 통합인증이 필요한 모든 페이지에서 프레임으로 포함하고,
처리에 필요한 사용자정보를 여기에 요청, 응답받습니다. a페이지는 XMLHttpRequest를 이용 페이지 갱신없이 A서버의 다른 프로그램을 호출하고 응답을 얻어옵니다.

- 시나리오
1. 메인프레임에서 로그인프레임에 로그인여부 질의 top.loginFrame.getIsLogin();
2. 로그인 프레임의 a페이지는 응답받을 메인프레임의 함수를 이벤트로 등록후 서버측에 요청을 보냅니다.
sendRequest("./isLogin.jsp","data","top.mainFrame.isLogin");
3. 요청받은 서버는 세션을 참조하여 로그인 여부 판단, XMLHttpRequest에 응답합니다.
4. 서버에서의 응답값을 매개변수로 top.mainFrame.isLogin(isLogin); 이 실행됩니다.

일반적인 방법은 아닙니다.

** 4.
세션 클러스터링을 이용한 방법
고유한 키값을 쿠키나 기타 장소에 보관하고, 별개의 서버 프로그램과 소켓으로 통신하여 키값에 대해 배당된 컬렉션에서, 직렬화된 자바객체를 꺼내오거나 혹은 저장하며 그 상태를 유지시키는 방법입니다. 키값(연결)이 유지되는 한, 저장소내의 동일한 객체에 접근할 수 있다는 보장을 만들어줍니다. 즉, 통합 인증보다는, 인증 후의 데이터 공유에 촛점이 맞춰져 있는 것 같습니다.

** 5.
통합인증 솔루션 사용

jQuery : 자동 Tab 이동

2011-01-10T17:41:00.000+09:00

[code as3]

/**
* function : Move Tab 카테고리 Tab 이동
*
* param : move_url 이동할 url 명(input 의 id, name 명)
*
*/
function moveTab(move_url){
alert(move_url);
eval('$("#form 이름").attr("action", "/이동할 path/' + move_url + '.do").submit();');
}

[/code]

jQuery : 날짜 new Date()

2011-01-10T17:37:00.000+09:00

var date = new Date();

var Today = new Array();

Today['Year'] = date.getFullYear();

Today['Month'] = date.getMonth();

Today['Day'] = date.getDate();

jQuery : each() break / continue

2010-12-20T15:27:00.000+09:00

for 문과 같은 기능 each()

$("#아이디명").each(function(i, obj){

return false // break

return true // continue

});

javascript getElementBy-----() 함수 : IE(InternetExplorer)와 FF(FireFox) 차이

2010-11-24T00:32:00.000+09:00

1. getElementById() - document.getElementByid("값")

- id를 이용해서 특정 태그 객체를 찾음.

- id는 원래 html 문서내에서 유일해야 하므로 지정된 id를 가진 태그가 없거나,

두개 이상이면 getElementByid 메서드는 null로 리턴.

ex)

var a = document.getElementByid("test");

alert(a.value);

</script>

# IE : ID와 Name 둘다 찾아 먼저 나온 것 하나를 return.

( IE8부터 FF와 동일하게 ID만 찾음 )

# FF : ID만 찾아 먼저 나온 것 하나를 return.

2. getElementsByName() - document.getElementsByName("값")

- name 이 같은 객체를 배열로 가져오는 매소드.

- 지정된 이름이나 태그이름을 가진 태그 객체의 배열을 리턴하며,

객체를 찾지 못하면 길이가 0인 배열을 리턴함.

- 중복되지 않게 이름을 고유하게 줬더라고 배열로 들어와서 0번을 차지함.

# getElementByName 이란 method는 존재하지 않음.

ex)

var a = document.getElementsByName("test");

document.write("배열 값 출력 : ");

for(var i=0; i<a.length; i++){

document.write(a.value[i] + " ");

}

</script>

3. getElementByTagName() - document.getElementsByTagName("태그명")

- 요소노드의 태그명을 가지고 접근하는 메소드.

ex)

function fun(){

var items = document.getElementsByTagName("");

alert(items.length);

window.onload = func;

}

</script>

- 문서내의 태그명들을 모두 불러와 items 이라는 변수에 저장하게 된다.

- items 라는 변수는 물론 객체변수이고, 만약에 문서내 태그명들이 여러개라면

items라는 변수는 1차원 배열이 된다. (items[0], items[1], items[2] ... )

- items.length : 문서내에 존재하는 태그의 갯수이다.

@RequestParam

2010-11-15T14:19:00.000+09:00

@RequestParam

- RequestParam annotation은 key=value 형태로 화면에서 넘어오는 파라미터를 맵핑된

메소드의 파라미터로 지정해준다.

- 주로 get 방식으로 들어오는 request에서 사용한다.

- 필수 요건이 아닐 경우, @RequestParam(value="id", required="false")와 같이 옵션을 주고

사용할 수 있다.

----------------------------------------------------------------------------------

@Controller
public class LoginController {

@Autowired
private LoginService loginService;

@Autowired
private SampleService sampleService;

/**
   * 사용자로 부터 아이디, 패스워드를 입력받아 인증 성공이면 세션 객체에 계정정보를 담고 사원정보리스트 페이지로 포워딩한다. 인증에
   * 실패하면 로그인 페이지로 다시 리턴한다.
   */
@RequestMapping("/loginProcess.do")
public String login(HttpServletRequest request, @RequestParam("id") String id,
@RequestParam("password") String password) {

// TODO [Step 4-1-01]
// LoginService의 authenticate메소드를 이용하여 로긴여부 체크 Account 객체를 리턴 받는다.
Account account = (Account) loginService.authenticate(id, password);

/*
   * TODO [Step 4-1-03]
   * 가져온 account 객체가 null 아닌 경우
   * request.getSession() 메소드를 통해 Session을 구해 UserAccount 이름으로 Session 에
   * Attribute로 저장한다. 그리고 "redirect:/loginSuccess.do" 값을 반환한다. null 인경우
   * "login" 반환한다.
   */
if (account != null) {
request.getSession().setAttribute("UserAccount", account);
return "redirect:/loginSuccess.do";
} else {
return "login";
}
}

// TODO [Step 4-1-04]
// loginSuccess.do 로 호출된 처리(@RequestMapping(value="/loginSuccess.do", method=RequestMethod.GET) 를 위한
// 메소드(loginSuccess) 를 void 타입의 public 메소드를 만들어라.
@RequestMapping(value = "/loginSuccess.do", method = RequestMethod.GET)
public void loginSuccess() {
}

@RequestMapping("/exception.do")
public String invokeException(@RequestParam("id") String id ) throws Exception {

sampleService.invokeMethodAException();

return null;
}

@Controller

2010-11-15T14:11:00.000+09:00

@Controller

- Controller annotation으로 Controller interface 및 class의 기능을 간단하게 사용할 수 있다.

- Annotation을 사용하지 않고, Controller를 직접 상속받아 쓰는 경우 필요한 xml 설정을

생략할 수 있다.

- SimpleFormController, MultiActionController 등 Controller의 종류를 명시하지 않고

@Controller 설정만으로 사용할 수 있다.

- xxx-servlet.xml 파일에서 component-scan 으로 web controller가 있는 패키지를 명시해

줌으로써, 별도의 bean 설정을 하지 않아도 @Controller로 등록된 클래스 파일에 대한

bean을 자동으로 생성해준다.

- Controller로 사용하고자 하는 클래스에 @Controller 지정해주면 component-scan으로

자동 등록된다.

----------------------------------------------------------------------------------

@Controller
public class LoginController {

@Autowired
private LoginService loginService;

@Autowired
private SampleService sampleService;

/**
   * 사용자로 부터 아이디, 패스워드를 입력받아 인증 성공이면 세션 객체에 계정정보를 담고 사원정보리스트 페이지로 포워딩한다. 인증에
   * 실패하면 로그인 페이지로 다시 리턴한다.
   */
@RequestMapping("/loginProcess.do")
public String login(HttpServletRequest request, @RequestParam("id") String id,
@RequestParam("password") String password) {

@RequestMapping("/exception.do")
public String invokeException(@RequestParam("id") String id ) throws Exception {

sampleService.invokeMethodAException();

return null;
}

}

@RequestMapping

2010-11-15T14:00:00.000+09:00

@RequestMapping

- url을 클래스 또는 메소드와 맵핑시켜주는 역할을 한다.

- Annotation을 쓰지 않을때 지정했던 Controller 등록을 위한 url bean 설정을 생략할 수 있다.

- class에 하나의 url 맵핑을 할 경우, 클래스 위에 @RequestMapping("/url")을 지정하며,

GET 또는 POST 방식 등의 옵션을 줄 수 있다.

- 해당되는 메소드가 실행된 후, return 페이지가 따로 정의되어 있지 않으면

@RequestMapping("/url")에서 설정된 url로 다시 돌아간다.

- 메소드별로 url 맵핑을 할 경우는 메소드 위에 @RequestMapping("/url")로 지정한다.

- return 페이지가 지정되지 않은 경우 원래의 맵핑되었던 url로 돌아간다.

- return type을 String으로 하여 redirect:url또는 forward:url을 사용하여 다른 페이지로

넘길 수 있다.

--------------------------------------------------------------------------------

@Controller
public class LoginController {

@Autowired
private LoginService loginService;

@Autowired
private SampleService sampleService;

/**
   * 사용자로 부터 아이디, 패스워드를 입력받아 인증 성공이면 세션 객체에 계정정보를 담고 사원정보리스트 페이지로 포워딩한다. 인증에
   * 실패하면 로그인 페이지로 다시 리턴한다.
   */
@RequestMapping("/loginProcess.do")
public String login(HttpServletRequest request, @RequestParam("id") String id,
@RequestParam("password") String password) {

// TODO [Step 4-1-04]
// loginSuccess.do 로 호출된 처리(@RequestMapping(value="/loginSuccess.do", method=RequestMethod.GET) 를 위한
// 메소드(loginSuccess) 를 void 타입의 public 메소드를 만들어라.
@RequestMapping(value = "/loginSuccess.do", method = RequestMethod.GET)
public void loginSuccess() {
}

@RequestMapping("/exception.do")
public String invokeException(@RequestParam("id") String id ) throws Exception {

sampleService.invokeMethodAException();

return null;
}

}

eclipse.ini 파일 설정

2010-11-12T17:25:00.000+09:00

-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
128M
-vm
C:\egovCohort_proj\bin\jdk1.5.0\bin\javaw.exe
-framework
plugins\org.eclipse.osgi_3.4.3.R34x_v20081215-1030.jar
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m
-Dfile.encoding=UTF-8

jdk 1.6 -> jdk 1.5 버전 변경 에러

2010-11-12T14:35:00.000+09:00

C:\Users\kimjinmi>java -version
Registry key 'Software\JavaSoft\Java Runtime Environment\CurrentVersion'
has value '1.5', but '1.6' is required.
Error: could not find java.dll
Error: could not find Java SE Runtime Environment.

- 환경변수에서 path의 JAVA_HOME 설정 내용을 맨 앞으로 옮긴다.

- oracle과 java의 경로 설정에 문제가 생겨 이런 에러를 발생시킬 수 있다.

%JAVA_HOME%\bin;C:\TmaxSoft\JEUS5.0\bin;C:\TmaxSoft\JEUS5.0\lib\system;C:\app\kimjinmi\product\11.2.0\dbhome_1\bin;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Dell\Dell Wireless WLAN Card;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Program Files (x86)\Subversion\bin;C:\Program Files\TortoiseSVN\bin;%CATALINA_HOME%\bin;%CATALINA_HOME%\conf\web.xml;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\100\DTS\Binn\

jstl 설명 및 세팅

2010-11-01T20:10:00.000+09:00

# 01

JSTL ( JSP Standart Tag Library )

JSP 에서 자바의 각종 기능을 태그형태로 사용할 수 있도록 정의해서 사용할 수 있는 것을 말합니다. 쉽게 말해서 굳이 자바나 JSP 언어를 쓰지 않고 태그형태로 HTML 상에서 불러다 쓸 수 있다는 말이죠. JSTL 은 커스텀태그의 일종입니다. 그렇다면 또 커스텀 태그가 무슨 뜻일까요?

커스텀 태그

자신이 직접 정의할 수 있는 태그를 말합니다. 평소에 쓰던 태그는 각각 기능이 있지만 그 기능은 한정되어 있고 원하는 기능이 있지만 일반적인 태그의 기능이 한정되었음을 느끼실 때가 많으셨을 겁니다. 그것을 대비하여 자신이 새로운 태그를 만들어 자신만의 태그를 만들 수 잇다는 거죠.

커스텀 태그의 장점

- 라이브러리 형태로 만들어서 필요할 때마다 쓰기 때문에 개발속도의 향상 업

- 일반 태그의 한게점 극복

- 자기가 직접 작성한 태그이기 때문에 유지보수 및 가독성 업

- 반복적 기능을 쉽게 구현이 가능하기 때문에 효율적

최대한 자바코드를 줄이기 위해 거의 모든 자바 코드를 커스텀 태그로 바꾸어 놓은 것을 : JSTL

EL ( Expression Language )

표현언어를 의미함. 자바코드를 대신하여 다른 표현식을 사용함.

<%=age%> -> ${age}

위와 같은 형태로 바꾸어 쓸 수 있다.

EL 을 쓸때는 ${변수명} 형태로 구성

# 02

다운로드 및 세팅

http://jakarta.apache.org/site/downloads/downloads_taglibs-standard.cgi

위의 주소에서 zip 파일을 다운받는다.

압축을 풀고 lib 폴더에 들어 있는 jstl.jar 파일과 standard.jar 파일을 복사해서

tomcat의 lib 폴더 안에, 또는 생성한 프로젝트의 lib 폴더 안에 넣어두면 세팅 완료.

# 03

예제

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>JSP Page</title>
</head>
<body>
<h1>EL Function(JSTL 1.1)</h1>
<c:set var="name" value="Oracle dbms 오라클 클럽" />
<c:set var="name" value="${fn:trim(name)}" /><br/>
</body>
</html>

Tomcat 실행 에러 'starting tomcat Server at localhost' has encountered a problem

2010-10-19T11:20:00.000+09:00

'Starting Tomcat v.6.0 Server at localhost' has encountered a problem.

Serveral ports (80, 8009) required by Tomcat v6.0

Server at locahost are already in use. Thee server may

already be running in another process, or a system

process may be using the port. To start this server you

will need to stop the other process or change the port

number(s).

위와 같은 에러가 난다면 작업 관리자 창을 열어

javaw.exe 를 종료 시키면 에러 없이 잘 실행된다.

javaw.exe 는 톰캣 샐행프로세스이다.

tomcat6.0 환경 설정 & java 환경설정 & 이클립스 연동

2010-10-12T18:09:00.000+09:00

1. 자바 환경변수 설정

컴퓨터 -> 속성 -> 시스템 변수

# JAVA_HOME : C:\Program Files\Java\jdk1.6.0_07

(자신이 설치한 jdk 경로 지정)

# Path : %JAVA_HOME%\bin;

# CLASSPATH

.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\servlet-api;

%JAVA_HOME%\lib\jsp-api

* JDK 보다 Oracle 을 나중에 설치할 경우 Oracle 의 설정 중 Java 1.3.1 이 Path 의 앞을 차지하는 경우가 있다. 이럴 경우 다시 앞으로 놓아야 Java -version 시 1.6.0 으로 제대로 설정된다.

2. 톰캣 환경변수 설정

# CATALINA_HOME : C:\tomcat

# CLASSPATH : %CATALINA_HOME%\bin\servlet-api.jar;

[[ Tomcat 설치 및 환경설정 ]]

1. http://tomcat.apache.org/ -> tomcat6.0 선택

2. tomcat6.0 다운로드

3. 실행하기

4. http://www.eclipsetotale.com/tomcatPlugin.html -> tomcat plug-in 다운받기

5. 다운받은 tomcatPluginV321.zip 압출을 푼 후 압축 푼 폴더 안의

com.sysdeo.eclipse.tomcat_3.2.1 이 폴더를 이클립스 plugins폴더 앞에 복사 해서

붙여넣는다.

6. 이클립스 click -> windows -> Preferences 에서 설정하기

7. Tomcat 의 버전이 올라가면서 보안상의 이유로 서블릿을 실행하지 못하도록 설정되었다.

서블릿을 실행하기 위해서는 다음과 같은 설정을 해주어야한다.

컴퓨터 -> 오른쪽 마우스 -> 속성 -> 고급 시스템 설정 -> 시스템 설정 -> 고급 ->

환경변수 -> path 선택 -> 편집

%CATALINA_HOME%\conf\web.xml

위의 내용을 추가한다.

8. Tomcat6.0 -> conf -> web.xml 파일에서 invoker를 포함한 태그의 주석을 해제한다.

<servlet>
<servlet-name>invoker</servlet-name>
<servlet-class>
org.apache.catalina.servlets.InvokerServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>0</param-value>
</init-param>
<load-on-startup>2</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>invoker</servlet-name>
<url-pattern>/servlet/*</url-pattern>
</servlet-mapping>

9. 톰캣을 실행해도 아래와 같은 에러가 난다. 톰캣 6.x 버전부터는 서블릿 리로딩에 관련된

설정을 해주어야 한다.

java.lang.SecurityException: Servlet of class org.apache.catalina.servlets.

InvokerServlet is privileged and cannot be loaded by this web application

Tomcat6.0 -> conf -> context.xml 파일을 아래와 같이 수정해야한다.

<Context reloadable="true" privileged="true">

태그안에 주황색으로 표시되어 있는 내용만 입력해 주면 된다.

10. Tomcat 실행 해보자. 잘 될것이다.

tomcat server.xml 설정

2010-10-07T11:14:00.000+09:00

tomcat6.0 -> bin -> server.xml 의 파일에서 context 부분의 docbase를 설정해 주어야한다.

docbase는 url에서 localhost:8080 다음의 root 경로를 설정하는 부분이다.

만약 docbase를 C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps

이렇게 설정했다면 webapps폴더 안이 root가 된다.

url에서 경로를 http://localhost:8080/ 다음에 webapps폴더 안에 있는 파일명을 적어주면 된다.

즉, 아래와 같은 의미이다.

http://localhost:8080/ = C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps

만약, Host 태그에서 appBase="webapps" 설정되어 있다면 따로 설정하지 않아도 된다.

이 경우 webapps가 root가 된다. localhost:8000/ 여기가 webapps 폴더 안이 된다.

64bit toad for oracle ora-12514 리스너 에러

2010-09-30T15:01:00.000+09:00

os : windows7 64bit

DB : 32bit client(server)

Toad : 32bit ver.10

tns 리스너가 로컬을 찾지 못해 나는 에러.

listener.ora 파일을 찾아 이렇게 바꿔주자!

SID_LIST_LISTENER =
(SID_LIST =
(SID_DESC =
(SID_NAME = orcl)
(ORACLE_HOME = C:\app\kimjinmi\product\11.2.0\dbhome_1)
# (PROGRAM = extproc) 주석처리
(ENVS = "EXTPROC_DLLS=ONLY:C:\app\kimjinmi\product\11.2.0\dbhome_1\bin\oraclr11.dll")
)
)

빨간색으로 한부분을 자신의 SID 명으로 바꿔준다.

toad는 tns 리스너를 통해 DB에 접근하게 된다.

오라클을 클라이언트가 아닌 서버로 설치할 경우 로컬을 서버로 인식하지 못해

DB 에 접근할 수 없어 에러가 나타난다.

8. BitmapData

2010-04-20T12:22:00.000+09:00

Bitmap이란 픽셀로 이루어진 이미지 데이터를 의미한다.

액션스크립트에서는 이 Bitmap 이미지를 편집하여 사용할 수 있다.

액션스크립트에서 Bitmap을 생성하려면 BitmapData 클래스를 이용하여 생성할 수 있다.

그럼 BitmapData 클래스에 대해 알아보자.

BitmapData

BitmapData 는 display 패키지에 포함되어있다.

BitmapData는 기본적으로 Rectagle을 포함하고 있으며, 픽셀 제한이 있다.

BitmapData 객체의 최대 크기가 8,192픽셀이며 총 픽셀 수는 16,777,216 픽셀을 초과할 수 없다. 따라서 BitmapData 객체의 폭이 8,192 픽셀이면 높이가 2,048 픽셀이어야 한다.

BitmapData 객체 1픽셀은 16진수로 0x00000000 로 나타내며 AARRGGBB로 표현된다.

AA = alpha, RR = red, GG = green, BB = blue 이다.

한 색상은 8bit이고 이것이 ARGB 4개가 하나로 합쳐진 것이므로 32bit 버퍼에 저장된다.

Bitmap 을 생성하기 위해서는 BitmapData 클래스의 BitmapData() 메서드를 이용하면 된다.

BitmapData() 메서드를 이용하여 bitmap을 생성할 수는 있지만 화면에 보여줄 수는 없다.

왜냐면 BitmapData는 DisplayObject가 아니기 때문이다.

지금까지 DisplayObject(눈에 보이는 모든 객체)는 addChild()를 통해 화면에 나타내주었다.

하지만 BitmapData는 DisplayObject가 아니므로 addChild() 할 수 없다.

BitmapData 에서 이미지를 생성하여 로드하는 순간 캡쳐를 뜨고 바로 unload()시키기 때문이다. 여기서 캡쳐는 원본이미지를 핸들링할 수 있는 BitmapData 형태로 바꿔주는 것을 말한다.

플래시에서는 캡쳐를 하면 원본을 캡쳐하고, 이 캡쳐된 비트맵 데이터를 가지고 편집을 한다.

그럼 캡쳐를 어떻게 하냐... BitmapData 클래스의 메서드 중에 draw() 라는 메서드를 이용하면 된다.

Flash Player 또는 AIR 벡터 렌더러를 사용하여 비트맵 이미지에 source라는 파라미터를 그리는 것이다.

여기서 매개변수 IBitmapDrawable은 인터페이스 클래스이다.

IBitmapDrawable (인터페이스 클래스)

눈에 보이는 모든 것들은 DisplayObject를 상속받는다.

DisplayObject는 모든 눈에 보이는 것들을 만든다.

눈에 보이는 모든 것들 : Sprite extends DisplayObject implements IBitmapDrawable

그래서 눈에 보이는 모든 것들은 IBitmapDrawable 인터페이스 클래스를 가지고 있다.

그럼 어떻게 할까? 아래 보이는 계층구조를 한번 살펴보자.

DisplayObject의 하위클래스로 Bitmap 클래가 있다.

그럼 Bitmap 클래스가 또 어떤 기능을 하는지 알아보자.

Bitmap

Bitmap 클래스는 비트맵 이미지를 표시하는 객체이다. 여기서 비트맵 이미지는 Loader클래스를 이용할 수도 있고, Bitmap() 생성자로 만들 수도 있다.

파라미터로 BitmapData를 사용한다.

음...그렇다면 BitmapData 클래스에서 이미지를 생성하고 편집한 걸 Bitmap 클래스가 화면에 보여준다는 말이군..

그럼 예제를 한번 만들어보자.

7. Motion _ (2) 재생 버튼 모션 만들기

2010-04-16T01:17:00.000+09:00

이번에는 버튼으로 모션을 제어하는 예제를 만들어보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

public class MotionExample02 extends Sprite
{
public function MotionExample02()
{
super(); // Sprite 객체 생성

pan_mc.stop(); // 펜 초기 설정 정지

play_mc.stop(); // 재생버튼 초기 설정 정지

// 각 버튼 이벤트 등록
play_mc.addEventListener(MouseEvent.CLICK, playButtonClickHandler);
stop_mc.addEventListener(MouseEvent.CLICK, stopButtonClickHandler);
prev_mc.addEventListener(MouseEvent.CLICK, prevButtonClickHandler);
next_mc.addEventListener(MouseEvent.CLICK, nextButtonClickHandler);

// 각 버튼 마우스 오버시 손모양
setButtons(play_mc);
setButtons(stop_mc);
setButtons(prev_mc);
setButtons(next_mc);
}

/**
* @private
* 버튼 모드
*/
private function setButtons(target:MovieClip):void
{
target.buttonMode = true;
target.useHandCursor = true;
}

/**
* @private
* 재생 버튼
*/
private function playButtonClickHandler(event:MouseEvent):void
{
if(play_mc.currentFrame == 1) // // 재생버튼이면
{
play_mc.gotoAndStop(2); // 일시정지 버튼으로

pan_mc.play(); // 재생

pan_mc.addEventListener(Event.ENTER_FRAME, panStopHandler); // 펜 정지 이벤트 수신 등록
}
else // 일시정지 버튼이면
{
play_mc.gotoAndStop(1); // 재생 버튼으로

pan_mc.stop(); // 펜 정지
}
}

/**
* @private
* 정지 버튼
*/
private function stopButtonClickHandler(event:MouseEvent):void
{
play_mc.gotoAndStop(1); // 재생 버튼 모드
pan_mc.gotoAndStop(1); // // 처음 재생 모드
}

/**
* @private
* 펜 정지
*/
private function panStopHandler(event:Event):void
{
if(pan_mc.currentFrame == pan_mc.totalFrames) // 프레임이 끝나면
{
pan_mc.stop(); // 재생 정지
play_mc.gotoAndStop(1); // 처음 재생 모드로
pan_mc.removeEventListener(Event.ENTER_FRAME, panStopHandler); // 수신 이벤트 제거
}
}

/**
* @private
* 이전 버튼
*/
private function prevButtonClickHandler(event:MouseEvent):void
{
if(pan_mc.currentFrame == 1) // 첫 프레임이면
{
pan_mc.gotoAndStop(pan_mc.totalFrames); //마지막 프레임으로
}
else
{
pan_mc.prevFrame(); // 이전 프레임으로
}
}

/**
* @private
* 다음 버튼
*/
private function nextButtonClickHandler(event:MouseEvent):void
{
if(pan_mc.currentFrame == pan_mc.totalFrames) // 마지막 프레임이면
{
pan_mc.gotoAndStop(1); // 첫 프레임으로
}
else
{
pan_mc.nextFrame(); // 다음 프레임으로
}
}
}
}
[/code]

아주 간단한 예제를 한번 만들어 보았다. 음..잘되는 것 같다. 하지만 여기에는 많이 문제들이 숨어 있다.

7. Motion _(1) 간단한 모션 만들기

2010-04-14T18:10:00.000+09:00

간단한 모션을 한번 만들어보자. 모션을 만들위해서는 MovieClip 클래스를 이용하여 만들어야한다.

액션스크립트 1.0, 2.0 에서는 MovieClip을 많이 사용하였다. 하지만 MovieClip을 많이 사용하게 되면 과도한 메모리 과부하가 일어나는 문제가 발생하는 등 여러가지 단점이 많았다.

그래서 액션스크립트 3.0 에서는 이를 극복하기 위해 새로운 클래스를 만들었다.

주로 Sprite 클래스를 이용한다. 그렇다고해서 MovieClip을 사용하지 않는다는 것은 아니다.

# MovieClip을 사용하는 경우

1. 타임라인을 이용하여 무비를 제어할때 : 애니메이션, 모션

2. Scean 및 FrameLabel을 이용하여 작업할때

3. 타임라인 PLAY HEAD를 조작하는 작업을 할때

위와 같은 경우에는 MovieClip을 이용하여 작업을 한다.

그럼 MovieClip 클래스에 대해 한번 알아보자.

MovieClip 객체는 Sprite 객체와 다르게 타임라인이 있다.

MovieClip은 이렇게 많은 걸 상속받고 있다. 그래서 무겁다고 하는 것이다.

그럼 MovieClip 클래스에서 주로 쓰이는 속성과 메서드에는 어떤 것이 있는지 한번 알아보자.

속성

메서드

주로 쓰이는 메서드는 gotoAndStop(), gotoAndPlay(), nextFrame(), prevFrame(), stop() 이 있다.

자 그럼 이제 예제로 간단한 모션을 만들어 보자.

먼저 플래시 파일을 하나 만들자. 새로 만든 파일에서 ctrl + F8번을 눌러 무비클립 심볼을

하나 만든다.

그런다음 이 무비클립의 인스턴스네임을 rect_mc로 하자.

그럼 타임라인이 아래와 같이 MovieClip심볼이 생성되어 나타난다.

rect_mc 무비클립을 더블클릭하고 들어가서 사각형을 한번더 무비클립으로 만들어준다.

이 무비클립의 인스턴스네임은 inner_mc라고 하자.

그런 다음 타임라인에서 1프레임을 클릭하고 오른쪽 마우스를 클린한다음 Create Classic Tween을 클릭한다.

그런다음 30프레임을 클릭하고 F6을 눌러 프레임을 추가한다.

그런다음 추가한 30프레임에서 사각형을 오른쪽으로 이동시킨다. 그럼 아래와 같이 된다.

마지막으로 properties에서 Class를 아래와 같이 지정한다.

중요한것은 rect_mc 무비클립안에서 inner_mc 라는 무비클립을 하나더 만들어주는 것이다.

여기서 왜 무비클립을 만들고 또 그 안에 무비클립을 만드냐 하면..

모션 줄때 shape으로는 액션을 줄수가 없다.

꼭 무비클립으로 만든 다음에 모션을 줘야한다.

또한 모션을 줄 땐 인스턴스네임이 필요하므로 꼭 인스턴스네임을 지정해 줘야 한다.

그럼 이제 MotionExample01.as 파일을 만들어 보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class MotionExample01 extends Sprite
{
public function MotionExample01()
{
super();

rect_mc.buttonMode = true; // 사각형 마우스 오버시 손모양

rect_mc.stop(); // 초기 상태 정지 설정

rect_mc.addEventListener(MouseEvent.CLICK, clickHandler); // 마우스 클릭 이벤트 등록
}

/**
* @private
* 사각형 클릭
*/
private function clickHandler(event:Event):void
{
rect_mc.addEventListener(Event.ENTER_FRAME, moveRectHandler); // 사각형 이동 이벤트 등록
}

/**
* @private
* 사각형 이동
*/
private function moveRectHandler(event:Event):void
{
if(rect_mc.currentFrame == rect_mc.totalFrames) // 현재 프레임이 마지막 프레임이면
{
rect_mc.stop(); // 사각형 정지 : 타임라인 정지

rect_mc.removeEventListener(Event.ENTER_FRAME, clickHandler); // 사각형 이동 이벤트 제거
}
else
{
rect_mc.play(); // 사각형 이동 : 타임라인 재생
}
}
}
}
[/code]

자 이제 실행해보자. 위의 파란색 사각형을 클립해보자. 잘 실행되는가? 그럼 간단한 모션만들기는 성공!

다음에는 버튼을 추가하여 모션을 제어하는 조금더 복잡한 모션예제를 만들어보자.

FileReference _ (1) 파일 업로드 (PHP-APM 서버 연동)

2010-04-09T04:12:00.000+09:00

파일 업로드 예제를 만들기 전에 필요한 것들이 몇가지 있다. 파일을 올릴 서버가 필요하며, 서버랑 연동할 php파일이 필요하다.

먼저 웹 서버를 구축 해보자. 웹 서버로 APMSETUP을 사용하겠다.

APMSETUP은 APM(Aphach, PHP, MySQL)를 사용할 수 있도록 자동으로 설치, 설정해주는 프로그램이다.

1. 주소창에 http://www.apmsetup.com 이라고 쳐보자.

위와 같은 화면이 나온다. 그럼 저기에서 다운로드 메뉴를 클릭해보자.

그럼 위와 같이 APMSETUP을 다운받아보자. 다운로드를 클릭하고 저장을 누른다.

APMSETUP을 실행시켜보자. 그럼 아래 그림 그림 같이 나온다.

언어를 선택하고 오케이를 누르면 아래와 같은 화면이 나온다.

다음 버튼을 계속누른다. 알아서 세팅이 된다. 그럼 마지막에 아래와 같이 나온다.

마침을 누른다. 와~! 드디어 설치가 완료되었다. 바탕화면과 작업표시줄을 확인해보자.

자 이제 그럼 로컬 서버가 잘 구축되었는지 확인해보자.

주소창에 http://127.0.0.1 을 쳐보자. 그럼 아래와 같이 나온다. 이것이 개인 로컬 서버이다.

위치는 C:/APM_Setup/htdocs 이다.

즉, 127.0.0.1의 위치는 C:/APM_Setup/htdocs 폴더가 된다.

자 이제 준비는 다 끝났다. 그럼 이제 파일 업로드를 한번 만들어보자.

위의 그림 같이 C:/APM_Setup/htdocs 폴더 안에 upload파일을 하나 만들자.

이 폴더는 업로드한 파일이 올려질 폴더이다.

그리고나서 서버랑 연동할 upload.php 파일을 만들자.

먼저 upload.php 파일을 작성해 보자.

[code as3]
<?php
$errors = array();
$data = "";
$success = "false";

function return_result($success,$errors,$data) {
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>

<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
</results>

<?
}

function echo_errors($errors) {
for($i=0;$i<count($errors);$i++) {

?>

<error><?=$errors[$i];?></error>

<?
}
}
switch($_REQUEST['action']) {
case "upload":

$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];
$file_path = $_SERVER['DOCUMENT_ROOT']."/upload";

//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {
   //complete upload
   $filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);

   if(!$filestatus) {
   $success = "false";
   array_push($errors,"Upload failed. Please try again.");
   }
}
else {
$success = "false";
array_push($errors,"File already exists on server.");
}
break;

default:
$success = "false";
array_push($errors,"No action was requested.");
}
return_result($success,$errors,$data);
?>
[/code]

그럼 이제 FileUploadExample.as 파일을 작성해 보도록하자.

[code as3]
package
{
import flash.display.Sprite;
import flash.events.*;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.URLRequestMethod;

public class FileUploadExample extends Sprite
{
private const UPLOAD_HOST:String = "http://127.0.0.1/upload.php";

public function FileUploadExample()
{
super();
setButton();
}

private var uploadURL:URLRequest;

private var file:FileReference;

private function setButton():void
{
select_btn.label = "Select";
upload_btn.label = "Upload";

select_btn.addEventListener(MouseEvent.CLICK, selectButtonClickHandler);
upload_btn.addEventListener(MouseEvent.CLICK, uploadButtonClickHandler);
}

private function configureListener():void
{
file.addEventListener(IOErrorEvent.IO_ERROR, fileIOErrorHandler);
file.addEventListener(ProgressEvent.PROGRESS, fileProgressHandler);
file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileDataUploadCompleteHandler);
file.addEventListener(Event.SELECT, fileSelectHandler);
}

private function selectButtonClickHandler(event:MouseEvent):void
{
if(!file)
{
file = new FileReference();
}
   configureListener();

   file.browse();
}

private function uploadButtonClickHandler(event:MouseEvent):void
{
   var requestData:URLVariables = new URLVariables();
   requestData.action = "upload";

   var request:URLRequest = new URLRequest(UPLOAD_HOST);
   request.method = URLRequestMethod.POST;
   request.data = requestData;

   file.upload(request, "file");
}

private function fileIOErrorHandler(event:IOErrorEvent):void
{
trace("File upload IO Error 발생.", "Error");
}

private function fileProgressHandler(event:ProgressEvent):void
{
var file:FileReference = FileReference(event.target);
trace("progressHandler name=" + file.name + " bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal);
}

private function fileDataUploadCompleteHandler(event:DataEvent):void
{
var xmlData:XML = new XML(event.data);

if(xmlData.success == "true")
{
trace("File Upload Complete", "Success");
}
else
{
trace(xmlData.error, "Error");
}
}

private function fileSelectHandler(event:Event):void
{
select_btn.enabled = true;
fname_txt.text = file.name;
fsize_txt.text = file.size + "bytes";
ftype_txt.text = file.type;
}
}
}
[/code]

자 이제 실행해보자. 그럼 C:/APM_Setup/htdocs/upload 폴더 안에 업로드한 파일이 올라갔을 것이다. 참고로, 여기서는 실행이되지 않으며, APMSETUP을 설치한 분들만 업로드가 가능하다.

FileReference

2010-04-09T01:19:00.000+09:00

FileReference 클래스

FileReference 클래스는 사용자 컴퓨터와 서버사이에서 파일을 업로드나 다운로드를 할 수 있는 방법을 제고하는 클래스이다. 운영체제 대화상자는 업로드할 파일이나 다운로드할 위치를 선택하라고 표시된다.

각각의 FileReference 객체는 사용자 디스크의 단일 파일을 나타내며, 속성으로 파일 사이즈, 타입, 이름, 생성날짜, 수정날짜 등의 정보가 포함되어 있는 속성을 가지고 있다.

참조 :

https://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/net/FileReference.html

그럼 속성과 메서드에 대해 간단하게 살펴보자.

# 속성

위에서 설명했던데로 파일 정보에 관한 속성들이 있다. 이것은 예제를 통해 하나씩 알아보자.

# Method

메서드에는 파일을 업로드, 다운로드 할 수 있는 메서드들이 있다. 이것도 예제를 통해 알아보자.

그런데 업로드, 다운로드 메서드에서 매개변수 URLRequest가 있다. 흠..그럼 이 URLRequest가 뭔지 알아야겠군, 그럼 한번 알아보자.

URLRequest 클래스

하나의 HTTP 요청에 포함된 모든 정보를 가진다.

URLRequest 객체는 Loader, URLStream 및 URLLoader 클래스의 load() 메서드 및 URL 다운로드를 시작하는 기타 로드 작업에 전달된다.

FileReference 클래스의 upload()및 download()메서드에도 전달됩니다.

즉, 외부에서 파일을 가져오기위한 클래스로 통신을 하기위해 기본적으로 갖추어야할 클래스이다.

자, 그럼 이제 URLRequest 클래스에 대해서도 알봤으니 예제를 한번 만들어보자.

6. 스크롤바 _ (2) 간단한 스크롤바 만들기(마우스 클릭)

2010-04-08T23:34:00.000+09:00

저번에 만들었던 스크롤바는 마우스로 Drag & Drog으로 bar를 움직이는 스크롤바였다.

그렇다면 이번에는 bar를 움직이지 않고 마우스로 line을 클릭하였을 때 bar가 line을 클릭한위치에 오도록 만들어보자.

(1) 간단한 스크롤바 만들기 예제 코드와 플래시 파일을 조금 수정하였다.

먼저 플래시 파일의 line을 무비클립으로 만들어 주고 인스턴스명을 line_mc로 하였다.

수정된 코드는 아래와 같다.

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class ScrollBarExample extends Sprite
{
public function ScrollBarExample()
{
super(); // Sprite 객체 생성

scrollBar_mc.bar_mc.buttonMode = true; // 스크롤바 마우스 오버시 손모양

// 스크롤바 마우스다운 이벤트 등록
scrollBar_mc.bar_mc.addEventListener(MouseEvent.MOUSE_DOWN, barMouseDownHandler);

// 스크롤바 라인 클릭 이벤트 등록
scrollBar_mc.line_mc.addEventListener(MouseEvent.CLICK, lineClickHandler);
}

/**
* @private
* 스크롤바 라인 최소값
*/
var min:Number = 0;

/**
* @private
* 스크롤바 라인 최대값
*/
var max:Number = 300;

/**
* @private
* 스크롤바 라인 클릭 위치
*/
var pos:Number;

/**
* @private
* 스크롤바 라인 클릭
*/
private function lineClickHandler(event:MouseEvent):void
{
// 라인 클릭시 스크롤바 클릭 지점으로 이동
scrollBar_mc.bar_mc.x = scrollBar_mc.line_mc.mouseX;

// 라인 클릭 지점 위치 값 표시
showValue(event);
}

/**
* @private
* 스크롤바 마우스 다운
*/
private function barMouseDownHandler(event:MouseEvent):void
{
// 스크롤바 이동 시 값 표시 이벤트 등록
scrollBar_mc.bar_mc.addEventListener(Event.ENTER_FRAME, showValue);

var bounds:Rectangle = new Rectangle(0, 0, 300, 0); // 드래그 영역 지정

// startDrag(lockCenter : Boolean, bounds : Rectangle)
// lockCenter : 마우스 클릭 지점을 중심으로 lock 됨
// bounds : 제한 영역 지정
scrollBar_mc.bar_mc.startDrag(false, bounds); // 드래그 시작

//화면 전체 영역에서 마우스 업 되도록 이벤트 등록
stage.addEventListener(MouseEvent.MOUSE_UP, barMouseUpHandler);
}

/**
* @private
* 스크롤바 마우스 업
*/
private function barMouseUpHandler(event:MouseEvent):void
{
// 스크롤바 이동 시 값 표시 이벤트 리스너 제거
scrollBar_mc.bar_mc.removeEventListener(Event.ENTER_FRAME, showValue);

scrollBar_mc.bar_mc.stopDrag(); // 드래그 멈춤

//화면 전체 영역 이벤트 리스너 제거
stage.removeEventListener(MouseEvent.MOUSE_UP, barMouseUpHandler);
}

/**
* @private
* 위치 값 출력
*
* Math.round() 반올림
*
* 비례식 (300 - 0) : (bar_mc.x - 0) = (max - min) : (pos - min)
* (bar_mc.x - 0) X (max - min) = (300 - 0) X (pos - min)
* pos = (bar_mc.x X(max - min)) / 300 + min
*/
private function showValue(event:Event):void
{
// 클릭 지점 위치 계산 : 비례식 사용
pos = (scrollBar_mc.bar_mc.x * (max - min)) / 300 + min;

// scrollBar_mc.bar_mc.x 값 Number, scrollBar_mc.txt.text는 Sring이므로
// String으로 Casting(형변환) 시켜줌
scrollBar_mc.txt.text = String(Math.round(scrollBar_mc.bar_mc.x));
}
}
}
[/code]

회색라인을 클랙해보자. 스크롤바가 클릭 지점 위치로 오는가? 값도 잘 나오는가? 음..

실행이 잘 된다. 그럼 다음시간에는 이를 활용한 예제를 정말로 만들어 보자.

6. 스크롤바 _ (1) 간단한 스크롤바 만들기

2010-04-07T16:31:00.000+09:00

스크롤바를 이용하여 볼륨, 콘텐츠 등 다양하게 스크롤바를 활용할 수 있다. 그럼 간단하게 스크롤바를 한번 만들어보자.

1. 폴더를 하나 만들고 그안에 ScrollBarExample.as와 ScrollBarExample.fla을 만든다.

ScrollBarExample.fla 파일의 properties에서 Class를 지정한다.

2. 플래시 파일에서 ctrl + F8 을 눌러 무비클립을 하나 만들고, 그 안에 또 하나의 무비클립을 만든다.

이 무비클립은 스크롤바를 이동시킬 무비클립이다. 위의 그림에서 파란색 무비클립이 이에 해당한다. 그리고 라인 하나를 만들고, 이동한 무비클립의 x속성 값을 보여줄 텍스트도 하나 만든다.

3. 인스턴스명을 적어준다.

먼저 처음 만들었던 스크롤바, 라인, 텍스트 3개를 묶어 놓은 무비클립의 인스턴스명을

scrollBar_mc로 한다.

2 에서 만들었던 무비클립안의 스크롤바에 해당하는 파란색 무비클립의 인스턴스명을 bar_mc로 한다.

텍스트는 외부에서 컨트롤할 수 있는 Dynamic Text로 지정하고 인스턴스명은 txt로 한다.

4. ScrollBar.as 파일을 작성한다.

[code as3]
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class ScrollBarExample extends Sprite
{
public function ScrollBarExample()
{
super(); // Sprite 객체 생성

scrollBar_mc.bar_mc.buttonMode = true; // 스크롤바 마우스 오버시 손모양

// 스크롤바 마우스다운 이벤트 등록
scrollBar_mc.bar_mc.addEventListener(MouseEvent.MOUSE_DOWN, barMouseDownHandler);
}

/**
* @private
* 스크롤바 마우스 다운
*/
private function barMouseDownHandler(event:MouseEvent):void
{
// 스크롤바 이동 시 값 표시 이벤트 등록
scrollBar_mc.bar_mc.addEventListener(Event.ENTER_FRAME, showValue);

var bounds:Rectangle = new Rectangle(0, 0, 300, 0); // 드래그 영역 지정

// startDrag(lockCenter : Boolean, bounds : Rectangle)
// lockCenter : 마우스 클릭 지점을 중심으로 lock 됨
// bounds : 제한 영역 지정
scrollBar_mc.bar_mc.startDrag(false, bounds); // 드래그 시작

//화면 전체 영역에서 마우스 업 되도록 이벤트 등록
stage.addEventListener(MouseEvent.MOUSE_UP, barMouseUpHandler);
}

/**
* @private
* 스크롤바 마우스 업
*/
private function barMouseUpHandler(event:MouseEvent):void
{
// 스크롤바 이동 시 값 표시 이벤트 리스너 제거
scrollBar_mc.bar_mc.removeEventListener(Event.ENTER_FRAME, showValue);

scrollBar_mc.bar_mc.stopDrag(); // 드래그 멈춤

//화면 전체 영역 마우스 업 이벤트 리스너 제거
stage.removeEventListener(MouseEvent.MOUSE_UP, barMouseUpHandler);
}

/**
* @private
* 텍스트 필드
*/
private function showValue(event:Event):void
{
// scrollBar_mc.bar_mc.x 값 Number, scrollBar_mc.txt.text는 Sring이므로
// String으로 Casting(형변환) 시켜줌
scrollBar_mc.txt.text = String(Math.round(scrollBar_mc.bar_mc.x));
}
}
}
[/code]

위에서 Drag & Drag에 대한 내용이 나온다. 이해가 잘 되지 않는다면 여기를 참조하자.

또 Rectangle 클래스에 대해서도 나오는 이것도 잘 이해가 가지 않는다면 여기를 참조하자.

실행이 잘 되는가? 그럼 간단한 스크롤바를 만들어보았다. 다음번에 이 스크롤바를 적용한 예제를 만들어보자.

parent 대신 callback 함수 사용하기

2010-04-07T01:38:00.000+09:00

Actionscript 2.0 에서는 parent를 사용하였다. Actionscript 3.0 에서는 parent를 절대 사용하면 안되다. 무조건!!!! 왜냐하면 parent를 사용하게 되면 종속관계에 있어 강한 결합이 되어 유지보수 등이 어려워진다.

parent를 쓰지 않고 부모 클래스에 접근하는 방법은 두가지가 있다.

Event

Main 클래스가 있고 Sample 클래스가 있다. 그런데 Sample 클래스에서 Main 클래스에 값을 전달하고 싶은때 Sample 클래스의 메서드에서 dispatcEvent를 발생시켜 Event 를 통해 메인에 값을 전달할 수 있다. 이벤트에 대해서는 다음에 자세히 알아보도록 하자.

CallBack 함수

callback 함수를 사용하게 되면 이벤트 객체 만드는 시간이 줄어들고, 또한 다이렉트로 연결할 수 있다.

예제를 한번 만들어보자.

1. 폴더 하나를 만들고 그 폴더안에 플래시 파일 하나와 CallBack.as파일 하나를 만든다.

2. 그 안에 classes라는 폴더를 하나 더 만든다.

3. classes 폴더 안에 display라는 폴더를 하나더 만든다. display 폴더 안에 Seed.as 파일

을 하나 만든다.

4. 플래시 파일의 properties에서 Class에 CallBack이라고 적는다.

자, 이제 모든 준비는 끝났다. 이제 CallBack 함수를 이용하여 만들어보자.

먼저, CallBack.as 파일을 작성해보자.

[code as3]
package
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;

import classes.display.Seed;

public class CallBack extends Sprite
{
public function CallBack()
{
super(); // Sprite 객체 생성

configreListeners(); // stage 설정
}

/**
* @private
* 화면 설정
*/
private function configreListeners():void
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); // 화면 전체 영역 이벤트 등록
}

/**
* @private
* 마우스 효과
*
* seedTransparent : 내부 메서드
* seed.onTransparent : 외부 Seed 클래스 내부의 _onTransprarent 속성에
* seedTransparent함수 전달.
* scaleX, scaleY : 객체의 가로, 세로 크기 (백분율)
*/
private function mouseMoveHandler(event:MouseEvent):void
{
var seed:Seed = new Seed(); // 마우스효과 줄 객체 생성

seed.onTransparent = seedTransparent; // 함수명만 적어주면됨

seed.x = mouseX; // 객체의 X좌표 값을 현재 마우스의 X좌표로 위치 설정
seed.y = mouseY; // 객체의 y좌표 값을 현재 마우스의 y좌표로 위치 설정

var ratio:Number = Math.random(); // 임의의 비율값

seed.scaleX = ratio; // 객체 가로크기 임의의 비율값 적용
seed.scaleY = ratio; // 객체 세로크기 임의의 비율값 적용

seed.alpha = Math.random(); // 임의의 알파값 적용

addChild(seed); // 객체 화면에 표시
}

/**
* @private
* 객체 제거
*
* @param diaplay Seed 객체
*/
private function seedTransparent(display:DisplayObject):void
{
removeChild(display); // 화면에서 제거
}
}
}
[/code]

그럼 이제 Seed.as 파일을 만들어보자.

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.ColorTransform;

public class Seed extends Sprite
{
public function Seed()
{
super(); // Sprite 객체 생성

vx = Math.random() * 10 - 5; // -5 ~ 5 사이값
vy = Math.random() * 10; //0 ~ 10 사이값 : 아래로 떨어질거라 무조건 상수값

gravity = 1; // 중력가속도 값 설정

addEventListener(Event.ENTER_FRAME, alphaEnterFrameHandler);
}

/**
* @private
* 속도 : X
*/
private var vx:Number;

/**
* @private
* 속도 : Y
*/
private var vy:Number;

/**
* @private
* 중력가속도
*
* Number사용 : 소수점나옴 : 좀더 자연스러움을 주기위해
*/
private var gravity:Number;

/**
* @private
* callBack 함수
*/
private var _onTransparent:Function;

/**
* @private
* seeTransparent() 설정
*
* @param value CallBack 클래스의 seedTransparent() 메서드
*/
public function set onTransparent(value:Function):void
{
_onTransparent = value; // seeTransparent()를 _onTransparent로 설정
}

/**
* @private
* seeTransparent() 조정
*/
public function get onTransparent():Function
{
return _onTransparent;
}

/**
* @private
* 객체 알파값 설정
*/
private function alphaEnterFrameHandler(event:Event):void
{
vy = vy + gravity; // 중력가속도값(gravity)에 임의의 y속도를 더하여 중력가속도가 됨

this.x += vx; // X속도 값을 현재 객체의 x좌표값으로 설정
this.y += vy; // Y속도 값을 현재 객체의 Y좌표값으로 설정

this.alpha -= 0.05; // 화면에서 점점사라지게 설정

this.scaleX += 0.05; // 가로크기 증가
this.scaleY += 0.05; // 세로크기 증가

var ct:ColorTransform = this.transform.colorTransform; // 객체 색상 변경

ct.color = Math.random() * 0xFFFFFF; // 임의의 색상 설정

this.transform.colorTransform = ct; // 설정 색상값 적용

if(this.alpha < 0) // 객체가 화면에 보이지 않으면
{
removeEventListener(Event.ENTER_FRAME, alphaEnterFrameHandler); //알파로 안보일뿐 사라지지(삭제)는 않음

if(_onTransparent != null) // _onTransparent속성에 함수가 설정되지 않으면
{
_onTransparent(this); // CallBack 클래스의 seedTransparent()의 파리미터로 객체를 넘겨준다.
}
}
}
}
}
[/code]

5. 다양한 객체 만들기 _ Duplicate (3) 충돌감지하여 객체 만들기

2010-04-02T04:32:00.000+09:00

객체들간에 충돌을 감지하여 이미 만들어진 객체와 새로 만들어진 객체가 충돌하지 않고 새로운 객체를 계속 생성하는 것이다. 충돌감지에 대한 자세한 내용은 여기를 참고하자.

[code as3]
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.filters.GlowFilter;

public class Main extends Sprite
{
public function Main()
{
super(); // Sprite 객체 생성

stage.frameRate = 40; // 프레임 속도 40으로 설정
stage.addEventListener(Event.ENTER_FRAME, createParticleHandler); // 프레임마다 이벤트 등록
}

/**
* @private
* 객체 참조 저장 배열
*/
private var holder:Array = new Array();

/**
* @private
* box 객체
*/
private var box:Sprite;

/**
* @private
* 객체 배치
*
* scaleX : scaleY 객체의 가로, 세로 크기 (백분율) 1.0 = 100%
*/
private function createParticleHandler(event:Event):void
{
box = new Box(); // 객체 생성

box.x = Math.random() * stage.stageWidth; // stage 범위 안에 표시할 수 있도록 x좌표 계산
box.y = Math.random() * stage.stageHeight; // stage 범위 안에 표시할 수 있도록 y좌표 계산

box.scaleX = box.scaleY = Math.random() * 1; // 객체를 임의의 크기로 계산

holder.push(box); // box 객체 배열에 추가

if(isOk(box)) // isOk() 함수 호출
{
addChild(box); // box 화면 표시

var glow:GlowFilter = new GlowFilter(); // GlowFilter 적용

glow.color = Math.random() * 0xFFFFFF; // 임의의 색상 적용

box.filters = [glow];
}
else
{
holder.pop(); // 배열에서 객체 삭제
}
}

/**
* @private
* 충돌 감지
*
* @param mc box객체
*/
private function isOk(mc:Sprite):Boolean
{
for(var i=0; i<holder.length-1; i++) // holder 배열 있는 수 만큼
{
var flag:Boolean = holder[i].hitTestObject(mc); // 배열에 저장된 객체와 현재 객체 충돌 비교

if(flag) // 충돌되면
{
return false; // false 반환

break;
}
}
return true; // 충돌되지 않으면 마지막에 true 반환
}
}
}
[/code]

위의 코드에서 나오는 여러가지 클래스의 속성, 메서드에 대해서 간단하게 알아보자.

Stage 클래스

Stage는 Flash 화면에 보이는 전체 영역을 말한다. 그럼 Stage 클래스의 framRate의 속성에 대해알아보자.

stage의 프레임 속도를 설정하나다. 프레임 속도는 fps(frame per second)로 정의된다.
기본적으로 첫번째 SWF 파일의 프레임 속도가 기본 프레임 속도로 설정된다. 프레임 속도의 유효범위는 0.01 ~ 1000 이다.

Array 클래스

배열에 접근하거나 조정할 수 있다. 인덴스는 0 부터이다. 첫번째 요소는 [0] 이다.

push()

배열 끝에 하나 또는 그 이상의 요소를 추가하고 , 추가한 새로운 배열의 길이를 반환한다.

pop()

배열의 마지막 요소를 제거하고, 배열의 요소의 값을 반환한다.

GlowFilter 클래스

객체에 광선 효과를 적용할 수 있는 클래스이다.

DisplayObject 클래스

DisplayObject 클래스의 hitTestObject() 메서드에 대해 알아보자.

객체와 객체간의 외각 영역이 겹치거나 교차하는지 확인한다.

Graphics 클래스

2010-04-02T03:31:00.000+09:00

Graphics 클래스

벡터 모양을 만들 때 사용할 수 있는 메서드가 포함되어 있으며 이것을 지원하는 객체 중에는 Sprite 객체와 Shape 객체가 있다. Graphics 클래스에는 graphics라는 속성이 있는데 이 속성을 이용하여 드로윙 할 수 있다.

하지만 Graphics 클래스는 new Graphics() 처럼 객체로 만들면 예외가 발생하므로 객체로 만들어 사용할 수 없으며, 이 클래스가 최종 클래스이므로 하위 클래스도 만들 수 없다.

그럼 어떻게 사용하느냐...위의 설명 두번째 줄에서 처럼 Sprite 클래스 또는 Shape 클래스를 이용하여 사용한다.

[code as3]
var rect:Sprite = new Sprite();

var g:Graphics = rect.graphics;
[/code]

위와 같이 사용하여야 한다. 그럼 Graphics 클래스에서 주로 쓰이는 메서드에 대해 알아보자.

메서드

:: clear() : Graphics 객체에 그린 그래픽을 지우고 채우기 및 선 스타일을 다시 설정.

:: lineStyle() : Graphics 메서드를 호출할 때 사용되는 선 스타일을 지정.

- thickness — 선의 두께를 포인트 단위로 나타내는 정수이며 유효한 값은 0-255.

- color — 선의 16진수 색상값.

- alpha — 선 색상의 알파값.

:: beginFill() : Graphics 메서드를 호출할 때 사용되는 선 스타일을 지정.

- color — 채우기 색상.

- alpha — 채우기의 알파 값(0.0 ~ 1.0).

:: drawRect() : 사각형을 그림.

- x — 부모객체 기준으로 가로 위치 설정.

- y — 부모객체 기준으로 가로 위치 설정.

- width — 사각형 너비.

- height — 사각형 높이.

:: endFill() : beginFill(), beginGradientFill() 또는 beginBitmapFill()메서드에

대한 마지막 호출 이후로 추가된 선과 곡선에 채우기를 적용.

그럼 예제를 하나 만들어보자. 좌측 상단 (0, 0)에 빨간 사각형을 만들어보자.

[code as3]
package
{
import flash.display.Graphics;
import flash.display.Sprite;

public class Main extends Sprite
{
public function Main()
{
   super(); // Sprite 객체 생성

   drawRect(); // 사각형 그리기 위한 메서드 호출
}

   public function drawRect():void
   {
var thisGraphics:Graphics = this.graphics;

thisGraphics.clear();
   thisGraphics.beginFill(0xFF0000, 1);
thisGraphics.drawRect(0, 0, 100, 100);
thisGraphics.endFill();
}
}
}
[/code]

5. 다양한 객체 만들기 _ Duplicate (2) 일정한 패턴으로 위치하기

2010-04-01T04:59:00.000+09:00

일정한 간격을 갖는 GRID(격자) 객체에 다양한 스타일을 적용한 예제를 한번 만들어보자.

이번 예제에서는 버튼을 무비클립을 만들어서 사용하는 것이 아니라 Graphics 클래스를 이용하여 직접 만들어보겠다. 그 전에 Graphics 클래스가 어떤 기능을 하는 클래스인지 알아봐야겠다. Graphics 클래스는 여기를 참조하자.

[code as3]
package
{
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.IEventDispatcher;
import flash.geom.ColorTransform;

public class Main extends Sprite
{
public function Main()
{
super(); // Sprite 클래스 생성

stage.scaleMode = "noScale"; // 플레이어 크기와 상관없이 화면 내용 고정
stage.align = "TL"; // stage 정렬 : Top, Left

seedBox = new Sprite(); // 화면 Container 생성

seedBox.x = 50;

addChild(seedBox); // 화면에 표시

createButtons(); // 버튼 만들기
}

/**
* @private
* 컨테이너
*/
private var seedBox:Sprite;

/**
* @private
* 빨간 버튼 : Grid(격자) 패턴
*/
private var normal_Red_btn:Sprite;

/**
* @private
* 초록 버튼 : 알파 적용
*/
private var alpha_green_btn:Sprite;

/**
* @private
* 파란 버튼 : 색상 적용
*/
private var color_blue_btn:Sprite;

/**
* @private
* 노란 버튼 : 스케일 적용
*/
private var scale_yellow_btn:Sprite;

/**
* @private
* 버튼 사이 간격
*/
private var gap:Number = 30;

/**
* @private
* 객체 행 수
*/
private var row:int = 8;

/**
* @private
* 객체 열 수
*/
private var column:int = 10;

/**
* @private
* 객체 총 수
*/
private var total:int = row * column;

/**
* @private
* 버튼 만들기
*/
private function createButtons():void
{
var g:Graphics;

if(!normal_Red_btn) // 빨간 버튼
{
normal_Red_btn = new Sprite(); // 빨간 버튼 객체 생성
g = normal_Red_btn.graphics; // 빨간 버튼을 그릴 수 있도록 지정

g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 빨간 라인 그리기
g.beginFill(0xFF0000, 1); // 라인 안에 빨간색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 빨간색 채움

normal_Red_btn.x = 10; // 빨간 버튼 x값 위치 설정
normal_Red_btn.y = 10; // 빨간 버튼 y값 위치 설정

normal_Red_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜

addChild(normal_Red_btn); // 버튼 화면에 표시

   configureListener(normal_Red_btn); // 빨간 버튼 설정
}

if(!alpha_green_btn) // 초록 버튼
{
alpha_green_btn = new Sprite(); // 초록 버튼 객체 생성

   g = alpha_green_btn.graphics; // 초록 버튼을 그릴 수 있도록 지정

g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 초록 라인 그리기
g.beginFill(0xCBFF00, 1); // 라인 안에 초록색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 초록색 채움

alpha_green_btn.x = normal_Red_btn.x + gap ; // 빨간 버튼 옆에 위치
alpha_green_btn.y = 10; // 초록 버튼 y값 위치 설정
alpha_green_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜

addChild(alpha_green_btn); // 버튼 화면에 표시

configureListener(alpha_green_btn); // 초록 버튼 설정
}

if(!color_blue_btn) // 파란 버튼
{
color_blue_btn = new Sprite(); // 파란 버튼 객체 생성
g = color_blue_btn.graphics; // 파란 버튼을 그릴 수 있도록 지정

g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 파란 라인 그리기
g.beginFill(0x0000FF, 1); // 라인 안에 파란색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 파란색 채움

color_blue_btn.x = 10; // 파란 버튼 x값 위치 설정
color_blue_btn.y = normal_Red_btn.y + gap; // 빨간 버튼 아래 위치
color_blue_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜

addChild(color_blue_btn); // 버튼 화면에 표시

   configureListener(color_blue_btn); // 파란 버튼 설정
}

if(!scale_yellow_btn) // 노란 버튼
{
scale_yellow_btn = new Sprite(); // 노란 버튼 객체 생성

g = scale_yellow_btn.graphics; // 노란 버튼을 그릴 수 있도록 지정

g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 노란 라인 그리기
g.beginFill(0xFFFF00, 1); // 라인 안에 노란색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 노란색 채움

scale_yellow_btn.x = color_blue_btn.x + gap; // 파란 버튼 옆에 위치
scale_yellow_btn.y = alpha_green_btn.y + gap; // 초록 버튼 아래 위치
scale_yellow_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜
addChild(scale_yellow_btn); // 버튼 화면에 표시
   configureListener(scale_yellow_btn); // 노란 버튼 설정
}
}

/**
* @private
* 버튼 설정
*
* @param dispatcher 선택된 버튼
*/
private function configureListener(dispatcher:IEventDispatcher):void
{
dispatcher.addEventListener(MouseEvent.CLICK, buttonClickHandler); // 버튼 이벤트 등록
}
/**
* @private
* 화면 초기화
*
* Sprite.numChildren : 객체의 자식수를 반환, index = 1
* Sprite.removeChildAt() : index 위치 자식 객체 제거, index = 0
*/
private function removeAllChildren():void
{
while(seedBox.numChildren) // 컨테이너에 객체가 없어질때까지 반복
{
seedBox.removeChildAt(0); // 지정된 index 위치에 있는 객체 제거
}
}

/**
* @private
* 격자 패턴
*
* Math.floor : 내림 메서드 - 한 행이 채워지면 자동으로 줄바꿈
*/
private function createNormal():void
{
removeAllChildren();

for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성

temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30

   seedBox.addChild(temp); // 화면에 표시
}
}

/**
* @private
* 알파 적용
*/
private function createAlpha():void
{
removeAllChildren();

for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성

temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30

   temp.alpha = i / total; // 알파값 범위 : 0 ~ 1

seedBox.addChild(temp); // 화면에 표시
}
}

/**
* @private
* 색상 적용 : 랜덤
*/
private function createColor():void
{
removeAllChildren();

for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성

temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30

var ct:ColorTransform = new ColorTransform(); // 색상 조절 객체 생성

ct.color = Math.random() * 0xFFFFFF; // 임의의 색상 선택

temp.transform.colorTransform = ct; // 선택된 임의의 색상 적용

seedBox.addChild(temp); // 화면에 표시
}
}

/**
* @private
* 스케일 적용
*/
private function createScale():void
{
removeAllChildren();

for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성

temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30

temp.scaleX = temp.scaleY = i / total; // 객체의 가로, 세로 크기 계산

seedBox.addChild(temp); // 화면에 표시
}
}

/**
* @private
* 버튼 선택
*/
private function buttonClickHandler(event:MouseEvent):void
{
switch(event.target) // 현재 선택한 버튼
{
case normal_Red_btn :
createNormal(); // 격자패턴 메서드 호출
break;

case alpha_green_btn :
createAlpha(); // 알파 적용 메서드 호출
break;

case color_blue_btn :
createColor(); // 색상 적용 메서드 호출
break;

case scale_yellow_btn :
createScale(); // 스케일 적용 메서드 호출
break;
}
}
}
}
[/code]

위의 코드에서 보면 graphics, buttonMode, clear, lineStyle, beginFill, drawRect, endFill, IEventDispatcher,ColorTransform 이런 것들이 나온다. 이것들이 도대체 뭘까?

:: Sprite 클래스와 관련된 속성과 메서드

- graphics, buttonMode 는 여기를 참조하자.

:: Graphics 클래스와 관련된 속성과 메서드

- lineStyle, beginFill, drawRect, endFill, 는 여기를 참조하자.

:: ColorTransform 클래스는 여기를 참조하자.

음...마지막으로 IEventDispatcher.. 이것은 다음번에 자세히 알아보도록 하자.

numChildren & removeChildAt()

2010-04-01T03:05:00.000+09:00

numChildren

객체의 자식 수를 반환한다. 예제에서는 seedBox 객체에 생성된 100개의 seed 객체가

자식이 된다. seedBox아래에 100개의 seed 객체가 있는것이다.

removeChildAt()

DisplayObjectContainer 자식 목록에서 지정된 index 위치에 있는 자식 DisplayObject를

제거한다. 최하위 인덱스 위치(0)의 자식을 제거할 때 목록에 있는 나머지 모든 자식 객체가 한 자리씩 아래로 이동한다.

음...무슨말이지 잘 모르겠다. 그렇다면...그림을 그려보며 이해해보자.

위에서 보면 Container의 객체에는 6개의 자식 객체가 있다.

Container.numChilren은 제일 첫번째 자식 객체를 가킨다.

numChilren(1) = childAt(0) 이다.

코드로 살펴보자

[code as3]
private function removeAllChildren():void
{
while(seedBox.numChildren)
{
seedBox.removeChildAt(0);
}
}
[/code]

코드에서 seedBox 는 그림의 Container에 해당한다. 그럼 코드를 분석해보자.

seedBox 에 있는 객체를 몽땅 지우라는 것이다. 음...좀더 자세히 분석해보자.

seedBox 에는 많은 자식 객체가 있을 것이다.

그 자식 객체가 있을 동안, 괄호안의 내용을 실해하라는 뜻이다. 반복문안의 실행문을 보자.

seedBox 안에 있는 자식객체의 제일 첫번째 객체를 remove(제거)하라는 것이다.

그럼, 첫번째 객체를 제거했으니 두번째에 있는 객체가 다시 첫번째 객체로 될것 이다.

그럼 또 제거한다. 그럼 그 다음 두번째 객체가 다시 첫번째 객체가 되는 것이다.

그럼 다시 또 첫번째 객체를 제거한다.

이것이 반복되어 결국 seedBox 의 자식객체는 전부 삭제될 것이다.

# removeChildAt(index : int) : 자식 객체 삭제

매개변수- index : 제거할 자식 객체의 인덱스

# addChildAt( child : DisplayObject, index : int ) : 자식 객체 추가

매개변수 - child : DisplayObject - 자식으로 추가할 객체

- index : int - 추가할 인덱스 위치

BitmapData

2010-03-31T21:03:00.000+09:00

BitmapData

BitmapData 클래스를 사용하면 Bitmap 객체의 데이터(픽셀)를 처리할 수 있다.

BitmapData는 1pixel당 8bit 자리 BitmapData를 가지고 있다.

BitmapData 생성시 반듯이 width,heighth 값을 가져야 한다.

BitmapData의 fillColor는 배경색으로 기본적으로 ARGB이다.

:: 모든 UI 객체는 DisplayObject를 가지고 있다.

[그림 1]에서 처럼 하나의 이미지 파일에는 위와 같은 정보를 담고 있다. 사진과 같은 UI객체인 이미지 파일은 DisplayObject 이다. DisplayObject 는 눈에 보이는 모든 객체를 말한다.

만약 이미지에 대한 픽셀값을 가지고 싶다면 BitmapData의 draw()를 사용하면 된다.

draw() 를 이용하며 DisplayObject가 BitmapData로 떨어진다.

여기서 중요한 건 draw()의 매개변수인 IBitmapDrawable을 반드시 가지고 있어야 한다.

:: DisplayObject(눈에 보이는 모든 객체)는 반드시 IBitmaDrawable을 가지고 있어야한다.

사진이나 이미지는 눈에 보이는 객체이므로 DisplayObject를 상속받는다.

이 객체를 draw() 하는 순간 BitmapData는 [그림 1]과 같은 정보를 갖게 된다.

5. 다양한 객체 만들기 _ Duplicate (1) 랜덤하게 위치하기

2010-03-31T14:54:00.000+09:00

한 개의 클래스를 이용하여 다양한 객체를 만들어 생성하고 제거할 수 있다. 어떻게 하나의 클래스를 가지고 다양한 객체를 만드냐 하면 바로 복제하기를 이용하면 된다.

역시 예제를 통해 이해하는 것이 빠를것 같다. 그럼 예제를 하나 만들어보자.

플래시 파일을 하나 열어 하나의 무비클립을 만들고 Linkage 설정에서 class명을 Seed라고 만들자. 반복문을 통해 Seed 클래스 100개를 만들어 크기 및 알파, 필터 값을 적용하는 예제를 만들어보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;

public class DuplicateExample extends Sprite
{
public function DuplicateExample()
{
super(); // Sprite 객체 생성
configureListener(); // 화면 및 버튼 설정
}

/**
* @private
*
*/
private var seedBox:Sprite;

/**
* @private
* 화면 구성 설정
*/
public function configureListener():void
{
seedBox = new Sprite(); // 화면에 붙일 패널 객체 생성
addChild(seedBox); // 패널 화면에 표시

redbtn_mc.addEventListener(MouseEvent.CLICK, redbtnClickHandler);
greenbtn_mc.addEventListener(MouseEvent.CLICK, greenbtnClickHandler);
bluebtn_mc.addEventListener(MouseEvent.CLICK, bluebtnClickHandler);
}

/**
* @private
* 화면 초기화
*
* Sprite.numChildren : 객체의 자식수를 반환
* Sprite.removeChildAt() : index 위치 자식 객체 제거, 최하위 index = 0
*/
private function removeAllChildren():void
{
while(seedBox.numChildren) // 패널에 객체가 없어질때까지 반복
{
seedBox.removeChildAt(0); // 지정된 index 위치에 있는 객체 제거
}
}

/**
* @private
* 기본 객체
*
* Math.random() : 0 ~ 1 사이의 난수
*/
public function redbtnClickHandler(event:MouseEvent):void
{
removeAllChildren(); // 화면 Clear

for(var i:int=0; i<100; i++) // 100개 생성
{
var temp:MovieClip = new Seed(); // 표시할 객체 생성

temp.x = Math.random() * stage.stageWidth; // stage 범위 안에 표시할 수 있도록 x좌표 계산
temp.y = Math.random() * stage.stageHeight; // stage 범위 안에 표시할 수 있도록 x좌표 계산/

seedBox.addChild(temp); // 생성한 패널에 객체 표시
}
}

/**
* @private
* 객체 크기 및 알파 조절
*
* Math.random() : 0 ~ 1 사이의 난수
*/
public function greenbtnClickHandler(event:MouseEvent):void
{
removeAllChildren(); // 화면 Clear

for(var i:int=0; i<100; i++) // 100개 생성
{
var temp:MovieClip = new Seed(); // 표시할 객체 생성
temp.x = Math.random() * stage.stageWidth; // stage 범위 안에 표시할 수 있도록 x좌표 계산
temp.y = Math.random() * stage.stageHeight; // stage 범위 안에 표시할 수 있도록 y좌표 계산

temp.scaleX = temp.scaleY = Math.random() * 2; // 객체의 가로, 세로 크기 계산

temp.alpha = Math.random(); // 임의의 값 적용

seedBox.addChild(temp); // 생성한 패널에 객체 표시
}
}

/**
* @private
* 객체 Glow 필터 적용
*
* Math.random() : 0 ~ 1 사이의 난수
*/
public function bluebtnClickHandler(event:MouseEvent):void
{
removeAllChildren(); // 화면 Clear

for(var i:int=0; i<100; i++) // 100개 생성
{
var temp:MovieClip = new Seed(); // 표시할 객체 생성

temp.x = Math.random() * stage.stageWidth; // stage 범위 안에 표시할 수 있도록 x좌표 계산
temp.y = Math.random() * stage.stageHeight; // stage 범위 안에 표시할 수 있도록 y좌표 계산

temp.scaleX = temp.scaleY = Math.random() * 2; // 객체의 가로, 세로 크기 계산
temp.alpha = Math.random(); // 임의의 값 적용

temp.filters = [ new GlowFilter() ]; // Glow 필터 적용

seedBox.addChild(temp); // 생성한 패널에 객체 표시
}
}
}
}
[/code]

44~46 번째 라인에서 numChildren과 removeChildAt() 이라는 메서드가 나왔다.

그럼 다음번에 numChildren과 removeChildAt()에 대해 알아보자.

#FLV 플레이어 완성

2010-03-31T03:55:00.000+09:00

[code as3]
package
{
import fl.events.SliderEvent;

import flash.display.Sprite;
import flash.events.*;
import flash.media.Video;
import flash.media.SoundTransform;
import flash.net.NetConnection;
import flash.net.NetStream;

public class Main extends Sprite
{
public function Main()
{
super(); // Sprite 클래스 생성

configurePlayer(); // player 설정
}

private var firstFlag:Boolean = true;

private var isPlaying:Boolean = false;

private var isConnection:Boolean = false;

private var isPause:Boolean = false;

/**
* @private
* 비디오 파일
*/
private var videoURL:String = "once.flv";

/**
* @private
* 비디오 연결
*/
private var connection:NetConnection;

/**
* @private
* 비디오 스트림
*/
private var stream:NetStream;

/**
* @private
* 비디오 플레이어 설정
*
* connect() : 로컬 컴퓨터에서 비디오 파일과 연결 중이라면 null로 설정
* snapInterval : 볼륨 조절시 값이 증가하거나 감소하는 기준 간격
*/
private function configurePlayer():void
{
connection = new NetConnection(); // 비디오 연결 객체 생성
connection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); // 비디오 연결상태 이벤트 등록
connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler); // 보안오류 이벤트 등록
connection.connect(null);

play_mc.addEventListener(MouseEvent.CLICK, playClickHandler); // 재생버튼 이벤트 등록
pause_mc.addEventListener(MouseEvent.CLICK, pauseClickHandler); // 일시정지 버튼 이벤트 등록
stop_mc.addEventListener(MouseEvent.CLICK, stopClickHandler); // 정지버튼 이벤트 등록
slider_comp.addEventListener(SliderEvent.THUMB_DRAG, volumeSliderHandler); // 볼륨조절 이벤트 등록

slider_comp.maximum = 1; // 볼륨 최대값 설정
slider_comp.minimum = 0; // 볼륨 최소값 설정
slider_comp.snapInterval = 0.1; // 0.1만큼 증가 감소
slider_comp.value = 0.5; // 초기 볼륨값 설정
}

/**
* @private
* 비디오 스트림
*
* attachNetStream : 비디오 스트리밍
*/
private function setStream():void
{
stream = new NetStream(connection); // Connection을 통해 객체 생성
stream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); // 연결된 데이터 가져오는 상태 이벤트 등록
stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler); // 비동기적 예외발생 이벤트 등록

var video:Video = new Video(); // 비디오 객체 생성

video.x = 30; // 비디오 x좌표
video.y = 10; // 비디오 y좌표

video.width = 500; // 비디오 너비
video.height = 330; // 비디오 높이

video.attachNetStream(stream); // 읽어온 데이터를 화면에 연결
addChild(video); // 화면에 표시

isConnection = true; // 비디오 연결됨
}

/**
* @private
* 비디오 연결 상태
*/
private function netStatusHandler(event:NetStatusEvent):void
{
switch(event.info.code)
{
case "NetConnection.Connect.Success" :
setStream(); // 비디오 연결 성공시 호출
break;

case "NetStream.Play.StreamNotFound";
trace("Unable to locate video: " + videoURL);
break;
}
}

/**
* @private
* 비디오 보안 오류
*/
private function securityErrorHandler(event:SecurityErrorEvent):void
{
trace("sequrityError");
}

/**
* @private
* 비디오 비동기적 예외 발생
*/
private function asyncErrorHandler(event:AsyncErrorEvent):void
{
trace("async error");
}

/**
* @private
* 비디오 재생
*/
private function playClickHandler(event:MouseEvent):void
{
if(isConnection && firstFlag)
{
firstFlag = false;
stream.play(videoURL); // 비디오 파일 재생

var st:SoundTransform = stream.soundTransform; // 재생되는 비디오 사운드 정보 넘겨줌
st.volume = slider_comp.value; // 뵬륨 조절
stream.soundTransform = st; // 변환된 볼륨 재적용
isPlaying = true; // 재생상태
}

if(isPause && !isPlaying) // 정지 중
{
stream.resume(); // 정지했던 비디오 스트림 다시 재생
isPause = false; // 일시정지상태
isPlaying = true; // 재생상태
}
}

/**
* @private
* 비디오 일시정지
*/
private function pauseClickHandler(event:MouseEvent):void
{
if(isPlaying && !isPause) // 재생 중
{
stream.pause(); // 비디오 정지
isPlaying = false; // 재생상태
isPause = true; // 일시정지상태
}
}

/**
* @private
* 비디오 정지
*/
private function stopClickHandler(event:MouseEvent):void
{
stream.pause(); // 비디오 정지
stream.seek(0); // 처음 재생 상태로 돌아감
isPlaying = false; // 재생 상태
isPause = true; // 정지상태
}

/**
* @private
* 비디오 볼륨
*/
private function volumeSliderHandler(event:SliderEvent):void
{
var st:SoundTransform = stream.soundTransform; // 재생되는 비디오 사운드 정보 넘겨줌
st.volume = event.value; // 볼륨 조절
stream.soundTransform = st; // 변환된 사운드 재적용
}
}
}
[/code]

#FLV 플레이어 _ (1) Video, NetConnection, NetStream

2010-03-30T17:26:00.000+09:00

FLV 플레이어를 만들어보기 전에 용어 몇가지를 알아보자.

#FLV(Flash Video)

Flash Player를 재생할 수 있는 동영상 파일 포맷이며 확장자는 .flv이다.

동영상 인코딩이란 아날로그 영상을 디지털 영상으로 변환해주는 일련의 과정을 말한다.

즉, 각종 장비들의 데이터를 PC에서 재생할 수 있는 동영상 파일로 변환해 주는 과정이란 뜻한다.

#인코딩

아날로그 형식을 디지털 형식으로 변환.

일반 동영상 포맷(AVI, MPEG, MOV)은 swf 실행 중에 실시간으로 로드하여 재생할 수 없다. 그렇기 때문에 swf 런타임에서 실시간 로드가 가능한 포맷인 flv로 변환해야하며, 그 변환과정을 인코딩이라 한다.

#스트리밍

파일을 다운로드 하면서 재생하는 방식.

#flv 활용 방법 ( [windows] → [Components] : ctrl + F7)

1. FLVPlayback 컴포넌트 : 플레이어 구성 요소들이 다 갖추어져있는 구조.

2. Video UI 컴포넌트 : 플레이어 구성 요소들이 분리되어 있어 원하는 위치로 이동시켜 사용.

비디오를 변형하여 자신이 만들고 싶은 구조의 플레이어를 제작하려면 Video 클래스를 사용하는 것이 좋다.

먼저 FLV Player의 흐름이 어떻게 되는지 살펴보자.

1. FLV 파일과 Flash Player와 연결
2. 연결 하려면 NetConnection 클래스 필요
3. 연결 되었으면 NetStream 클래스로 데이터를 받아온다.
4. NetStream으로 받아온 데이터를 Video 클래스에서 재생한다.

FLV Player의 흐름은 위와 같다. 그럼 우리가 알아야 할 것은 Video , NetConnection, NetStream 이다. 이것들이 무엇인지 한번 알아보자.

Video 클래스

실시간 또는 기록된 비디오를 표시한다. 즉, 서버 또는 로컬에 저장된 flv파일이나 사용자의 컴퓨터에서 캡쳐한 실시한 비디오를 재생하는 비디오 객체를 생성한다.

쉽게 말하자면 그냥 화면에 표시해주는 것이다.

Video 클래스는 단지 화면에 표시하기만 할 뿐이고 실제 비디오 스트림을 재생하려면 attachNetStream()을 사용하여 Video객체에 첨부한 다음 addChlid()를 사용하여 Video 객체를 추가한다.

음.. Video 클래스 만으로는 동영상을 재생 시킬 수 없다.

NetConnection 클래스

클라이언트와 서버를 연결하는 파이프와 같다. 만약 Flash Media Server가 없으면 NetConnection 클래스를 사용해서 로컬 파일 시스템 또는 웹 서버에서 비디오 파일이나 MP3 파일을 재생할 수 있다.

즉, 파일을 연결짓는 연결고리 역할을 하는 셈이다.

NetStream 클래스

스트리밍에 관련된 것을 관리하는 클래스로 NetConnection 객체 안에 있는 채널이다.

즉, 정지/재생/탐색 등 스트리밍에 관련된 것을 관리하는 클래스이다.

#사운드를 이용한 mp3 플레이어 완성

2010-03-30T15:26:00.000+09:00

지금까지 Sound, SoundChannel, SoundTransform을 이용하여 만들어 보았다. 그렇다면 좀더 시각적인 효과를 넣어 만들어 보자. 지금까지 만들어진 파일에 몇가지를 추가해보자.

사운드 스펙트럼을 추가하여 재생되고 있는 사운드 데이터 파형을 시각적으로 보여주고, 사운드의 진행상태를 파악하기 위해 progress bar를 추가하여 보겠다.

[code as3]
package
{
import fl.events.SliderEvent;
import fl.controls.Slider;

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
import flash.net.URLRequest;

public class MyMusic extends Sprite
{
public function MyMusic()
{
super(); // Sprite 클래스(상속하는 상위클래스) 생성.
configureSound(); // 사운드 설정
}

/**
* @private
* 사운드 객체 : 객체 생성시 자동으로 사운드 파일 로드.
*/
private var music:Sound = new PowerUp(); //new Sound(new URLRequest("힘을내줘.mp3"));

/**
* @private
* 사운드 채널
*/
private var channel:SoundChannel;

/**
* @private
* 현재 재생 위치(ms)
*/
private var position:Number = 0;

/**
* @private
* 사운드 변환 : 볼륨 및 패닝 속성 포함.
*/
private var vol_tran:SoundTransform;

/**
* @private
* 사운드 스펙트럼.
*/
private var spectrum:Sprite;

/**
* @private
* 스펙트럼 그리기.
*/
private var gt:Graphics;

/**
* @private
* 사운드 ByteArray
*/
private var ba:ByteArray;

/**
* @private
* 사운드 초기화
*
* Slider(클래스) snapInterval(속성) : 패닝 slider 이동시 값이 증가하거나 감소하는 기준 간격 설정.
*/
private function configureSound():void
{
pan_slider.maximum = 1; // 패닝 Slider 최대값 설정.
pan_slider.minimum = -1; // 패닝 Slider 최소값 설정.
pan_slider.value = 0; // 기본값 0으로 설정.
pan_slider.snapInterval = 0.1; // 0.1만큼 증가 감소.
pause_btn.mouseEnabled = false; // 일시정지버튼 비활성화.
play_btn.mouseEnabled = true; // 재생 버튼 활성화.

pause_btn.addEventListener(MouseEvent.CLICK, pauseButtonClickHandler); //일시정지버튼 이벤트 등록.
play_btn.addEventListener(MouseEvent.CLICK, playButtonClickHandler); // 재생버튼 이벤트 등록.
sound_vol.addEventListener(SliderEvent.THUMB_DRAG, volumeSliderHandler); // 볼륨조절 이벤트 등록
pan_slider.addEventListener(SliderEvent.THUMB_DRAG, panSliderHandler); // 패닝조절 이벤트 등록
}

/**
* @private
* 재생시간 출력 : 단위시간을 00:00 형식으로 출력
*
* 분 : Math.floor(sec/60)
* 초 : Math.floor(sec%60)
* Math 클래스의 유용한 메서드 : Math.ceil() - 올림, Math.round() - 반올림, Math.floor() - 내림
*/
private function ConverTime(milli:Number):String
{
var n:Number = milli / 1000; // 입력값이 ms(밀리초)이므로 1000으로 나눠 초단위로 바꿈
var min:int = Math.floor(n/60); // 분 계산
var second:int = Math.floor(n%60); // 초 계산
var min_str:String; // 분 단위 형식 저장
var second_str:String; // 초 단위 형식 저장
if(min<10) // 계산된 분이 10보다 작으면
{
min_str = "0" + min; // "0" 와 계산된 분을 더해 분의 두자리 형식 만듬
}
else // 계산된 분이 10보다 크면
{
min_str = String(min); // 계산된 분을 String으로 캐스팅
}
if(second<10) // 계산된 초가 10보다 작으면
{
second_str = "0" +second; // "0" 와 계산된 초를 더해 초의 두자리 형식 만듬
}
else // 계산된 초가 10보다 크면
{
second_str = String(second); // 계산된 초를 String으로 캐스팅
}
return min_str + ":" + second_str; // 계산된 분과 초를 "00:00" 형식으로 만들어 반환
}

/**
* @private
* 사운드 진행상태( progress_mc 와 스펙트럼)
*
* percent(백분율) : 현재 재생 위치 / 사운드 시간
* ByteArray : 만들어진 ByteArray 객체의 크기는 512개의 부동 소수점 값으로 고정.
* 처음 256개의 값은 왼쪽 채널을, 다음 256개의 값은 오른쪽 채널.
* 진폭 범위 : -1 ~ 1 (부동 소수점 값)
*/
private function barEnterFrameHandler(event:Event):void
{
var percent:Number = (channel.position / music.length) * 100;
progress_mc.bar_mc.scaleX = percent; // percent값을 bar_mc에 적용
position_txt.text = (ConverTime(channel.position)); // 현재 재생 시간
length_txt.text = (ConverTime(music.length)); //전체 재생 시간

if(!spectrum)
{
spectrum = new Sprite(); // 사운드 스펙트럼을 그려 넣을 Sprite 객체 생성
gt = spectrum.graphics; // 스펙트럼 그리기위해 Graphics 클래스 생성

spectrum.y = 150; // 사운드 스펙트럼 위치 설정
addChild(spectrum); // 사운드 스펙트럼 화면에 표시(Sprite 객체 DisplayObject에 추가)
ba = new ByteArray(); // 512byte의 사운드 정보를 담음
}

gt.clear(); // 스팩트럼 그리기 전에 지움
gt.lineStyle(1, 0x0000FF, 1); // 선 스타일 지정 : 선의 두께, 색상값, 알파값
gt.beginFill(0x0000FF, 1); // 색 채우기 : 채울 색상값, 알파값
gt.moveTo(0, 0); // 현재 위치 이동 : pixel단위

SoundMixer.computeSpectrum(ba, false); // 사운드 정보 저장, 사운드 파형은 진폭.

for(var i:uint = 0; i < 512; i++)
{
var n:Number = ba.readFloat() * 100;
gt.lineTo(i, n);
}
}

/**
* @private
* 사운드 종료
*/
private function barSoundCompletehandler(event:Event):void
{
removeEventListener(Event.ENTER_FRAME, barEnterFrameHandler); // 사운드 종료 후 이벤트 제거
}

/**
* @private
* 사운드 볼륨
*
* 사운드 볼륨 범위 : 0 ~ 1
* SoundTransForm의 volume 속성 값 : 0 ~ 1
* Slider Component 값(정수값) : -1, 0, 1
* event.target : 마우스로 Slider를 클릭한 지점
* Slider(클래스) value(속성) : 현재 값을 가져오거나 설정.
* 이 값은 최소값과 최대값 사이에서 슬라이더 썸의 위치에 따라 결정.
* Slider : maximum = 10, minimum = 0
*/
private function volumeSliderHandler(event:SliderEvent):void
{
vol_tran = channel.soundTransform; // 현재 재생되고 있는 사운드의 볼륨 정보를 넘겨줌.
vol_tran.volume = event.target.value / 10; // 실제 보륨에 적용하기 위해 단위변환.
channel.soundTransform = vol_tran; // 변환된 사운드의 볼륨을 다시 적용.
}

/**
* @private
* 사운드 패닝
*
* 사운드 패닝 범위 : -1 ~ 1
* SoundTransForm의 volume 속성 값 : 0 ~ 1
* Slider Component 값(정수값) : -1, 0, 1
*/
private function panSliderHandler(event:SliderEvent):void
{
vol_tran = channel.soundTransform; // 현재 재생되고 있는 사운드의 패닝 정보를 넘겨줌.
vol_tran.pan = event.value;
channel.soundTransform = vol_tran; // 변환된 사운드의 패닝 다시 적용.
}

/**
* @private
* 일시정지 버튼
* channel : 사운드 정지시 등록한 이벤트 제거
* progress_mc : 사운드 정지시 진행상황 등록 이벤트 제거
*/
private function pauseButtonClickHandler(event:MouseEvent):void
{
pause_btn.mouseEnabled = false; // 일시정지버튼 비활성화
play_btn.mouseEnabled = true; // 재생 버튼 활성화

position = channel.position; // 현재 재생 위치 저장
channel.stop(); // 사운드 정지

channel.removeEventListener(Event.SOUND_COMPLETE, barSoundCompletehandler);
progress_mc.removeEventListener(Event.ENTER_FRAME, barEnterFrameHandler);
}

/**
* @private
* 재생 버튼
* channel : 재생이 끝나면 다시 재생시킬 수 있도록 이벤트 등록
* progress_mc : 지속적으로 현재 재생 위치를 알아오기 위해 이벤트 등록
*/
private function playButtonClickHandler(event:MouseEvent):void
{
pause_btn.mouseEnabled = true; // 일시정지버튼 활성화
play_btn.mouseEnabled = false; // 재생버튼 비활성화

channel = music.play(position); // 사운드 재생
vol_tran = channel.soundTransform; // 현재 재생되고 있는 사운드의 볼륨, 패닝 정보를 넘겨줌.
vol_tran.volume = sound_vol.value / 10;

channel.soundTransform = vol_tran; // 변환된 사운드의 볼륨, 패닝을 다시 적용.

channel.addEventListener(Event.SOUND_COMPLETE, barSoundCompletehandler);
progress_mc.addEventListener(Event.ENTER_FRAME, barEnterFrameHandler);
}
}
}
[/code]

#사운드를 이용한 mp3 플레이어_(3)SoundTransform

2010-03-27T02:08:00.000+09:00

SoundTransform 클래스에는 볼륨, 패닝(왼쪽 스피커와 오른쪽 스피커의 음량 조절) 등에

대한 속성이 포함되어 있다. 따라서 사운드의 볼륨과 패닝을 조절하기 위해서는 SoundTransform 클래스를 이용해야한다.

SoundTransform 객체를 생성하는 방법에는 두가지가 있다.

첫번째

[code as3]
var vol_tran:SoundTransform = channel.soundTransform;
[/code]

두번째

[code as3]
var vol_tran:SoundTransform = new SoundTransform(1, 0);
[/code]

첫번째 방법은 SoundChannel 클래스의 soundTransform 속성을 사용하여 생성한다.

두번째 방법은 SoundTransform 클래스에서 객체를 생성한다.

첫번째 파라미터는 볼륨값이고, 두번째 파라미터는 패닝값이다.

첫번째 방법을 이용하여 사운드 볼륨과 패닝을 조절하겠다. 그럼 이제 만들어보자.

#사운드를 이용한 mp3 플레이어_(2)SoundChannel

2010-03-26T17:36:00.000+09:00

사운드 일시정지와 재생을 만들어보자.

- 사운드 재생 : Sound 클래스의 play() 메서드 담당.

- 사운드 일시정지 : SoundChannel 클래스의 stop() 메서드 담당.

그런데 Sound 클래스의 play()메서드를 살펴보자.

play() 메서드를 실행하면 리턴값으로 SoundChannel을 반환한다.

따라서 일시정지를 하려면 Sound 클래스의 play() 메서드를 통해 생성해야한다.

[code as3]
var sound:Sound = new Sound(new URLRequest("힘을내줘.mp3"));

var channel:SoundChannel = sound.play(); // SoundChannel 객체 생성

channel.stop();
[/code]

이렇게 하면 사운드를 정지시킬 수 있께 된다. 정지시킨 다음에 다시 재생을 해보자.

그럼 처음부터 다시 재생이 된다. 처음부터 재생되는 것이 아니라 일시정지된 지점부터 재생되게 하고싶다.

사운드의 정지된 지점을 알고 싶을 때는 SoundChannel 클래스의 position속성을 사용한다.

[code as3]
var position:Number = 0;

var sound:Sound = new Sound(new URLRequest("힘을내줘.mp3"));

var channel:SoundChannel = sound.play(); // SoundChannel 객체 생성

position = channel.position; // 사운드가 재생되는 현재위치 저장.

channel.stop(); // 사운드 정지.

sound.play(position); // 사운드가 저장된 위치부터 다시 재생.
[/code]

그럼 제대로 한번 만들어보자.

새로운 플래시 파일을 하나 만들고 거기에 2개의 무비클립 재생버튼(play_btn)과 일시정지버튼(pause_btn)을 만들어 사운드가 재생, 일시정지 되도록 만들어보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;

public class MyMusic extends Sprite
{
public function MyMusic()
{
super(); // Sprite 클래스(상속하는 상위클래스) 생성
configureSound(); // 사운드 설정 메서드 호출
}

/**
* @private
* 사운드 객체 : 객체 생성시 자동으로 사운드 파일 로드
*/
private var music:Sound = new Sound(new URLRequest("힘을내줘.mp3"));

/**
* @private
* 사운드 채널
*/
private var channel:SoundChannel;

/**
* @private
* 현재 재생 위치(ms)
*/
private var position:Number = 0;

/**
* @private
* 사운드 버튼 설정
*/
private function configureSound():void
{
pause_btn.mouseEnabled = false; // 일시정지버튼 비활성화
play_btn.mouseEnabled = true; // 재생 버튼 활성화
pause_btn.addEventListener(MouseEvent.CLICK, pauseButtonClickHandler); //일시정지버튼 이벤트 등록
play_btn.addEventListener(MouseEvent.CLICK, playButtonClickHandler); // 재생버튼 이벤트 등록
}

/**
* @private
* 일시정지 버튼 클릭
*/
private function pauseButtonClickHandler(event:MouseEvent):void
{
pause_btn.mouseEnabled = false; // 일시정지버튼 비활성화
play_btn.mouseEnabled = true; // 재생 버튼 활성화
position = channel.position; // 현재 재생 위치 저장
channel.stop(); // 사운드 정지
}

/**
* @private
* 재생 버튼 클릭
*/
private function playButtonClickHandler(event:MouseEvent):void
{
pause_btn.mouseEnabled = true; // 일시정지버튼 활성화
play_btn.mouseEnabled = false; // 재생버튼 비활성화
channel = music.play(position); // 사운드 재생
}
}
}
[/code]

실행시켜보자.

#사운드를 이용한 mp3 플레이어_(1)Sound

2010-03-26T12:24:00.000+09:00

사운드를 이용하기 위해서는 사운드의 재생, 로드, 정지, 볼륨 등의 기능을 담당하고 있는

각각의 클래스를 알아야한다. 사운드 관련 클래스는 flash.media 패키지에 안에 있다.

사운드의 기능을 담당하는 클래스들이 분리되어 있어 패키지안에 있는 클래스를 잘 알아봐야한다. 주로 쓰이는 클래스들을 간다히 정리해보자.

flash.media.Sound	사운드 로드 및 재생
flash.media.SoundChannel	사운드 채널 볼륨 제어
flash.media.SoundLoaderContext	보안 / 버퍼링
flash.media.SoundMixer	스트리밍사운드 제어
flash.media.SoundTransform	패닝 및 볼륨 조절

참조

https://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/

http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/index.html?flash/display/Graphics.html&flash/display/class-list.html

1. Sound 클래스

Sound 객체를 만들고 외부 MP3파일을 해당 객체로 로드할여 재생할 수 있으며, 사운드 스트림을 닫고, 스트림의 바이트 수 및 ID3 메타데이터에 대한 정보 같은 사운드 관련 데이터에 액세스할 수 있다. 한마디로 주요 기능은 외부 MP3 파일을 로드, 재생 한다는 것이다.

주요 기능인 로드, 재생 메서드를 살펴보자.

1.1 외부 사운드 파일 재생(mp3 포맷만 지원)

사운드를 재생하면 먼저 Sound객체를 이용하여 Sound 객체를 만들어야한다.

여기서 알아야 할 것은 외부에서 파일을 불러오려면 URLRequest 클래스를 이용해야한다.

위의 메서드에서 봤듯이 Sound 클래스에서 파일을 로드할 때 첫 번째 파라미터인 stream은
URLRequset로 되어있다.

URLRequest 클래스는 " 하나의 HTTP 요청에 포함된 모든 정보를 캡처 "하는 클래스이다.

캡쳐?..음..이해가 잘 안되는 군...그래서 야훔님께서 해주신 설명에 따르면...

# URLRequest 클래스

- 통신을 하기위해 기본적으로 갖춰야할 데이터를 저장하는 VO 클래스라고 볼 수 있다.

# VO 클래스(Value Object)

- 값을 저장 하기 위해 미리 Field를 만들어두고 값을 저장하게 끔 만들어진

모델 데이터 클래스를 이야기한다.

잘 이해가 안될것 같아 다음번에 예제를 통해 다시 설명을 하겠다.

어쨌든 외부에서 파일을 가져오려면 URLRequest를 이용해서 가져와야한다는 것만 알아두자.

그럼 이제 하나씩 만들어보자.

플래시에서 파일 하나를 만들자.

위에서 처럼 플래시파일, AS파일, 음악 파일은 한 폴더안에 만들었다. 그러고나서 설정해야하는 것이 플래시파일 properties 에서 class로 연결해 주어야한다.

[code as3]
package
{
import flash.display.Sprite;
import flash.media.Sound;
import flash.net.URLRequest;

public class MyMusic extends Sprite
{
public function MyMusic()
{
super();

var file:URLRequest = new URLRequest("안녕나의사랑.mp3");

var music:Sound = new Sound();

music.load(file);
music.play();
}
}
}
[/code]

실행시켜보자. 노래가 잘 나오는가? 음..로드가 잘되었군.

13번째~18번째 라인을 이렇게도 쓸수있다.

[code as3]
var music:Sound = new Sound(new URLRequest("안녕나의사랑.mp3"));

music.play();
[/code]

(3) 충돌 감지 _ hitTestPoint()

2010-03-25T14:20:00.000+09:00

hitTestPoint()

hitTestPoint(x:Number, y:Number, shapeFlag:Boolean = false):Boolean 메서드는 영역대 포인트를 감지해서 hit를 발생시킨다. 여기서 말하는 영역이란 Flash에서 무비클립을 하나 만들면 그 무비클립 외각에 생기는 사각형 영역을 말한다. point는 객체를 말하는 것이다.

즉, 객체만을 인식하겠다는 것이다.

hitTestPoint()는 DisplayObject클래스의 메서드로 3개의 매개변수를 갖는다.

hitTestPoint(x:Number, y:Number, shapeFlag:Boolean = false):Boolean

x는 x좌표, y는 y좌표, shapeFlag는 객체(true)의 실제 픽셀을 검사할 것인지 아니면 경계 상자(false)를 검사할 것인지를 나타낸다.

여기서 shapeFlag = true로 하면 영역을 인식하는 것이 아니라 객체만 인식하겠다는 것이다.

[code as3]
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class Main extends Sprite
{
public function Main()
{
super();

setTimer();
}

private function setTimer():void
{
var timer:Timer = new Timer(200, 50);

timer.addEventListener(TimerEvent.TIMER, timerEventHandler);

timer.start();
}

private function timerEventHandler(event:TimerEvent):void
{
var temp:Star = new Star();
temp.tx = Math.random()* 3 + 1;
temp.ty = Math.random()* 3 + 1;

addChild(temp);

temp.addEventListener(Event.ENTER_FRAME, tempEnterFrameHandler);
}

private function tempEnterFrameHandler(event:Event):void
{
var mc:MovieClip = MovieClip(event.target);

if(mc.x < 0 || mc.x > stage.stageWidth)
{
mc.tx = -mc.tx; // swiching해줌
}

if(mc.y < 0 || mc.y > stage.stageHeight)
{
mc.ty = -mc.ty;
}

if( bg.hitTestPoint(mc.x, mc.y, true))
{
mc.gotoAndStop(2);

mc.rotate = -5; // dynamic 변수
}
else
{
mc.gotoAndStop(1);
mc.rotate = 5;
}

mc.x += mc.tx;
mc.y += mc.ty;
mc.rotation += mc.rotate;
}
}
}
[/code]

30~31번째 라인에서 정의 되지 않는 속성 tx, ty를 사용하였는데 이렇게 정의 되지 않는 속성을 사용할 수 있는 것은 MovieClip이 다이나믹으로 정의되어 있어서이다.

MovieClip이 다이나믹으로 되어있어서 변수명을 아무렇게나 지정해 주어도 생성한다.

대표적인 예로 object가 있다.

[code as3]
var o:Object = new Object();

o.a = 1; // 속성에는 a, b 가 없지만 a,b를 생성해준다.
o.b = 2

trace(a); // 1 출력
trace(b); // 2 출력
[/code]

(2) 충돌감지 _ hitTestObject()

2010-03-25T10:41:00.000+09:00

hitTestObject()

hitTestObject(obj:DisplayObject):Boolean 메서드는 영역 대 영역을 감지하여 hit를 발생시킨다. 여기서 말하는 영역이란 Flash에서 무비클립을 하나 만들면 그 무비클립 외각에 생기는 사각형 영역을 말한다.

위에서 파란색 사각형이 핑크색 무비클립의 영역에 해당한다. 그럼 이제 hitTestObject() 메서드를 이용한 예제를 한번 만들어보자.

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.MouseEvent;

public class Main extends Sprite
{
public function Main()
{
super();

cir_mc.addEventListener(MouseEvent.MOUSE_DOWN, cirMouseDownHandler);
cir_mc.addEventListener(MouseEvent.MOUSE_UP, cirMouseUpHandler);
rect_mc.addEventListener(MouseEvent.MOUSE_DOWN, rectMouseDownHandler);
rect_mc.addEventListener(MouseEvent.MOUSE_UP, rectMouseUpHandler);
}

private function cirMouseDownHandler(event:MouseEvent):void
{
cir_mc.alpha = 0.3;
}

private function cirMouseUpHandler(event:MouseEvent):void
{
if(cir_mc.hitTestObject(cirFrame_mc))
{
cir_mc.x = cirFrame_mc.x;
cir_mc.y = cirFrame_mc.y;
}
}

private function rectMouseDownHandler(event:MouseEvent):void
{
rect_mc.alpha = 0.3;
}

private function rectMouseUpHandler(event:MouseEvent):void
{
if(rect_mc.hitTestObject(rectFrame_mc))
{
rect_mc.x = rectFrame_mc.x;
rect_mc.y = rectFrame_mc.y;
}
}
}
}
[/code]

위의 핑크 사각형을 드래그해서 점선 사각형 안에 넣으면 hit가 발생한다. 음...사각형으로 해서 그런가 그닥 와닿지 않는것 같아 원형으로 한번 더 만들어 보겠다.

위의 원을 점선 원안에 넣으면 hit가 발생한다. 원과 원이 닿지도 않았는데 hit가 발생했다.

이것이 바로 영역을 인식하여 hit를 발생시키는 hitTestObject()이다.

이제 조금 감이 오는가? 이렇게 무비클립자체의 shape가 닿아서 발생하는 것이 아니라

무비클립 외각의 사각형 영역끼리 닿으면 hit가 발생하는 것, 이것이 hitTestObject()이다.

위의 코드에 해당하는 실제 예제는 아래와 같다.

Symbol의 Linkage 설정

2010-03-24T21:57:00.000+09:00

Linkage 설정

1. 플래시 파일에서 심볼을 만들고, 그 심볼을 Linkage 시킬 때, Class명 과 Base class명을

입력할 수 있다. 처음에는 자동으로 심볼명과 같은 이름이 입력된다.

플래시에서는자동으로 심볼을 클래스로 만들어 주는데, Linage에서 설정한 Class명을

가지고 클래스를 만든다는 것이다. 그러므로 Class명은 꼭 대문자로 써 주어야 한다.

여기선 circle이라는 이름을 가진 심볼을 Circle이라는 이름의 클래스를 만들어 Linkage 시키겠다는 것이다. (대소문자 구분) Class명 주는 부분 아래에 보면 Base class라는 것이 있다.

Class는 Base class를 상속받는다. 위의 내용으로 설명하자면 Circle 클래스는 flash.display 패키지에 있는 MovieClip 클래스를 상속받는 것이다.

즉, Class extends Base class 이렇게 되는 것이다.

만약, Class 명과 Base class 명이 같다면 Class는 자기자신이 된다.

(왜냐하면 자기자신을 상속받았으니까.)

2. 플래시에서 만든 무비클립은 Sprite로 만든 것보다 무겁다는 것이다. 그래서 애니메이션등과 같은 것을 만드는 것이 아니면 Sprite로 만들어 addChild() 시켜 사용하는 것이 더 좋다.

https://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/

(1) Drag & Drop

2010-03-23T12:03:00.000+09:00

먼저 간단한 예제를 하나 만들어보자.

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.MouseEvent;

public class DragExample extends Sprite
{
public function DragExample()
{
super();

buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
this.startDrag();
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]

위의 핑크색 사각에 마우스를 대면 손모양으로 바뀌며 사각형을 드래그 할 수 있다.

그런데 Sprite 메서드에서 startDrag()메서드에 2개의 매개변수값을 지정할 수 있었다.

startDrag(lockCenter :Boolean = false, bounds;Rectangle = null) 이렇게..

(1) lockCenter : Boolean

lockCenter는 " 드래그 가능 Sprite가 마우스 위치의 가운데에서 잠기는지(true) 아니면 사용자가 Sprite를 맨 처음 클릭한 곳에서 잠기는지(false)를 지정한다 "라고 설명을 해 놓았지만.. 무슨말인지...그래서 위에 있는 코드에 값을 넣어보겠다.

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.events.MouseEvent;

public class DragExample extends Sprite
{
public function DragExample()
{
super();

buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
this.startDrag(true, null);
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]

18번째 라인에 lockCenter값을 true로 넣어주었다. 실행결과를 확인해 보면 핑크사각형 위의 어느 부분에서든 마우스를 클릭하게 되면 그 클릭한 부분이 중심이 되어 lock이 되는 것이다.

loockCenter = true 로 하면 위와 같이 되며 일반적으로 false이다.

(2) bounds : Rectangle

bounds는 " Sprite의 제한 영역을 지정하는 Sprite의 부모의 좌표와 관련된 값입니다. "이다.

음...Sprite의 제한영역을 지정한다...한번 만들어보자.

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.MouseEvent;

public class DragExample extends Sprite
{
public function DragExample()
{
super();

buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
var rectangle:Rectangle = new Rectangle( 0, 0, 200, 200);

this.startDrag(false, rectangle);
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]

19번째 라인에서 Rectangle클래스를 이용하여 일정한 영역만큼 값을 주어 그 영역 안에서만 움직일 수 있도록 하였다. 이것이 bounds이다. 위의 핑그색 사각형을 이동시켜보면 파란색 영역까지만 움직인다. 이렇게 영역을 제한하는 것이 bounds이다.

음....그런데 여기서 뭔가 이상한 걸 느끼지 않았나? 잘 보면 사각형을 마우스 다운해서 이동시킨 후에 파란색 영역 바깥에서 마우스 업시키면 계속해서 사각형이 이동한다.

MouseEvent.MOUSE_UP은 객체를 마우스 다운해서 이동시킨 후 그 객체 위에서 마우스 업을 하지 않으면 계속 이동(Drag)된 상태가 유지된다.

만약, 객체 위에서가 아닌 다른 영역에서 MOUSE_UP이 되게 하고 싶으면 stage를 쓰면된다.

브라우저(Flash^® Player)에서 실행 중인 SWF 내용의 경우 Stage는 Flash 내용이 표시되는 전체 영역을 나타낸다.(가장 최상위)

[code as3]
package classes.display
{
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.MouseEvent;

public class DragExample extends Sprite
{
public function DragExample()
{
super();

buttonMode = true;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseDownHandler(event:MouseEvent):void
{
var rectangle:Rectangle = new Rectangle( 0, 0, 200, 200);

this.startDrag(false, rectangle);
}
private function mouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
[/code]

15번째 라인에서 이벤트를 stage에 걸어주어 사각형 바깥영역에서 마우스 업이 되게 하였다.

* Drag & Drop을 배우면서 얻은 정보 *

mouseDownHandler 같은 메서드는 많이 쓰인다. 만약, 이 mouseDownHandler를 쓰고 있는 클래스를 상속받는 곳에서 다시 mouseDownHandler를 사용해서 쓰려고 하면 충돌나서 에러난다. 따라서 상속하려는 상위클래스의 mouseDownHanlder를 protected로 지정해 주어 사용하면 된다.

4.Sprite 클래스

2010-03-22T22:24:00.000+09:00

Sprite 클래스

Sprite 클래스는 MovieClip 클래스의 기능을 대체하는 클래스로 타임라인이 필요 없는 객체에 적합한 기본 클래스이다. Sprite는 일반적으로 타임라인을 사용하지 않는 사용자 인터페이스(UI) 구성요소에 대한 논리 기본 클래스가 된다.

참조 : www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/

Sprite 클래스에 대해서도 간다히 알아봤으니, 이제 속성과 메서드를 알아보자.

속성

buttonMode : Boolean

버튼 모드

dropTarget : DisplayObject

[read-only]

드래그하는 Sprite 아래

의 표시 객체 또는

Sprite를 드래그해 놓은

표시 객체를 지정.

graphics : Graphics

[read-olny]

벡터 드로잉 명령을 내

릴 수 있는 이 Sprite에

속한 Graphics 객체를

지정.

hitArea : Sprite

Sprite의 히트 영역으로

사용할 다른 Sprite를

지정.

soundTransform :

SoundTransform

Sprite 내에서 사운드를

제어.

useHandCursor :

Boolean

buttonMode 속성이

true로 설정된 Sprite 위

로 마우스를 움직일 때

손 모양(손 모양 커서)을

표시할지 여부를 나타내

는 부울 값.

메서드

Sprite()

Sprite 객체 생성

startDrag

(lockCenter:Boolean = false, bounds:Rectangle = null):void

지정된 Sprite를 드래그

할 수 있도록 함.

stopDrag():void

starDrag() 메서드 종료.

Sprite 클래스에는 위와 같은 속성과 메서드들이 있다. 이제 이것을 이용하여 예제를 만들어 보자.

Actionscript 3.0 _ code templete(주석달기)

2010-03-22T02:07:00.000+09:00

[code as3]
package
{
//-------------------------------------------------
//
// Import
//
//-------------------------------------------------
//-------------------------------------------------
//
// Constants
//
//-------------------------------------------------
//-------------------------------------------------
//
// Embeded Images
//
//-------------------------------------------------
//-------------------------------------------------
//
// Constructor
//
//-------------------------------------------------
/**
* Constructor
*/
//-------------------------------------------------
//
// Variables
//
//-------------------------------------------------
/**
* @private
*/
//-------------------------------------------------
//
// Override Properties
//
//-------------------------------------------------
//-------------------------------------------------
//
// Properties
//
//-------------------------------------------------
//-------------------------------------------------
//
// Override Methods
//
//-------------------------------------------------
//-------------------------------------------------
//
// Methods : about ____________
//
//-------------------------------------------------
/**
* @private
* funtion explain
*
* @param parameter_name explain
*
* @return
*/
//-------------------------------------------------
//
// EventHandlers
//
//-------------------------------------------------
/**
* @private
*/
}[/code]

접근제어자

2010-03-20T16:13:00.000+09:00

접근제어자

접근제어자에는 public, private, protected가 있다. 어떤 제어 접근자를 쓰는가에 따라 클래스의 멤버에 접근할 수 있는 권한 틀려지기 때문에 잘 사용해야한다.

1. public - 어디에서나 객체의 멤버 접근 가능.(아무런 제약 없이 접근 가능)

2. protected - 상속받은 클래스나 같은 패키지에 있는 클래스에서 접근 가능.

3. private : 클래스의 외부에서 접근 불가능.(클래스 안에서만 사용 가능)

	public	protected	private
상속	O	O	O
overriding	O	O	X
외부 클래스 접근	O	X	X

overriding _메서드 오버라이딩(메서드 재정의)

클래스를 상속받아 사용할 때 public, protected로 선언된 멤버 변수나 메서드를 상속받아 사용할 수 있다. overriding은 상위 클래스의 메서드를 개선하거나 하위 클래스에 맞게 변경하여 사용할 수 있게 해주는 기능이다.

인터페이스 클래스

2010-03-20T01:44:00.000+09:00

인터페이스 클래스

인터페이스 클래스는 정보클래스라고도 한다. (인터페이스 = 정보)

클래스 안에 메서드, 프로퍼티의 나열만 있고 실제로 뭔가를 만들지는 않는다.

즉, "뭘 만들겠다"고 지정만 해두는 것이다.

실제로 구혈할 클래스에서 implements로 인터페이스 클래스를 지정해두면, 인터페이스 클래스에서 지정한 메서드를 구현하지 않으면 컴파일 단계에서 에러를 낸다.

(디버깅 횟수를 줄일 수 있다.)

서로 다른 클래스 일지라도 같은 인터페잇 클래스로 구현해 놓으면 같은 데이터 형처럼 캐스팅해서 쓸 수 있다.

좀더 자세한 내용을 알고 싶다면 야훔님 블로그를 찾아가보자.

Vector 와 Array의 차이

2010-03-20T01:38:00.000+09:00

Array이는 C언어와 자료구조를 배우면서 많이 사용하였지만...Vector는 잘 모르겠다. java를 배우면서 Vector라는 말은 들어보았지만...배우지는 않았다. 그래서 인턴 면접을 봤을 때도 Vector에 대해 설명해 보라고 했을 때 아무말도 하지 못했다. 흠...슬프다. 하지만 이제 알았다. 하하하 이제라도 알았으니 다행이다.

Array _배열

- 어떤 객체도 다 들어감

( 어떤 객체가 들어갈지 몰라 검사하는 과정에서 Vector랑 속도차이가 나서 더 느리다. )

- 많은 양의 데이터를 처리하는 경우 유용하게 사용할 수 있다.

- 참조값이라서 데이터 접근이 느리다.

- 각 값에 대해 메모리 주소값만 가지고 있다.

- 메모리 주소로 이동하고, 그 이동된 주소에서 해당 데이터가 맞는지 확인하고 난 뒤 값을

전달한다.

[code as3]
var arr:Array = [];
[/code]

[]는 Array 객체를 의미한다. new Array()하는 것보다 []를 써주는 것이 속도가 빠르다.

Vector_벡터

- Vector 변수 선언할 때 어떤 객체가 들어갈지 미리 지정해 놓고 사용한다.

즉, 자료형이 지정되어 있어 데이터의 접근이 빠르다.

- 연속성 데이터 즉, 메모리가 연속해서 배치되어 있다.

- 해당 값을 바로 찾는다.

[code as3]
var vec:Vector = new Vector.<Object>;
[/code]

이렇게 하면 모든 객체를 담을 수 있지만, Vector가 빨라질 수 있는 이유는 정해진 포맷을 미리 지정해 놨기 때문에 별도의 연산이 필요하지 않아서이다.

#데이터 접근 : Vector(빠르다) > Array(느리다)

Vector는 Array이와는 달리 데이터형을 지정할 수 있어 데이터형에 따라 할당된 메모리 사이즈가 정해져 있기때문이다. (C에서는 데이터 사이즈를 제어할 수 있다. )

#중간에 값을 삽입하여 넣을 때 : Vector(느리다) < Array(빠르다)

Array이는 주소값만 바꿔주면 되지만, Vector는 메모리 값들을 죄다 쉬프트 해주고 공간을 마련해 놓고 데이터를 저장하기 때문이다.

#Vector가 주로 쓰이는 경우

- Bitmap 데이터나 객체의 움직임을 제어할 때, 속도를 최적화 하려고 쓰인다.

- Bitmap 에서 하나의 픽셀에 4byte씩 할당.

- FF를 2진수로 바꾸면 8비트, 비트맵 데이터 = ARGB , 8*4 = 32 bit 할당

- 이미지를 수정할 경우 Vector는 연속된 메모리의 정보를 가지고 있으므로 Vertor가 빠름.

(1) ColorTransform 예제

2010-03-18T15:20:00.000+09:00

[code as3]
package
{
import flash.display.Sprite;
import flash.geom.ColorTransform;
import fl.events.SliderEvent;

public class ColorTransformExample extends Sprite
{
public function ColorTransformExample()
{
super();
configure();
}

public function configure():void
{
red.maximum = 10;
red.minimum = -10;
red.value = 10;
green.maximum = 10;
green.minimum = -10;
green.value = 10;
blue.maximum = 10;
blue.minimum = -10;
blue.value = 10;

red.addEventListener(SliderEvent.THUMB_DRAG, changeColorHandler);
green.addEventListener(SliderEvent.THUMB_DRAG, changeColorHandler);
blue.addEventListener(SliderEvent.THUMB_DRAG, changeColorHandler);
}

public function changeColorHandler(event:SliderEvent):void
{
var ct:ColorTransform = pic.transform.colorTransform;

ct.redMultiplier = red.value / 10;
ct.greenMultiplier = green.value / 10;
ct.blueMultiplier = blue.value / 10;
pic.transform.colorTransform = ct;
}
}
}
[/code]

3. ColorTransform 클래스

2010-03-18T13:01:00.000+09:00

ColorTransform 클래스

ColorTransform 클래스는 DisplayObject의 색상값을 조절할 수 있는 클래스로 Actionscriot로Advanced Effect 효과를 낼 수 있다.

아, 여기서 알아둬야 할것이 있는데 모든 UI객체는 ColorTransform 객체를 가지고 있다.

참고로 모니터는 빛의 삼원색으로 이해해야 한다. (빛의 삼원색 : 빨강, 초록, 파랑)

출처 : 네이버 백과사전 http://100.naver.com/100.nhn?docid=839807

1px 은 AARRGGBB로 표현되며 16진수로는 0x00000000(Alpha, Red, Green, Blue)로 나타낸다. 여기서 AA는 Alpha(투명도)를 말한다. Alpha는 주로 bitmap data에 사용되며 일반적으로 RRGGBB(0x000000)를 사용한다.

플래시는 각각의 색을 8bit로 할당한다. 24bit로 색상을 표현하므로 RGB는 24bit로 구성되어있으며, 만약 Alpha까지 포함한다면 32bit가 된다.

RGB의 색상값은 255를 넘지 않는다. 왜냐하면 한 색상의 범위는 0~255이므로 한 색상은 8bit이고 이 색상이 표현할 수 있는 값은 2의 8승 즉, 256개의 색상을 가질 수 있다.

위와 같이 1장(1px)은 R, G, B가 층층이 쌓여 이루어졌다. 그렇기 때문에 RGB값을 이용하여 다양한 색상을 만들어 낼 수 있는 것이다.

이제 구조를 다 알았으니 예제를 하나 만들어보자. 플래시 파일에서 1개의 이미지 무비클립과 3개의 slider 컴포넌트를 이용하여 색상값을 조절하는 예제를 만들어보겠다.

2. Rectangle 클래스

2010-03-18T02:20:00.000+09:00

Rectangle 클래스

Rectangle 은 직사각형이라는 뜻이다. 그럼 Rectangle 클래스는 사각형을 만들기위한 기능을 가진 클래스라는 것이군. 그럼 Rectangle 클래스를 이용하여 사각형을 만들어보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.geom.Rectangle;

public class Rectangle extends Sprite
{
public function Rectangle()
{
var rx:Number = 0;
var ry:Number = 0;
var rw:Number = 100;
var rh:Number = 50;

var rect:Rectangle = new Rectangle(rx, ry, rw, rh);
}
}
}
[/code]

이렇게 하면 내부적으로 사각형을 생성하기만 할 뿐 화면에 나타나지는 않는다. 화면에 사각형을 그리려면 Graphics 클래스의 drawRect() 메서드를 사용해야한다.

그럼 drawRect() 메서드를 이용하여 사각형을 그려보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.display.Graphics;

public class Rectangle extends Sprite
{
public function Rectangle()
{
super();
drawRect();
}

public function drawRect():void
{
var g:Graphics = this.graphics;

g.clear();
g.beginFill(0xFF0000, 1);
g.drawRect(0, 0, 100, 100);
g.endFill();
}
}
}
[/code]

빨간색 사각형이 생겼다.

아, 플래시에서 사용하는 좌표는 상단 왼쪽 끝이 (0, 0)이 된다. 상단 왼쪽 끝에서 오른쪽으로 갈수록, 상단 왼쪽에서 하단 아래로 내려갈수록 양의 값을 갖는다.

(4) 극 좌표를 직교 좌표계의 한 점으로 변환 - Point.polar()

2010-03-17T02:35:00.000+09:00

[code as3]
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;

public class DistanceExample extends Sprite
{
public function DistanceExample()
{
super();
configureListener();
}

private var circle1:Circle;
private var circle2:Circle;

public function configureListener():void
{
if(!circle1)
{
circle1 = new Circle();
circle1.x = 100;
circle1.y = 100;

addChild(circle1);
}

if(!circle2)
{
circle2 = new Circle();
circle2.x = 200;
circle2.y = 200;
addChild(circle2);
}

circle1.addEventListener(MouseEvent.MOUSE_DOWN, circle1DownHandler);
circle1.addEventListener(MouseEvent.MOUSE_UP, circle1UpHandler);
circle2.addEventListener(MouseEvent.MOUSE_DOWN, circle2DownHandler);
circle2.addEventListener(MouseEvent.MOUSE_UP, circle2UpHandler);
}

public function circle1DownHandler(event:MouseEvent):void
{
circle1.startDrag(false, null);
}

public function circle1UpHandler(event:MouseEvent):void
{
circle1.stopDrag();
var point1:Point = new Point(circle1.x, circle1.y);
var point2:Point = new Point(circle2.x, circle2.y);

distance_txt.text = Point.distance(point1, point2).toString();
}

public function circle2DownHandler(event:MouseEvent):void
{
circle2.startDrag(false, null);
}

public function circle2UpHandler(event:MouseEvent):void
{
circle2.stopDrag();
var point1:Point = new Point(circle1.x, circle1.y);
var point2:Point = new Point(circle2.x, circle2.y);
distance_txt.text = Point.distance(point1, point2).toString();
}
}
}
[/code]

(3) 두 점 사이의 일정한 비율의 위치 - Point.interpolate()

2010-03-17T02:32:00.000+09:00

[code as3]
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;
public class DistanceExample extends Sprite
{
public function DistanceExample()
{
super();
configureListener();
}

private var circle1:Circle;
private var circle2:Circle;
public function configureListener():void
{
if(!circle1)
{
circle1 = new Circle();
circle1.x = 100;
circle1.y = 100;

addChild(circle1);

}

if(!circle2)
{
circle2 = new Circle();
circle2.x = 200;
circle2.y = 200;

addChild(circle2);
}
circle1.addEventListener(MouseEvent.MOUSE_DOWN, circle1DownHandler);
circle1.addEventListener(MouseEvent.MOUSE_UP, circle1UpHandler);
circle2.addEventListener(MouseEvent.MOUSE_DOWN, circle2DownHandler);
circle2.addEventListener(MouseEvent.MOUSE_UP, circle2UpHandler);
}

public function circle1DownHandler(event:MouseEvent):void
{
circle1.startDrag(false, null);
}

public function circle1UpHandler(event:MouseEvent):void
{
circle1.stopDrag();
var point1:Point = new Point(circle1.x, circle1.y);
var point2:Point = new Point(circle2.x, circle2.y);
distance_txt.text = Point.distance(point1, point2).toString();
}

public function circle2DownHandler(event:MouseEvent):void
{
circle2.startDrag(false, null);
}

public function circle2UpHandler(event:MouseEvent):void
{
circle2.stopDrag();
var point1:Point = new Point(circle1.x, circle1.y);
var point2:Point = new Point(circle2.x, circle2.y);
distance_txt.text = Point.distance(point1, point2).toString();
}
}
}
[/code]

(2) 두 점 사이의 거리 - Point - distance()

2010-03-17T02:25:00.000+09:00

[code as3]
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;

public class DistanceExample extends Sprite
{
public function DistanceExample()
{
super();
configureListener();
}

private var circle1:Circle;
private var circle2:Circle;

public function configureListener():void
{
if(!circle1)
{
circle1 = new Circle();
circle1.x = 100;
circle1.y = 100;
addChild(circle1);
}

if(!circle2)
{
circle2 = new Circle();
circle2.x = 200;
circle2.y = 200;
addChild(circle2);
}

circle1.addEventListener(MouseEvent.MOUSE_DOWN, circle1DownHandler);
circle1.addEventListener(MouseEvent.MOUSE_UP, circle1UpHandler);
circle2.addEventListener(MouseEvent.MOUSE_DOWN, circle2DownHandler);
circle2.addEventListener(MouseEvent.MOUSE_UP, circle2UpHandler);
}

public function circle1DownHandler(event:MouseEvent):void
{
circle1.startDrag(false, null);
}

public function circle1UpHandler(event:MouseEvent):void
{
circle1.stopDrag();
var point1:Point = new Point(circle1.x, circle1.y);
var point2:Point = new Point(circle2.x, circle2.y);
distance_txt.text = Point.distance(point1, point2).toString();
}

public function circle2DownHandler(event:MouseEvent):void
{
circle2.startDrag(false, null);
}

public function circle2UpHandler(event:MouseEvent):void
{
circle2.stopDrag();
var point1:Point = new Point(circle1.x, circle1.y);
var point2:Point = new Point(circle2.x, circle2.y);
distance_txt.text = Point.distance(point1, point2).toString();
}
}
}
[/code]

(1) (0, 0)에서 한 점까지의 거리 - length

2010-03-17T01:29:00.000+09:00

[code as3]
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;

public class Length extends Sprite
{
public function Length()
{
super();
configureListener();
}

private var circle:Circle;

public function configureListener():void
{
if(!circle)
{
circle = new Circle();
circle.x = stage.stageWidth / 2;
circle.y = stage.stageHeight / 2;
addChild(circle);
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, ptMouseDownHaldner);
circle.addEventListener(MouseEvent.MOUSE_UP, ptMouseUpHandler);
}

function ptMouseDownHaldner(event:MouseEvent):void
{
circle.startDrag(false, null);
}

function ptMouseUpHandler(event:MouseEvent):void
{
circle.stopDrag();
var point1:Point = new Point(circle.x, circle.y);
length_txt.text = point1.length.toString();
}
}
}
[/code]

1. Point 클래스

2010-03-15T16:12:00.000+09:00

Point 클래스

Point 클래스는 점, 사각형 등 기하학적 객체를 정의하는 클래스들 중 하나로 직교 좌표계의 한 점을 가지는 클래라고 한다.

음...무슨 소린진 잘 모르겠다. 일단 Point 클래스의 속성과 메서드를 살펴보자.

Point 클래스 속성과 메서드

속성

length : Number [read-only]	(0, 0)에서 한 점까지 길이
x : Number	x좌표 값
y : Number	y좌표 값

메서드

Point(x:Number=0, y:Number=0)	새로운 점 만듬
add(v:Point):Point	좌표값을 추가하여 새로운 점 만듬
clone():Number	Point 객체 복사본 만듬
distance(pt1:Point, pt2:Point):Number)	두 점 사이의 거리
equals(toCompare:Point)	두 점이 같은지 결정
interpolate(pt1:Point, pt2:Point, f:Number):Point	두 점 사이에서 원하는 비율을 설정하면 계산된 점을 Point 객체로 반환
normarlize(thickness:Number):void	좌표를 (0,0)기준으로 설정된 거리로 조절
offset(dx:Number, dy:Number):void	현 Point 객체를 지정된 만큼 이동
polar(len:Number, angle:Number):Point	지정된 거리와 각도에 위치된 좌표를 반환
subtract(v:Point):Point	현재 점에서 다른 점의 좌표를 빼서 새 점 만듬
toString():String	x , y 값 문자열로 반환

이제 속성과 메서드도 알아봤으니 하나씩 만들어 보겠다. 음, 다 만들 수는 없고 속성에서 length와 메서드에서 distance, interpolate, polar 정도만 만들어보겠다.

Daum_Open_API Dictionary Search

2010-02-24T16:27:00.000+09:00

Naver_Open_API를 이용한 쇼핑 검색

2010-02-24T16:18:00.000+09:00