Proto.io 자료

'Proto.io'에서 사용한 기초 자바스크립트 소스

슬라이더 10배 수치
{sliderposition}*10

숫자 증가 버튼
{range_var}+1

숫자 감소 버튼
{range_var}-1

숫자 범위 지정
{range_var}<0 ? 0 : {range_var}>9 ? 9 : {range_var}

다이얼 숫자 1 버튼
"{passcode}".replace("undefined", "") + 1

다이얼 숫자 삭제 버튼
("{passcode}".length == 0 || "{passcode}" == "undefined")? "" : ("{passcode}".replace("undefined", "").substr(0, ("{passcode}".length-1)))

'Proto.io'에서 구현하는 'Progress Bar' 인터랙션 설정

[VARIABLE]
basic variable : downloader (Numeric, Evaluate : true)


[SCREEN]

HOME : State ‘Default’ : contained containers / State ‘Reset’ : empty
- Title : Reset
- Trigger : Screen before show
- Action : Set variable
- Variable Name : downloader (default: empty)
- Value type : Custom value
- New Value : 0
- Delay : 0

>>

- Action : Change Screen State
- Screen : HOME
- State : Reset
- Delay : 0

>>

- Action : Change Screen State
- Screen : HOME
- State : Default
- Delay : 0


[BUTTON]

(1)
download button container (in HOME screen)

- Title : Progress animation start
- Trigger : Tap
- Action : Change Container State
- Screen : HOME
- Container : “progress bar” Container
- State : Progress end

(2)
Download button "State 1 - Download"

==Interaction 1 : Increase loop===
- Title : Increase loop
- Trigger : Tap
- Action : Animate item
- Screen : HOME
- Item : increase text
- Animation type : Move item
- Move type : Move to (x,y) coordinates
- Move X to (px) : *
- Move Y to (px) : *
- Duration : 50
- Easing : Linear
- Delay : 0
- Loop animation : check
- Loop iterations : 100

>>

- Action : Set variable
- Variable Name : downloader (default: empty)
- Value type : Custom value
- New Value : {downloader}+1
- Delay : 0

>>

- Action : Change property
- Screen : HOME
- Item : increase text
- Property : Text
- Value type : Read from variable
- Variable name : downloader (default: empty)
- Delay : 0


===Interaction 2 : Go complate===
- Title : Go complete
- Trigger : Tap
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : Complete
- Delay : 9000(ms)

>>

- Action : Change property
- Screen : HOME
- Item : reset button
- Property : Visibility
- Value type : Custom value
- New Value : check
- Duration : 400
- Easing : Linear
- Delay : 0


[RESET BUTTON]

===Interaction 1 : Go reset state===
- Title : Go reset state
- Trigger : Tap
- Action : Change screen state
- Screen : HOME
- State : Reset
- Delay : 0

>>

- Action : Change Screen State
- Screen : HOME
- State : Default
- Delay : 0

>>

- Action : Set variable
- Variable Name : download (default: empty)
- Value type : Custom value
- New Value : 0
- Delay : 0

==Interaction 2 : Reset button show
- Title : Reset button show
- Trigger : Tap
- Action : Animate item
- Screen : HOME
- Item : reset button
- Animation type : Fade item
- Fade to : 0
- Duration : 400
- Easing : Linear
- Delay : 0
- Loop animation : uncheck

'Proto.io'에서 구현하는 앱 페이지 인터랙션 설정

[Variable]
- Name : percentage
- Type : numeric
- Value : 
- Evaluate : true


[SCREENS]

<HOME>
Interaction 1
- Trigger : Screen show
- Action : Change Container State
- Screen : HOME
- Container : "photo fade" Container
- State : photo State 2
- Delay : 5000

Interaction 2
- Trigger : Screen before show
- Action : Set variable
- Variable Name : percentage (default: empty)
- Value type : Custom value
- New Value : 0
- Delay : 0
>>>
- Action : Change Screen State
- Screen : HOME
- State : Home Reset State
- Delay : 0
>>>
- Action : Change Screen State
- Screen : HOME
- State : Default State
- Delay : 0

