플레어 | 웹을위한 데이터 시각화

플레어를 통해 대화 형 데이터 시각화를 쉽게 만들 수 있습니다.

자신 만의 시각화를 시작하려면 플레어 다운로드 아래 튜토리얼을 통해 작업하십시오. 도움이 더 필요하세요? 방문하다 도움말 포럼 (당신은 필요합니다 소스 포지 로그인하여 게시).

Flare는 BSD 라이센스에 따라 공개 된 오픈 소스 소프트웨어로, 자유롭게 배포하고 수정할 수 있으며 심지어 $$로 판매 할 수도 있습니다. Flare의 디자인은 Java의 시각화 툴킷 인 이전 모델 인 prefuse에 맞게 조정되었습니다.

어플리케이션

알림

• 2010.10.07 : 플레어 개발이 커뮤니티에 공개되었으며 소스가 SourceForge에서 GitHub의 새로운 집. 플레어 2009.01.24 여전히 최신 공식 릴리스이며 (최소한 지금은) 튜토리얼 및 설명서에 반영됩니다. GitHub의 개발 버전 이제 Flash Player 10에 대한 더 나은 지원뿐만 아니라 다른 많은 작은 수정 및 변경 사항이 포함됩니다.
• 2009.01.24 : 플레어 2009.01.24 출시되었습니다. 이것은 많은 버그 수정 및 업데이트가 포함 된 유지 관리 릴리스입니다. 참조 릴리즈 노트 상세 사항은. Flash Player 9 용으로 마지막으로 릴리스 된 계획입니다. 이후 버전은 버전 10으로 마이그레이션됩니다.
• 2008.07.30 : 플레어 2008.07.29 출시되었습니다. 이것은 많은 새로운 기능과 아키텍처 개선을 소개하는 주요 릴리스입니다. 참조 릴리즈 노트 자세한 내용은.
• 2008.07.30 : 플레어 2008.08.08 출시되었습니다. 이 릴리스에는 향상된 범례 지원, 명명 된 전환, 버그 수정 및 리팩토링이 포함되어 커플 링을 줄이고 유틸리티 클래스를 통합합니다. 참조 릴리즈 노트 자세한 내용은.

튜토리얼

ActionScript 및 Flare 학습을위한 단계별 자습서

시작 가이드

첫 번째 단계는 개발 도구를 설정하는 것입니다.

1. 작동하는 플래시 개발 환경을 설정하십시오. 두 가지 접근 방식이 있습니다. 첫 번째는 단순성을 권장하지만 고급 사용자는 두 번째 방법을 사용하는 것이 좋습니다.
   • 옵션 1 (단순) : Adobe Flex Builder 설치.
     • 이것은 ActionScript / Flex 응용 프로그램을위한 완전한 개발 환경입니다. 모든 주요 플랫폼 (Windows, Mac, Unix)에서 사용할 수 있습니다. 이미 Eclipse IDE를 사용하는 사용자는 Flex Builder를 Eclipse 플러그인으로 설치할 수도 있습니다.
     • Flex Builder 사용에 대한주의 사항은 상용 소프트웨어이며 제한된 시험 기간 동안 만 작동한다는 것입니다. 그러나 Adobe는 대학생, 교직원 및 교직원에게 무료 Flex Builder 라이센스를 제공합니다.
   • 옵션 2 (더 복잡한) : 무료 Flex SDK 설치
     • 기본 ActionScript / Flex 컴파일러가 설치됩니다. mxmlc 와 compc. 그런 다음 예를 들어 make or ant 시스템을 구축하십시오. 플레어는 build.xml 함께 사용할 파일 아파치 개미 시스템을 구축하십시오. 개미가 설치되면 build.xml 텍스트 편집기에서 파일을 만들려면 Flex를 가리 키도록 첫 번째 몇 줄을 변경하십시오. SDK 설치 후 사용 ant 라이브러리를 컴파일합니다. 우리는 Flex 개발을 위해 Adobe Labs의 개미 작업을 사용합니다.
     • 이 방법의 장점은 모든 소프트웨어가 무료이며 사용자에게 만료되지 않는다는 것입니다. 그러나 Flex Builder에서 제공하는 자동 컴파일, 프로젝트 관리 및 자동 완성과 같은 기능은 손실됩니다.
2. 프리 퓨즈 플레어 라이브러리를 다운로드하십시오.
   • 다운로드는 일련의 ActionScript 라이브러리 프로젝트가 포함 된 zip 파일입니다. Flex Builder를 사용하는 경우 파일을 기본 작업 공간 디렉토리에 압축 해제하십시오. 이 튜토리얼에서는 Flex Builder로 가져와 시각화를 작성하는 데 사용합니다!
   • 이 소프트웨어는 현재 알파 버전이므로 일부 버그와 제한이 예상됩니다. 최대한 빨리 문제를 해결하고 위의 링크는 항상 최신 버전을 가리 킵니다.

Flash 및 ActionScript 소개

Flash는 대화 형 그래픽을위한 훌륭한 환경이며 최근 ActionScript 3 프로그래밍 언어가 추가되어 훨씬 강력하고 효율적으로되었습니다. AS3에 대한 완전한 소개는이 학습서의 범위를 벗어나지 만 유용한 자료는 다음과 같습니다.

• Adobe는 추가 리소스에 대한 링크와 함께 AS3 개요를 제공합니다.
• 필수 액션 스크립트 3 O'Reilly 출판의 Colin Moock 제작은 시작하는 데 도움이되는 훌륭한 책입니다. 당신은 할 수 있습니다 여기에 온라인으로 액세스 (대학과 같은 일부 기관에서는 무료로 액세스 할 수 있습니다).
• Adobe Flex API Reference는 사용 가능한 다양한 클래스와 메서드를 이해하는 데 매우 중요합니다. 우리는 수업 중에 만 초점을 맞출 것입니다 flash.* 패키지.

이 자습서에서는 ActionScript 구문 및 유형과 객체 지향 프로그래밍 개념에 대한 기본 지식이 있다고 가정합니다.

1 부 : 표시 객체

개요

플래시를 사용하여 2D 시각 장면을 모델링 장면 그래프. 시각적 개체는 부모 개체의 좌표 공간에 자식 개체가 정의 된 계층으로 구성됩니다. 이 장면 그래프는 종종 표시 목록 Adobe 설명서 및 Flash 프로그래밍 관련 서적 모두에서 제공됩니다.
표시 목록의 맨 위에있는 노드는 항상 Stage 목적. 무대에는 항상 하나의 자녀 만 있습니다. 이것은 root모든 시각적 항목은 루트 아래에 있습니다. 일반적으로 루트는 실제 Flash 응용 프로그램입니다. 우리는 곧 다시 올 것이다.
표시 목록에 추가 할 수있는 모든 시각적 항목은 DisplayObject 수업. 서브 클래스 DisplayObject 포함 Bitmap (이미지의 경우) TextField (대화식 텍스트 영역의 경우) Video (YouTube를 생각하십시오). 그러나 가장 일반적인 경우는 Sprite 와 Shape 클래스. 참고로 이러한 클래스의 대부분은 flash.display 패키지 (결국에는 flash.text 사용 패키지).
XNUMXD덴탈의 Sprite class는 Flash Player에서 가장 유용하고 일반적인 시각적 객체입니다. 스프라이트는 도면 내용을 모두 포함하고 표시 목록에서 하위 노드의 컨테이너 역할을 할 수있는 시각적 객체입니다. Sprite 클래스 서브 클래스 flash.display.DisplayObjectContainer 수업). 대조적으로 Shape 클래스는 도면 내용을 포함 할 수 있지만 하위 노드를 보유 할 수는 없습니다. 결과적으로 Shapes는 적은 메모리를 사용하지만 유연성은 훨씬 떨어집니다. 간단하게하기 위해이 튜토리얼에서는 스프라이트에 중점을 둘 것입니다.

새로운 응용 프로그램 만들기

먼저 새 Flash 응용 프로그램을 만들어 보겠습니다. 이렇게하려면 Flex Builder를 열고 "Flex Development"퍼스펙티브에 있는지 확인하십시오 (종종 오른쪽 상단의 흑백 "Fx"아이콘을 클릭하여 도달).
왼쪽의 "Navigator"창에서 디스플레이를 마우스 오른쪽 버튼으로 클릭하고 "New> ActionScript Project"를 선택합니다. 결과 대화 상자에서 프로젝트 이름으로 "Tutorial"을 입력 한 다음 "Finish"를 클릭합니다. 그러면 새 프로젝트가 생성됩니다.
이제“Navigator”창에“Tutorial”폴더가 나타납니다. 이 폴더 안에“Tutorial.as”라는 파일이 표시됩니다. 이것은 주요 응용 프로그램 파일입니다. 아직 열려 있지 않은 경우 엽니 다.
파일 안에이 클래스의 기본 스캐 폴딩이 표시됩니다.

패키지 {import flash.display.Sprite; public class Tutorial은 Sprite를 확장합니다. {public function Tutorial () {}}}

이 클래스는 Sprite 수업. 이것이 우리의 주요 응용 프로그램 클래스이기 때문에 응용 프로그램을 실행할 때 Tutorial 클래스가 자동으로 표시 목록에 추가됩니다 root (의 유일한 아이 Stage).
또한 생성자가 자동으로 생성되었습니다. 이 생성자는 응용 프로그램이 시작될 때 호출됩니다. C, C ++ 또는 Java와 같은 프로그래밍 언어에 익숙한 사용자에게는 응용 프로그램 클래스의 생성자가 main 다른 언어로 기능합니다.
이 새로운 응용 프로그램 스캐 폴딩을 사용하면 시각적 개체로 게임을 시작할 수 있습니다. 그러나 우리가 먼저하고 싶은 것이 있습니다. 클래스 선언 바로 위에 새 줄 추가 (”public class Tutorial…”) 줄 :

[SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")]

이 줄은 응용 프로그램의 기본 설정 (프로젝트의 "bin"디렉토리에 .swf 파일로 컴파일 및 저장 됨)을 정의합니다. 위에서는 응용 프로그램의 크기, 배경색 및 대상 프레임 속도 (초당 프레임 수)를 설정했습니다.

스프라이트

모든처럼 DisplayObjects, Sprite 즉시 다양한 시각적 속성을 지원합니다. 여기에는 x, y, scaleX, scaleY, rotation및 alpha 속성. 이것들은 각각 스프라이트의 위치, 크기, 방향 및 투명도를 변경합니다 (그리고 모든 자식들! 여기에서 장면 그래프를 사용하고 있음을 기억하십시오).
그러나 스프라이트에는 기본적으로 아무것도 포함되어 있지 않으므로 이러한 값은 아직 의미가 없습니다. 우리는 우리 자신의 내용을 그리는 것으로 시작할 것입니다.
모든 스프라이트에는 graphics 특성. 이것을 사용하여 그래픽을 그릴 수 있습니다 Sprite. 그만큼 graphics 속성은 flash.display.Graphics 클래스는 많은 벡터 드로잉 명령을 제공합니다.
아래 예에서 우리는 여러 가지 일을합니다.

• 먼저 새로운 것을 만듭니다 Sprite.
• 둘째, 스프라이트를 사용합니다 graphics 회색 채우기와 검은 색 외곽선으로 원을 그립니다.
  • beginFill 현재 채우기 색상과 스타일을 설정합니다. 첫 번째 인수는 0 진수 표기법의 색상이며 두 번째 인수는 알파 값으로, 완전히 투명하면 1에서 완전히 불투명하면 XNUMX입니다.
  • lineStyle 현재 획 색상 및 스타일을 설정합니다. 첫 번째 인수는 선 너비이고 두 번째 인수는 색입니다.
  • drawCircle 스프라이트의 좌표 공간에서 10 지점에 반경 0,0의 원을 그립니다.
• 셋째, 스프라이트를 기본 응용 프로그램의 자식으로 추가합니다 ( Tutorial 스프라이트).
• 넷째, 우리는 x 와 y 스프라이트의 위치.
• 다섯째, 디버깅 출력을 추가합니다. trace 콘솔에 문자열을 인쇄합니다. 이 출력은 "디버그"모드에서 앱을 실행할 때만 나타납니다.

코드는 다음과 같습니다.

패키지 {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Tutorial은 Sprite를 확장합니다 {public function Tutorial () {var sprite : Sprite = new Sprite () ; sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); this.addChild (sprite); sprite.x = 50; sprite.y = 50; trace ( "우리의 스프라이트는 :"+ sprite.x + ","+ sprite.y); }}}

