Создание новых функций для Flash с JSFL

В этом введении к языку сценариев JavaScript для Flash (JSFL) вы узнаете, как автоматизировать повторяющиеся задачи и добавлять новые команды в среду разработки Flash.

Вступление

Мы начнем с изучения JSFL в целом, посмотрим, что он может делать, а затем перейдем к его полезному применению: команде, которая может превратить текст в кнопку (с правильно заданной областью нажатия) одним щелчком мыши.

Шаг 1. Создайте файл JSFL

Откройте Flash и нажмите « Файл»> «Создать» . Выберите файл Flash JavaScript из списка и сохраните новый документ как example.jsfl в любом месте.

JSFL — это простой текстовый формат, поэтому вы можете открывать файлы JSFL в любом текстовом редакторе.

Шаг 2: Создайте FLA

Нам понадобится пустой FLA для тестирования наших сценариев, поэтому создайте один из них. Вам даже не нужно его сохранять; это только для тестирования.

Шаг 3: написать сценарий

В своем файле JSFL вставьте следующий код:

Даже если вы никогда не использовали JavaScript раньше, синтаксис достаточно похож на ActionScript, чтобы вы могли догадаться, что он делает:

• fl является объектом, представляющим само приложение Flash
• getDocumentDOM () возвращает текущий открытый FLA
• addNewOval () рисует овал для FLA с параметрами, заданными

Шаг 4: Запустите скрипт

Если вы редактируете JSFL во Flash, запустите скрипт, нажав большую треугольную кнопку Play на панели инструментов. В противном случае дважды щелкните файл JSFL на вашем компьютере, и он автоматически запустится во Flash.

Вы должны увидеть круг, используя любые цвета, которые вы выбрали. Большой! Теперь, когда вам нужно нарисовать круг размером 50px с центром в (125, 125), вам даже не нужно его рисовать.

Шаг 5: Сделайте сценарий более кодовым

Это довольно скучный результат. Давайте сделаем вещи более сложными:

Да, в JavaScript тоже есть циклы for . На этот раз запустите JSFL, переключившись на FLA, нажав « Команды»> «Выполнить команду» , а затем найдите файл скрипта на жестком диске.

Проверьте результат:

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

Шаг 6: Трассировка

Всегда полезно иметь команду trace (), когда вы тестируете что-то новое. В JSFL у нас есть функция fl.trace () , которая берет одну строку (в отличие от AS3 trace () , которая может принимать несколько одновременно) и выводит ее на панель «Вывод». Попробуйте это:

Результат:

Шаг 7: добавьте команду в меню

Сохранять JSFL открытым или просматривать его всякий раз, когда вы хотите его использовать, было бы настоящей болью. Вместо этого вы можете добавить его в меню «Команды», чтобы он находился всего в нескольких щелчках мыши. (И как только он появится, вы даже можете назначить ему сочетание клавиш.)

Все, что вам нужно сделать, это переместить файл example.jsfl в папку Flash \ Command \. Расположение этой папки зависит от вашей ОС, хотя:

• Mac OS X: [жесткий диск] / Пользователи / имя пользователя / Библиотека / Поддержка приложений / Adobe / Flash CS3 / язык / Конфигурация / Команды
• Windows XP: [загрузочный диск] \ Documents and Settings \ имя пользователя \ Local Settings \ Application Data \ Adobe \ Flash CS3 \ language \ Configuration \ Commands
• Windows Vista: [загрузочный диск] \ Users \ имя пользователя \ Local Settings \ Application Data \ Adobe \ Flash CS3 \ language \ Configuration \ Commands
• Windows Vista (alt): [загрузочный диск] \ Users \ имя пользователя \ AppData \ Local \ Adobe \ Flash CS3 \ language \ Configuration \ Commands
• Windows 7: [загрузочный диск] \ Users \ имя пользователя \ Local Settings \ Application Data \ Adobe \ Flash CS3 \ language \ Configuration \ Commands
• Windows 7 (alt): [загрузочный диск] \ Users \ имя пользователя \ AppData \ Local \ Adobe \ Flash CS3 \ language \ Configuration \ Commands

Папка с именем пользователя будет соответствовать имени, которое вы используете для входа, язык будет меняться в зависимости от того, что вы выбрали при установке Flash (для англоязычных пользователей это, вероятно, будет en-us или просто en ), и если вы используете более новая версия Flash, чем CS3, эта папка тоже изменится.

После сохранения в этой папке он появится в меню «Команды», используя имя файла JSFL:

Просто нажмите, чтобы запустить его. Теперь вы можете отредактировать файл JSFL в папке Commands, чтобы ускорить процесс.

Шаг 8: Получить информацию из FLA

JSFL может делать больше, чем просто запускать списки команд. Он также может получать информацию о FLA и ее элементах и ​​принимать решения на основе этой информации.

Например, мы могли бы написать скрипт для отслеживания количества выбранных элементов:

Объект выбора фактически является массивом, каждый элемент которого содержит один из выбранных объектов. Вот почему selection.length дает нам количество выбранных объектов.

Этот простой скрипт дает представление о том, как работает Flash: попробуйте нарисовать несколько кругов, выбрать их все и запустить скрипт. Он вернет «1». Создайте несколько текстовых полей, выделите их все и запустите скрипт, и он вернет число, равное количеству текстовых полей.

Шаг 9: найдите тип объекта

Мы также можем получить информацию об объектах внутри этого выделения:

У меня есть два текстовых поля и несколько кружков, и этот скрипт выводит:

