Привет всем! Разговор у нас сегодня пойдёт о JSFL - загадочной аббревиатуре, которая расшифровывается как JavaScript Flash Language. Это своего рода соединения ActionScript и JavaScript. Для чего же он нужен? С помощью этого языка и flash'a можно эффективно решать большинство рутинных дел в программе. С помощью этого языка можно генерировать любое количество fla и swf файлов, естественно меняя их содержание по своему желанию. Сегодняшняя задача звучит так: необходимо сделать множество swf-роликов, в каждом из которых будет появляться картинка из прозрачности, и спустя какое-то время уходить в неё же. Размер документа должен соответствовать размеру картинки.
Казалось бы, что же тут сложного. 5 минут и ролик готов. Да, но если картинок штук 200, то вся работа может затянуться часов эдак на 17. Сегодня мы поговорим о том, как сделать эту же работу всего за 10 минут. Причём все картинки, причём нам даже не нужно будет открывать Adobe Flash (но установлен он должен быть). Как? Смотрите ниже.
Прежде всего, пару слов о JSFL. Это специальный язык программирования, который позволяет создавать файлы с расширением .jsfl. Эти файлы могут создаваться в любом текстовом редакторе, и представляют собой набор функций, переменных и методов, которые позволяют управлять самой программой Adobe Flash. То есть, например, пишите вы в файле "Открыть программу, создать новый документ, вставить картинку, сделать её мувиклипом, создать Motion Tween с 1 по 20-й кадр, изменить прозрачность мувиклипа". И так далее. Естественно, на специальном языке. И программа автоматически сама выполняет эту задачу за несколько секунд.
На языке JSFL можно описать практически любую операцию в программе, которую вы совершаете вручную. Рисование, преобразование, даже ввод ActionScript'a. Всё это можно прописать и размножить на нужное количество раз. Таким образом, вы избавляете себя от рутинных дел, написав и заточив один раз под себя автоматизированный код. Кстати, о языке. Подробное описание всех его функций, синтаксиса и методов есть в самой программе Adobe Flash. Help - Extending Flash - Objects - всё ищите там.
Ну, а сегодня как мы обсудили выше, мы займёмся автоматизацией эффекта появления картинки из прозрачности. Сформулируем задачу так. У нас есть папка с каким-то количеством изображений в формате JPG. Нужно каждое изображение вставить в ролик, подогнать размеры ролика, сделать эффект появления и ухода в прозрачность и опубликовать. В итоге получается несколько десятков fla, swf, html файлов.
1. Сначала накидаем план на русском языке, что мы собственно будем делать по этапам.
Зададим основные настройки: откуда берём картинки и куда будем сохранять готовые ролики.
Создадим новый документ и импортируем туда картинку из папки
Преобразуем картинку в мувиклип и поставим на нулевые координаты
Изменяем размеры документа, чтобы они соответствовали размерам картинки
Изменим размеры документа, чтобы они соответствовали размерам картинки
Создаём дополнительные ключевые кадры
Меняем прозрачность мувиклипа
Применяем MotionTween к кадрам
Собственно, вот и всё. Теперь осталось всё это представить в виде кода. К сожалению, места в статье мало, поэтому попробую по верхам. Кому нужно будет подробнее, обращайтесь либо на наш форум, либо непосредственно в flash-школу - всё объясню.
2. Теперь начинаем писать код. Для этого откройте блокнот или любой другой текстовый редактор (я, например, пользуюсь NotePad++). И сохраните новый документ желательно в новую папку как файл с расширением .jsfl. Собственно теперь для выполнения этого файла, нужно будет открыть папку с ним и его запустить. Дальше всё само автоматически произойдёт (откроется Adobe Flash, исполнится программа, если нужно, то закроется Adobe Flash).
3. Подготовительные работы все закончены, теперь нужно приступать собственно к реализации нашей идеи по поводу анимационных роликов из картинок из папки. Ещё раз: все команды, функции и методы, которые будут использованы ниже подробно описаны в справке к программе Adobe Flash Help - Extending Flash - Objects - здесь опишу только по верхам.
path_for_saving="G:/FlashExp/"
var folderURI = "file:///G:/FlashExp/images"
var fileList = FLfile.listFolder(folderURI, "files")
4. Как вы видите, первой строчкой мы задаём путь для сохранения готовых роликов. Лучше всего прописать полный путь, с ним будет работать на все 100%. Вторая строчка - папка, откуда берутся картинки для анимационных роликов. Ну и третья строчка определяет переменную, в которую собраны все названия файлов в этой папке. Да, они собираются автоматически. Настоятельно рекомендую класть туда только файлы формата .jpg, так как проверку на расширение файла я не делал, если есть желание - сделайте. Едем дальше, теперь начинаем цикл, в котором будем писать весь последующий код. Весь следующий код до конца будет применяться к каждому файлу.
for(xx=0; xx<fileList.length; xx++){ //создаём цикл
fl.createDocument(); // создаём новый документ
var currentDoc = fl.getDocumentDOM(); // создаём переменную, которая олицетворяет документ
currentDoc.asVersion=2 // ставим верную версию ActionScript в настройках документа
currentDoc.importFile(folderURI+"/"+fileList[xx]); // импортируем заданный циклом файл из заданной в самом начале папки
5. В принципе в коде всё прокомментировано. Создаём цикл, далее с помощью функции createDocument() создаём новый документ в программе (это соответствует нажатию на иконку новый документ). Определяем переменную, которая будет олицетворять документ, ставим вторую версию ActionScript (при желании этот параметр можно заменить на 3 или 1). И импортируем картинку на сцену.
6. Следующий этап - преобразование картинки в мувиклип и перемещение её на нулевые координаты ролика, чтобы мы могли потом сократить физический (по ширине и высоте) размер ролика.
currentDoc.selectAll(); // выделяем картинку, которая на сцене
currentDoc.convertToSymbol("movie clip", "mcSymbolName", "top left"); // преобразовываем её в символ - мувиклип
fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].x=0 // задаём координаты для мувиклипа
fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].y=0
7. После того, как мы сделали мувиклип из картинки и переместили её на нулевые координаты, необходимо изменить физический размер ролика. Чем мы и займёмся далее.
el_width=fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].width // определяем ширину мувиклипа
el_height=fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].height // и высоту
currentDoc.frameRate = 25; // изменяем frame rate для плавной анимации
fl.getDocumentDOM().width=Number(el_width) // задаём размеры ролика
fl.getDocumentDOM().height=Number(el_height)
8. Теперь собственно переходим к самой анимации и для начала сделаем наш мувиклип в первом же кадре прозрачным
fl.getDocumentDOM().getTimeline().insertKeyframe(90); // и вставляем 91-й ключевой кадр
fl.getDocumentDOM().getTimeline().layers[0].frames[90].elements[0].colorAlphaPercent = 0; // меняем в 91-м кадре прозрачность мувиклипа
fl.getDocumentDOM().getTimeline().createMotionTween(0,90); // делаем MotionTween на кадрах от 1 до 91
fl.getDocumentDOM().getTimeline().currentFrame = 0; //переходим обратно на первый кадр
По вышеприведённому коду хочу заметить следующее. Если frame[0], то это не значит что нулевой фрейм, это так обозначается 1-й кадр. layers[0] - под нулевым слоём понимается самый верхний слой. Слои считаются сверху вниз, с нуля.
10. И осталось дело за малым - завершить всю эту эпопею торжественным сохранением документа и публикацией его.
fl.saveDocument(currentDoc, "file:///"+path_for_saving+"pix_motion_flash"+xx+".fla"); // сохраняем документ с порядковым номером для каждого ролика
currentDoc.publish(); // публикуем swf и html в зависимости от настроек
Вот и всё собственно. То, что получилось - смотрите ниже. Таких роликов стало столько же, сколько было файлов в изначальной папке. Если что непонятно - обращайтесь к нам на форум. Также существует большое количество разнообразных вариантов выполнения данной задачи. Один из них, все анимации картинок собрать в одном файле, чтобы первая картинка сменяла вторую, вторая третью, и так далее до девяносто второй, которую сменяет первая. Это вам в качестве домашнего задания - сделать такой файл .jsfl. Ну, а готовый вариант такого файлы вы, как всегда, сможете скачать в нашей Школе Флэша.
ВНИМАНИЕ: Вы можете скачать исходник к данному уроку и самостоятельно разобраться что, куда и сколько раз. Исходники всех уроков выложены в Школе Флэша, которая располагается на портале RusForumz.com. Условия доступа в Школу Флэша
