Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Apps

플래시, Adobe AIR 그리고 PHP를 이용하여 채팅방 만들기

by
Difficulty:IntermediateLength:LongLanguages:

Korean (한국어) translation by Yunsu Kim (you can also view the original English article)

"채팅방에서 가장 중요한 기능은 다른 사용자들과 텍스트를 통해 정보를 주고받는 기능이다. " - 위키피디아 이번 프리미엄 튜토리얼을 진행하는 동안, 저는 Flash와 AIR, PHP, MySQL 그리고 XML을 사용하여 어떻게 채팅방을 만들 수 있는지 보여드릴 것 입니다.


유저 인터페이스

유저 인터페이스 만들기를 시작하겠습니다. 당신은 픽셀에 유저 인터페이스를 복사할 수도 있고, 아니면 자신만의 인터페이스를 만들 수도 있습니다.


첫 번째 단계 : 문서 설정하기

Adobe Flash를 실행한 후, 'Flash File (Adobe AIR)' 문서를 새로 만드세요. 'chatroom.fla' 라는 새 폴더를 만들고 Flash File을 그 안에 저장하세요. 그 다음으로, 'ActionScript' 파일을 생성합니다. 그 후 파일명은 'chatroom.as'로 저장합니다. 그리고 이것을 새로 만든 'chatroom.fla' 폴더 안에 저장합니다.



두 번째 단계 : 파일 연결하기

플래시에서, 속성('Properties') 패널을 찾습니다. 텍스트 필드에 'chatroom'을 타이핑하고 엔터를 칩니다. 이렇게 하면 액션스크립트 파일과 연결될 것이고, ( 추후에 우리가 만들 것입니다.) 플래시 문서도 마찬가지로 연결될 것입니다. 문서 클래스를 어떻게 설정하는 지에 대한 튜토리얼을 진행하고 싶으면 여기를 클릭하세요.



세 번째 단계 : 스테이지와 백그라운드 만들기

속성 ('Properties') 패널에서, 스테이지의 사이즈를 230x400 픽셀로 설정합니다. 그 다음, 사각형 툴(rectangle tool)을 선택합니다. 둥근 모서리(rounded corners)로 설정하고, 5 픽셀로 설정합니다. 하얀색으로 색을 채우고, 알파 값을 원하는 값으로 설정합니다. - 저는 10%로 설정했습니다. 그 다음, 선의 굵기(한글 플래시에서는 '획')를 1 픽셀로 설정합니다. 스테이지 위에 사각형을 그립니다. 그리고 이 사각형은 245 너비와 400 높이로 설정합니다. F8을 누른 후 동영상클립(movieclip)으로 지정해줍니다. 사각형의 이름은 'background'로 지정해주고, 인스턴스 이름도 'background'라고 설정해줍니다. 필터 패널 안에 있는 광선 필터 (glow filter)에서 흐림 값을 24로 주고, 강도는 66%로 줍니다. 그리고 품질은 높음으로 설정해줍니다. 다음으로 그림자 필터를 추가합니다. 흐림 값을 4로 주고, 강도는 50%, 품질은 높음, 각도는 90º, 거리는 2로 값을 줍니다.



네 번째 단계 : 로그인 / 회원가입 패널 만들기

컴포넌트 패널에서, 스테이지로 목록 컴포넌트를 복사해 드래그 합니다. 이렇게 하면 현재 온라인 상태인 유저들의 목록이 포함될 것입니다. 그리고 이것의 인스턴스 이름을 'uList'라고 해줍니다. 너비 값을 200, 그리고 높이 값을 189로 설정합니다. 그 다음, 텍스트 툴을 선택합니다. 정적 텍스트 설정으로, 새로운 목록 컴포넌트 위에 텍스트 필드를 그립니다. 텍스트 필드 안에, 'Users online'을 넣습니다.

