Multimedia Programming 22: FLEX Basics

Presentation on theme: "Multimedia Programming 22: FLEX Basics"— Presentation transcript:

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

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

3 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조

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

5 Flex 시작하기 필요한 것 컴퓨터 내 환경 변수 설정 SDK 받기  압축해제 Java runtime environment
내컴퓨터속성고급환경변수PATH에 bin폴더 추가

6 Hello World: Your First Flexing!
HelloWorld.mxml <?xml version="1.0"?> <mx:Application xmlns:mx=" <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>

7 XML의 개념 이해 XML 파싱 (parsing): XML 파서 (parser)
기본 문법 규칙을 잘 지켜 만든 문서 (well-formed 문서) 사용자 정의 문법(DTD: Document Type Definition)을 잘 지켜 만든 문서 (valid 문서) XML 파서 (parser) XML을 파싱하는 프로그램

8 XML의 개념 이해 처리지시문 (Process Instruction) 원소 (Element)
문서의 버전, 인코딩 방식 등 기본적인 정보 <?xml version=“1.0” encoding=“utf-8” ?> 원소 (Element) XML 문서를 논리적으로 구성하는 단위 태그( < > ) 로 표현 속성 (Attribute/Property) 각 원소의 구체적인 값(속성) 속성명=‘값’

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

10 FLEX의 역활 MXML의 세가지 역할 비쥬얼 컴포넌트 정의 사용할 데이터 정의 유저 인터페이스에 데이터를 연결(바인딩)
<mx:Button label = “확인” /> 사용할 데이터 정의 <mx:Model id=“dataModel” source=“ /> 유저 인터페이스에 데이터를 연결(바인딩) <mx:DataGrid id=“dg” dataProvider = “{dataModel}”/>

11 FLEX의 기본 문법 1. 처리지시문(process instruction)으로 시작한다
<?xml version="1.0"?> <mx:Application xmlns:mx=" <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>

12 FLEX의 기본 문법 2. 내용물인 원소는 Tag( < > )로 구성되어 있다.
<?xml version="1.0"?> <mx:Application xmlns:mx=" <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>

13 FLEX의 기본 문법 3. Tag를 열었으면 반드시 닫아야 한다. <?xml version="1.0"?>
<mx:Application xmlns:mx=" <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>

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

15 FLEX의 기본 문법 4. Tag는 다른 하위 Tag를 포함 할 수 있지만 엇갈릴 수 없다.
<?xml version="1.0"?> <mx:Application xmlns:mx=" <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>

16 FLEX의 기본 문법 4. Tag는 다른 하위 Tag를 포함 할 수 있지만 엇갈릴 수 없다.
<?xml version="1.0"?> <mx:Application xmlns:mx=" <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>

17 FLEX의 기본 문법 5. Tag이름이나 속성 이름은 대소문자를 구별한다 <mx:Button> <mx:button>

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

19 FLEX의 기본 문법 7. 루트 태그<ms:Application>는 하나여야 한다.
<?xml version="1.0"?> <mx:Application xmlns:mx=" <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

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

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

22 컨트롤 컴포넌트 버튼, 체크 박스 등의 컴포넌트 공통된 속성 id 고유 내부 식별 이름 크기 속성 width, height
넓이, 높이 (픽셀값 or %) x, y 위치 (좌측상단 = 0,0) scaleX, scaleY 원래크기에 대한 비율 label 밖에 보이는 이름(라벨) text 텍스트 출력 관련 컴포넌트 경우 글의 내용

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

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

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

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

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

28 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 = “날을 선택할 시의 이벤트핸들러” />

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

30 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 = “슬라이더 값이 변할 때의 이벤트” />

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

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

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

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

35 VideoDisplay - method Video 재생을 컨트롤 하기 위한 맴버함수들 methods
설명 load ( ) : void 재생하지 않고 미디어 파일 로드 play ( ) : void 미디어 파일을 재생 pause ( ) : void 재생 헤드를 이동하지 않고 일시 정지 stop ( ) : void 재생을 정지 close ( ) : void 입력 스트림과 미디어 서버에의 접속을 강제 종료

36 동영상 플레이어 만들기 play, pause, stop 세가지 버튼을 가진 간단한 동영상 플레이어 만들기 비디오 소스: