Максим «Slon_vsapogah» Качуровский

Flash, Flex и много ActionScript

Рубрика: Flash

Debug mode для FDT 3

Постоянная ссылка 2007-11-16 18:51 , Рубрики: Development, Flash, Flex, ActionScript 3.0

В FDT 3 очень удобно работать, но в нем нет дебаг-режима. Способ дебагить, работая в FDT:

  • Делаем две копии Eclipse:
    1. В одной установлен Flex Builder Plugin (далее - Flex)
    2. В другой - FDT 3 (далее - FDT)
  • Во Flex создаем произвольный проект
    • Добавляем в него папку нашего проекта через Link to the folder in file system
    • Заходим в Run -> Open Debug Dialog…
    • Заводим новый профиль во Flex Application
    • Вкладка Main:
      • Выбираем наш пустой проект, его главный файл
      • URL or path to launch - убираем галочку с Use defaults и прописываем во все три поля путь к HTML-обертке нашего главного проекта. У меня это выглядит как “C:\projects\AS3_WS\Portal\bin\Main.html”
    • Вкладка Source:
      • Добавляем папки с кодом главного проекта (пути - абсолютные). У меня это “C:\projects\AS3_WS\Portal\src\” и “C:\projects\AS3_WS\Portal\lib\”

Все. Жмем F11, запускается наш FDT-билд с дебагом внутри Flex. Расставляем breakpoints во Flex, запускаем - работают! Стек вызовов, все дела. Ура!

Bookmark this article at …

3 комментариев » • Отправить трекбек »

Жизнь после Flash CS3

Постоянная ссылка 2007-10-28 00:41 , Рубрики: Development, ActionScript 2.0, Flash, ActionScript 3.0

Работая во Flash CS3

Путь Flash-разработчика чаще всего начинается со среды разработки Flash IDE. Однако со временем начинаешь понимать, что все должно бы быть лучше:

  • Редактор кода без настоящей системы подсказок
  • Вылавливание багов только процессе публикации
  • А компилять средний проект надо секунд 10
  • И дай Бог чтобы у Вас все было хорошо с датами сохранения документов (+ еще несколько других неприятных багов)
  • Даже если Вы захотите разобраться с Data Binding в AS 3.0 - у вас он не заработает как во Flex

    Если попытаться подключить классы из Flex, которые за это отвечают, то он не заработает все равно - компилятор в IDE не поспринимает аттрибуты [Bindable]

  • И просто Flash IDE создана не для того - в ней неудобно писать код

Что сдерживает переход к какому-либо более совершенному способу разработки:

  • Порог осноения недостаточно знакомой/новой среды (Flex Builder, FDT)
  • Там нет таймлайна! 88|
  • Перспектива работать в более чем одной среде (анимацию все равно придется делать во Flash)
  • Придется писать больше кода (?)
  • И так сроки горят?

Как оказывается (проверено на себе), потери времени действительно имеют место (особенно в первый день работы). Однако очень быстро начинаешь делать все очень-очень быстро и получаешь от этого большое удовольствие. Flex 2 / Flex 3 Beta 2, конечно, тоже не безупречны, но по сравнению с Flash CS3 IDE - просто рай.

Разработка - Flex Builder 3 Beta 2

Эту среду Вы можете скачать бесплатно. Также понадобится установить Flash Component Kit - расширение для Flash. Вот как выглядит работа в общих чертах:

  • Рисуем/анимируем в Illustrator, Photoshop. Импортируем во Flash (за исключением растровых картинок).
  • Разделяем графику и анимацию на логические части - с мыслью испльзовать их как стандартные компоненты во Flex.

    Автоматические подсказки не покажут Вам, что находится внутри такого “импортированного из Flash” компонента, однако это можно делать (надо знать, что где лежит). AS 3.0 код также работает - например, класс SelectedButton, прилинкованный к MovieClip и реализующий кнопку с нажатым состоянием.

  • Выбираем в библиотеке Flash-документа MovieClip-ы, которые будут нужны во Flex. Используем появившуюся после установки Kit’a функцию Commands -> Make Flex Component

    О том, что эта команда делает, можно почитать в доках.

  • Для нас сейчас главное - это то, что теперь при публикации появляется .SWC файл. Соберем все такие файлы и положим в отдельную папку внутри Flex-проекта, а лучше - назначим путь публикации из всех Flash-документов в ту папку (я завел внутри проекта две папки - assetsSrc и assets)

Вот и все. Flex будет автоматически отслеживать изменения в той папке и пересобираться (что важно - при этом ему не нужно компилировать ваши многочисленные .fla). Если вы опубликовали символ MainBackground (это должно быть именем класса в Linkage во Flash), то автоматическая подсказка его покажет и вставит за Вас import …;. Вот, что мы получаем:

