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

Announcement Term Project 최종 발표 일시: 12월 11일(화요일), 13일(목요일) 각 팀 당 제한시간 15분 발표내용: Term Project 과제 설명 5분 구현 설명 5분 결과 설명 5분 일시: 12월 11일(화요일), 13일(목요일) 발표 슬라이드 준비 (pptx는 ppt로 바꾸어서 준비)

Announcement 발표 순서 12월 11일(화요일) 12월 13일(목요일) 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 파서 (parser) 기본 문법 규칙을 잘 지켜 만든 문서 (well-formed 문서) 사용자 정의 문법(DTD: Document Type Definition)을 잘 지켜 만든 문서 (valid 문서) XML 파서 (parser) XML을 파싱하는 프로그램

XML의 개념 이해 처리지시문 (Process Instruction) 원소 (Element) 문서의 버전, 인코딩 방식 등 기본적인 정보 <?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" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application> Tag

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

플렉스 컴포넌트 Visual Component Non-Visual Component 화면으로 나타낼 수 있는 것들 컨트롤 컴포넌트, 레이아웃 컴포넌트, 네비게이터 컴포넌트, 커스텀 컴포넌트, 차트 컴포넌드 Non-Visual Component 데이터 처리, 이벤트 처리 등의 프로그래밍 언어적 요소들을 위한 컴포넌트 <mx:Script> <mx:Model> <mx:XML> <mx:Array> …

컨트롤 컴포넌트 버튼, 체크 박스 등의 컴포넌트 공통된 속성 id 고유 내부 식별 이름 크기 속성 width, height 넓이, 높이 (픽셀값 or %) x, y 위치 (좌측상단 = 0,0) scaleX, scaleY 원래크기에 대한 비율 label 밖에 보이는 이름(라벨) 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