응용 프로그램을 실행합니다 ( "Tutorial.as"를 마우스 오른쪽 단추로 클릭하고 "다음으로 실행> Flex 응용 프로그램"선택). 왼쪽 상단 모서리에 50, 50을 중심으로 한 검은 윤곽선이있는 회색 원이 표시되어야합니다. 디버그 모드에서 애플리케이션을 실행하는 경우 (“Debug As> Flex Application”선택) "our sprite는 출력 콘솔에서 50, 50”에 있습니다.

중첩 된 스프라이트

이제 장면을 좀 더 재미있게 만들어 봅시다. Sprite 생성 코드를 새로운 방법으로 옮기는 것으로 시작하겠습니다. 이 메소드를 클래스에 추가합니다 :

 개인 함수 createCircle (x : Number, y : Number) : Sprite {var sprite : Sprite = new Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; 리턴 스프라이트; }

다음으로 생성자의 코드를 교체합니다. 먼저 컨테이너라는 새 스프라이트를 만들어서 원 컬렉션을 유지하는 데 사용합니다. 스테이지의 중앙에 배치합니다. 둘째, 루프를 사용하여 여러 개의 원을 만듭니다. 여기에서 부모 컨테이너의 0,0 지점을 중심으로 대칭으로 원을 정렬합니다. 새로운 생성자는 이제 다음과 같습니다 :

 public function Tutorial () {var container : Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (container); for (var i : int = 0; i <10; ++ i) {var x : Number = (i / 5 <1? 1 : -1) * (13 + 26 * (i % 5)); container.addChild (createCircle (x, 0)); }}

새 버전의 응용 프로그램을 실행하십시오. 응용 프로그램 중간에 XNUMX 개의 원이 나타납니다.
이제 컨테이너를 수정하여 컨테이너 안의 모든 원을 업데이트 할 수 있습니다. 컨테이너 스프라이트에 다른 시각적 변수를 설정하여 연주하십시오. 예를 들어 x, y, scaleX, scaleY, rotation및 alpha 속성.

다른 주제

Flash에서 제공하는 기본 옵션으로 더 많은 것을 할 수 있습니다. 불행히도, 그들은 우리가 여기서 할 수있는 시간을 약간 초과합니다. 탐색해야 할 사항에는 이미지 필터가 포함됩니다 ( flash.filters 패키지)를 사용하여 시각적 효과를 추가하여 객체를 표시 할 수 있습니다. filters 속성 및 flash.display.Graphics 채우기 및 선 스타일과 더 많은 2D 드로잉 루틴을 포함한 클래스.

2 부 : 애니메이션

시각적 객체를 만들 수있게되었으므로 이제 생명을주기 시작해야합니다. 플레어는 flare.animate 패키지를 쉽게 만들 수 있습니다. 먼저 Flex Builder에서 사용할 플레어 라이브러리를 가져와야합니다.

라이브러리 가져 오기

계속하기 전에 Flex Builder 내에 플레어 라이브러리를 프로젝트로로드했는지 확인하십시오. 플레어 파일을 기본 Flex Builder 작업 공간 디렉토리에 압축 해제 한 상태 여야합니다. 다음 단계는 Flex Builder 환경으로 가져 오는 것입니다.

• “Flex Development”관점에 있는지 확인하십시오.
• 왼쪽의 탐색기 창을 마우스 오른쪽 단추로 클릭하십시오.
• 팝업 메뉴에서“가져 오기…”를 선택하십시오.
• 대화 상자에서 "일반> 기존 프로젝트를 작업 공간으로"를 선택하고 "다음"버튼을 클릭합니다.
• "루트 디렉토리 선택"위젯을 사용하여 Flex Builder 작업 공간 디렉토리로 이동하십시오.
• 이제 "프로젝트 :"패널에 플레어 프로젝트가 나열되어 있습니다.
• "flare"및 "flare.demos"프로젝트를 선택한 다음 "Finish"버튼을 클릭하십시오.

네비게이터 창에 플레어 프로젝트가 표시됩니다. 이제 라이브러리와 데모 모두에 대한 소스 코드를 찾아 볼 수 있습니다.

플레어 라이브러리 개요

다음은 플레어 툴킷에 대한 간략한 개요입니다. 내부 flare "src / flare"폴더를 살펴보십시오. 다양한 기능을 제공하는 여러 패키지가 있습니다.

• analytics: 통계 계산 및 데이터 분석을위한 연산자
• animate: 애니메이션 작성 도구
• data: 데이터 세트를 읽고 쓰는 방법
• display: DisplayObject 제공되는 것을 확장하는 유형 flash.display
• flex: Flex 애플리케이션에 플레어 시각화를 임베드하기위한 랩퍼
• physics: 물리적 효과 또는 힘 지향 레이아웃을위한 물리 엔진
• query: ActionScript 객체 용 쿼리 프로세서
• scale: 선형, 로그 및 시간 스케일과 같은 데이터 스케일을 처리하기위한 클래스
• util: 일반적으로 필요한 기능을 제공하는 유틸리티 클래스 세트
• vis: 플레어 시각화 구성 요소 및 연산자

