Multimedia Programming 23: More Flex 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-8조 1-9조 12월 13일(목요일) 2반 2-3조 2-6조 2-7조 2-9조 2-10조 1반 1-1조 1-4조 1-5조

Outline Review: Basic of Flex More Flex: a better video player

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명” minimum = “최소값” maximum = “최대값” value =“초기 값” tickInterval =“0.5” // 눈금자 간격 snapInterval =“0.5” // 눈금 이동 간격 liveDragging =“true | false” thumbPress = “조절바가 눌렸을 때” thumbRelease = “조절바가 떨어질 때” 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 입력 스트림과 미디어 서버에의 접속을 강제 종료 properties 설명 playheadTime 현재 재생 부분 시간 (초) totalTime 총 길이 (초) volume 소리 크기 (0~1)

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

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

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

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

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

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

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

Layout Component

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

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

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

ActionScript In FLEX <mx:Script> <![CDATA[ // SCRIPT ]]>

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

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

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

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

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

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