Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Slides - Get Now PowerPoint

VIEWS: 10 PAGES: 36

									Multimedia Programming 22: FLEX Basics
Departments of Digital Contents Sang Il Park

Announcement
• Term Project 최종 발표
– 각 팀 당 제한시간 15분 – 발표내용:
• Term Project 과제 설명 5분 • 구현 설명 5분 • 결과 설명 5분

• 일시: 12월 11일(화요일), 13일(목요일) • 발표 슬라이드 준비 (pptx는 ppt로 바꾸어서 준비)

Announcement
• 발표 순서
– 12월 11일(화요일)
• 2반 2-1조 2-2조 2-4조 2-5조 2-8조 • 1반 1-2조 1-3조 1-6조 1-7조 1-9조

– 12월 13일(목요일)
• 2반 2-3조 2-6조 2-7조 2-9조 2-10조 • 1반 1-1조 1-4조 1-5조 1-8조

Outline
• Basic of Flex • 간단한 동영상 플레이어 만들기

Flex 시작하기
• 필요한 것
– SDK 받기  압축해제 – Java runtime environment

• 컴퓨터 내 환경 변수 설정
– 내컴퓨터속성고급환경변수PATH에 bin폴더 추가

Hello World: Your First Flexing!
HelloWorld.mxml <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>

XML의 개념 이해
• XML 파싱 (parsing):
– XML 문법 규칙을 지켜 쓴 문서를 해석하는 것 – 기본 문법 규칙을 잘 지켜 만든 문서 (well-formed 문서) – 사용자 정의 문법(DTD: Document Type Definition)을 잘 지켜 만든 문서 (valid 문서)

• XML 파서 (parser)
– XML을 파싱하는 프로그램

XML의 개념 이해
• 처리지시문 (Process Instruction)
– XML 제일 처음에 있는 부분 – 문서의 버전, 인코딩 방식 등 기본적인 정보

<?xml version=“1.0” encoding=“utf-8” ?>
• 원소 (Element)
– XML 문서를 논리적으로 구성하는 단위 태그( < > ) 로 표현

• 속성 (Attribute/Property)
– 각 원소의 구체적인 값(속성) 속성명=„값‟

XML의 개념 이해
• 주석
– 파싱되지 않고 무시되는 일반 텍스트 <!-- 주석내용 --> – 첫 시작은 주석으로 시작할 수 없다 (반드시 처리지시문으로 시작)

FLEX의 역활
• MXML의 세가지 역할
– 비쥬얼 컴포넌트 정의
• <mx:Button label = “확인” />

– 사용할 데이터 정의
• <mx:Model id=“dataModel” source=“http://xml.net/rss.xml” />

– 유저 인터페이스에 데이터를 연결(바인딩)
• <mx:DataGrid id=“dg” dataProvider = “{dataModel}”/>

FLEX의 기본 문법
• 1. 처리지시문(process instruction)으로 시작한다
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>

FLEX의 기본 문법
• 2. 내용물인 원소는 Tag( < > )로 구성되어 있다.
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>

FLEX의 기본 문법
• 3. Tag를 열었으면 반드시 닫아야 한다.
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>

FLEX의 기본 문법
• 3. Tag를 열었으면 반드시 닫아야 한다.
• 태그를 닫는 2가지 방법
– 하위 내용이 있는 경우 <태그> …… </태그> ex) <mx:Button></mx:Button>

– 하위 내용이 없는 경우 <태그/> ex) <mx:Button/>

FLEX의 기본 문법
• 4. Tag는 다른 하위 Tag를 포함 할 수 있지만 엇갈릴 수 없다.
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>

FLEX의 기본 문법
• 4. Tag는 다른 하위 Tag를 포함 할 수 있지만 엇갈릴 수 없다.
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Application> </mx:Panel>

FLEX의 기본 문법
• 5. Tag이름이나 속성 이름은 대소문자를 구별한다

<mx:Button> <mx:button>

FLEX의 기본 문법
• 6. 태그의 속성은 하위 원소로 분리할 수 있다.
<mx:Button label=“test”/>

<mx:Button> <mx:label> test </mx:label> </mx:Button>

FLEX의 기본 문법
• 7. 루트 태그<ms:Application>는 하나여야 한다.
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > Tag <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>

네임스페이스
• XML 태그를 확장하는 접두어 • 선택된 원소 안에서만 유효 • 루트 태그<ms:Application>에 네임스페이스를 정 의한다
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>

플렉스 컴포넌트
• Visual Component
– 화면으로 나타낼 수 있는 것들 – 컨트롤 컴포넌트, 레이아웃 컴포넌트, 네비게이터 컴포넌 트, 커스텀 컴포넌트, 차트 컴포넌드

• Non-Visual Component
– 데이터 처리, 이벤트 처리 등의 프로그래밍 언어적 요소들 을 위한 컴포넌트 – <mx:Script> <mx:Model> <mx:XML> <mx:Array> …

컨트롤 컴포넌트
• 버튼, 체크 박스 등의 컴포넌트 • 공통된 속성
id 고유 내부 식별 이름