텍스트 툴을 선택한 채로, 또 다른 텍스트 필드를 목록 컴포넌트 밑에 그린 후 'Username'을 넣습니다. 방금 만든 'Username' 밑에, 새로운 텍스트 필드를 그립니다. 새로운 텍스트 필드는 'Password'라고 이름 짓습니다. 'Username' 텍스트 필드 바로 밑에, 새로운 텍스트 인풋 필드를 만듭니다. 그리고 인스턴스 이름은 'user'라고 해줍니다. 너비 값 200 그리고 높이 값 17으로 설정합니다. 색은 검정, 폰트 크기는 12로 정합니다. 'Password' 텍스트 필드 바로 밑에 있는 인풋 텍스트 필드도 위와 같은 값으로 정합니다. 밑에 있는 인풋 텍스트 필드를 'pass'라는 이름을 가진 인스턴스로 만듭니다. 그리고 라인 타입을 'Password'로 설정합니다. 이렇게 하면 글자를 입력했을 때 별표가 나타납니다.



다섯 번째 단계 : 로그인 / 회원가입 패널 마무리하기

사각형 도구를 선택합니다. 둥근 모서리(rounded corners)에 값은 5로 주고, 색은 #00CC00, 획(테두리)은 없는 채로 그립니다. 사각형의 너비는 122, 높이는 43을 줍니다. 이 사각형을 새로운 동영상 클립으로 바꾸고 'button'이라는 인스턴스로 만듭니다. 만든 '버튼(button)'을 더블 클릭해서 편집 모드로 들어갑니다.

동영상클립 버튼 안에, 새로운 레이어를 만듭니다. 동적 텍스트 필드를 하나 만듭니다. 인스턴스 이름은 'dyText'로 주고, 너비는 110, 높이는 36, 폰트 크기는 26, 색깔은 흰색, 글씨체는 bold로 설정합니다. 편집모드를 종료하고, 스테이지로 돌아갑니다.

버튼을 선택하고, 필터 패널을 탐색합니다. 버튼의 그림자 필터 흐림 값은 2, 강도는 66%, 품질은 높음, 각도는 90º, 거리는 1로 설정합니다. 체크박스 컴포넌트를 복사해 드래그를 합니다. 버튼 동영상 클립 바로 밑에 이것을 배치시킵니다. 이것을 'remember'라는 인스턴스 이름을 줍니다. 패러미터 패널에서, 라벨의 이름을 'Remember'로 지정합니다. 다음엔, 체크박스를 복사하고, 그 옆 오른쪽에 새로운 인스턴스를 붙여넣습니다. 새로 붙여넣은 체크박스의 인스턴스 이름은 'singUp'으로 지정합니다. 이것의 라벨은 'Sign up'으로 지정합니다. 모든 엘리먼트를 선택하고 선택된 모든 엘리먼트를 하나의 큰 동영상 클립으로 만듭니다. 그리고 인스턴스 이름은 'screen1'으로 해줍니다.



여섯 번째 단계 : 방 화면 패널 만들기

'screen1' 동영상 클립 오른쪽에, 정적 텍스트 박스를 그려넣고, 그 안에 'Rooms online'이라고 적습니다. 텍스트 필드 밑에, 스테이지 위에 새로운 리스트 컴포넌트를 가져온 후 채팅 방을 거기에 포함시킵니다. 그리고 인스턴스 이름은 'rList'라고 해줍니다. 너비 값은 200 그리고 높이 값은 189로 줍니다. 그 후 리스트 컴포넌트 밑에 또 다른 정적 텍스트 필드를 생성시킵니다. 그리고 'Room'이라고 적습니다. 텍스트 필드 바로 밑에, 인풋 텍스트 필드를 생성시킵니다. 인스턴스 이름은 'table'로 지정하고, 너비 값은 200 그리고 높이 값은 17로 줍니다. 폰트 크기는 12, 색은 검정으로 합니다.



일곱 번째 단계 : 방 화면 패널 마무리하기

스테이지 위에 또다른 버튼 동영상 클립을 복사한 후 드래그 합니다. 인스턴스 이름은 'button2'라고 설정하고, 'rList' 컴포넌트 밑에 배치시킵니다. 필터 패널에서, 'button1' 동영상 클립에서 적용했던 설정들 중 그림자 필터에 대한 설정을 똑같이 적용시킵니다. 이것은 선택한 채팅 방에 들어가기 위해 사용될 것입니다.

