Multimedia Programming 23: More Flex

1. Multimedia Programming 23:More Flex Departments of Digital Contents Sang Il Park

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

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

4. Outline • Review: Basic of Flex • More Flex: a better video player

5. 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>

6. 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>

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

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

9. 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>

10. 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>

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

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

13. 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

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

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

16. 컨트롤 컴포넌트 • 버튼, 체크 박스 등의 컴포넌트 • 공통된 속성

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

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

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

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

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

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

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

24. HSlider/VSlider • 슬라이더 조절바(thumb)를 움직여 값을 설정하는 컨트롤러 <mx:VSliderid = “id명” minimum = “최소값” maximum = “최대값” value =“초기 값” tickInterval =“0.5” // 눈금자 간격 snapInterval =“0.5” // 눈금 이동 간격 liveDragging =“true | false” thumbPress = “조절바가 눌렸을 때” thumbRelease = “조절바가떨어질 때” change = “슬라이더 값이 변할 때의 이벤트” />

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

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

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

28. VideoDisplay • 비디오 파일을 재생 (웹서버에서 받아오거나, 플래시 미디어 서버에서 받아와야 함) <mx:VideoDisplayid = “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

29. VideoDisplay - method • Video 재생을 컨트롤 하기 위한 맴버함수들

30. Data binding • 서로 간의 값을 연관 시키는 것 (하나가 변하면 다른 것도 자동으로 변함) <mx:Label text = “text의 값: {myTxt.text}” /> <mx:TextInput id=“myTxt” />

31. dataProvider • data가 필요한 컴포넌트들에게 값을 binding 시켜주는 속성 • data가 필요한 일반적인 컴포넌트들: • ComboBox/ DataGrid/ List/ HorizontalList/ TileList/Tree • LineChart/ ColomnChart/ AreaChart/ BarChart/ … • ButtonBar/ LinkBar/ TabBar/ ToggleButtonBar/ …

32. ArrayCollection • 값을 저장하는 컴포넌트 • source라는 속성에 값을 저장한다. • <mx:ArrayCollectionid="myAC"> • <mx:source> • <mx:Objectlabel="한국" data="1" /> • <mx:Object label="일본" data="2" /> • <mx:Object label="미국" data="3" /> • </mx:source> • </mx:ArrayCollection>

33. 여러 값을 표시하는 컴포넌트들 • DataGrid • ComboBox

34. DataGrid • data를 spreadSheet처럼 보여주는 컴포넌트 <mx:DataGridid = “id명” dataProvider = “ArrayColloection 또는 XML” editable = “true | false” />

35. ComboBox <mx:ComboBoxid = “id명” dataProvider = “ArrayCollection / XML” dropdownWidth = “넓이 값” prompt = “초기 값” rowCount = “표시하는 줄의 수” selectedIndex = “선택한 아이템의 인덱스“ selectedItem = “선택한 아이템” change = “아이템을 선택할 때” open = “리스트를 오픈할 때” />

36. AllInOne 예제: • ArrayCollection을 활용하는 예제: • DataComponent.mxml • ComboBox.mxml

37. Layout Component

38. 인터랙션 (interaction) • 인터페이스 그 이상을 원한다면? • 프로그래밍을 통한 좀 더 복잡한 잡업을 수행하고 싶다면?  ActionScript

39. ActionScript • 기본적으로 C++ (OOP) 와비슷하다. • 간략문법: 변수 선언: var변수이름:DataType = 초기값; DataType  int/Number/String/Date/… Ex) var a:int = 3; var bigNumber:Number = 3.141592; var myName:String = “DiCon”;

40. ActionScript • 기본적으로 C++ (OOP) 와비슷하다. • 간략문법: 함수 선언: function함수이름(param:DataType):retuenType { } Ex) function add(a:int, b:int) : int { return a+b; }

41. ActionScript In FLEX • Script 원소 사용 • <mx:Script> • <![CDATA[ • // SCRIPT • ]]> • </mx:Script>

42. 동영상 플레이어 다시 만들기 • 동영상 플레이어의 기능 • play & stop (pause) • 범위표시 (slider) • 볼륨 조정 • 시간 표시 • 비디오 소스: • http://dasan.sejong.ac.kr/~sipark/test.flv

43. 동영상 플레이어 Layout Panel VideoDisplay play/pause 0:00/0:00 HSlider HSlider Label Button

44. 동영상 플레이어 data binding Panel VideoDisplay click 시 play 또는 pause value는 playheadTime과 연동 change 시 playheadTime 변경 play/pause 0:00/0:00 HSlider HSlider Label Button

45. 동영상 플레이어 data binding Panel VideoDisplay value는 volume과 연동 change 시 volume 변경 play/pause 0:00/0:00 HSlider HSlider Label Button

46. 동영상 플레이어 data binding Panel VideoDisplay text는 playheadTime 과연동 play/pause 0:00/0:00 HSlider HSlider Label Button

47. For those who want more… Adobe Air (Adobe Integrated Runtime): HTML, AJAX, ActionScript, FLEX 기반 application 제작 환경 • 장점: • 크로스 플렛폼: Windows, Mac, Linux • 빠른 실행 • Flex또는 HTML 관련으로의 손쉬운 변환 • 단점: • 제한된 접근성 (다른 프로그램을 실행할 권한이 없다. ) • AIR는 adobe소유의 기술 (open되지 않았다.)