youngzeen's dev site
custom sdk & libraries

youngzeenkim@gmail.com
http://youngzeen.com












YoungZeen's MobileUX SDK: UI/UX Functions

----------------------------------------------------------------------
YoungZeen's MobileUX SDK: UI/UX Functions
----------------------------------------------------------------------

(1) set( [타이틀 바 이름], [페이지 타이틀], [탭 메뉴 바 이름] )

각 페이지에, 상단 타이틀 바 또는 탭 메뉴 바가 나오도록 설정하는 기능.

[타이틀 바 이름] : 타이틀 바를 사용하는 경우, 타이틀 바 무비클립의 이름을 지정. 타이틀 바 없이 탭 메뉴 바 만 사용하는 경우에는 NO로 설정.
[페이지 타이틀] : 타이틀 바를 사용하는 경우, 타이틀 바에 표시될 텍스트 내용을 설정. 텍스트가 나오지 않게 하려면 공백(스페이스)를 설정.
[탭 메뉴 바 이름] : 탭 메뉴 바를 사용하는 경우, 탭 메뉴바 무비클립의 이름을 지정. 사용하지 않는 경우에는 생략.

  main.set("bar01", "Photo Gallery", "bar_m1");
  page02.set("bar01", " ");
  page03.set("NO", " ", "bar_m1");
	

(2) setTitle( [폰트 이름], [폰트 크기], [폰트 색상], [효과] )

* 타이틀 바 무비클립에 설정하는 명령입니다 (페이지가 아니고)

상단 타이틀바의 폰트와 효과를 설정하는 기능.

[폰트 이름] : 타이틀 폰트 이름 (기본 폰트는 Verdana)
[크기] : 타이틀 폰트 크기 (기본 값은 32)
[색상] : 타이틀 폰트 색상을 Web칼라(16진수 값)으로 입력 (기본 값은 블랙 - 0x000000)
[효과] : 타이틀 바가 나오거나 사라질 때 트랜지션 효과. ANI와 NO 중에 선택 (기본값은 ANI)

* 사용하려는 폰트는 먼저 라이브러리에 'Font'로 등록을 해야합니다 (예제 파일에 라이브러리에 있는 Verdana와 마찬가지로)

  bar01.setTitle("Verdana", "30", "0xFF0000", "ANI");
  bar01.setTitle("나눔고딕", "28", "0x3366FF", "NO");
	

(3) sideMenu( [버튼 이름], [이동할 페이지 이름], [효과 방향])

페이지 내의 사이드 메뉴 버튼을 클릭하면 화면 전체가 옆으로 이동하면서 사이드 메뉴 페이지가 보여지는 기능.
그 상태에서 사이드 메뉴 버튼을 다시 클릭하면 화면 전체가 이동하면서 원래 상태가 됩니다.
페이지 무비클립 안에 사이드 메뉴 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[버튼 이름] : 페이지 무비클립 안에 만들어져 있는 사이드 메뉴 버튼의 이름.
[이동할 페이지 이름] : 만들어 놓은 사이드 메뉴 페이지 무비클립의 이름.
[효과 방향] : 사이드 메뉴 페이지가 나오기 위해 현재 페이지가 이동하는 방향. LEFT, RIGHT 중에서 설정.

  page01.sideMenu("sm", "LEFT", "sideMenuPage");
  page02.sideMenu("button01", "RIGHT", "sideMenuPage");
	

(4) setSideMenu( [메뉴 페이지의 가로 크기] )

* 사이드 메뉴 페이지 무비클립에 설정하는 명령입니다 (페이지가 아니고)

사이드 메뉴 페이지의 가로 크기(이전 페이지가 가로 방향으로 이동하는 길이)를 설정하는 기능.

[메뉴 페이지의 가로 크기] : 메뉴 페이지의 보여지는 가로 크기를 픽셀 단위로 설정.

  sideMenuPage.setSideMenu("300");
	

(5) sideMenuTab( [버튼 이름], [이동할 페이지 이름] )

사이드 메뉴 페이지 내의 버튼을 클릭하면 지정한 페이지로 이동하는 기능.
사이드 메뉴 페이지 무비클립 안에 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[버튼 이름] : 사이드 메뉴 페이지 무비클립 안에 만들어 놓은 버튼의 이름.
[이동할 페이지 이름] : 버튼을 클릭했을때 이동할, 만들어 놓은 페이지 무비클립의 이름을 설정.

  sideMenuPage.sideMenuTab("bt1", "main");
  sideMenuPage.sideMenuTab("bt2", "page02");
	

(6) titleSideMenu( [버튼 이름], [이동할 페이지 이름], [효과 방향] )

* 타이틀 바 무비클립에 설정하는 명령입니다 (페이지가 아니고)