이제, 스테이지 위에 체크박스 컴포넌트를 복사하여 드래그 합니다. 그리고 인스턴스의 이름은 'createRoom'이라고 설정합니다. 이 박스는 사용자가 원래 만들어져 있는 방에 들어가는 것이 아니라 새로운 방을 만들고 싶은 의사를 나타내고 싶을 때 체크합니다.

다음, 사각형 툴을 다시 선택합니다. 색은 #BA0101로 채워주고 획(테두리)은 없는 채로 그립니다. 둥근 모서리(rounded corner), 모서리 크기는 5 픽셀, 너비는 71픽셀 그리고 높이는 25 픽셀로 합니다. 이 사각형을 동영상 클립으로 변환하고 인스턴스 이름을 'out'으로 줍니다. 새로 만든 'out' 동영상 클립을 더블 클릭하여 편집모드로 이동합니다. 맨 위에 두 번째 레이어를 추가합니다. 텍스트 툴을 선택하고 정적 텍스트 필드를 만듭니다. 정적 텍스트 필들의 너비는 63, 높이는 18로 합니다. 그리고 인스턴스 이름은 'dyText'라고 정합니다. 편집 모드를 나가고 이전에 만들었던 초록 버튼 두개의 속성 값과 같게 그림자 필터 값을 설정합니다. 이 빨간 버튼은 로그인 화면으로 돌아갈 때 사용될 것입니다.

새 엘리먼트들을 모두 선택하고 하나의 동영상 클립으로 만듭니다. 그리고 인스턴스 이름을 'screen2'로 지정합니다.



여덟 번째 단계 : 채팅 방 패널 만들기

'screen2' 동영상 클립 오른쪽에, 'Current chat'이라는 새로운 정적 텍스트 필드를 만듭니다. 그 텍스트 필드 바로 밑에, 텍스트에리어(TextArea) 컴포넌트를 복사해 드래그합니다. 그리고 너비는 200, 높이는 123, 인스턴스 이름은 'cList'라고 해줍니다.

그 후, 또 다른 리스트(List) 컴포넌트를 복사해 드래그 하고 새로 만든 텍스트에리어(TextArea) 밑에 배치시킵니다. 새로 만든 리스트(List) 컴포넌트의 인스턴스 이름을 'uList'라고 해줍니다. 이것은 현재 채팅방 안에 사용자의 목록을 알려줍니다.

'uList' 컴포넌트 밑에 또 다른 정적 텍스트 필드를 만들고 'Comment'라고 적습니다. 이제, 'Comment' 텍스트 필드 바로 밑에 인풋 텍스트 필드를 생성시킵니다. 인스턴스 이름은 'comm'으로 설정하고, 너비는 200, 높이는 17, 폰트 크기는 12, 색은 검정으로 해줍니다. 스테지이 위에 또 다른 초록 버튼을 복사하여 드래그 합니다. 그리고 인스턴스 이름을 'button3'로 줍니다. 끝으로, 스테이지 위에 빨간 버튼을 복사하여 드래그 하고 인스턴스 이름을 'back'으로 해줍니다. 새로 만든 모든 엘리먼트들을 선택하고, 동영상 클립으로 변환하고 인스턴스 이름을 'screen3'로 설정합니다.



아홉 번째 단계 : 에러 패널 만들기

이 패널은 문제가 발생할 때 슬라이드 되도록 할 것입니다. (예를 들면, 사용자가 부정확한 암호를 입력하는 경우)

스테이지 위에, 새로운 레이어를 생성시킵니다. 'background' 동영상 클립을 더블 클릭하고 편집모드로 들어갑니다. 백그라운드 모양을 선택하고 모양을 복사합니다. 스테이지로 돌아가서, 새로운 레이어에 그 모양을 'screen1' 동영상 클립 좌측에 붙여넣기 합니다. 붙여넣은 모양의 색을 검정, 알파 값은 50%로 줍니다. 모양을 동영상 클립 안으로 변환하고 인스턴스 이름을 'errorPage'로 설정합니다. 동영상 클립 'errorPage'를 편집하기 위해 더블클릭합니다.