XML:

<local:MainBackground id="assets"></local>

Обращение к assets в коде там же:

  1.     // Подписываемся на нажатие на кнопку
  2.     assets.myButton.addEventListener(MouseEvent.CLICK, clickHandler);
  3.  
  4.     // Например, подписываемся на событие,
  5.     // которое раздает наш класс SelectedButton
  6.     // который мы прилинковали ко
  7.     // кнопке mySelectedButton во Flash
  8.     assets.mySelectedButton.addEventListener(MouseEvent.CLICK, clickHandler);

В итоге мы отделили мух от котлет - рисуем в графическом редакторе, пишем код в настоящем редакторе кода. Примерно такой подход я сейчас использую. Доволен! :)

Bookmark this article at …

8 комментариев » • Отправить трекбек »

Динамическая загрузка шрифтов - Flash CS3

Постоянная ссылка 2007-07-21 09:20 , Рубрики: Development, Flash, ActionScript 3.0

Разобравшись в длиннющем посте немецкого флешера решил его перевести и немного сократить. К Flex это не относится.

Задача: динамически загружать и использовать встроенные шрифты (embedded fonts) в Flash CS3 - Flash Player 9. Для Flash Player 8 и более ранних - Shared Fonts Manager (отдельное удовольствие :) ).

Исходный код к этому посту.

Что мы имеем? Класс Font, оттуда нам понадобятся функции enumerateFonts(Boolean):Array и registerFont(Class):void а также свойства fontName:String и fontStyle:String.

1. Создаем внешний .swf-контейнер для нужного шрифта

Создаем новый .fla для ActionScript 3.0. В библиотеке создаем новый шрифт - “New Font…” - в “Name” пишем что угодно (в будущем не пригодится), размер шрифта также не имеет значения. Параметры “Bold", “Italic” и “Bitmap text” а также выбор самого шрифта напрямую определяют вид вашего будущего шрифта.

Далее, выбираем созданный символ в библиотеке и жмем “Linkage…". Выбираем “Export for ActionScript” и “Export in first frame". “Export for runtime sharing” выбирать не надо. Базовым классом оставляем flash.text.Font. Имя класса “Class” будет в будущем играть большое значение, введите его. Создавать сам файл .as с классом необходимости нет, среда сама создаст нужный класс.

В настройках публикации оставляем только компиляцию .swf, публикуем. Один шрифт готов, а этот .fla готов к созданию остальных нужных шрифтов через “Save as…” чтобы не повторять все операции заново а лишь заменить шрифт, и имя класса для него.

2. Создание XML-описания для только что подготовленных шрифтов

Пусть наше основное приложение будет брать список шрифтов из XML-файла:

<?xml version="1.0" encoding="utf-8"?>
<!-- title - имя шрифта для пользователя
	className - то, что вы ввели в поле Class раздела Linkage 
	url - адрес .swf со шрифтом -->
<fonts>
	<font title="Arial (smooth)" className="Arial" url="fonts/Arial.swf"/>
	<font title="Bell MT (smooth)" className="BellMT" url="fonts/BellMT.swf"/>
	<font title="Bodoni MT (smooth)" className="BodoniMT" url="fonts/BodoniMT.swf"/>
	...
</fonts>

Парсить этот XML мы будем в массив объектов типа MyFont:

  1.  
  2. package com.yourname.yourproject.model
  3. {
  4.         public class MyFont
  5.         {
  6.                 public var title:String;
  7.                 public var className:String;
  8.                 public var url:String;
  9.         }
  10. }
  11.  

Делать MyFont наследником Font мне не хотелось т.к. Font олицетворяет уже загруженный и готовый к использованию шрифт, а у нас только описание для вершины в XML-файле. К тому же подобного наследника мы уже имеем - среда создала по одному дочернему классу для каждого шрифта.

3. Загрузим шрифт и будем его использовать

Пусть мы загрузили XML с описаниями, распарсили его в массив объектов MyFont. Загрузим .swf с нужным шрифтом через Loader с указаннием LoaderContext:

  1. loader = new Loader();
  2.  
  3. var req:URLRequest = new URLRequest(usFont.url);
  4. var loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
  5. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
  6. loader.load(req, loaderContext);
  7.  

Важно указать ApplicationDomain.currentDomain - шрифты будут загружаться в текущий домен, откуда мы их и будем забирать.

  1. private function completeHandler(event:Event):void
  2. {
  3.         var fontClass:Class = ApplicationDomain.currentDomain. getDefinition(textEditVO.font.className) as Class;
  4.         Font.registerFont(fontClass);
  5.         var font:Font = new fontClass();
  6.        
  7.         // Теперь шрифт можно смело использовать:
  8.         // tf.embeddedFonts = true;
  9.         // var textFormat:TextFormat = new TextFormat(font.fontName);
  10.         // tf.setTextFormat(textFormat);
  11. }
  12.  