또한 flare.demos Flare 컴포넌트를 생성하는 방법에 대한 많은 예제를 제공하는 project.

다른 프로젝트 내에서 라이브러리 가져 오기

자신의 프로젝트에서 플레어를 사용하려면 프로젝트 설정을 업데이트해야합니다. 이를 수행하는 방법은 다음과 같습니다.

1. 네비게이터 분할 창에서“자습서”프로젝트의 최상위 폴더를 마우스 오른쪽 단추로 클릭하십시오.
2. 상황에 맞는 메뉴에서 "속성"을 클릭하십시오
3. 결과 대화 상자의 왼쪽 패널에서 "ActionScript 빌드 경로"를 클릭하십시오 (위에서 세 번째 항목이어야 함)
4. 오른쪽 패널에서 "라이브러리 경로"탭을 클릭하십시오
5. "프로젝트 추가"버튼을 클릭하십시오
6. 이제 플레어를 포함한 프로젝트 목록이 표시됩니다.
7. "플레어"를 선택한 다음 "확인"을 클릭하십시오

이제 플레어 라이브러리를 프로젝트에 추가했으며 제공하는 클래스를 사용할 수 있습니다.
Flex 컴파일러에 대해 알아 두어야 할 한 가지는 기본적으로 응용 프로그램에서 실제로 사용하는 클래스 만 포함합니다. 따라서 매우 큰 라이브러리를 가져와도 최종 .swf 파일의 크기는 여전히 작을 수 있습니다. 그러나 리플렉션을 사용하여 응용 프로그램에서 동적 클래스로드를 수행하는 경우 (이 자습서에서는 다루지 않은 고급 기능) 문제가 발생할 수 있습니다.

기본 애니메이션 : 트윈, 시퀀스 및 병렬

자 이제 애니메이션하자! 그만큼 flare.animate.Transition class는 모든 애니메이션의 기본 클래스입니다. 중요한 하위 클래스 Transition 있는 Tween, Sequence및 Parallel 전환. 트윈은 단일 객체의 속성에 애니메이션을 적용하는 데 사용됩니다. 시퀀스는 일련의 애니메이션을 순서대로 실행하는 데 사용됩니다. 병렬 전환은 일련의 전환을 동시에 실행합니다. 트윈부터 시작하겠습니다.

트위닝 객체 속성

Tween 클래스의 기본 사항은 간단합니다. 객체를 가져 와서 시간이 지남에 따라 변경하려는 속성 값 집합을 제공하고 해당 변경 시간을 지정합니다. Part 1의 Tutorial 응용 프로그램을 사용하여 컨테이너 객체를 회전시킵니다. Tutorial 클래스 생성자 끝에 다음 줄을 추가하십시오.

 var tween : Tween = 새 트윈 (컨테이너, 3, {rotation : 360}); tween.play ();

또한 클래스 상단에 새로운 import 문이 있는지 확인하십시오. 그래서 컴파일러는 당신이 말하는 것을 알 수 있습니다. 가져 오기 목록에 추가하십시오.

 수입 플레어. 애니메이션. 트윈;

(참고 : 때때로 새로운 클래스 이름을 입력 할 때 Flex Builder가 자동으로 import 문을 추가합니다. 그렇지 않은 경우 텍스트 커서를 끝 새 클래스 이름을 입력하고 "Ctrl-Space"를 입력하면 클래스에 대한 새 가져 오기가 작성됩니다.)
이제 응용 프로그램을 실행하십시오. 점은 3 초 동안 원으로 회전해야합니다.
Tween 생성자가 수행하는 작업은 다음과 같습니다.

• 첫 번째 인수는 값을 트위닝해야하는 객체입니다.
• 두 번째 인수는 애니메이션의 길이 (초)입니다
• 세 번째 인수는 애니메이션 할 속성과 대상 값을 나열하는 Object 인스턴스입니다.
  • 속성 이름은 입력 개체의 속성과 정확히 일치해야합니다.
  • 중첩 속성은 허용되지만 따옴표로 묶어야합니다. 예를 들어 {“data.profit”:50} 입력 개체에 data라는 속성이 있고이 속성에 profit이라는 속성이있는 경우 올바른 입력입니다.

XNUMXD덴탈의 play 그런 다음 메소드는 애니메이션을 실행합니다. 그만큼 play 애니메이션을 역으로 실행할지 여부를 나타내는 단일 부울 매개 변수를 사용하여 메서드를 호출 할 수도 있습니다.
회전 애니메이션에 약간의 가속이 나타나는 것을 알 수 있습니다. 기본 설정이 Tween 인스턴스는 "느린 느리게"애니메이션을 사용하는 것입니다. 다음을 사용하여 이러한 동작을 제어 할 수 있습니다 Easing 기능. 이 함수는 현재 애니메이션 진행률을 0에서 1 사이의 분수로 입력으로 사용합니다. 그런 다음 조작 된 진행률 분수를 반환하여 애니메이션의 속도를 종종 비선형 방식으로 변경합니다.
여유를 제거하려면 (즉, 선형 여유 함수를 사용하여) 다음과 같이 작성할 수 있습니다. tween.easing = Easing.none. 가져 오기만하면됩니다. flare.animate.Easing 파일 상단의 클래스.
다른 여유 기능으로 자유롭게 실험하십시오. 예를 들어, 여유 기능은 여유 (애니메이션의 시작 만 조작), 여유 (애니메이션의 끝만 조작) 또는 둘 다를 포함 할 수 있습니다. 예를 들어 다음을 시도하십시오. tween.easing = Easing.easeOutBounce. 그러면 회전이 끝에서 튀어 오릅니다.
계속 진행하기 전에 위치, 배율 또는 알파 값과 같은 컨테이너의 다른 속성에 애니메이션을 적용하십시오.