동영상 클립 안에, 새로운 레이어를 만듭니다. 텍스트 툴을 선택하고 새로운 동적 텍스트 필드를 만듭니다. 너비는 120, 높이는 26, 폰트 크기는 20, 색은 흰색, bold 폰트로 설정합니다. 텍스트 필드를 백그라운드 모양 중앙에 수직, 수평이 맞도록 가지런히 정렬시킵니다.



열 번째 단계 : UI 마무리하기

스테이지에 나가기 버튼을 만들기 위한 새로운 레이어를 생성시킵니다. 우리는 모든 엘리먼트 가장 위에 버튼을 만들기를 원하기 때문에, 만든 것들 가장 위에 새로운 레이어를 이동합니다. 텍스트 툴을 선택하고, 'X' 라고 만들어 줍니다. 이것을 동영상 클립으로 변환하고 인스턴스 이름을 'closer'로 줍니다. 새로 만든 인스턴스를 더블클릭 합니다.

'closer' 동영상 클립 안에 새로운 레이어를 생성시킵니다. 'X' 텍스트 필드가 있는 레이어 바로 밑에 새로 만든 레이어를 배치시킵니다. 그리고 너비 16 픽셀 높이 16픽셀의 사각형을 그립니다. 이 사각형은 아무색이나 줘도 상관없고 알파값은 0으로 해줍니다. 'closer' 동영상 클립의 그림자 필터의 흐림 값은 2, 강도는 66%, 품질은 높음, 각도는 90º, 거리는 1로 설정합니다. 백그라운드 동영상 클립 오른쪽 구석 맨 위에 위치시킵니다.



기본 어플리케이션 코드

다음 일곱 단계의 과정에서는 서버-사이드 PHP를 하기 전에, 클라이언트 어플리케이션을 어떻게 만드는지 다루게 됩니다.


열한 번째 단계 : 코딩 시작하기

이전에 만든 빈 액션스크립트 파일을 열도록 합니다. 이 코드는 우리가 문서 클래스를 위해 사용하게 될 스켈레톤 코드입니다.


열두 번째 단계 : 임포트 (불러오기)

여기에는 이번 프로젝트에 사용될 모든 임포드들이 있습니다. 저는 여기를 클릭해서 확인할 수 있는 트위너 클래스를 사용할 것입니다.


열세 번째 단계 : 전역 변수

여기에는 우리가 정의한 전역 변수들이 있습니다. 우리는 사용자에 대해 계속 파악하고 있어야 합니다, 방에 사용자가 있는지, 채팅방 안에 사용자의 새로운 포스트 같은 것들이 바로 그것입니다. 우리는 또한 몇 개의 정수를 자주 사용되는 PHP파일 안에 저장해야 합니다.


열네 번째 단계 : 인보크 이벤트

이번 단계에서 가장 먼저 할 일은 인보크 이벤트가 무엇인가에 대해 듣는 것입니다. 인보크 이벤트는 어플리케이션이 실행될 때 실행됩니다. 인보크 이벤트가 실행될 때, 우리는 로그인 검증에 사용되는 암호화된 로컬저장소(EncryptedLocalStore)를 확인해 볼 것입니다. (다음 단계에서 알아 보겠습니다.)


열다섯 번째 단계 : 암호화된 로컬저장소 알아보기

인보크 이벤트가 실행될 때, 암호화된 로컬저장소(ELS)는 'creds'라고 불리는 한 객체를 살펴볼 것입니다. 만약 'creds' 객체를 찾는다면, 암호화된 로컬저장소(ELS)는 알맞은 텍스트 필드로 로그인 증명이 넘어갈 것입니다. 그 후, 우리는 init 이라는 함수를 호출합니다.


열여섯 번째 단계 : init 함수