4. Комментарии.

Можно загружать шрифт не в текущий домен ApplicationDomain.currentDomain, а оставлять его в собственном домене. По событию Event.COMPLETE loader.contentLoaderInfo.applicationDomain инициализируется и до нашего шрифта можно добраться:

  1. // myFont:MyFont - нужный шрифт
  2. var fontClass:Class = loader.contentLoaderInfo.applicationDomain. getDefinition(myFont.className) as Class;
  3. var font:Font = new fontClass();
  4. Font.registerFont(font);
  5.  
  6. // шрифт можно использовать:
  7. // tf.embeddedFonts = true;
  8. // ...
  9.  

PS: А нужно ли это вообще?

Вот примеры того, как выглядят встроенные и обычные шрифты у пользователя. В принципе не смертельная (хотя очень заметная) разница на шрифтах размера больше 10px.

Но стоит сделать попиксельный экспорт в случае device font в BitmapData, отослать это на сервер и там мы увидим нечто (в случае embedded все хорошо):

Исходный код к этому посту.

Bookmark this article at …

2 комментариев » • Отправить трекбек »

Runtime embedded fonts in Flash CS3

Постоянная ссылка 2007-07-20 21:16 , Рубрики: Development, Flash, ActionScript 3.0

Со времен Flash 5 многое поменялось, однако загрузка embedded шрифтов по-прежнему не простое занятие. Хороший (правда много букв) пост про это для Flash CS3.

Bookmark this article at …

Оставить комментарий » • Отправить трекбек »

Сохранение изображения из Flash и Flex (ActionScript 3.0)

Постоянная ссылка 2007-07-16 21:09 , Рубрики: Development, Flash, Flex, ActionScript 3.0

Снова понадобилось сохранить труды юзера в виде JPG или PNG файла на сервере, но на этот раз уже не c PHP а с ASP.NET. Я уже собрался поселиться на MSDN для изучения этого вопроса, как вдруг нашлось отличное решение: as3corelib, классы JPGEncoder и PNGEncoder.

Bookmark this article at …

2 комментариев » • Отправить трекбек »

Когда мало места

Постоянная ссылка 2007-05-22 21:36 , Рубрики: Development, Flash

Приходится разбираться с одним дурацким проектом, в котором все организовано по-старине. Во Flash CS3 нашелся удобный способ организовать панельки! Показанным ниже способом у меня получается смотреть отрывки скриптов (stop(); в основном) а также смотреть имена объектов, при это не теряясь в горе слоев.

Bookmark this article at …

1 комментарий » • Отправить трекбек »

Конструктор, часть 1

Постоянная ссылка 2007-05-15 20:33 , Рубрики: Development, ActionScript 2.0, Flash

Начиная с этого поста я попробую коротко и ясно рассказать про интересные аспекты flash-части проекта my.futbolka.ua. Flash 8, AS 2.0.

Сразу скажу, что не открою секретов или “tricks", но возможно мой опыт (и мои ошибки) будут Вам полезны.

Упрощение развертывания и отладки. Описание проблемы.

Для проекта такой длительности (от 100-150 часов) необходимо заранее уменьшить транзакционные расходы, чтобы было легче жить. Конкретно:

  • Как организовать загрузчик (Preloader)
  • Как быстро при рабочей локальной версии сделать рабочую серверную, напр. брать файлы с нужных адресов
  • Как обеспечить комфортную отладку на сервере, в данном случае - отображение trace()

Решение: Local to Global.

Обычно вопросы конфигураций при компилировании решаются командами препроцессора. В AS 2.0 набор команд ограничивается #endinitclip, #include и #initclip, очевидно что они ничего в этом случае не дадут.