컴포지트 애니메이션

XNUMXD덴탈의 Sequence 와 Parallel 클래스를 사용하면 애니메이션을 함께 그룹화 할 수 있습니다. 시퀀스는 일련의 애니메이션을 차례로 실행합니다. 예를 들어 다음을 시도하십시오.

 var t1 : Tween = 새 트윈 (컨테이너, 1, {y : 100}); var t2 : Tween = 새 트윈 (컨테이너, 1, {scaleX : 2}); var t3 : Tween = 새 트윈 (컨테이너, 1, {y : 300}); var t4 : Tween = 새 트윈 (컨테이너, 1, {scaleX : 1}); var seq : Sequence = new Sequence (새 병렬 (t1, t2), 새 병렬 (t3, t4)); seq.play ();

파일 맨 위에 새로운 import 문을 추가해야합니다.

 수입품 flare.animate.Parallel; 수입품 플레어. 애니메이션. 시퀀스;

이렇게하면 네 개의 트윈이 만들어집니다. t1, t2, t3및 t4. 그런 다음 실행되는 두 개의 병렬 전환을 만듭니다. t1 와 t2 함께 실행 t3 와 t4 함께. 병렬 전이는 순차적으로 차례로 실행됩니다. 이러한 방식으로보다 복잡한 애니메이션을 쉽게 만들 수 있습니다.
보다 고급 합성 애니메이션을 보려면 FlareLogo 와 flare.demos.Animation 의 수업 flare.demos 프로젝트.

전환기를 사용한 배치 애니메이션