init 함수에는 몇 개의 속성과 몇 개의 이벤트 리스너가 있습니다. 또한 우리가 만든 화면 동영상 클립에 동적으로 마스크를 만들 수 있습니다. 우리는 또한 타이머를 만들어 3초 간격으로 데이터베이스에서 확인할 수 있고, 새로운 코멘트와 사용자, 새로운 방등을 확인할 수 있습니다. 우리는 또한 네이티브 어플리케이션(NativeApplication)을 사용하여, 사용자가 접속을 해제하거나 다시 접속을 했음을 알 수 있습니다.


열일곱 번째 : 동적 마스크 만들기

여러 컴포넌트와 서로 다른 텍스트 필드를 사용하여 제작했기 때문에, 우리는 동적으로 스크린 동영상 클립에 대한 마스크를 만들어야 합니다. 우리는 'background' 동영상클립과 같은 크기의 둥근 모서리 사각형을 만들 것입니다. 이 사각형을 디스플레이 리스트의 가장 앞으로 이동하고 스프라이트 객체를 리턴시킵니다. (스프라이트 객체는 액션스크립트의 API 중 하나 입니다.)


서버-사이드 코드

다음은 백 엔드 부분의 위치로 전환해볼 것입니다. : PHP와 MySQL, 서버


열여덟 번째 단계 : MySQL 설정하기

처음으로 할 것은 일단 데이터베이스를 생성하는 것입니다. 데이터베이스와 테이블을 만들기 위해 저는 'phpmyadmin'을 사용합니다. 당신의 계정에 로그인을 합니다. 'Create new database' 영역에, 데이터베이스 이름인 'chatroom'을 타이핑하고 'Create'을 클릭합니다.


데이터베이스가 정상적으로 만들어지면, 우리는 모든 사용자를 계속 파악하기 위해 테이블을 만들어야 할 필요가 있습니다. 'Create new table on database chatroom'에서, 테이블 이름은 'chat_room_users'라고 정하고, 'Number of fields' 부분에서, 값은 4로 주고 'Go'를 클릭합니다.


'Go' 버튼을 클릭한 다음, 컬럼에 대해 세부사항을 더 입력해 봅시다. 우리는 ID, 유저이름, 그리고 각 사용자의 비밀번호를 저장해야 하고, 현재 온라인 상에 있는지 여부도 저장할 필요가 있습니다.

첫 컬럼의 이름은 'id'로 정하고, 타입은 'INT', 자동-증가(auto-increment)로 설정하고, 기본 키로 설정합니다. 두 번째 컬럼은 이름을 'user'로 정합니다. 타입은 'VARCHAR', 길이제한은 40으로 줍니다. 세 번째 컬럼의 이름은 'pass'로 정합니다. 타입은 'VARCHAR', 길이제한은 40으로 줍니다. 마지막 컬럼은 'on'으로 이름짓고 타입은 'VARCHAR', 길이제한은 2로 줍니다.


만약 'phpmyadmin' 말고 다른 것을 사용한다면, 여기 있는 MySQL 코드를 데이터베이스에 설정합니다.


열아홉 번째 단계 : PHP 설정하기

우선 데이터베이스 접근에 대해 코드를 구현할 필요가 있습니다. 새 PHP 문서를 만들고, 밑에 있는 코드를 붙여넣고, 자신의 로그인 검증으로 바꾼 후에, 이 파일을 당신의 웹서버에 'chat_require.php'라고 저장합니다.


스무 번째 단계 : 접속 중인 사용자 볼 수 있게 하기

이 코드는 현재 접속 중인 사용자가 어디에 있는지 알려줍니다. 여기에는 데이터베이스의 로그인 정보가 사용될 것입니다. 그 다음, 새로운 PHP 파일을 만들고 'user.php'라는 이름으로 웹서버에 저장합니다. 그러면 데이터베이스에 있는 'chat_room_users' 테이블로부터 모든 사용자를 볼 수 있게 됩니다. 그리고 PHP는 XML을 플래시에서 읽을 수 있게 출력할 것입니다.

XML의 코드는 이렇습니다:

아무도 접속하지 않을 시에는 이렇습니다:


스물한 번째 단계 : 사용자 로그 생성하기