타이틀 바 안에 있는 사이드 메뉴 버튼을 클릭하면 화면 전체가 옆으로 이동하면서 사이드 메뉴 페이지가 보여지는 기능.
그 상태에서 사이드 메뉴 버튼을 다시 클릭하면 화면 전체가 이동하면서 원래 상태가 됩니다.
타이틀 바 무비클립 안에 사이드 메뉴 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[버튼 이름] : 타이틀 바 무비클립 안에 만들어져 있는 사이드 메뉴 버튼의 이름.
[이동할 페이지 이름] : 만들어 놓은 사이드 메뉴 페이지 무비클립의 이름.
[효과 방향] : 사이드 메뉴 페이지가 나오기 위해 현재 페이지가 이동하는 방향. LEFT, RIGHT 중에서 설정.

  bar01.titleSideMenu("sm1", "sideMenuPage", "RIGHT");
  bar01.titleSideMenu("bt1", "sideMenuPage", "LEFT");
	

(7) titleTab( [버튼 이름], [이동할 페이지 이름], [효과 방향])

* 타이틀 바 무비클립에 설정하는 명령입니다 (페이지가 아니고)

타이틀 바 안에 버튼을 클릭하면 다른 페이지로 이동하는 기능. 효과는 LEFT, RIGHT, NO 중 설정.
타이틀 바 무비클립 안에 버튼을 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.
타이틀 바 안에 titleTab 기능 버튼을 여러 개 만들 경우, 각각의 버튼에 대해서 이 titleTab 명령을 따로 해 준다.

[버튼 이름] : 타이틀 바 무비클립 안에 만들어져 있는 버튼의 이름.
[이동할 페이지 이름] : 버튼을 클릭하면 읻오할 페이지 무비클립의 이름.
[효과 방향] : 페이지가 이동하는 효과 방향. LEFT, RIGHT, NO 중에서 설정.

  bar01.titleTab("bt1", "page03", "RIGHT");
  bar01.titleTab("home", "page05", "NO");
	

(8) sideNav( [버튼 이름], [이동할 페이지 이름] )

페이지 내의 사이드 네브 버튼을 클릭하면 화면 위로 사이드 네브 페이지가 나타나는 기능.
그 상태에서 사이드 네브 페이지 밖을 아무곳이나 클릭하면 사이드 네브 페이지가 사라집니다.
페이지 무비클립 안에 사이드 네브 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[버튼 이름] : 페이지 무비클립 안에 만들어져 있는 사이드 네브 버튼의 이름.
[이동할 페이지 이름] : 만들어 놓은 사이드 네브 페이지 무비클립의 이름.

  main.sideNav("sm1", "sideNavPage");
  page02.sideNav("button", "page_nav");
	

(9) sideNavTab( [버튼 이름], [이동할 페이지 이름] )

사이드 네브 페이지 내의 버튼을 클릭하면 지정한 페이지로 이동하는 기능.
사이드 네브 페이지 무비클립 안에 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[버튼 이름] : 사이드 네브 페이지 무비클립 안에 만들어 놓은 버튼의 이름.
[이동할 페이지 이름] : 버튼을 클릭했을때 이동할, 만들어 놓은 페이지 무비클립의 이름을 설정.

  sideNavPage.sideNavTab("bt1", "main");
  nav.sideNavTab("bt2", "page02");
	

(10) setSideNav( [이동 방향], [네브 페이지의 가로 크기], [투명도])

* 사이드 네브 페이지 무비클립에 설정하는 명령입니다 (페이지가 아니고)

사이드 네브 페이지의 이동 방향, 크기, 투명도를 설정하는 기능.

[이동 방향] : 사이드 네브 페이지의 이동 방향. LEFT와 RIGHT 중에 설정.
[네브 페이지의 가로 크기] : 네브 페이지의 보여지는 가로 크기를 픽셀 단위로 설정.
[투명도] : 네브 페이지의 투명도를 0~1 사이에서 설정. 1은 불투명, 0은 투명.

  sideNavPage.sideNavSet("LEFT", "350", "0.92");
  sideNavPage.sideNavSet("RIGHT", "550", "1");
	

(11) tabMenuBar( [버튼 이름], [이동할 페이지 이름] )

* 탭 메뉴 바 무비클립에 설정하는 명령입니다 (페이지가 아니고)

화면 상에 만들어진 탭 메뉴바 안에 버튼을 클릭하면 지정한 페이지로 이동하는 기능.
탭 메뉴 바 무비클립 안에 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[버튼 이름] : 탭 메뉴 바 무비클립 안에 만들어 놓은 버튼의 이름.
[이동할 페이지 이름] : 버튼을 클릭하면 이동할 페이지 무비클립의 이름.

* 각 버튼 안에 상태들에 키프레임을 만들어서, Up과 Down에 평소 상태의 이미지를, Over에 선택된 상태의 이미지를 넣으면 됩니다.

  tabBar.tabMenuBar("m1", "main");
  tabBar.tabMenuBar("m2", "page02");
	