В конструкторе футболок в package model есть отвечающий за это класс LinkSet, большинство свойств и функций в нем поставляют адреса для остальных компонент:

  1.  
  2. class model.LinkSet {
  3.         //
  4.         // properties
  5.         //
  6.        
  7.         // local - флаг локальной версии, остальные относятся к отладке
  8.  
  9.         public static var local:Boolean = false;
  10.         public static var viewDebugOrder:Boolean = false;
  11.         public static var debugSaveImages:Boolean = false;
  12.        
  13.         //
  14.         // functions
  15.         //
  16.        
  17.         // Эту функцию использует прелоадер, т.к. адрес загрузки основного клипа тоже меняется
  18.  
  19.         public static function get constructorUrl():String
  20.         {
  21.                 if (local)
  22.                         return "constructorBig.swf";
  23.                 else
  24.                         return "/constructor/constructorBig.swf";
  25.         }
  26.        
  27.         // Адрес для отправки данных: локально не используется
  28.  
  29.         public static function get orderSendUrl():String
  30.         {
  31.                 if (local)
  32.                 {
  33.                         throw new Error("LinkSet::orderSendUrl called local");
  34.                         return null;
  35.                 }
  36.                 else
  37.                 {
  38.                         return "/order.php";
  39.                 }
  40.         }
  41.        
  42.         // Начало, как правило общее для многих путей как локально так и на сервере
  43.  
  44.         public static function get linkBase():String {
  45.                 if (local)
  46.                         return "serverXML/";
  47.                 else
  48.                         return "/engine.php?type=";
  49.         }
  50.  
  51.         // Адрес для типичного запроса - xml с описанием
  52.         // категорий основ (футболки, кепки и т.п.)
  53.        
  54.         public static function getBaseCategoryLink():String {
  55.                 if (local)
  56.                         return linkBase + "bases.xml";
  57.                 else
  58.                         return linkBase + "bases";
  59.         }
  60.  
  61.         // ...
  62. }
  63.  

Доступ ко флагам public - другие компоненты тоже могут их видеть (можно дописать еще кода и сделать эти их read-only).

Прелоадер при компиляции также работает с LinkSet.constructorUrl(), в итоге мы получаем настройку прелоадера и основного клипа одной переменной - LinkSet.local .

Есть способ лучше - сделать загружаемый конфигурационный xml-файл, в котором описать нужные параметры - тогда локальную .swf можно смело заливать на сервер, на котором лежит нужный xml-конфиг.

Об отладке и trace()

Есть разные способы отладки приложения на сервере, меня устроил один из самых простых: устанавливается плагин Flash Tracer для Mozilla Firefox (комментарии к установке от Роста) и окошечко Output из среды разработки фактически перемещается в сайдбар Firefox’а.

Bookmark this article at …

Оставить комментарий » • Отправить трекбек »

Коронарография. UI.

Постоянная ссылка 2007-04-05 22:58 , Рубрики: Development, ActionScript 2.0, Flash, Stories

Пилотная версия

Была создана в момент выбора технологии для реализации данного элемента UI.



Посмотрев на это чудо, мы поняли, что:
  • Т.к. придется добавлять/удалять части сосудов, то схематичное изображение сосудов гораздо лучше с точки зрения разработки и по многим параметрам выигрывает с точки зрения пользователя
  • Не получится все сделать с помощью контекстного меню :)
  • Нельзя показывать всю информацию сразу, т.к. даже в таком урезаном варианте на экране ее уже много

Первая версия

Ее я делал постепенно, не спроектировав изначально всю функциональность и не очень волнуясь по поводу масштабируемости. Результатом стала тупиковая версия, которую пришлось бросить вот почему:

  • Классы были выделены не совсем верно и не были организованны в packages
  • Не было разделения Представления и Логики
  • Схема взаимодействий превратилась из дерева в граф и стала сильносвязной
  • Поэтому код запутался и дальнейшая его разработка стала невозможной


Вторая версия

Она же финальная на данный момент. Создавалась она с “нуля", в ней я постарался учесть все предыдущие ошибки, но опять таки не додумал до конца, так что ближе к концу проект стал снова крениться набок. Вот, что получилось в итоге:

  • Функции разделены между “режимами работы": Сосуды, Топология, Шунты и т.п.
  • Часто используемая информация находится “ближе” к пользователю, чем остальная
  • Все взаимодействия сделаны как можно более наглядными (напр. установка перетоков, ср. с первой версией)


Bookmark this article at …

Оставить комментарий » • Отправить трекбек »

Погнаться за двумя зайцами

Постоянная ссылка 2007-02-07 03:27 , Рубрики: Development, ActionScript 2.0, Flash, Stories

Ускользающие шедевры

Однажды мне предложили сделать диск-архив и в качестве бонуса - очень похожий по функциональности диск по соседней тематике. Первым был диск «Ускользающие шедевры», вторым - «Радиоискусство» (версии без картинок на free-lance.ru).

Из чего должен состоять диск:

  • Заставка
  • Два раздела с простым статическим контентом
  • Один раздел - поиск по базе изображений. Поиск по одному из трех параметров, вывод результатов.

Ускользающие шедевры

Подобный проект можно реализовать практически любым из известных науке способом программирования на ActionScript:

  • Пользоваться фреймами и крепить код к ним
  • Разделить все по символам-классам, в самих классах вести разра