다음엔 로그인 로직을 설계해봅시다. 새로운 PHP 파일을 만들고, 웹서버에 'logon.php'라고 저장합니다. 이 때 데이터베이스의 로그인 검증이 필요합니다. 그 다음 사용자, 패스워드, 그리고 로그에 대한 변수들이 잘 설정되었는지 확인할 것입니다. 만약 플래시로부터 그것들이 잘 받아진다면, 우리는 변수들을 세니타이즈할 것이고, 사용자를 위해 데이터베이스도 확인할 것입니다. (세니타이즈란 해커가 프론트엔드에서 변수를 변조시키지 못하도록 장치를 만드는 것입니다.) 우리는 데이터베이스에서 이미 사용자 이름이 있는지 확인합니다. 또한, 우리는 사용자가 새로운 사용자 이름 생성을 시도하는지 볼 것입니다. 이 로직이 완료될 때, 우리는 플래시가 파싱한 변수 값을 리턴시킬 것입니다.


스물두 번째 단계 : 방 선택하기

이제 사용자가 로그인이 되었고, 우리는 사용자에게 채팅 방에 접속할 수 있게할 것 입니다. 새 PHP 파일을 만들고, 웹서버에 'rooms.php' 라는 이름으로 저장합시다. 우리의 데이터베이스는 일련의 로그인 증명을 요구합니다. 로그인 증명을 거쳐 그 다음엔 데이터베이스에 만들어진 모든 테이블을 볼 수 있습니다. 우리는 사용자 테이블만 숨겨지도록 설정했습니다. 우리는 그 결과값을 얻게 되고, 플래시에서 XML이 출력될 것입니다.

처음에 어플리케이션이 사용될 때는 데이터베이스에 다른 방을 만들기 전까지는 사용자 테이블을 제외하고 아무 테이블도 없을 것입니다. 다음 단계에서 이 부분을 다루겠습니다.


스물세 번째 단계 : 방 만들기

사용자는 방을 만들 수 있는 선택권을 가졌습니다. 우선 새 PHP 파일을 만들고, 웹서버에 'create.php'라는 이름으로 저장합시다. 우리는 변수를 새니타이즈할 필요가 있습니다. 그러기 위해서, 우리는 데이터베이스에 사용자가 이미 있는 방을 만들 경우를 그것을 보기위한 질의를 해야합니다. 방이 이미 있지 않다면 우리는 새로운 테이블이 생성되도록 할 것 입니다. (존재하는 테이블에 새 열이 생기는 것이 아닙니다.) 다시, 우리는 정수를 플래시로 되돌려 보냅니다.


스물네 번째 단계 : 사용자의 최신 코멘트 받기

사용자가 로그인 할 때, 우리는 사용자가 전체 채팅 히스토리를 볼 수 있게 하고싶지 않습니다. 매번 사용자가 방에 입장할 때마다 자동적으로 그것을 알린 후에, 그 결과들은 새 항목으로 데이터베이스 테이블 안에 입력됩니다. 우리는 사용자의 가장 최근에 등록한 지점을 전체 채팅 히스토리를 받을 시작 지점으로 정할 것입니다. 우리는 MySQL 'MAX' 함수를 이용하여 가장 최근 지점을 검색하고 값을 플래시로 되돌려 보낼 것입니다. 밑의 코드를 복사하고, 웹서버에 'enter.php'라는 이름으로 저장합시다


스물다섯 번째 단계 : 메세지 전달 기능 구현하기

마침내, 사용자가 채팅을 시작할 수 있는 지점에 왔습니다. 이 페이지는 사용자가 채팅 창에 메세지를 입력했는지 체크하는 데에 사용됩니다. 만약 무언가 말한 것이 있다면, 우리가 생성한 테이블에 그것이 입력됩니다. 또한 사용자가 방에 들어온 후에 발생하는 모든 채팅 메세지를 출력합니다. 또한 현재 방에 있는 사용자를 보여줍니다.


백 앤드(서버)와 클라이언트 연결하기