사용법 - Tween, Parallel및 Sequence 수업에서 애니메이션 전환을 얼마든지 만들 수 있습니다. 그러나 많은 객체 컬렉션 (시각화에서 일반적으로 사용됨)을 처리 할 때 비슷하게 큰 트윈 세트를 수동으로 처리하기가 어려울 수 있습니다. 또한 레이아웃, 색상, 크기, 모양과 같은 시각적 속성을 인코딩하기 위해 별도의 루틴을 쉽게 실행하고 애니메이션 처리에 대해 걱정할 필요가 없습니다. 변경 사항에 애니메이션을 적용하거나 정적 업데이트를 원할 수 있습니다. 어느 쪽이든, 값을 할당하기 위해 동일한 코드를 재사용 할 수 있어야합니다.
이러한 문제를 해결하기 위해 Flare는 Transitioner 수업. Transitioner는 객체 컬렉션을위한 애니메이션 제작 프로세스를 단순화합니다. 객체를 가져와 원하는 속성을 하나씩 설정하면됩니다. 장면 뒤에서 전환기가 필요한 트윈을 자동으로 생성하고 재사용하여 전체 애니메이션을 모델링합니다. 또한 애니메이션을 원하지 않는 경우 속성 값을 즉시 설정하도록 전환기를 구성 할 수 있습니다. 간단히 말해, 전환기는 객체 속성을 업데이트하기위한 간접 계층을 제공합니다. 이러한 업데이트는 수집 한 후 애니메이션을 적용하거나 즉시 적용 할 수 있습니다.
다음은 튜토리얼 앱에서 전환기를 사용하는 간단한 예입니다.

 var t : Transitioner = new Transitioner (2); for (var j : int = 0; j

이 예제는 모든 스프라이트에 애니메이션을 적용합니다. container 새로운 무작위로 y 위치 및 임의의 수직 스케일 팩터. 우리는 먼저 새로운 Transitioner 2 초 애니메이션을 만들어야합니다. 그런 다음 각 자식 스프라이트를 반복하고 전환기를 사용하여 속성을 트윈으로 설정합니다.
전환기 $ 연산자는 입력 객체에 대한 목표 값을 설정하려고 함을 나타냅니다. 기본적으로 새로운 Tween 작성되었거나 기존 Tween 현재 항목에 대해 발견되었습니다. 그만큼 $ 그런 다음 연산자는 트윈의 대상 속성을 설정할 객체를 반환합니다.
또한, 전환 (transitioner)을 사용하여 정적 (애니메이션되지 않은) 전환을 만들 수 있습니다. 전환기의 경우 immediate 속성이 true로 설정되면 새 트윈이 만들어지지 않습니다. 대신 $ 연산자는 입력 값을 반환합니다. 이는 전환기를 사용하여 값을 업데이트하는 메서드를 만든 다음 나중에 해당 값을 업데이트할지 여부를 제어 할 수 있음을 의미합니다. 표준“즉시 모드” Transitioner 정적을 사용하여 검색 Transitioner.DEFAULT 특성. 그렇게하면 새로운 것을 할당 할 필요가 없습니다 Transitioner 즉시 업데이트를 수행 할 때.
전환기는 전 세계적으로 광범위하게 사용됩니다. flare.vis 패키지를 통해 시각화 디자이너가 애니메이션을 업데이트 할 방법과 방법을 제어 할 수 있습니다.

3 부 : 시각화

데이터 로딩

Flare의 기본 데이터 표현은 단순히 내장 Flash 데이터 유형을 사용합니다. Object 와 Array. 예를 들어, 데이터 테이블은 객체 배열로 표현 될 수 있으며 각 객체는 각 데이터 필드의 이름과 값을 포함합니다. 보다 효율적인 표현이 가능하지만이 접근 방식은 유연성을 극대화하면서 기존 Flash 개발 규칙을 활용합니다.
Flash Player에 데이터를로드하는 방법에는 여러 가지가 있습니다. 간단한 접근 방식은 데이터를 응용 프로그램 자체에 포함시키는 것입니다. 이렇게하면 데이터가 응용 프로그램과 함께 다운로드되므로 정적 데이터 세트에 적합합니다. 예를 들어 ActionScript의 객체 표기법을 사용하여 데이터 세트를 변수로 직접 정의 할 수 있습니다.

var data : Array = [{id : "Q1", 매출 : 10000, 수익 : 2400}, {id : "Q2", 매출 : 12000, 수익 : 2900}, {id : "Q3", 매출 : 15000, 수익 : 3800}, {id : "Q4", 매출 : 15500, 이익 : 3900}];

그러나 대부분의 경우 웹 페이지 (브라우저에서 JavaScript를 사용하여 값을 Flash로 전달할 수 있음) 또는 인터넷 서버에서 데이터를 동적으로로드하려고합니다. 이를 수행하는 방법에는 여러 가지가 있으며 특정 응용 프로그램에 가장 적합한 것을 선택해야합니다. 예를 들어, ActionScript는 작업을위한 추가 데이터 유형 및 구문을 제공합니다. XML ECMAScript를 사용한 데이터 XML (E4X) 표준.
Flare는 외부 데이터 세트를로드하기위한 일부 유틸리티도 제공합니다. 인터넷의 모든 서버에서 데이터를로드하고 해당 데이터를 내부 ActionScript 객체로 변환 할 수 있습니다. 현재 지원되는 파일 형식은 탭으로 구분 된 텍스트 ( "탭", Excel과 같은 도구에서 데이터를 내보내는 표준 파일 형식)입니다. JavaScript Object Notation (웹 애플리케이션의 공통 데이터 형식 인 "json") 및 그래프ML (“graphml”, XML 노드와 에지가있는 네트워크를 나타내는 형식).
원격 데이터는 flare.data.DataSource 수업. 다음은 탭으로 구분 된 데이터 파일을로드하는 데 사용하는 예입니다.

var ds : DataSource = new DataSource ( "http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader : URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt : Event) : void {//로드가 완료되면 데이터를 처리하는 함수 var ds : DataSet = loader.data as DataSet; // 이제 데이터로 무언가를 수행합니다.} );

XNUMXD덴탈의 DataSource 생성자에는 데이터 세트의 URL과 파일 형식을 나타내는 문자열이라는 두 가지 필수 인수가 있습니다. 현재 지원되는 형식은 "tab"(탭으로 구분), "json"(JavaScript 객체 표기법) 및 "graphml"(GraphML)입니다.
스키마 (필드의 이름 및 데이터 유형)가 명확하지 않은 데이터 세트의 경우, 세 번째 선택적 생성자 인수도 있습니다. DataSchema 유형. 참조 flare.data.DataSchema 와 flare.data.DataField 더 많은 수업. 스키마는 데이터 값의 이름을 올바르게 지정하고 (예 : 헤더 행이없는 탭으로 구분 된 파일의 경우) 올바른 데이터 유형으로 변환하는 데 도움이 될 수 있습니다 (예 : 숫자 값이 따옴표로 묶인 JSON 데이터의 경우).
실제로 데이터를로드하기 위해 DataSource load 메소드가 호출되어 flash.net.URLLoader 예. 로더를 사용하여 다운로드 진행률을 추적하고 (예 : 진행률 표시 줄을 제공하려는 경우) 다운로드가 완료되면 알림 이벤트를 제공 할 수 있습니다. 위의 예에서는 다운로드가 완료되면 알림을받을 이벤트 리스너를 추가합니다. 그만큼 DataSource 입력 데이터를 자동으로 구문 분석하고 ActionScript 객체에 매핑 한 다음 결과를 flare.data.DataSet 목적. 그만큼 DataSet 클래스는 테이블 및 네트워크 (노드 / 에지) 데이터를 모두 나타낼 수 있습니다.

비주얼 객체 생성 및 관리

이제 데이터 세트를 시각화하려고합니다. 이를 위해 개별 데이터 레코드를 시각적 항목으로 매핑합니다. 플레어는 데이터를 나타내는 일련의 시각적 객체를 제공합니다. 다음은 기본 클래스에 대한 개요입니다. flare.vis.data 패키지.

• DataSprite: 시각적으로 데이터를 나타내는 스프라이트의 기본 클래스입니다. DataSprite Flash Player의 하위 클래스입니다. Sprite 클래스입니다. DataSprite 포함하는 data 데이터 튜플 (ActionScript 객체)이 저장되고 색상, 모양 및 크기 필드를 포함한 기본 스프라이트에서 지원되는 것 이외의 추가 시각적 변수를 제공하고 극좌표에서의 위치 설정을 지원합니다.
• NodeSprite: DataSprite 노드를 나타내는 인스턴스. 데이터 시각화에 사용되는 기본 유형입니다. NodeSprite 네트워크 또는 트리 구조 내에서 인스턴스를 연결하여 EdgeSprite 인스턴스.
• EdgeSprite: DataSprite 가장자리를 나타내는 인스턴스. 안 EdgeSprite 두 연결 NodeSprites. 노드는 source 와 target 속성. EdgeSprites 시계열 그래프와 같이 선과 그래프를 만드는 데 사용됩니다.

일반적으로 NodeSprites 및 EdgeSprites는 flare.vis.data.Data 클래스는 단일 시각화에 대한 모든 시각적 항목을 관리합니다. 그만큼 Data class는 데이터 튜플을위한 새로운 시각적 객체를 생성하고 그래프 구조를 나타내는 메소드를 제공합니다.
XNUMXD덴탈의 Data 또한 클래스는 포함 된 데이터 항목을 순회 및 업데이트하기위한 메소드를 제공합니다. 그만큼 nodes 와 edges 속성은 데이터에 포함 된 노드 및 가장자리의 목록을 반환합니다. 이러한 각 목록에는 visit 메소드를 사용하면 각 노드 또는 에지에서 호출되는 함수를 전달할 수 있습니다. 또한 setProperty 와 setProperties 메소드를 사용하면 모든 노드 또는 모서리에 대한 특성 값을 한 번에 설정할 수 있습니다. 이 방법들은 선택적으로 Transitioner 속성 업데이트에 애니메이션을 적용 할 수 있습니다.
예를 들어 다음 코드는 XNUMX 초 애니메이션으로 모든 노드의 선 색상이 파란색으로 설정됩니다. (XNUMX 진수 표기법은 DataSprite 색상 값에는 알파, 빨강, 녹색, 파랑 채널이 포함됩니다).

data.nodes.setProperty ( "lineColor", 0xff0000bb, new Transitioner (1)). play ();

노드 및 엣지 목록은 다음을 사용하여 기본 속성 값을 지원합니다. setDefault, setDefaults, removeDefault및 clearDefaults 행동 양식. Data 클래스를 사용하여 새로 만든 노드 또는 에지에 기본값이 설정됩니다. addNode or addEdgeFor 방법.
XNUMXD덴탈의 Tree class는 Data, 일반 그래프가 아닌 나무를 나타내도록 특수화되었습니다. 그만큼 Data 클래스는 자동 생성을 지원합니다 Tree 일반 그래프의 스패닝 트리를 계산하여 너비 우선, 깊이 우선 및 최소 스패닝 트리 알고리즘을 포함한 여러 스패닝 트리 작성 방법을 매개 변수로 전달할 수 있습니다. 이 계산은 flare.analytics.graph.SpanningTree 클래스입니다.
실제로 노드와 가장자리 객체를 만들기 위해 addNode 와 addEdgeFor 방법.

• addNode 입력 데이터 튜플을 가져옵니다 ( Object) 새로운 NodeSprite 해당 데이터를 시각화합니다.
• addEdgeFor 두 개의 기존 NodeSprites 그리고 추가 EdgeSprite 그들을 연결합니다. 이 방법은 또한 선택적으로 데이터 튜플 (다시 말해서 Object 가장자리에 대한 모든 데이터 필드를 나타냅니다.

다음은 간단한 예제 작성입니다 NodeSprites 데이터 객체 배열이 있다고 가정하면 테이블 형식 데이터 세트의 경우 :

var list : 배열; // 이미로드 한 데이터 객체의 배열 var data : Data = new Data (); // 각각에 대한 새로운 데이터 컨테이너 (var o : Object in list) {data.addNode (o); }

결과는 Data 시각적으로 채워진 개체 DataSprite (노드 또는 에지) 인스턴스.
실제로는 항상 시각화 된 데이터를 수동으로 채울 필요는 없습니다. 만들려면 Data 로드 된 데이터 세트를 시각화하기위한 객체 인 경우 편리한 방법을 대신 사용할 수 있습니다. 그만큼 Data.fromArray() 함수는 Data ActionScript 객체의 배열로 저장된 테이블 형식 데이터의 인스턴스 Data.fromDataSet() 이 방법은 비슷하게 Data 로드 된 인스턴스 DataSet 목적.

시각화 구성

이제이 모든 것을 합쳐서 시각화를 시작해 봅시다. 그만큼 Visualization 클래스는 시각적 표시를 포함하여 단일 시각화를 나타냅니다 ( Data 인스턴스) 및 축. 시각화를 생성하기 위해 데이터 세트를로드하고 시각화에 데이터를 추가하며 데이터 시각화 방법을 결정하는 연산자를 설정합니다. 다음은 예입니다. 먼저 코드를 살펴본 다음 각 부분이 수행하는 작업을 이해하려면 계속 읽으십시오.

패키지 {import flare.data.DataSet; import flare.data.DataSource; 수입품 flare.scale.ScaleType; 수입품 flare.vis.Visualization; import flare.vis.data.Data; 수입품 flare.vis.operator.encoder.ColorEncoder; 수입품 flare.vis.operator.encoder.ShapeEncoder; 수입품 flare.vis.operator.layout.AxisLayout; import flash.display.Sprite; import flash.events.Event; import flash.geom.Rectangle; import flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] 공개 클래스 자습서 Sprite 확장 {private var vis : Visualization; 공용 함수 Tutorial () {loadData (); } 개인 함수 loadData () : void {var ds : DataSource = new DataSource ( "http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader : URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt : Event) : void {var ds : DataSet = DataSet으로서의 loader.data; visualize (Data.fromDataSet (ds));}); } 개인 함수 visualize (data : Data) : void {vis = 새로운 시각화 (data); vis.bounds = 새로운 사각형 (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (new AxisLayout ( "data.date", "data.age")); vis.operators.add (new ColorEncoder ( "data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (new ShapeEncoder ( "data.race")); vis.data.nodes.setProperties ({fillColor : 0, lineWidth : 2}); vis.update (); }}}

각 방법을 살펴 보겠습니다.
생성자는 간단합니다. loadData 방법.
XNUMXD덴탈의 loadData method는 새로운 데이터 소스를 생성하고 앞에서 설명한 방법을 사용하여로드합니다. 이 경우 데이터 세트는 2007 년 로스 앤젤레스 카운티에서 살인 사건으로보고되며 탭으로 구분 된 형식으로 저장됩니다. 로드가 완료되면로드 된 데이터 튜플이 Data 를 사용하는 인스턴스 fromDataSet 편리한 방법. 후드 아래에서 이것은 NodeSprites 각 데이터 항목을 시각화합니다. 마지막으로 visualize 메서드가 호출됩니다.
XNUMXD덴탈의 visualize 메소드는 시각화를 설정합니다. 각 단계에서 수행되는 작업은 다음과 같습니다.

• 1 부 : 초기화
  • 데이터에 대한 새로운 시각화가 생성됩니다
  • 시각화의 범위를 설정했습니다. 레이아웃 영역을 결정합니다.
  • 우리는 x 와 y 시각화의 위치와 시각화를 표시 목록에 추가하십시오.
• 2 부 : 비주얼 인코딩 지정
  • 우리는 축 레이아웃을 사용하여“날짜”를 x 축에,“나이”를 y 축에 놓습니다. 그만큼 AxisLayout 연산자는 시각화를 위해 축을 자동으로 구성합니다. "data.date"구문을 사용하여 데이터 변수가 NodeSprite'에스 data 재산.
  • 노드의 선 색상이 "원인"(사망 원인) 변수를 나타내도록 색상 인코딩을 추가합니다. 또한 "원인"변수의 값이 범주 (ScaleType.CATEGORIES). 색상 인코더는이 정보를 사용하여 적절한 색상 팔레트를 자동으로 선택합니다. 우리가 곧 보게 되겠지만, 당신은 또한 당신의 자신의 컬러 팔레트를 제공 할 수 있습니다.
  • 물체의 형태가 희생자의“레이스”를 나타내도록 형태 인코딩을 추가합니다.
  • 기본 속성을 설정합니다 – 노드의 채우기 색상을 완전 투명으로 설정하고 선 너비를 2 픽셀로 설정합니다.
  • 마지막으로 update 방법. 모든 연산자를 순서대로 실행합니다.

시각화 업데이트

시각화가 생성되면 업데이트 할 수 있습니다. 예를 들어, 사람들의 성별을 시각화하기 위해 색상 인코딩을 변경하고 싶을 수도 있습니다.
먼저, 클래스에 새로운 메소드를 추가합시다 :

 개인 함수 colorByGender () : void {var color : ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = 새로운 ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (new Transitioner (2)). play (); }

이 방법:

1. 두 번째 연산자 (인덱스 1의 연산자)를 검색하여 ColorEncoder
2. 변경 source "data.sex"변수를 사용하는 색상 인코더의 속성
3. 새 색상 팔레트를 설정합니다 (이 경우 여성의 경우 빨간색, 남성의 경우 파란색 – 색상 순서가 레이블의 알파벳 순서와 일치 함).
4. a로 update를 호출하여 변경 사항을 애니메이션합니다 Transitioner XNUMX 초 애니메이션으로 설정합니다. 그만큼 vis.update 메소드는 Transitioner업데이트의 반환 값에 대해 play를 호출 할 수 있습니다. (참고 : Transitioner 그리고 숫자 2를 인수로 전달하십시오. update. 새로운 Transitioner 자동으로 생성되어 반환됩니다.)

이제 대화식으로 업데이트를 트리거 할 수 있도록 응용 프로그램을 연결해야합니다. 그렇게하려면 생성자에 다음 코드를 추가하십시오.

 // 클릭 가능한 레이블 추가 var button : TextSprite = new TextSprite ( "Gender by Gender"); addChild (버튼); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt : MouseEvent) : void {colorByGender ();});

이 코드는 :

1. 새 텍스트 라벨을 만듭니다 (TextSprite 의 도우미 클래스입니다 flare.display 꾸러미)
2. 응용 프로그램에 레이블을 추가하고 위치를 설정합니다
3. 설정 buttonMode true로 설정 (레이블 위로 마우스를 가져 가면 손 모양 커서가 나타남)
4. 레이블을 클릭 할 때 트리거되는 이벤트 리스너를 추가합니다. 우리는 콜백 함수를 추가합니다. colorByGender 방법.

위의 코드가 작동하려면 파일 맨 위에 다음과 같은 추가 import 문을 포함시켜야합니다.

 import flash.events.MouseEvent; 수입 플레어. 애니메이션. 전환기; import flare.display.TextSprite; 수입품 flare.util.palette.ColorPalette;

이제 응용 프로그램을 컴파일하고 실행할 수 있어야합니다. "성별 색"레이블을 클릭하면 색상 인코딩 변경 사항에 애니메이션이 적용됩니다.

다음 단계

위의 예제는 Flash 및 Flare 라이브러리의 기본 사항을 보여 주지만 아직 다루지 않은 기능이 더 많이 있습니다. 앞으로 (a) 플래시와 플레어를 모두 검사하는 것이 좋습니다. API (b) Flare 데모를 통해 여기에 표시된 동일한 원칙을 사용하여 여러 다른 시각화를 구성하는 방법을 확인하십시오. 또는 플레어 소스 코드를 자세히 살펴보면서 어떤 일이 벌어지고 있는지 알 수 있습니다.
이 과정을 돕기 위해 하위 패키지에 대한 일반적인 개요는 다음과 같습니다. flare.vis:

• flare.vis.axis: 축, 레이블 및 눈금 선을 제공합니다
• flare.vis.controls: 선택, 확대 / 축소 등을위한 상호 작용 핸들러
• flare.vis.data: 데이터 요소를 나타내는 시각적 객체
• flare.vis.data.render: 플러그 가능한 렌더러 DataSprites
• flare.vis.events: 플레어 프레임 워크에서 사용되는 이벤트 유형
• flare.vis.legend: 비주얼 인코딩을 설명하는 범례를 나타냅니다.
• flare.vis.operator: 시각화 정의를위한 빌딩 블록
• flare.vis.palette: 색상, 모양 및 크기 값을위한 팔레트
• flare.vis.util: 일반 유틸리티 클래스

이제 데모를 이해하기에 충분히 알아야합니다. flare.demos 꾸러미. Flash 및 Flare 작동 방식에 대한 이해를 돕기 위해 데모를 가지고 놀고, 수정하고, 복사하고, 붙여넣고 빌드 할 수 있습니다.

링크

다운로드

도구

다른 기술 안내서

고객 지원

출처 : https://blokt.com/tool/prefuse-flare