Flare упрощает создание интерактивных визуализаций данных

Чтобы начать создавать свои собственные визуализации, скачать вспышку и проработайте руководство ниже. Нужна дополнительная помощь? Посетить справочный форум (вам понадобится SourceForge войдите, чтобы опубликовать).

Flare – это программное обеспечение с открытым исходным кодом, выпущенное по лицензии BSD, что означает, что его можно свободно развертывать и модифицировать (и даже продавать за $$). Дизайн Flare был адаптирован из своего предшественника prefuse, инструментария визуализации для Java..

Приложения

Анонсы

  • 2010.10.07: Разработка Flare была открыта для сообщества, а исходный код перенесен с SourceForge на новый дом на GitHub. flare 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. Настройте рабочую среду разработки flash. Есть два подхода. Мы рекомендуем первый для простоты, но более опытные пользователи могут использовать второй подход..

    • Вариант 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 или ant. Flare поставляется с файлом build.xml для использования с Apache Ant система сборки. После установки ant просто откройте файл build.xml в текстовом редакторе, измените первые пару строк так, чтобы они указывали на установку Flex SDK, а затем используйте ant для компиляции библиотек. Мы используем муравьиные задачи Adobe Labs для разработки Flex..
        • Преимущество этого подхода в том, что все программное обеспечение бесплатное, и срок его действия не истечет. Однако вы теряете такие функции, как автоматическая компиляция, управление проектами и автозаполнение, предоставляемые Flex Builder..
        • Скачать библиотеки предварительных взрывателей.

          • Загружаемый файл представляет собой zip-файл, содержащий набор проектов библиотеки ActionScript. Разархивируйте файлы в каталог основной рабочей области, если вы используете Flex Builder. Во время обучения мы импортируем их в Flex Builder и будем использовать для создания визуализаций.!
          • Программное обеспечение в настоящее время является альфа-версией, поэтому следует ожидать некоторых ошибок и ограничений. Мы исправим проблемы, как только сможем, и ссылка выше всегда будет указывать на самую последнюю версию..

          Введение в Flash и ActionScript 3

          Flash – отличная среда для интерактивной графики, и с недавним добавлением языка программирования ActionScript 3 он стал намного более мощным и эффективным. Хотя полное введение в AS3 выходит за рамки этого руководства, вот некоторые ресурсы, которые могут вам пригодиться:

          • Adobe предоставляет Обзор AS3 со ссылками на дополнительные ресурсы.
          • Основной ActionScript 3 Колин Мук из издательства O’Reilly – отличная книга, которая поможет вам начать работу. Вы можете получить к нему доступ онлайн здесь (некоторые учреждения, например университеты, предоставляют доступ бесплатно).
          • Справочник Adobe Flex API неоценим для понимания различных доступных классов и методов. Мы сосредоточимся только на классах во flash. * Пакетах.

          В этом руководстве предполагается базовое знакомство с синтаксисом и типами ActionScript, а также с концепциями объектно-ориентированного программирования..

          Часть 1: DisplayObjects

          Вступление

          Flash моделирует 2D визуальную сцену, используя граф. Визуальные объекты организованы в иерархию с дочерними объектами, определенными в координатном пространстве родительского. Вы часто будете видеть этот граф сцены, называемый списком отображения, как в документации Adobe, так и в книгах по программированию на Flash..

          Узел вверху списка отображения всегда является объектом Stage. На сцене всегда один-единственный ребенок. Это называется корнем, и все визуальные элементы находятся под корнем. Обычно корнем является ваше собственное Flash-приложение. Мы скоро вернемся к этому.

          Все визуальные элементы, которые можно добавить в список отображения, являются экземплярами класса DisplayObject. Подклассы DisplayObject включают Bitmap (для изображений), TextField (для интерактивных текстовых областей) и Video (например, YouTube). Однако наиболее распространенными экземплярами являются классы Sprite и Shape. Для справки, большинство из этих классов можно найти в пакете flash.display (хотя в конечном итоге вы, вероятно, найдете и используемый пакет flash.text).

          Класс Sprite является наиболее полезным визуальным объектом общего назначения, используемым Flash Player. Спрайты – это визуальные объекты, которые содержат как содержимое чертежа, так и могут служить контейнером для подузлов в списке отображения (класс Sprite является подклассом flash.display.DisplayObjectContainer). Напротив, класс Shape может содержать содержимое чертежа, но не может содержать подузлы. В результате фигуры используют меньше памяти, но гораздо менее гибки. Для простоты в этом руководстве мы сосредоточимся на спрайтах..

          Создать новое приложение

          Во-первых, давайте создадим новое Flash-приложение. Для этого откройте Flex Builder и убедитесь, что вы находитесь в перспективе «Разработка Flex» (часто ее можно открыть, щелкнув черно-белый значок «Fx» в правом верхнем углу)..

          На панели «Навигатор» слева щелкните дисплей правой кнопкой мыши и выберите «Создать. > Проект ActionScript ». В появившемся диалоговом окне введите «Учебник» в качестве имени проекта, затем нажмите «Готово». Это создаст для вас новый проект.

          Теперь вы должны увидеть папку «Учебник» на панели «Навигатор». В этой папке вы должны увидеть файл с именем «Tutorial.as». Это ваш основной файл приложения. Откройте его, если он еще не открыт.

          Внутри файла вы увидите базовую основу для этого класса:

          упаковка {

          импортировать flash.display.Sprite;

          Открытый класс Tutorial расширяет Sprite

          {

          общедоступная функция Учебник ()

          {

          }

          }

          }

          Обратите внимание, что этот класс расширяет класс Sprite. Поскольку это наш основной класс приложения, когда мы запускаем приложение, экземпляр класса Tutorial будет автоматически добавлен в список отображения в качестве его корня (единственного дочернего элемента Stage)..

          Также обратите внимание, что конструктор был создан автоматически. Этот конструктор будет вызываться при запуске приложения. Для тех, кто знаком с такими языками программирования, как C, C ++ или Java, конструктор класса приложения действует во многом как основная функция на этих других языках..

          Создав эту новую основу приложения, мы можем начать играть с визуальными объектами. Однако сначала мы хотим сделать одну вещь. Добавьте новую строку непосредственно над строкой объявления класса («Учебник открытого класса…»), в которой говорится:

          [SWF (ширина ="800", высота ="600", backgroundColor ="#ffffff", frameRate ="30")]

          Эта строка определяет настройки по умолчанию для вашего приложения (которое компилируется и сохраняется как файл .swf в каталоге «bin» вашего проекта). Выше мы установили размер, цвет фона и целевую частоту кадров (в кадрах в секунду) для нашего приложения..

          Спрайты

          Как и все объекты DisplayObject, Sprite сразу же поддерживает ряд визуальных свойств. Сюда входят свойства x, y, scaleX, scaleY, rotation и alpha. Они соответственно изменяют положение, размер, ориентацию и прозрачность спрайта (и всех его дочерних элементов! Помните, что здесь мы используем граф сцены).

          Однако эти значения пока мало что значат, так как по умолчанию спрайты ничего не содержат. Начнем с рисования собственного контента.

          Каждый спрайт также имеет графическое свойство. Мы можем использовать это для рисования графики для Sprite. Свойство graphics является экземпляром класса flash.display.Graphics, который предоставляет ряд команд векторного рисования..

          В приведенном ниже примере мы делаем несколько вещей..

          • Сначала мы создаем новый Sprite.
          • Во-вторых, мы используем графику спрайта, чтобы нарисовать круг с серой заливкой и черным контуром..
          • beginFill устанавливает текущий цвет и стиль заливки. Первый аргумент – это цвет в шестнадцатеричной системе счисления, а второй аргумент – это альфа-значение, которое варьируется от 0 для полной прозрачности до 1 для полной непрозрачности..
          • lineStyle устанавливает текущий цвет и стиль обводки. Первый аргумент – это ширина линии, второй аргумент – это цвет..
          • drawCircle рисует круг радиуса 10 в точке 0,0 в координатном пространстве нашего спрайта..
        • В-третьих, мы добавляем спрайт как дочерний элемент нашего основного приложения (учебный спрайт)..
        • В-четвертых, мы устанавливаем положение x и y нашего спрайта..
        • В-пятых, мы добавляем некоторые отладочные данные. trace выводит строку на консоль. Этот вывод отображается только при запуске приложения в режиме «отладки»..
        • Вот код:

          упаковка {

          импортировать flash.display.Sprite;

          [SWF (ширина ="800", высота ="600", backgroundColor ="#ffffff", frameRate ="30")]

          Открытый класс Tutorial расширяет Sprite

          {

          общедоступная функция Учебник ()

          {

          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.x = 50;

          sprite.y = 50;

          след("наш спрайт находится по адресу: "+sprite.x+", "+sprite.y);

          }

          }

          }

          Запустите приложение (щелкните правой кнопкой мыши «Tutorial.as» и выберите «Запуск от имени»). > Приложение Flex »). Вы должны увидеть серый круг с черным контуром в верхнем левом углу с центром в точках 50, 50. Если вы запускаете приложение в режиме отладки (выберите «Отладка как > Flex Application »), вы также должны увидеть строку« наш спрайт: 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 родительского контейнера. Наш новый конструктор теперь выглядит так:

          общедоступная функция Учебник ()

          {

          контейнер var: Sprite = new Sprite ();

          container.x = 400;

          container.y = 300;

          this.addChild (контейнер);

          для (var i: int = 0; i<10; ++ i) {

          var x: Number = (i / 5<1? 1: -1) * (13 + 26 * (i% 5));

          container.addChild (createCircle (x, 0));

          }

          }

          Запустите новую версию приложения. Вы должны увидеть линию из десяти кружков посередине приложения..

          Теперь мы можем изменить контейнер, чтобы обновить все круги внутри него. Попробуйте поиграть с установкой различных визуальных переменных в спрайте контейнера. Например, измените свойства x, y, scaleX, scaleY, Rotation и alpha..

          Другие темы

          Вы можете сделать гораздо больше с помощью основных параметров, которые предоставляет Flash. К сожалению, они немного выходят за рамки того, на что у нас есть время. Некоторые вещи для изучения включают фильтры изображений (см. Пакет flash.filters), которые позволяют добавлять визуальные эффекты к отображаемым объектам, используя их свойство filter, а также различные параметры, доступные в классе flash.display.Graphics, включая стили заливки и линий. и многие другие процедуры 2D-рисования.

          Часть 2: Анимация

          Теперь, когда мы можем создавать визуальные объекты, пришло время вдохнуть в них жизнь. Flare включает пакет flare.animate, чтобы упростить эту задачу. Во-первых, нам нужно импортировать библиотеки бликов для использования в Flex Builder..

          Импорт библиотек

          Прежде чем продолжить, убедитесь, что у вас есть библиотеки бликов, загруженные как проекты в Flex Builder. Вы уже должны были разархивировать файлы бликов в основной каталог рабочего пространства Flex Builder. Следующим шагом будет их импорт в среду Flex Builder:

          • Убедитесь, что вы находитесь в перспективе «Разработка Flex»..
          • Щелкните правой кнопкой мыши панель навигации слева.
          • Выберите «Импорт…» во всплывающем меню..
          • В диалоговом окне выберите «Общие. > Существующие проекты в рабочую область »и нажмите кнопку« Далее »..
          • Используйте виджеты «Выбрать корневой каталог» для перехода в каталог рабочей области Flex Builder.
          • Теперь вы должны увидеть проекты вспышки, перечисленные на панели «Проекты:»..
          • Выберите проекты «flare» и «flare.demos» и нажмите кнопку «Готово»..

          Теперь вы должны увидеть бликовые проекты на панели навигатора. Теперь вы можете просматривать исходный код как для библиотеки, так и для демонстраций..

          Обзор библиотеки вспышек

          Вот краткий обзор набора инструментов Flare. Внутри проекта flare загляните в папку «src / flare». Вы найдете ряд пакетов с различными функциями:

          • аналитика: операторы для вычисления статистики и анализа данных
          • animate: инструменты для создания анимации
          • data: методы чтения и записи наборов данных
          • display: типы DisplayObject, расширяющие те, которые предоставляются flash.display
          • flex: оболочка для встраивания визуализаций Flare в приложения Flex
          • физика: физический движок для физических эффектов или силовая компоновка
          • query: обработчик запросов для объектов ActionScript
          • scale: классы для обработки масштабов данных, таких как линейные, логарифмические и временные шкалы
          • util: набор служебных классов, предоставляющих часто необходимые функции
          • vis: компоненты и операторы визуализации вспышки

          Также существует проект flare.demos, который предоставляет ряд примеров того, как создавать компоненты Flare..

          Импорт библиотеки в другой проект

          Чтобы использовать блики в своих проектах, вам необходимо обновить настройки проекта. Вот как это сделать:

          1. На панели «Навигатор» щелкните правой кнопкой мыши верхнюю папку проекта «Учебник».
          2. Нажмите «Свойства» в контекстном меню.
          3. В появившемся диалоговом окне нажмите «Путь сборки ActionScript» на левой панели (это должен быть третий элемент сверху).
          4. Щелкните вкладку «Путь к библиотеке» на правой панели.
          5. Нажмите кнопку «Добавить проект».
          6. Теперь вы должны увидеть список проектов, включая вспышку..
          7. Выберите «вспышка» и нажмите «ОК».

          Теперь вы добавили библиотеки бликов в свой проект и можете использовать любой из классов, которые он предоставляет..

          Следует отметить одну вещь о компиляторе Flex – по умолчанию он включает только те классы, которые вы фактически используете в своем приложении. Таким образом, даже если вы импортируете очень большую библиотеку, размер вашего окончательного файла .swf может быть довольно небольшим. Однако имейте в виду, что это может вызвать проблемы, если вы используете отражение для выполнения динамической загрузки класса в своем приложении (более продвинутая функция, не описанная в этом руководстве)..

          Базовая анимация: анимация, последовательность и параллель

          Хорошо, теперь давайте оживим! Класс flare.animate.Transition – это базовый класс для всех анимаций. Важными подклассами Transition являются переходы Tween, Sequence и Parallel. Анимация используется для анимации свойств одного объекта. Последовательности используются для запуска серии анимаций по порядку. Параллельные переходы запускают набор переходов одновременно. Начнем с подростка.

          Анимация свойств объекта

          Основы класса Tween просты: мы берем объект, даем набор значений свойств, которые мы хотели бы изменить с течением времени, и указываем продолжительность этого изменения. Используя учебное приложение из части 1, давайте повернем объект-контейнер. Добавьте следующую строку в конец конструктора класса Tutorial:

          var tween: Tween = new Tween (контейнер, 3, {вращение: 360});

          tween.play ();

          Также убедитесь, что у вас есть новый оператор импорта в верхней части вашего класса, чтобы компилятор знал, о чем вы говорите. Добавьте это в список импорта:

          импорт flare.animate.Tween;

          (ПРИМЕЧАНИЕ: иногда Flex Builder автоматически добавляет за вас оператор импорта, когда вы вводите имя нового класса. Если нет, другой способ – поместить текстовый курсор в конец имени нового класса и ввести «Ctrl-Пробел» – это должен создать для вас новый импорт для класса.)

          Теперь запустите приложение – точки должны вращаться по кругу в течение 3 секунд..

          Вот что делает конструктор Tween:

          • Первый аргумент – это объект, значения которого следует анимировать.
          • Второй аргумент – это продолжительность анимации в секундах.
          • Третий аргумент – это экземпляр объекта, в котором перечислены свойства для анимации и их целевые значения..
          • Имена свойств должны точно соответствовать свойствам входного объекта..
          • Вложенные свойства разрешены, но должны быть заключены в кавычки. Например, {«data.profit»: 50} является допустимым вводом, если объект ввода имеет свойство с именем data, которое, в свою очередь, имеет свойство с именем profit..

          Затем метод play запускает анимацию. Метод воспроизведения также может быть вызван с одним логическим параметром, указывающим, следует ли запускать анимацию в обратном порядке..

          Возможно, вы заметили, что анимация вращения демонстрирует некоторое ускорение. Это связано с тем, что по умолчанию для экземпляров Tween используется анимация «замедление-замедление». Вы можете управлять этим поведением с помощью функций замедления. Эти функции принимают в качестве входных данных текущий прогресс анимации в виде дроби от 0 до 1. Затем они возвращают управляемую долю прогресса, чтобы изменить темп анимации, часто нелинейным образом..

          Чтобы убрать плавность (т.е. использовать линейную функцию плавности), вы можете написать: tween.easing = Easing.none. Просто убедитесь, что вы импортировали класс flare.animate.Easing вверху файла..

          Не стесняйтесь экспериментировать с другими функциями плавности. Например, функции замедления могут включать замедление (управление только началом анимации), замедление (управление только концом анимации) или и то, и другое. Например, попробуйте следующее: tween.easing = Easing.easeOutBounce. Это должно заставить вращение отскочить в конце.

          Прежде чем двигаться дальше, попробуйте анимировать другие свойства контейнера, такие как положение, масштаб или альфа-значения..

          Составные анимации

          Классы Sequence и Parallel позволяют группировать анимации вместе. Sequence запускает набор анимаций одну за другой. Например, попробуйте это:

          var t1: Tween = new Tween (контейнер, 1, {y: 100});

          var t2: Tween = new Tween (контейнер, 1, {scaleX: 2});

          var t3: Tween = new Tween (контейнер, 1, {y: 300});

          var t4: Tween = new Tween (контейнер, 1, {scaleX: 1});

          var seq: Sequence = новая последовательность (

          новая параллель (t1, t2),

          новая параллель (t3, t4)

          );

          seq.play ();

          Вам также нужно будет добавить несколько новых операторов импорта вверху файла:

          импорт flare.animate.Parallel;

          импорт flare.animate.Sequence;

          Это создает четыре анимации движения: t1, t2, t3 и t4. Затем он создает два параллельных перехода, которые запускают t1 и t2 вместе и запускают t3 и t4 вместе. Затем параллельные переходы выполняются один за другим в последовательности. Таким образом можно легко создавать более сложные анимации..

          Для получения более продвинутой композитной анимации взгляните на классы FlareLogo и flare.demos.Animation в проекте flare.demos..

          Пакетная анимация с переходниками

          Используя классы Tween, Parallel и Sequence, вы можете делать любое количество анимированных переходов. Однако при работе с большими коллекциями объектов (обычными для визуализации) может быть сложно вручную обрабатывать такой же большой набор анимаций. Кроме того, должно быть легко запускать отдельные процедуры для кодирования визуальных свойств, таких как макет, цвет, размер, форма, и не нужно беспокоиться об обработке анимации. Возможно, вы хотите анимировать изменения или, возможно, хотите статическое обновление. В любом случае вы сможете повторно использовать один и тот же код для присвоения значений..

          Чтобы решить эти проблемы, Flare предоставляет класс Transitioner. Переходники упрощают процесс создания анимации для коллекций объектов. Вы просто берете объект и по очереди устанавливаете желаемые свойства. За кулисами переходник автоматически сгенерирует и повторно использует необходимую анимацию для моделирования полной анимации. Кроме того, если анимация нежелательна, переходник может быть настроен на немедленную установку значений свойств. Короче говоря, переходник обеспечивает уровень косвенного обращения для обновления свойств объекта – эти обновления могут быть собраны, а затем анимированы или применены немедленно..

          Вот простой пример использования переходника в нашем учебном приложении..

          var t: Transitioner = новый переходник (2);

          для (var j: int = 0; j

          В этом примере все спрайты в контейнере анимируются в новое случайное положение y и случайный коэффициент вертикального масштабирования. Сначала мы создаем новый переходник, который должен создать 2-секундную анимацию. Затем мы перебираем каждый дочерний спрайт и с помощью переходника устанавливаем свойства Tween..

          Оператор $ Transitioner указывает, что мы хотим установить целевое значение для входного объекта. По умолчанию либо создается новая анимация, либо для текущего элемента обнаруживается существующая анимация. Затем оператор $ возвращает объект, для которого устанавливается целевое свойство анимации движения..

          Кроме того, переходники можно использовать для создания статических (неанимированных) переходов. Если для свойства непосредственного перехода установлено значение true, он не будет создавать новые анимации. Вместо этого оператор $ просто вернет входное значение. Это означает, что вы можете создавать методы, которые обновляют значения с помощью переходника, а затем позже контролировать, хотите ли вы обновлять эти значения. Стандартный «немедленный» Transitioner извлекается с помощью статического свойства Transitioner.DEFAULT. Таким образом, вам не нужно выделять новый переходник при выполнении немедленных обновлений..

          Переходники широко используются во всем пакете flare.vis, что позволяет дизайнерам визуализации контролировать, какие обновления следует анимировать и как.

          Часть 3: Визуализации

          Загрузка данных

          Базовое представление данных для Flare просто использует встроенные типы данных Flash: Object и Array. Например, таблица данных может быть просто представлена ​​как массив объектов, каждый из которых содержит имена и значения каждого поля данных. Хотя возможны более эффективные представления, этот подход обеспечивает максимальную гибкость, а также использует преимущества существующих соглашений разработки Flash..

          Для загрузки данных во Flash-плеер существует несколько подходов. Простой подход – встроить ваши данные в само приложение. Таким образом, данные загружаются вместе с приложением, что хорошо для статических наборов данных. Например, вы можете использовать объектную нотацию ActionScript, чтобы определить набор данных непосредственно как переменную:

          var data: Array = [

          {я бы:"Q1", продажи: 10000, прибыль: 2400},

          {я бы:"2 квартал", продажи: 12000, прибыль: 2900},

          {я бы:"3 квартал", продажи: 15000, прибыль: 3800},

          {я бы:"4 квартал", продажи: 15500, прибыль: 3900}

          ];

          Однако во многих случаях вам может потребоваться динамическая загрузка данных либо с веб-страницы (вы можете использовать JavaScript в браузере для передачи значений во Flash), либо с сервера в Интернете. Есть много подходов к этому, и вы должны выбрать тот, который лучше всего подходит для вашего конкретного приложения. Например, ActionScript предоставляет дополнительные типы данных и синтаксис для работы с XML-данными с использованием стандарта ECMAScript for XML (E4X)..

          Flare также предоставляет некоторые утилиты для загрузки внешних наборов данных. Он поддерживает загрузку данных с любого сервера в Интернете и преобразование этих данных во внутренние объекты ActionScript. В настоящее время поддерживаемые форматы файлов – это текст, разделенный табуляцией («табуляция», стандартный формат файла для экспорта данных из таких инструментов, как Excel)., Обозначение объекта JavaScript («Json», распространенный формат данных для веб-приложений) и GraphML («Graphml», формат XML для представления сетей с узлами и ребрами).

          Удаленные данные загружаются вспышкой с использованием класса flare.data.DataSource. Вот пример его использования для загрузки файла данных с разделителями табуляции:

          var ds: DataSource = new DataSource (

          "http://flare.prefuse.org/data/test.tab.txt", "вкладка"

          );

          var loader: URLLoader = ds.load ();

          loader.addEventListener (Event.COMPLETE, функция (evt: Event): void {

          // функция для обработки данных после завершения загрузки

          var ds: DataSet = loader.data как DataSet;

          // теперь что-то делаем с данными…

          });

          У конструктора DataSource есть два обязательных аргумента: URL-адрес набора данных и строка, указывающая формат файла. На данный момент поддерживаемые форматы – это «табуляция» (с разделителями табуляции), «json» (нотация объектов JavaScript) и «graphml» (GraphML)..

          Для наборов данных, схема которых (имена и типы данных полей) могут быть неясными, существует также третий необязательный аргумент конструктора, который принимает тип DataSchema. См. Классы flare.data.DataSchema и flare.data.DataField для получения дополнительной информации. Схема может быть полезна для обеспечения того, чтобы значения данных были правильно названы (например, для файла с разделителями табуляции, в котором отсутствует строка заголовка) и преобразованы в правильные типы данных (например, для данных JSON, в которых числовые значения были заключены в кавычки).

          Для фактической загрузки данных вызывается метод загрузки DataSource, возвращающий экземпляр flash.net.URLLoader. Загрузчик можно использовать для отслеживания хода загрузки (например, если вы хотите предоставить индикатор выполнения) и выдает событие уведомления, когда загрузка завершена. В приведенном выше примере мы добавляем прослушиватель событий, который будет получать уведомления о завершении загрузки. DataSource автоматически проанализирует входные данные, отобразит их в объекты ActionScript и сохранит результаты в объекте flare.data.DataSet. Класс DataSet может представлять как табличные, так и сетевые (узел / край) данные..

          Создание и управление визуальными объектами

          Теперь мы хотели бы визуализировать набор данных. Для этого мы сопоставляем отдельные записи данных с визуальными элементами. Flare предоставляет набор визуальных объектов для представления данных. Вот обзор основных классов, предоставляемых пакетом flare.vis.data..

          • DataSprite: базовый класс для спрайтов, которые визуально представляют данные. DataSprite является подклассом класса Sprite Flash Player. DataSprite включает свойство данных, в котором хранится кортеж данных (объект ActionScript), а также предоставляет дополнительные визуальные переменные, помимо тех, которые поддерживаются базовыми спрайтами, включая поля цвета, формы и размера, а также поддержку установки позиций в полярных координатах..
          • NodeSprite: экземпляр DataSprite, представляющий узел. Это тип по умолчанию, используемый для визуализации данных. Экземпляры NodeSprite могут быть связаны в сети или древовидной структуре с помощью экземпляров EdgeSprite..
          • EdgeSprite: экземпляр DataSprite, представляющий край. EdgeSprite соединяет два NodeSprites. Узлы доступны через исходные и целевые свойства. EdgeSprites используются для создания графиков и деревьев, а также для представления линий, например, на графиках временных рядов..

          Обычно NodeSprites и EdgeSprites создаются и хранятся в классе flare.vis.data.Data, который управляет всеми визуальными элементами для одной визуализации. Класс Data предоставляет методы для создания новых визуальных объектов для кортежей данных и для представления структуры графа..

          Класс Data также предоставляет методы для просмотра и обновления содержащихся элементов данных. Свойства узлов и ребер возвращают списки узлов и ребер, содержащихся в данных. Каждый из этих списков включает метод посещения, который позволяет вам передать функцию, которая затем будет вызываться с каждым узлом или ребром. Кроме того, методы setProperty и setProperties позволяют одновременно устанавливать значения свойств для всех узлов или ребер. Эти методы необязательно принимают Transitioner в качестве аргумента, поэтому вы можете анимировать обновление свойства..

          Например, следующий код приводит к односекундной анимации, в которой цвет линии для всех узлов установлен на синий. (Обратите внимание, что шестнадцатеричная нотация для значений цвета DataSprite включает альфа-канал, а также красный, зеленый и синий каналы).

          data.nodes.setProperty ("lineColor", 0xff0000bb, новый переходник (1)). Play ();

          Списки узлов и краев также поддерживают значения свойств по умолчанию, используя методы setDefault, setDefaults, removeDefault и clearDefaults. Значения по умолчанию будут установлены на вновь созданном узле или грани с использованием методов addNode или addEdgeFor класса Data..

          Класс Tree – это подкласс Data, специализированный для представления дерева, а не общего графа. Класс Data поддерживает автоматическое создание экземпляра Tree путем вычисления остовных деревьев общего графа. В качестве параметра можно передать ряд методов создания связующего дерева, в том числе алгоритмы «в ширину», «сначала в глубину» и «минимальное связующее дерево». Эти вычисления выполняются с использованием класса flare.analytics.graph.SpanningTree..

          Чтобы создать объекты узла и ребер, мы используем методы addNode и addEdgeFor..

          • addNode принимает кортеж входных данных (объект) и создает новый NodeSprite для визуализации этих данных..
          • addEdgeFor берет два существующих NodeSprites и добавляет соединяющий их EdgeSprite. Метод также необязательно исключает кортеж данных (опять же, объект, представляющий любые поля данных) для края..

          Вот простой пример создания NodeSprites для набора табличных данных, предполагая, что у нас есть массив объектов данных:

          список переменных: массив; // массив уже загруженных нами объектов данных

          var data: Data = new Data (); // новый контейнер данных

          для каждого (var o: объект в списке) {

          data.addNode (o);

          }

          Результатом является объект Data, заполненный визуальными экземплярами DataSprite (узлами или ребрами)..

          На практике не всегда нужно заполнять визуализированные данные вручную. Чтобы создать объект Data для визуализации загруженного набора данных, вместо этого часто можно использовать удобный метод. Функция Data.fromArray () создает экземпляр Data для табличных данных, хранящихся в виде массива объектов ActionScript, а метод Data.fromDataSet () аналогичным образом создает экземпляр Data из загруженного объекта DataSet..

          Построение визуализации

          Теперь давайте соберем все это вместе, чтобы приступить к визуализации. Класс Visualization представляет одну визуализацию, включая визуальные метки (хранящиеся в экземпляре Data) и оси. Чтобы создать визуализацию, мы загружаем набор данных, добавляем данные в визуализацию и настраиваем операторы, которые определяют, как визуализировать данные. Вот пример. Сначала просмотрите код, затем прочтите, чтобы понять, что делает каждая часть..

          упаковка {

          import flare.data.DataSet;

          import flare.data.DataSource;

          import flare.scale.ScaleType;

          импорт flare.vis.Visualization;

          import flare.vis.data.Data;

          import flare.vis.operator.encoder.ColorEncoder;

          import flare.vis.operator.encoder.ShapeEncoder;

          import flare.vis.operator.layout.AxisLayout;

          импортировать flash.display.Sprite;

          import flash.events.Event;

          import flash.geom.Rectangle;

          import flash.net.URLLoader;

          [SWF (ширина ="800", высота ="600", backgroundColor ="#ffffff", frameRate ="30")]

          Открытый класс Tutorial расширяет Sprite

          {

          частный var vis: Визуализация;

          общедоступная функция Учебник ()

          {

          loadData ();

          }

          частная функция loadData (): void

          {

          var ds: DataSource = new DataSource (

          "http://flare.prefuse.org/data/homicides.tab.txt", "вкладка");

          var loader: URLLoader = ds.load ();

          loader.addEventListener (Event.COMPLETE, функция (evt: Event): void {

          var ds: DataSet = loader.data как DataSet;

          визуализировать (Data.fromDataSet (ds));

          });

          }

          частная функция визуализировать (данные: данные): void

          {

          vis = новая визуализация (данные);

          vis.bounds = новый прямоугольник (0, 0, 600, 500);

          vis.x = 100;

          vis.y = 50;

          addChild (vis);

          vis.operators.add (новый AxisLayout ("дата дата", "data.age"));

          vis.operators.add (новый ColorEncoder ("data.cause", Data.NODES,

          "lineColor", ScaleType.CATEGORIES));

          vis.operators.add (новый ShapeEncoder ("data.race"));

          vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2});

          vis.update ();

          }

          }

          }

          Давайте посмотрим на каждый метод.

          Конструктор прост: он просто вызывает метод loadData.

          Метод loadData создает новый источник данных и загружает его с помощью методов, описанных ранее. В данном случае набор данных – это сообщения об убийствах в округе Лос-Анджелес в 2007 году, хранящиеся в формате с разделителями табуляции. По завершении загрузки загруженные кортежи данных добавляются в экземпляр Data с помощью вспомогательного метода fromDataSet. Под капотом это приводит к созданию NodeSprites для визуализации каждого элемента данных. Наконец, вызывается метод визуализации.

          Метод visualize настраивает визуализацию. Вот что происходит на каждом этапе:

          • Часть 1: Инициализация
          • Для данных создается новая визуализация.
          • Мы устанавливаем границы для визуализации. Это определяет область макета.
          • Мы устанавливаем координаты x и y нашей визуализации и добавляем визуализацию в список отображения..
        • Часть 2: Указание визуальных кодировок

          • Мы используем макет оси, помещая «дату» на ось x и «возраст» на ось y. Оператор AxisLayout также автоматически настраивает оси для визуализации. Мы используем синтаксис «data.date» для обозначения переменных данных, поскольку они находятся в свойстве данных NodeSprite..
          • Мы добавляем цветовую кодировку, чтобы цвет линии узла представлял переменную «причина» (причина смерти). Мы также сообщаем кодировщику цвета, что значения переменной «причина» представляют категории (ScaleType.CATEGORIES). Кодировщик цветов будет использовать эту информацию для автоматического выбора подходящей цветовой палитры. Как мы вскоре увидим, вы также можете предоставить свою собственную цветовую палитру..
          • Мы добавляем кодировку формы, чтобы форма объекта представляла «расу» жертвы..
          • Мы устанавливаем свойства по умолчанию – мы устанавливаем цвет заливки узлов на полную прозрачность и устанавливаем ширину линии на 2 пикселя..
          • Наконец, мы вызываем метод обновления. Это запускает все операторы по порядку.
          • Обновление визуализации

            После создания визуализации мы можем обновить ее. Например, мы хотели бы изменить цветовую кодировку, чтобы вместо этого отображать пол человека..

            Во-первых, давайте добавим в класс новый метод:

            частная функция colorByGender (): void

            {

            var color: ColorEncoder = ColorEncoder (vis.operators [1]);

            color.source = "data.sex";

            color.palette = новая цветовая палитра ([0xffff5555, 0xff8888ff]);

            vis.update (новый Transitioner (2)). play ();

            }

            Этот способ:

            1. Извлекает второй оператор (оператор с индексом 1) и преобразует его в ColorEncoder.
            2. Изменяет свойство источника для цветового кодировщика, чтобы использовать переменную data.sex
            3. Устанавливает новую цветовую палитру (в данном случае красный для женщин, синий для мужчин – порядок цветов совпадает с алфавитным порядком меток)
            4. Анимирует изменение, вызывая update с Transitioner, установленным для двухсекундной анимации. Метод vis.update возвращает Transitioner, поэтому мы можем вызвать play для возвращаемого значения обновления. (Примечание: вы также можете опустить Transitioner и просто передать число 2 в качестве аргумента для обновления. Новый Transitioner будет создан автоматически и возвращен.)

            Теперь нам нужно подключить приложение, чтобы мы могли интерактивно запускать обновление. Для этого добавьте в конструктор следующий код:

            // добавляем интерактивную метку

            кнопка var: TextSprite = новый TextSprite ("Цвет по полу");

            addChild (кнопка);

            button.x = 710;

            button.y = 50;

            button.buttonMode = true;

            button.addEventListener (MouseEvent.CLICK,

            функция (evt: MouseEvent): void {colorByGender (); }

            );

            Этот код:

            1. Создает новую текстовую метку (TextSprite – вспомогательный класс из пакета flare.display)
            2. Добавляет этикетку в приложение и устанавливает ее позицию
            3. Устанавливает для buttonMode значение true (при наведении курсора мыши на ярлык появляется курсор в виде руки)
            4. Добавляет прослушиватель событий, который запускается при нажатии на метку. Мы добавляем функцию обратного вызова, которая вызывает метод colorByGender.

            Чтобы приведенный выше код работал, нам нужно включить эти дополнительные операторы импорта в верхнюю часть файла:

            import flash.events.MouseEvent;

            импорт flare.animate.Transitioner;

            import flare.display.TextSprite;

            import flare.util.palette.ColorPalette;

            Теперь у вас должна быть возможность скомпилировать и запустить приложение. При нажатии метки «Цвет по полу» изменение цветовой кодировки должно быть анимировано..

            Следующие шаги

            Приведенные выше примеры показывают основы Flash и библиотеки Flare, но есть еще много функций, которые еще предстоит изучить. В дальнейшем мы рекомендуем (а) изучить документацию по API Flash и Flare, чтобы получить представление обо всех доступных классах, и (б) покопаться в демонстрациях Flare, чтобы увидеть, как те же принципы, показанные здесь, можно использовать для построения числа других визуализаций. Или, еще лучше, покопайтесь в исходном коде Flare, чтобы узнать, что происходит под капотом.

            Чтобы помочь в этом процессе, вот общий обзор подпакетов в flare.vis:

            • flare.vis.axis: предоставляет оси, метки и линии сетки
            • flare.vis.controls: обработчики взаимодействия для выбора, масштабирования и т. д.
            • flare.vis.data: визуальные объекты, представляющие элементы данных
            • flare.vis.data.render: подключаемые модули визуализации, отрисовывающие DataSprites
            • flare.vis.events: типы событий, используемые во фреймворке flare
            • flare.vis.legend: представляет легенды для описания визуальных кодировок
            • flare.vis.operator: строительные блоки для определения визуализаций
            • flare.vis.palette: палитры для значений цвета, формы и размера
            • flare.vis.util: общие служебные классы

            Теперь вы должны знать достаточно, чтобы понять демо в пакете flare.demos. Не стесняйтесь играть, изменять, копировать, вставлять и развивать демоверсии, чтобы лучше понять, как работают Flash и Flare..

            Ссылки

            Загрузки

            Инструменты

            Другие технические руководства

            • Руководства по конфиденциальности
            • Биткойн-игры
            • Обзоры биржи

            Поддерживать

            Mike Owergreen Administrator
            Sorry! The Author has not filled his profile.
            follow me