이제 서버와 채팅 방을 연결하여 서로 상호작용할 수 있도록 만들 것입니다.


스물여섯 번째 단계 : 플래시로 돌아가기

사용자가 시작시 채팅 영역으로 로그인할 때, 'button1' 동영상 클립을 클릭할 것 입니다. 버튼을 클릭하면, 'logOn' 함수가 호출될 것입니다. 이러한 모든 함수들을 'logger' 함수라고 합니다. 'logger' 함수는 채워야될 필드들이 잘 채워져 있는지 간단히 확인할 것 입니다. 또한, 'logon.php' 파일을 불러올 것 입니다. .


스물일곱 번째 단계 : 사용자 로그인 구현하기

사용자가 로그인을 시도할 때, 우리는 로그인 검증을 데이터베이스로 보내 접속이 성공적으로 되었는지 확인할 것입니다. 우리는 몇 개의 변수를 사용할 것이고 PHP는 약간의 확인을 한 후 변수들을 리턴합니다. 만약 리턴되는 숫자가 1이나 2라면, 사용자는 로그인된 것입니다. 만약 다른 숫자를 리턴했다면, 우리는 'errorPage' 동영상 클립을 사용해서 다룰 것입니다. 이 함수는 사용자가 어플리케이션을 종료시킬 때 호출되는 함수이기도 합니다. 앞에서 말했듯이, 사용자가 채팅 영역을 벗어나게 되면, 어플리케이션을 종료시킬 것입니다. 또한 이 함수는 'screen2'에서 방 목록을 보여주기도 합니다.


스물여덟 번째 단계 : 사용가능한 방 로드하기

'popRList' 함수는 XML을 조작하여 PHP 파일로부터 값을 리턴시킵니다. 만약 사용자가 만들어진 방을 보고 있을 때, 목록에서 방을 클릭하면 'room' 텍스트 필드가 채워질 것입니다. 또한 사용자는 여기서 로그아웃하고 다른 사용자명으로 로그인할 수도 있습니다.


스물아홉 번째 단계 : 로그아웃 구현하기

만약 사용자가 다른 사용자명으로 로그인하고 싶다면, 'screen2'에서 'out' 버튼을 클릭해야 합니다. 그러면 'logger' 함수를 다시 호출하여 데이터베이스로 0의 값을 보낼 것 입니다. 0 값이 보내지면, 사용자는 로그아웃 상태가 되고, 'screen1' 으로 되돌아가게 됩니다.


서른 번째 단계 : 방 입장 구현하기

사용자가 방에 들어간다면, 'room' 함수가 호출됩니다. 사용자가 방을 새로 만드는 경우, 우리는 방에 대한 텍스트 필드가 잘 채워져 있는지 몇 가지 확인할 것입니다. 또한 띄어쓰기는 밑줄 기호로 변경됩니다.


서른한 번째 단계 : 방 리턴 값 다루기

값이 PHP에서 플래시로 리턴되면, 우리는 스위치 문을 이용하여 값에 대해 로직을 구현할 것 입니다. 만약 사용자가 방에 성공적으로 들어갔다면, 우리는 어떤 이벤트 리스너를 추가하고, 'enter.php' 파일을 불러올 것입니다. .


서른두 번째 단계 : 방 입장하기

사용자가 방에 입장하면, 우리는 어느 정도 새 포스트를 화면에 출력할 것인지 그 양을 결정해야 합니다. 그리고 그것을 위해서 '_id' 변수를 사용할 것 입니다. 변수 값이 정해지면, 우리는 'callComments' 라는 함수를 호출합니다.


서른세 번째 단계 : 데이터베이스에서 코멘트 가져오기

이 함수는, 우리는 채팅에 대한 XML이 포함된 PHP파일을 불러올 수 있습니다. 이 함수를 호출하게 되면, 사용자가 로그인 했는지 아니면 로그아웃 했는지 알 수 있습니다. 또한, 사용자의 코멘트를 전달할 수도 있습니다. 만약 사용자가 아무말도 하지 않은 상태라면, XML은 불러왔지만 데이터베이스에는 아직 아무것도 입력되지 않았겠죠.


