애플민트의 액션스크립트: 2010

2010년 12월 20일 월요일

jQuery : each() break / continue

for 문과 같은 기능 each()

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

return false // break

return true // continue

});

2010년 11월 24일 수요일

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

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 : 문서내에 존재하는 태그의 갯수이다.

2010년 11월 15일 월요일

@RequestParam

@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

@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

@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;
}

}

2010년 11월 12일 금요일

eclipse.ini 파일 설정

-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 버전 변경 에러

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\

2010년 11월 1일 월요일

jstl 설명 및 세팅

# 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>

2010년 10월 19일 화요일

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

'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 는 톰캣 샐행프로세스이다.

2010년 10월 12일 화요일

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

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 실행 해보자. 잘 될것이다.

2010년 10월 7일 목요일

tomcat server.xml 설정

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 폴더 안이 된다.

2010년 9월 30일 목요일

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

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 에 접근할 수 없어 에러가 나타난다.

2010년 4월 20일 화요일

8. BitmapData

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 클래스가 화면에 보여준다는 말이군..

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

2010년 4월 16일 금요일

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

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

[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]

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

2010년 4월 14일 수요일

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

간단한 모션을 한번 만들어보자. 모션을 만들위해서는 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]

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

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

2010년 4월 9일 금요일

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

파일 업로드 예제를 만들기 전에 필요한 것들이 몇가지 있다. 파일을 올릴 서버가 필요하며, 서버랑 연동할 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을 설치한 분들만 업로드가 가능하다.