Полный список объектов и функций можно найти в книге « Расширение Flash» в Adobe LiveDocs.

Шаг 10: Изменить объекты на сцене

Вот простой скрипт, который раздавливает все выбранные фигуры на сцене — но не более того:

Перед:

…и после:

Шаг 11: Обзор Buttonize

У вас есть основы. Теперь пришло время для этого урока.

Мы собираемся создать скрипт, который берет текстовое поле и превращает его в кнопку. Я пройдусь по шагам, которые этот сценарий будет повторять; начните новый FLA и поместите текстовое поле в середине, затем следуйте:

1. Нажмите на текст
2. Преобразуйте это в символ
3. Перейти в режим редактирования
4. Создание новых ключевых кадров: над, вниз, хит
5. Нарисуйте сплошной прямоугольник, охватывающий текст, чтобы определить область попадания.

Это довольно просто, когда вы видите это в списке так. Но как нам все это сделать в JSFL? Что за сценарий?

Мы можем посмотреть все в LiveDocs , но есть гораздо более простой способ …

Шаг 12: Панель истории

Нажмите « Окно»> «Другие панели»> «История», чтобы открыть панель «История»:

Это все шаги, которые нам нужны. Если бы только они были в JSFL …

Шаг 13: Список панели истории в JSFL

Ах да, они в JSFL. Нажмите эту маленькую кнопку:

… затем нажмите Вид> JavaScript на панели :

Результат:

Это не совсем то, что нам нужно, но дает нам некоторое представление о том, где искать в LiveDocs .

Шаг 14: Скопируйте историю

Щелкните по нужному элементу истории и нажмите на нижнюю часть, чтобы выбрать все промежуточные шаги. Вы можете нажать Ctrl (щелчок на клавиатуре на Mac) по отдельным элементам, чтобы отменить их выделение из этого списка (я удалил несколько ненужных щелчков мыши из моего списка). Затем снова нажмите эту маленькую кнопку меню и выберите « Копировать шаги» . Теперь вы можете вставить их в файл JSFL:

Сохраните это как Buttonize.jsfl.

(В качестве альтернативы вы можете нажать кнопку «Сохранить», чтобы создать файл JSFL в каталоге «Команды», и в этом случае в скрипте будут комментарии, помогающие объяснить каждый шаг.)

Шаг 15: Тестовый скрипт

Давайте проверим сценарий таким, какой он есть сейчас, чтобы мы могли получить хорошее представление о том, что нам нужно улучшить. Запустите другой пустой FLA, создайте текстовое поле (поместите его в другое место, с другим текстом), щелкните его и запустите JSFL.

Это сработало? Мой не имел успеха

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

Шаг 16: Получить размеры текстового поля

К счастью, мы уже знаем, как получить информацию о выбранном элементе. Мы можем догадаться, как будут называться размерные свойства выбранного объекта; давайте попробуем отследить их и посмотрим, правы ли мы:

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

Попробуйте это:

…Ой.

Шаг 17: Сохраняйте информацию до изменения выбора

Что произошло? Хорошо, когда скрипт перешел в режим редактирования, выбор изменился; мы находимся внутри символа кнопки, поэтому мы больше не выбираем его. Остерегайтесь такого рода ошибок при работе с JSFL.

Однако это легко исправить — нам нужно просто сохранить свойства left , top , right и bottom до изменения выбора:

Это сработало? Это сделал для меня!

Шаг 18: Проверьте на возможные ошибки

Что произойдет, если мы запустим команду без выделения текста? Мы получаем ту же ошибку, что и раньше:

Мы должны проверить, выбраны ли какие-либо объекты, прежде чем делать что-либо:

На самом деле, мы можем сделать это лучше … как насчет проверки, было ли выбрано ровно одно текстовое поле ?

Это открывает все виды других вариантов. Если выбрано несколько элементов, вы можете просмотреть их все и превратить все в кнопки. Если выбран объект, который не является текстовым полем, вы можете обращаться с ним по-другому — возможно, ему не понадобится прямоугольник для его формы Hit.

Шаг 19: назовите кнопку после текста

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

Мы знаем, что JSFL для преобразования выделения в символ — это fl.getDocumentDOM (). ConvertToSymbol () благодаря панели «История». Если вы посмотрите на это в LiveDocs, вы обнаружите, что второй параметр (который скрипт панели «История» оставил пустым) называется « name» и описывается так:

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

Бинго! Конечно, мы не знаем, что говорит текст …

Шаг 20: Получить текст

Мы могли бы догадаться:

К сожалению, это возвращает неопределенное . Ах хорошо.

Не беспокойтесь — быстрое сканирование через LiveDocs показывает эту страницу на объекте Text . Там мы можем найти функцию, которую мы ищем: text.getTextString () .

Добавьте это к вашему сценарию:

 var textLeft = fl.getDocumentDOM (). selection [0] .x;
 var textTop = fl.getDocumentDOM (). selection [0] .y;
 var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width;
 var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height;
 var textText = fl.getDocumentDOM (). selection [0] .getTextString ();

 fl.getDocumentDOM (). convertToSymbol ('button', textText, 'top left');

Проверь это.

Фантастический.

Заворачивать

Buttonize — это удобная небольшая команда, которая должна быть доступна, если вам нужно быстро смоделировать пользовательский интерфейс, но это не было целью учебника. Цель состояла в том, чтобы разобраться с JSFL и посмотреть, где его можно использовать. Я надеюсь, что в следующий раз, когда вы столкнетесь с утомительной работой по часам, вы в два раза поймете, как автоматизировать ее с помощью скрипта 🙂