<LOADING 1>
Interaction 1
- Trigger : Screen before show
- Action : Set variable
- Variable Name : percentage (default: empty)
- Value type : Custom value
- New Value : 0
- Delay : 0

Interaction 2
- Trigger : Screen show
- Change Container State
- Screen : LOADING 1
- Container : "progress bar" Container
- State : loading State 2
- Delay : 0


[CONTAINERS]
<"photo fade" Container>
==photo State 1 - item==
Interaction 1
- Trigger : Tap
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : photo State 2
- Delay : 0

==photo State 2 - item==
...
- State : photo State 3
...

==photo State 3 - item==
...
- State : photo State 3
...

<State transition>
photo State 1 → photo State 2
==last frame Interaction
- Trigger : State transition end
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : photo State 3
- Delay : 5000

photo State 2 → photo State 3
==last frame Interaction
...
- State : photo State 1
...

photo State 3 → photo State 1
==last frame Interaction
...
- State : photo State 2
...

<"archive" Container>
==We need more practice==
Interaction
- Trigger : Tap
- Action : Go to screen
- Screen : LOADING 1
- Transition : Slide left
- Duration : 400
- Easing : Linear
- Delay : 0

<"go home" Container>
Interaction
- Trigger : Tap
- Action : Go to screen
- Screen : HOME
- Transition : Slide right
- Duration : 400
- Easing : Linear
- Delay : 300

==State 1== item
- Trigger : Tap
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : State 2
- Delay : 0

==State 2== state
- Trigger : State enter
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : State 1
- Delay : 200


<"progress bar" Container>
Tansition Delay : 0 / Duration : 3.4s / Easing : Linear
==loading State 2== state start frame
Interaction
- Trigger : State transition start
- Action : Animate item
- Screen : LOADING 1
- Item : percentage
- Animation type : Move item
- Move type : Move to (x,y) coordinates
- Move X to (px) : *
- Move Y to (px) : *
- Duration : 1
- Easing : Linear
- Delay : 0
- Loop animation : check
- Loop iterations : 100
>>>
- Action : Set variable
- Variable Name : percentage (default: empty)
- Value type : Custom value
- New Value : {percentage}+1
- Delay : 0
>>>
- Action : Change property
- Screen : LOADING 1
- Item : percentage
- Property : Text
- Value type : Read from variable
- Variable name : percentage (default: empty)
- Delay : 0

==loading State 2== state end frame
Interaction
- Trigger : State transition end
- Action : Go to screen
- Screen : POST 1
- Transition : Slide left
- Duration : 400
- Easing : Linear
- Delay : 0
>>>
- Action : Change Container State
- Screen : Current container
- Container : Current container
- State : loading State 1
- Delay : 0

source-image.zip

0. 프로토타이핑이 가능한 프로그램
- 1) 포토샵, 일러스트레이터 : 자유로운 이미징, 익숙함, 애니메이션 불가능
- 2) 파워포인트 : 간단한 애니메이션, 특정 페이지 이동, 상호작용에 한계
- 3) 플래시 : 타임라인 기반 애니메이션, 상호작용 가능, 액션 스크립트 지식 필요 (근래 사용 빈도가 떨어짐)
- 4) 프리미어, 애프터이펙트 : 타임라인 기반 애니메이션, 상호작용 불가능
- 5) 전문 프로토타이핑 툴 목록 : http://prototypingtools.co/
     外 stekch3(OSX) : http://www.sketchapp.com/
     外 Adobe XD(現OSX Preview, 2016late-Windows) : http://www.adobe.com/products/experience-design.html

웹 기반 프로토타이핑 툴 서비스 Proto.io
https://proto.io/
15일 무료 사용가능

특징 : 사용방법이 어도비 플래시(Flash)와 비슷한 느낌.

0. 회원가입
입력 정보 : 영문이름, 사용가능한 이메일, 이메일 인증 후 비밀번호 설정
접속주소 : https://영문이름.proto.io/