서른네 번째 단계 : 코멘트 출력하기

XML의 코멘트 안에서, 우리는 현재 사용자가 방에 들어간 시점 이후의 모든 사용자들에 의해 생성된 코멘트 목록을 가지고 있다. 또한 현재 방에 있는 사용자의 목록도 저장하게 된다.


서른다섯 번째 단계 : 데이터베이스에 코멘트 보내기

사용자가 자신의 코멘트를 채워 넣었다면, 'button3' 동영상 클립을 선택할 수 있다. 그렇게 'button3' 동영상 클립을 클릭하면, 우리는 'callComments' 함수를 호출하고 사용자의 메세지를 전달한다. 반면에, 지금 들어와있는 방에서 나가기를 원한다면 'commentClick' 함수를 사용할 수도 있다. 우리는 'callComments' 함수를 호출할 수도 있으나 0 뿐만 아니라 사용자가 나갔다는 메세지를 보낼 수도 있다.


서른여섯 번째 단계 : 사용자 트래킹하기

이 두 가지 기능으로 우리가 불러와야 할 PHP 파일을 추적할 수 있습니다. 'tracker' 변수는 어플리케이션 안에서 사용자가 어디에 있는지를 계속 추적해줄 것 입니다. 매 3초마다, 타이머가 발동되어 'tracker' 값에 의존하는 'loadSomething' 함수를 호출할 것 입니다.


서른여덟 번째 단계 : 어플리케이션 나가기

사용자가 어플리케이션을 종료하기로 정했을 때, 우리는 'onExiting' 함수를 호출합니다. 'closer' 동영상 클립을 클릭하면, 우리는 새로운 'EXITING' 이벤트를 보냅니다. 'onExiting' 함수가 호출되면, 우리는 'preventDefault' 에게 이벤트를 전달할 것 입니다. 이것은 실제로 이벤트가 어플리케이션의 종료를 발생시키지 않습니다. 우리는 사용자가 실제로 어플리케이션을 나가기 전에 데이터베이스와 관련된 뭔가를 하기 원합니다.


서른여덟 번째 단계 : 다른 함수들

여기에는 어플리케이션 상에서 사용되는 몇몇의 함수들이 있습니다. 우리는 'nativeWindow'를 이리저리 이동하는 것 뿐만 아니라, 'errorPage' 간에도 다루게될 것 입니다. 또한, 만약 사용자가 'button3' 동영상 클립을 클릭하는 대신에 'reutrn'을 누르길 원한다면, 'onKeyUP' 함수로 그것을 해결하면 됩니다.


프로젝트 마무리 짓기

이제 거의 다 끝났습니다!


서른아홉 번째 단계 : 어플리케이션 패키지 만들기

마침내 우리는 어플리케이션을 배포할 준비가 되었습니다. File > Commands > AIR - Application and Installer Settings을 선택하세요.


'Window style' 밑에, 'Custom Chrome (transparent)'을 선택하세요.


'Publish AIR File' 버튼을 클릭하세요.



마흔 번째 단계 : 어플리케이션 패키지 만들기

'Publish AIR File' 버튼을 클릭하면, 디지털 서명을 추가하기 위한 프롬프트가 나타날 것 입니다. 당신은 예전에 만들었던 파일을 선택할 수 있습니다. 예전에 만든 파일을 선택하길 원치 않는다면, 'Create' 버튼을 클릭하세요.


해당 정보를 모두 채운 후 'OK'를 클릭하세요. 파일이 만들어진 후에는, 원하는 비밀번호를 입력하고 'OK'를 클릭하세요.


일단 파일이 만들어지면, 'AIR file has been created' 라는 메세지가 나올 것 입니다. 당신은 이제 채팅방 프로그램을 배포할 준비가 되었습니다.


끝으로

당신이 이번 튜토리얼을 읽는 것이 즐거웠길 바랍니다. 그리고 다른 멋진 PHP, MySQL 그리고 플래시를 배울 수 있는 Tuts+ 피드를 구독하는 걸 잊지 마십시오.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.