Noodl 2.0β기능 프레젠테이션을 만들어 보았습니다(실장편1)

개요
Noodl 버전0β이것은 사용판으로 제작된 기능 시연이다.
누드가 뭘 할 수 있는지 처음 파악했어.
목적은 각 기능을 어떻게 실현하는지 참고하는 것이다.
이번에는 시각적 상호작용의 실현 방법을 설명한다.
카탈로그
기능 소개
1. Noodl 2.0β기능 프레젠테이션을 해봤어요.
실장편
1. 비주얼 인터랙티브← 이번 보도
2. 비주얼 인터랙티브2
3. 탐색 및 구성 요소
4. 단일 페이지 어플리케이션
샘플 샘플 데이터의 이용
・GiitHub의 [장비] https://macole.github.io/Noodl2_LibDemo/index.html
・GiitHub의 샘플 데이터 및 구축 절차

Github ~/Noodl2libDemo 이하의 PC를 Clone하십시오.

프로젝트 >Import exsisting 프로젝트에서 Noodl2로 Noodl2 시작libDemo를 선택하십시오.

Library Add Material UI Kit에서 시작하십시오.

주의 사항
• 이번 시위는 Ver2입니다.0β판으로 제작 중입니다.Ver1.3 움직이지 않는다.
1. 홈 화면 설치
먼저 Text와 Group을 사용하는 홈 화면을 만듭니다.
그림 홈 화면

1-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드입니다.페이지와 구성 요소의 부모 요소입니다.
Text
텍스트를 나타내는 노드입니다.그룹의 하위 요소로 구성되어 제목이 "Noodl Library"입니다.
Circle
원형생성된 원을 버튼으로 사용합니다.
States
상태를 유지하는 노드입니다.여기 버튼의 On/Off를 유지합니다.
ColorBlend
두 가지 이상의 색을 혼합한 노드.BlendValue1에서 색상을 선택합니다.
1-2. 노드 정렬
전체 그림 노드

다음은 사용된 노드 번호입니다.
배경 설치
그림 그룹(1)의 설정

Group(1)에서 배경을 흰색으로 설정합니다.Style>BackgroundColor= #ffffff .
그림 Image(2)의 설정

Image(2)가 화면 아래쪽에 구성되므로 Alignment의 Position = Absolute(절대), Aligny=Bottom.
V2.0β변경된 속성은 왼쪽에 원형을 표시합니다.원을 클릭하여 기본값을 재설정할 수 있습니다.
표제 부분의 실현
부모 요소 그룹(4)을 사용하여 머리글 박스를 만듭니다.
Group(4)의 치수는 Text에 따라 가변적입니다.Dimensions>SizeMode=ContentSize.색상은 Style>BackgoundColor=#aa77dd로 지정됩니다.
Group(4)의 공백은 Margin and padding으로 설정됩니다.
그림 그룹(4)의 설정

Plaacement에서 요소를 이동, 회전, 확대 및 축소할 수 있습니다.요소의 각도를 둥글게 하려면 Style>BordRadius=20을 설정합니다.
그림 Group(4)의 설정 2

Text(6,7)는 그룹(4)의 하위 요소로 구성되어 그룹(4)의 안쪽에 텍스트를 그립니다.
1-3. 노드 연결
색상이 다른 단추를 누르십시오.
먼저 상태를 나타내는 States(12) 노드의 설정과 ColorBlend(11)의 설정을 진행한다.States(12) 노드에 단추가 있는 ON/OFF 상태는 ON/OFF 상태에 따라 추가 변수 Color의 값을 변경합니다.
그림 States(12)의 설정

그림 ColorBlend(11) 설정

노드 연결 상호 작용
이 과정을 일본어로 표현하면...ボタンが押されたら⇒状態：Stateを変化させる
状態：Stateによって⇒色を選択する
選択された色で⇒ボタンの色を変える노드 연결로 표시하면Circle(8):Click⇒States(12):Toggle
States(12):color⇒ColorBlend(11):BlendValue
ColorBlend(11):Result⇒Circle(8):FillColor이렇게 노드를 연결합니다.
그래픽 노드 연결하기

또한 상태를 시각화하기 위해 States 값을 화면에 출력합니다.States(12):Value⇒Text(3):Text
ColorBlend(11):Result⇒Text(3):Text2. 이미지 이동 설치
마우스나 터치 이미지의 이동 기능을 실현한다.
도면 이동

2-1. 사용할 노드
노트
설명
Drag
Drag의 하위 구성의 노드에 마우스와 터치의 이동 기능을 추가합니다.
Image
이미지 노드.이미지는 Noodl 폴더 참조 외에 외부 URL도 지정할 수 있습니다.
Image 크기 속성 정보
등록 정보
설명
Explicit
% 또는 pix로 너비와 높이를 설정합니다.
Content Width
그릴 그림 자체의 너비가 됩니다.높이 명시적 설정
Content Height
드로잉의 이미지 높이와 같습니다.너비가 명시적으로 설정됨
Content Size
너비와 높이가 이미지 크기로 설정됨
노드는 부모 요소의 크기를 참조합니다.100% 크기가 부모 요소와 같다는 것이다.
2-2. 노드 정렬
그림 노드 구성

Image(5)는 노드에 손 이미지를 표시하고 Drag(4) 노드를 부모 요소로 한다.이렇게 하면 이미지를 이동할 수 있습니다.
노드의 순서에 따라 화면의 Z 방향을 제어할 수 있다.노드 순서의 맨 위부터 그리기 시작하고 맨 아래는 맨 끝(맨 앞)이다.
이번엔 손을 움직이면 Drag(4) 위 그룹(3)이 뒤에 있다.Group(6)이 앞에 있습니다.
중첩된 전후 관계

총결산
이번에는 실장편으로 시각과 상호작용에 대한 해설을 진행했다.
시각적 디자인은 문자로 설명하기 어려워요.
노들(Noodl)의 폭발 속도감을 알리기 위해 애니메이션이 적당하다고 생각한다.

시각적 상호작용

비주얼 인터랙티브2

탐색 및 구성 요소

단일 페이지 어플리케이션

소재를 사용하다
이미지가 표시한 샘플로 Yumehiko씨는 무료 소재화된 청수씨를 사용했다.
참고 문헌
・Noodl 공식
・Noodl 문서
・Qitta>Noodl을 사용하여 색상 변경 On/Off 버튼 만들기
・원형 도구'Noodl'로 캐릭터의 머리를 쓰다듬어 수줍게 하다
BlendValue는 정수가 아닌 값을 설정할 수 있으므로 두 색상을 혼합할 수 있습니다.예를 들어 0=빨간색#ff0000, 1=파란색#0000ff, 0.5=보라색#880088이다.  ↩