1. proto.io 인터페이스 살펴보기
- 0) 새 프로젝트
- 1) 스크린 (Screen) : Device Screen Size (참고: 캔버스-활성화된 작업영역)
- 2) 콘테이너 (Container) : 상태를 설정할 수 있음 (다중 콘테이너 가능)
- 3) 라이브러리 (Libraries) : 프로그램 제공 아이템
- 4) 에셋(Assets) : 외부에서 가져온 아이템
- 5) 레이어 (Layers) : 그룹 가능 (포토샵과 비슷)
- 6) 그리드 (Grid) : 자동 컬럼 계산
- 7) 셋팅 (Settings) : 프론트 페이지 설정, 배경색상 설정 등

proto.io 인터페이스

2. 주요 기능에 대한 설명
- 1) 스크린 (프리미어:푸티지,시퀀스)
- 2) 콘테이너 (플래시:클립, 애프터이펙트:컴포지션)
- 3) 콘테이너 스테이트 (플래시:클립 상태)
- 4) 아이템 옵션
-- ㄱ. 사이즈&포지션 - 자동 크기 & 중앙 정렬
-- ㄴ. 프로퍼티 (내부 속성) - 이미지 예
-- ㄷ. 인터렉션 (상호 동작) - 트리거 & 액션 & 타겟

3. 프론트페이지 제작 (스타트 스크린)
- 1) 로고 & 타이틀 (라이브러리-Statusbar & PNG 이미지 넣기)
- 2) 슬라이더 이미지 (네이티브사이즈, 라이브러리-Page Controller)
- 3) 포스트 1, 2, 3 제작 (텍스트)

4. 페이지 제작 (포스트, 아카이브)
- 1) 복사 붙여넣기 & 레이어 정렬
- 2) 라이브러리-Nav Bar, Placeholder

5. 기본 인터렉션
-- 1) 메인 타이틀 - 프론트 페이지 링크
-- 2) Nav Bar - 외부 링크 (http://www.facebook.com/)

6. 사이드 메뉴 페이지 제작
-- 1) 메뉴 햄버거 아이콘 콘테이너 - Default / Active : 위치이동 + 콜백 기능(순차실행)
-- 2) 사이드 바 메뉴 콘테이너 (라이브러리로 제작 - 스크린에서의 위치 주의)
-- 3) 사이드 바 콘테이너 (메뉴 링크-Fire an item's event : 특정 아이템에 이벤트 실행)

7. 페이지 스크롤
-- 1) 프론트 페이지 스크롤 - 콘테이너化
-- 2) 기타 페이지 스크롤 - 콘테이너化

8. 이미지 슬라이더
-- 1) 이미지 콘테이너 - 싱크 페이지 콘트롤러
-- 2) 버튼 인터렉션 - 스냅 콘테이너 페이지
-- 3) 이미지 인터렉션 - 이미지 콘테이너化 후 링크

9. 가로 화면 (인터렉션&콘테이너 상태 활용)
-- 1) 프론트 페이지 가로화면 (스크린 인터렉션)
-- 2) 포스트 페이지 가로화면
-- 3) 가로형 메뉴 제작 및 링크 (콘테이너 복사時 주의점)

10. 상태 애니메이션 (스크린 or 콘테이너 타임라인 활용)
-- 1) 스와이프 & 상태바 이동
-- 2) 스와이프 & 내비바 이동

11. 변수
-- 1) Shorthand Javascript : http://www.sitepoint.com/shorthand-javascript-techniques/
-- 2) 변수 적용 순서 (텍스트 변경)
--- ㄱ. 변화하는 이벤트가 발생하는 아이템 혹은 콘트롤러에 인터렉션 적용
--- ㄴ. ㄱ에서 1차 변수를 가져옴 (트리거:변화를 야기하는 행동, 액션:트리거에 의해 발생하는 변수)
--- ㄷ. ㄴ에서 발생한 변수(및 그 범위)를 사용해서 결과값에 사용할 변수를 생성 (shorthand javascript 사용)
({slider_position}<33)? 'Cappuccino' : (({slider_position}>67)? 'CafeLatte' : 'Americano');

뜻 : 1차변수가 33%보다 작으면 카푸치노, 67%보다 크면 카페라테, 둘 다 아니면 아메리카노

--- ㄹ. ㄷ에서 발생한 결과값을 아이템에 적용
-- 3) 이미지 불투명도 변경은 각각의 이미지를 위한 인터렉션을 별도로 적용해야 함.