(12) setTabMenuBar( [탭 메뉴바 y 좌표값] )

* 탭 메뉴 바 무비클립에 설정하는 명령입니다 (페이지가 아니고)

탭 메뉴 바의 세로 위치를 설정하는 명령입니다.

[탭 메뉴바 y 좌표값] : 화면상에서 탭 메뉴 바의 y 좌표값을 픽셀값으로 설정. 최상단이 0.

  tabBar.setTabMenuBar("128");
	

(13) toggle button

toggle button 기능은 따로 명령어를 주지 않아도, 페이지 무비클립 안에 버튼을 만들고 (button으로, 무비클립이 아니라)
instance name을 'toggle'로 주면, 자동으로 작동됩니다.
한 페이지 안에 여러 개의 토글 버튼들을 만들 경우에도, 모두 같은 이름(toggle)을 지정해 주면 됩니다.

* 토글 버튼 안에 상태들에 키프레임을 만들어서, Up에 평소 상태의 이미지를, Over에 선택된 상태의 이미지를 넣으면 됩니다.



(14) alert( [딜레이 시간], [버튼 이름], [햅틱 사용 여부], [메시지 타이틀], [메시지 내용], [버튼1 텍스트], [버튼2 텍스트])

버튼을 클릭하면 지정된 시간 후에 화면에 Alert(알림) 창이 뜨게하는 기능.
페이지 무비클립 안에 버튼은 button으로 만들어서(무비클립이 아니라), 임의의 instance name을 지정.

[딜레이 시간] : 버튼을 클릭한 후 알림창이 뜨기까지의 시간 설정(초단위)
[버튼 이름] : 클릭하면 알림창 기능을 작동시킬 버튼의 이름.
[햅틱 사용 여부] : 알림창이 뜰때 진동 기능을 쓸 것인지 아닌지, ON 또는 OFF를 설정.
[메시지 타이틀] : 알림창 상단에 나타나는 알림 제목 텍스트 내용.
[메시지 내용] : 알림창 중앙에 나타나는 알림 텍스트 내용.
[버튼1 텍스트], [버튼2 텍스트] : 알림창 하단에 만들어지는 버튼의 이름(텍스트 내용)
   버튼이 하나만 필요할 경우에는 버튼1 텍스트만 쓰고 버튼2 텍스트는 생략 가능.

** 이 alert 기능을 사용할 경우, 스크립트 맨 위에서, 'include "com/youngzeen/init_mobileUX_basic.as";' 대신
   'include "com/youngzeen/init_mobileUX_mobile_only.as";'를 활성화 시켜주어야 함.

  main.alert(1, "b1", "ON, "title1", "message1", "OK");
  page02.alert(3, "b1", "OFF", "New Message", "Read Now?", "Yes", "No");
	

(15) keyboard( [무비클립 이름], [테두리 사용 여부])

텍스트 입력을 위한 입력창을 만드는 기능. 스마트폰에서 이 입력창을 클릭(터치)하면 키보드가 나옵니다.
입력창이 될 무비클립을 화면 상에 '무비클립'으로 만들어 놓고, 임의의 instance name을 지정.

[무비클립 이름] : 페이지 안에 입력창의 위치와 크기와 동일하게 만들어 놓은 무비클립의 이름.
[테두리 사용 여부] : 입력창에 테두리(border)가 생기지 않게 하려면 NO를 설정, 그렇지 않으면 생략.

  main.keyboard("myText");
  main.keyboard("inputMC", "NO");
	

** (16) snackbar( [스넥바 이름], [y좌표], [딜레이 시간], [진동여부], [효과], [시간])

버튼을 클릭하면 화면상에 나타났다가 사라지는 스낵바(알림바/토스트바/Notification)를 만드는 기능.
무비클립 안에 스낵바 버튼은 button으로 만들어서(무비클립이 아니라), 'sb'으로 instance name을 지정.
- y좌표: 화면상에 스낵바가 나타날 위치의 y좌표. x좌표는 항상 화면 가운데에 뜨도록 설정됨.
- 딜레이 시간: 버튼을 클릭한 후 스택바가 뜨기까지의 시간 설정. 최소값은 1.
- 진동여부: YES/NO (2.05 버젼에서는 NO만 가능)
- 효과: AUTO일 경우는 주어진 시간 후 자동으로 사라짐. TAB일 경우는 스낵바를 클릭하면 사라짐.
- 시간: 효과가 AUTO일 경우 스낵바가 보여지는 시간(사라지기 전까지의 시간).

  main.snackbar("snackbar_1", 950, 1, "NO", "AUTO", 1);
  main.snackbar("snackbar_1", 700, 1, "NO", "TAB", 1);
	

(00) notification()

(업데이트 될 예정입니다)


(00) bottomNav()

(업데이트 될 예정입니다)


 

-------------------------------------------------------