width, height
크기 속성 x, y scaleX, scaleY label

넓이, 높이 (픽셀값 or %)
위치 (좌측상단 = 0,0) 원래크기에 대한 비율 밖에 보이는 이름(라벨) 텍스트 출력 관련 컴포넌트 경우 글의 내용

text

Button
• 기본적인 버튼 콘트롤러 • 일반적인 정의:
<mx:Button id= “id명” label = “버튼명” color = “글씨색: ex) 0x0B33C” icon = “아이콘파일명” skin = “스킨 파일명” toggle = “true | false” buttonDown = “이벤트핸들러” click = “이벤트핸들러” />

LinkButton
• 마우스의 모양이 변하는 버튼 콘트롤러의 확장판 • 일반적인 정의:
<mx:LinkButton id= “id명” label = “버튼명” />

CheckBox
• 항목 선택 시 사용하는 콘트롤러 • 버튼 콘트롤러의 확장판 • 일반적인 정의: <mx:CheckBox id= “id명” label = “체크박스에 나올 설명” labelPlacement = “right|left|top|bottom” color = “글씨색: ex) 0x0B33C” click = “이벤트핸들러” selected = “true | false” />

RadioButton
• 여러가지 중 선택하게 해주는 콘트롤러 • 버튼 콘트롤러의 확장판 • 일반적인 정의: <mx:RadioBox id= “id명” label = “라디오버튼에 나올 항목” labelPlacement = “right|left|top|bottom” color = “글씨색: ex) 0x0B33C” click = “이벤트핸들러” selected = “true | false” groupName = “라디오버튼 그룹명” />

ColorPicker
• RGB 색을 고를 수 있는 컴포넌트
<mx:ColorPicker id = “id명” selectedColor = “선택된 색 : ex) 0xFFFFFF showTextField = “true | false” changed = “색을 선택할 시의 이벤트핸들러” />

DateChooser
• 날자를 선택하는 달력 컴포넌트
<mx:DateChooser id = “id명” displayedYear = “Current Year” displayedMonth = “Current Month” showToday = “true | false” yearNavigationEnabled = “true | false” dayNames = “[“S”,”M”,”T”,”W”,”T”,”F”,”S”]” monthNames =“[“January”, … ]” changed = “날을 선택할 시의 이벤트핸들러” />

DateField
• TextInput과 DateChooser의 기능을 합쳐놓은 것
<mx:DateField id = “id명” formatString = “MM/DD/YYYY” close = “달력을 닫을 때의 이벤트핸들러” open = “달력을 열 때의 이벤트핸들러” />

HSlider/VSlider
• 슬라이더 조절바(thumb)를 움직여 값을 설정하는 컨 트롤러 <mx:VSlider id = “id명” thumbCount = “조절바 개수” minimum = “최소값” maximum = “최대값” labels =“[„0‟, „1‟, „2‟, „3‟]” // 라벨 값 values =“초기 값” tickInterval =“0.5” // 눈금자 간격 snapInterval =“0.5” // 눈금 이동 간격 liveDragging =“true | false” change = “슬라이더 값이 변할 때의 이벤트” />

ProgressBar
• 작업의 진행사항을 표시하는 컴포넌트
<mx:ProgressBar id = “id명” minimum = “최소값” maximum = “최대값” direction = “right | left” indeterminate =“false | true” label =“[„0‟, „1‟, „2‟, „3‟]” // 라벨 값 source =“표시하려는 작업 객체” complete = “작업 완료 시의 이벤트” progress = “작업 진행 시의 이벤트” />

Image
• 그림 출력
<mx:Image id = “id명” source = “경로명 or URL” />

SWFLoader
• 플래쉬 파일(또는 이미지) 출력
<mx:SWFLoader id = “id명” source = “경로명 or URL” autoLoad = “true | false” complete = “로드 완료 시 이벤트” progress = “로드 수행 중 이벤트” unload = “언로드 시 이벤트“ />
methods load (URL ) : void
설명 이미지 또는 SWF 파일을 로드

VideoDisplay
• 비디오 파일을 재생 (웹서버에서 받아오거나, 플래시 미디어 서버에서 받아와야 함)
<mx:VideoDisplay id = “id명” source = “경로명 or URL” autoPlay = “true | false” autoRewind = “true | false” live = “true | false” // 라이브 스트리밍 관련 volume = “소리크기 0~1 “ />
참고 사이트: http://flexdocs.kr/docs/flex2/langref/mx/controls/VideoDisplay.html

VideoDisplay - method
• Video 재생을 컨트롤 하기 위한 맴버함수들
methods load ( ) : void
설명 재생하지 않고 미디어 파일 로드

play ( ) : void
pause ( ) : void stop ( ) : void close ( ) : void

미디어 파일을 재생
재생 헤드를 이동하지 않고 일시 정지 재생을 정지 입력 스트림과 미디어 서버에의 접속을 강제 종료

동영상 플레이어 만들기
• play, pause, stop 세가지 버튼을 가진 간단한 동영상 플레이어 만들기
• 비디오 소스:
– http://dasan.sejong.ac.kr/~sipark/test.flv


								
To top