multimedia programming 23: more flex

Multimedia Programming 23:More Flex

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




FLEX 의 기본 문법• 3. Tag 를 열었으면 반드시 닫아야 한다 .

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">




FLEX 의 기본 문법• 3. Tag 를 열었으면 반드시 닫아야 한다 .

• 태그를 닫는 2 가지 방법– 하위 내용이 있는 경우

< 태그 > …… </ 태그 > ex) <mx:Button></mx:Button>

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

FLEX 의 기본 문법• 4. Tag 는 다른 하위 Tag 를 포함 할 수 있지만

엇갈릴 수 없다 .





FLEX 의 기본 문법• 4. Tag 는 다른 하위 Tag 를 포함 할 수 있지만

엇갈릴 수 없다 .




</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">




Tag

네임스페이스• 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

넓이 , 높이 ( 픽셀값 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)

0xFFFFFFshowTextField = “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

시켜주는 속성

• data 가 필요한 일반적인 컴포넌트들 :– 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

인터랙션 (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• Script 원소 사용

<mx:Script><![CDATA[

// SCRIPT

]]></mx:Script>

동영상 플레이어 다시 만들기• 동영상 플레이어의 기능– play & stop (pause)– 범위표시 (slider)– 볼륨 조정– 시간 표시

• 비디오 소스 :– http://dasan.sejong.ac.kr/~sipark/test.flv

동영상 플레이어 Layout

play/pauseplay/pause

0:00/0:00

Panel

VideoDisplay

Button HSlider HSlider Label

동영상 플레이어 data binding


0:00/0:00

Panel

VideoDisplay


click 시 play 또는pause

value 는 playheadTime 과 연동change 시 playheadTime변경



0:00/0:00

Panel

VideoDisplay


value 는 volume 과 연동change 시 volume변경



0:00/0:00

Panel

VideoDisplay


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 되지 않았다 .)

multimedia programming 23: more flex

Documents