1. Базовые основы Flash
1.1. Что такое Macromedia Flash. Преимущества векторной веб-анимации перед растровой 1.2. Драйвер Shoсkwave. Инсталляция в браузер 1.3. Интерфейс пакета Macromedia Flash. Инструменты, слои, объекты 1.4. Понятие клипа (мувика). Иерархия клипов внутри основного клипа 1.5. Практический пример: Рисуем объекты и размещаем их на разных слоях. Создаем мувики и рисуем схему взаимосвязи между ними; определяем иерархию мувиков.
Macromedia Flash 5
Как вы думаете, реально ли уместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100kb? Сделать так, чтобы эта страница работала одинаково как в Netscape Navigator (NN), так и в Internet Explorer (IE)? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов / техник web-дизайна. Коротко и ясно о том, что это такое. Существуют plug-ins (примочки), которые встраиваются в браузер (web browser), и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях IE и NN эти примочки уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются. В пользу Flash приведу его основные достоинства и статистку Macromedia.
- Маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы, (которые также могут использоваться в страницах Flash), что очень положительно влияет на уменьшение размера страницы и время ее скачивания.
- Устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в IE, так и в NN. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player).
- Мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать "интеллект" для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название "ActionScript") - это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать.
- Красота. Да, да, именно! Flash имеет автоматическую поддержку anti-aliasing (антиалайсинг, сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами.
- Удобство. Создавать страницы во Flash под силу даже ребенку, и, признаюсь, это весьма приятное занятие. А если обладать элементарными навыками дизайна и рисования, открывается весь простор для Вашей фантазии, предоставляемый Flash.
- Распространенность. Flash потихоньку становится стандартом де-факто (см. статистику ниже). В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.
Итак, приступим. Будем считать, что у вас уже есть Flash 5. Программа работает под Windows 95/98/NT/2000. Установить ее очень легко - с этим справится любой, кто установил хотя бы парочку программ в Windows. После установки можете смело заходить в нее, и вот, приблизительно, то, что вы увидите:
Интерфейс Flash 5 очень похож на интерфейс программ Adobe. Он весьма удобен и легок. После некоторого времени работы с программой понимаешь, как хорошо все продуманно и сколько труда разработчики Macromedia вложили в свое детище. Слева находятся панели инструментов. С помощью них можно выбирать инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета. Справа находятся диалоги настройки инструментов, цвета, текста, свойства кадров и объектов. Посередине - рабочая область, где мы будем творить, а над ней шкала времени (Timeline). Во Flash очень интересно рисовать. Этот векторный редактор не похож ни на один из существующих. К сожалению, подробное описание инструментов рисования выходит за рамки данной статьи. Впоследствии, мы можем рассмотреть эти инструменты подробнее. Самый хороший способ чему-то научится - практика при каком-то количестве теории. В качестве практики просто поэкспериментируйте с различными инструментами, а в качестве теории можете прочитать про это в книгах или в Сети. Странички (файлы, анимации - как хотите) Flash принято называть фильмами (Movie), хотя мне больше нравится слово "мультик". Наверное, это оттого, что во Flash имеется шкала времени и, хоть вы и обладаете безграничными возможностями по использованию этой шкалы, ваше творение все равно будет упорядоченно выполнятся во времени. На самом деле, вы можете останавливать, вновь запускать мультик, прыгать с одного кадра на другой, загружать другие мультики и много еще чего. Процесс создания состоит в следующем. Вы создаете так называемый "авторский файл", который имеет расширение .fla, а затем он транслируется в результирующий .swf файл, который уже может быть просмотрен в браузере, обрамлен с помощью HTML, и т.д. Кстати, Flash может записать ваше творение в отдельный исполняемый .exe файл, сгенерировать java-код. И даже сохранить в виде статического GIF изображения.
Давайте попробуем нарисовать первый простой мультик. Нам понадобятся инструменты - "овал" и "выделение" . Выполните следующую последовательность действий:
- Выберите инструмент "овал" и нарисуйте с помощью него овал или круг в левой части сцены.
- Далее выберите инструмент "выделение" и выделите весь овал вместе с кромкой. Для этого либо охватите вашу фигуру прямоугольной рамкой, держа кнопку мыши нажатой, либо два раза быстро щелкните на ней. У вас выделится весь овал.
- Теперь войдите в меню Insert и выберите Convert to symbol (или нажмите F8). В появившемся диалоге выберите селектор Graphic и нажмите ОК:
- Теперь выберите на шкале времени вверху 25-й кадр (просто щелкните по нему мышкой), и выберите меню Insert -> Keyframe (или нажмите F6). Этим вы создадите так называемый "ключевой кадр" на 25-м кадре вашей шкалы времени. У вас должно получиться нечто похожее:
- Выделите теперь ваш кружок (теперь вокруг него возникнет голубая рамка) и переместите его в правую часть рабочей области.
- Вернитесь на шкале времени в 1-й кадр. (В доказательство Вы должны увидеть свою фигуру опять в левой части экрана). Из меню Insert (или из контекстного меню при нажатии правой клавиши мыши на первом кадре) выберите Create motion tween.
Поздравляю! Вы только что сделали очень простой, но уже мультик, во Flash. Выберите Control > Play (или просто нажмите Enter) чтобы просмотреть результат.
- Давайте добавим кое-что в наш мультик. Выберите опять 25-й кадр и выделите вашу фигуру. Войдите в диалог Effect. Если сложно отыскать нужную закладку в диалогах справа, выберите Window > Panels > Effect. В выпадающем списке в этом диалоге выберите Alpha (прозрачность), а появившийся параметр опустите до 0%.
Попробуйте еще раз проиграть ваш фильм. Во Flash можно всего лишь задавать "ключевые точки" анимации, программа сама будет просчитывать промежуточные кадры. Хотя вполне возможна покадровая анимация.
- Последний шаг. Нам нужно оттранслировать наше творчество в .swf файл и сгенерировать HTML файл, который загружал бы мультик в браузер. Это можно сделать, выбрав File > Publish (или нажав Shift-F12).
Теперь можно открыть созданный вами HTML файл в браузере. Это можно сделать даже из Flash, выбрав File > Publish Preview > HTML (или нажав F12). При этом Flash воспользуется браузером, установленным по умолчанию. Вот, вкратце, цикл создания простой сценки во Flash. Содержание (и вообще, написание) будущих статей на тему Flash зависит от ваших откликов. Я искренне надеюсь на, что в ближайшем будущем в Рунете (если называть так российскую часть Интернета) появятся достойные ресурсы по Flash и буду рад поделится своим опытом.
2. Стандартная векторная анимация
2.1. Движения. Motion tweening, Shape twining. 2.2. Эффекты и альфаканалы 2.3. Маски 2.4. Движение по направляющим слоям (guide layers) 2.5. Практический пример: Создаем различные анимации и эффекты стандартными средствами.
Слои
В компьютерной графике этот инструмент используется очень часто. Представьте, что вы рисуете на прозрачных листах, а потом накладываете их друг на друга. То, что находится на верхних слоях, закрывает содержимое нижних слоев. Слои можно делать невидимыми и/или недоступными, чтобы облегчить редактирование сцены в целом. Во Flash есть пара особенных типов слоев: слои, содержащие траектории движения и слои - маски. Про первые мы поговорим ниже, обсуждение же вторых выходит за рамки данной статьи. Есть достаточно большое количество приемов, в которых используются слои, но во Flash без них просто нельзя обойтись по одной важной причине: в один момент времени для каждого объекта анимации нужен отдельный слой. Объектом анимации считается фигура (shape) или символ (symbol).
Анимация
Теперь, когда вы уже знакомы с основными понятиями, необходимыми нам для создания анимации, можно приступать к рассмотрению непосредственно предмета данной статьи. В начале статьи мы определили, что существует два метода анимации - покадровый и путем создания промежуточных кадров. Итак:
Покадровая анимация
Это анимация, полностью составленная из ключевых кадров. Т.е. вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение). На временной шкале покадровая анимация выглядит следующим образом:
Рис 2. - Покадровая анимация
Достоинства:
Покадровая анимация дает вам, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться. Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash). И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.
Недостатки:
Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры. На деле, у опытных Flasher-ов, такая ситуация практически не встречается. Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Анимация с построением промежуточных кадров (tweened motion)
При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что вы рисуете объект, потом на другом кадре производите изменения, о которых мы поговорим ниже, и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и вы получаете плавную анимацию. Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Скорость фильма можно изменить здесь: Modify->Movie:, Ctrl+M - там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду. Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров. Во Flash существует два варианта построения промежуточных изображений - motion tweening (построение анимации на основе модификации символов) и shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне. Первый используется чаще всего, т.к. с помощью него можно построить подавляющее большинство анимаций. Второй применяется в случаях, когда нужно плавное изменение формы. Поговорим, сначала о нем.
Shape tweening
Скажем, вам нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening. Как обычно, вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: ваша анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели Frame (Windows->Panels->Frame, Ctrl+F) в списке Tweening строку Shape:
Рис 3. - Shape tweening Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка (см. Рис. 4). В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй. Я специально включил отображение теней на протяжении всего фильма, чтобы отобразить эти кадры:
Рис. 4 - Анимация на основе Shape tweening В этой маленькой анимации круг переходит в некое подобие полумесяца. На первам ключевом кадре я нарисовал круг, а на втором ключевом кадре (это 10-й кадр сцены) превратил его в полумесяц. Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend (см. Рис. 3). Поле Label содержит метку кадра. О метках мы поговорим в статье, посвященной анимации с помощью ActionScript. Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться (см. Рис. 5). И наоборот, если easing будет положительным, анимация будет замедляться (см Рис. 6).
Рис. 5 - Easing: -100
Рис. 6 - Easing: +100
Параметр Blend, определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход вас не удовлетворяет, можно поэкспериментировать с этим параметром. И, наконец, последний инструмент в анимации shape tweening - контрольные точки (shape hints, дословно - подсказки для форм). Это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко: На первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие. Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint. Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27. На рисунках (Рис.7 и Рис.8) вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и с использованием таковых.
Рис. 7 - Shape tweening без использования контрольных точек
Рис. 8 - Shape tweening c использованием контрольных точек
При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:
- форма
- расположение
- размер (любые пропорции)
- цвет
- угол поворота
Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.
Motion Tweening
И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения. Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:
- размер (как пропорционально, так и непропорционально - отдельно высоту и ширину)
- наклон
- расположение
- угол поворота
- цветовые эффекты (см. ниже)
- можно использовать направляющие слои для задания траектории движения объекта
Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
Рис. 9 - Motion tweening Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening. Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None. Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже) В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize позволяет синхронизировать эти две анимации.
Направляющие слои
В начале статьи мы упоминали о слоях, содержащих траекторию движения, так называемых направляющих слоях (guide layers). Это слои, которые содержат кривую, по которой должен двигаться объект. Скажем, вам нужно анимировать самолетик, который выписывает виражи по небу. У вас уйдет уйма времени и сил, на создание этого движения. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней. Итак, если вы используете траекторию, то вам нужен дополнительный слой для нее. Кстати, с одной траекторией можно использовать несколько символов. Для того, чтобы добавить направляющий слой, вам нужно выбрать слой, на котором находится ваш символ, и, нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.
Рис. 10 - Направляющий слой
Далее, вам нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Все! Управляющий слой готов. Вы можете его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым. Теперь, чтобы использовать этот слой, вам нужно взять ваш символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening: Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней (как на рис. 11), то на панели Frame нужно включить флажок Orient to path. |
Цветовые эффекты
Рис. 12 - Установка яркости |
Рис. 13 - Цветовое смещение, оттенок |
Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening. Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows->Panels->Effects), выбрать нужный эффект (см. Рис 9-12). |
Рис. 14 - Точная установка всех атрибутов |
Рис. 15 - Установка прозрачности |
Заключение
Вот практически и все, что нужно для создания анимации во Flash. Конечно же, человеческая изобретательность и фантазия безграничны, и много еще интересных эффектов можно реализовать с помощью ActionScript, но рамки статьи не позволяют выйти на более обширный и подробный уровень описания. Желаю творческих успехов и настоящих шедевров, сделанных с помощью Flash!
3. Action Script
3.1. Что такое скрипт 3.2. Преимущества скриптовой анимации перед стандартной векторной. Интерактивность прежде всего! 3.3. Основные скриптовые команды Macromedia Flash 3.4. Практический пример: Делаем нашу анимацию интерактивной, реагирующей на события мышки
Macromedia Flash 5. Введение в ActionScript Введение
ActionScript: событийно-управляемый язык, встроенный во Flash. Последняя версия ActionScript, которая присутствует во Flash 5, существенно отличается от предыдущей. Если в прошлой версии это был ограниченный набор команд, позволяющий осуществлять лишь основные действия и вводимый с помощью не очень удобного интерфейса, то новый ActionScript - это мощный язык с увеличенным набором команд, поддержкой классов, наследования (!) и гораздо более удобным интерфейсом. ActionScript делает ваши страницы интерактивными. Вы можете реагировать на события с мышки или с клавиатуры, можете выполнить какие-либо действия при проигрывании определенного кадра. Для того чтобы овладеть ActionScript в полной мере, желательно уже иметь опыт программирования (предпочтительно на С++, JavaScript, etc.). Однако одним из достоинств языка Flash является то, что вам не нужно быть профессионалом во Flash, или полностью знать ActionScript, чтобы писать на нем качественный код. Вы можете использовать лишь те возможности языка, которые сочтете необходимыми для своей работы. Так как эта статья посвящена основам языка, в ней мы рассмотрим:
- Панель действий (Actions panel), на которой происходит практически все общение с ActionScript.
- Кнопки - как их заставлять работать так, как нам требуется.
- Пути - как обращаться к нужным объектам?
- Основные действия с Flash-мультиками (movie clips) - мы будем управлять процессом проигрывания фильма, как нам угодно.
- Отладку в ActionScript - окошки Output и Debugger.
Цель этой статьи - дать вам возможность почувствовать ActionScript и показать, что этот язык может служить как для создания весьма внушительных программ, так и для выполнения элементарных действий, которые сделают вашу страницу гораздо привлекательней.
Термины
Прежде чем мы перейдем к конкретным действиям, несколько терминов из области ActionScript:
- Действия (Actions) - это инструкции, которые говорят Flash-мультику, что делать. От них произошло название языка - ActionScript (дословно - сценарий действий). Давайте договоримся, что в рамках этой статьи мы будем использовать термин "инструкция", дабы не путать их с настоящими действиями, которые будем производить.
- События (Events) - это действия, которые происходят, когда проигрывается мультик. События, например, могут происходить, когда заканчивается загрузка какого-то кадра, когда мы достигаем какого-то кадра, когда пользователь нажимает клавишу на клавиатуре или курсор мышки оказывается над нашим объектом.
- Выражения (Expressions) - это любая часть инструкции, которая порождает значение. Следующие примеры являются выражениями: 2 + 2, 2 * 2, a + b, 2*pi*r, (15 + k) * random(10).
- Функции (Functions) - это блоки кода, которые можно многократно использовать. Функциям можно передавать значения и получать от них результат. Например, number = get_color(15, 24). 15 и 24 являются аргументами (или параметрами) функции get_color, возвращаемое значение которой записывается в переменную number.
- Классы (Classes) - это типы объектов. Например, класс дерева - растение. Во Flash есть некоторое количество предопределенных классов (очень похожих на классы JavaScript). Вы можете создавать свои классы или модифицировать существующие.
- Экземпляры (Instances) - это буквально экземпляры определенных классов. Например, экземпляром растения могут являться дерево, куст или цветок. Экземпляр - это уже конкретный реальный объект. Если класс - это определение объекта (экземпляра), то экземпляр - это уже конкретное воплощение, это класс в действии. Каждому экземпляру можно присвоить имя, чтобы через него обращаться к функциям или переменным объекта.
- Обработчики (Handlers) - это специальные инструкции, которые обрабатывают события. Например onClipEvent - обработчик действий, связанных с конкретным символом (см. Macromedia Flash ч. 2).
- Операторы (Operators) - это элементы языка, которые вычисляют значения, исходя из одного или более аргументов. Например, оператор сложения (+) возвращает сумму двух значений, стоящих слева и справа от него.
- Переменные (Variables) - это идентификаторы, которые могут хранить значения. Например, a = 5; или name = "Michael".
Эти термины мы будем использовать при обсуждении ActionScript. Итак…
Панель действий (Actions Panel)
Панель действий служит для отображения и ввода ActionScript-программ (рис. 1). Существует два режима работы с панелью - нормальный (для "чайников") и экспертный. В экспертном режиме список команд - это простое поле для ввода текста. В нормальном же режиме мы не можем напрямую редактировать команды. Для этого используется панель параметров. Добавить инструкцию можно, нажав на кнопку "+" (см. рис. 1) или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий во Flash имеются последовательности клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки "+". Например, чтобы добавить функцию stop(), нужно нажать Esc+st (последовательно: Esc, затем "s", затем "t"). Удалить инструкцию можно, выбрав ее и нажав кнопку "-" (или просто клавишу Delete). Я рекомендую вам не начинать сразу же пользоваться экспертным режимом, если у вас нет опыта программирования на Java-подобных языках (С++, Java, JavaScript). У нормального режима есть большое достоинство, делающее его незаменимым для новичков - в этом случае гораздо меньше шансов ошибиться с синтаксисом языка. Новичкам это поможет быстрее понять тонкости ActionScript. В панели действий отображаются действия объекта либо кадра, выбранного в данный момент.
Кнопки
Первое, что хочется, когда начинаешь изучать интерактивность Flash - сделать что-нибудь, что бы откликалось на действия пользователя, "оживить" ваше творение, добавить обратную связь. Самый простой способ сделать это - кнопки. Поэтому с них-то мы и начнем. Как вы знаете, во Flash существует специальный тип символа для создания кнопок - Button (см. Macromedia Flash ч. 2). Будем считать, что вы уже научились создавать кнопки, теперь научимся отслеживать нажатия на эти кнопки. Кнопки в Macromedia Flash обладают обширным списком событий, на которые мы можем реагировать:
- press - клавиша мышки нажата, когда курсор находится в пределах кнопки;
- release - клавиша мышки отжата, когда курсор находится в пределах кнопки;
- releaseOutside - клавиша мышки отжата, когда курсор находится вне пределов кнопки;
- rollOver - курсор мыши входит в пределы кнопки;
- rollOut - курсор выходит за пределы кнопки;
- dragOver - курсор входит в пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши;
- dragOut - курсор выходит за пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши;
- keyPress ("клавиша") - была нажата "клавиша". Список клавиш можно посмотреть в справке по Flash (объект Key), или использовать панель параметров для ввода нужной клавиши.
К сожалению, Flash "понимает" только левую клавишу мыши. Правая используется для вызова контекстного меню (щелкните правой клавишей на каком-нибудь Flash мультике). Способов отлавливать во Flash среднюю клавишу или "колесико" (mouse wheel) я пока не встречал; думаю, что их не существует. Перехватываются эти события с помощью директивы on(). Синтаксис ее таков: on (событие)
Очень часто используемый пример - переход по ссылке при нажатии на кнопку: on (release)
Чтобы проверить этот сценарий, выделите вашу кнопку, нажмите Ctrl+Alt+A и введите программу. Вот так просто можно перехватить все события, связанные с кнопкой. Ну а как их использовать - это дело исключительно вашего воображения.
Основные действия с Movie Clips
Огромная доля творчества во Flash приходится на манипуляцию символами. Практически все базовые приемы, все трюки и эффекты невыполнимы без этих действий. С помощью сценариев на ActionScript вы можете выполнять практически любые действия над символами. Надо только помнить, что выполнить эти действия можно только либо в ответ на действие пользователя, либо при наступлении какого-то кадра на временной шкале. Итак, что же у нас есть? Я перечислю только основные (на мой взгляд) инструменты. Остальное вы найдете в списке элементов языка или в помощи. Функции клипов (movie clip), которые можно вызывать:
- play() - начинает или возобновляет воспроизведение клипа;
- stop() - останавливает воспроизведение клипа;
- gotoAndPlay() - переходит на определенный кадр (сцену) и продолжает воспроизведение;
- gotoAndStop() - переходит на определенный кадр (сцену) и останавливает воспроизведение.
Свойства (параметры) клипов, которые можно считывать/изменять:
- _x, _y - координаты клипа (в пикселях);
- _xscale, _yscale - масштаб клипа (в процентах), соответственно по горизонтали и по вертикали;
- _width, _height - ширина и высота клипа (в пикселях);
- _rotation - угол поворота клипа (в градусах);
- _alpha - прозрачность клипа (в процентах);
- _visible - видимость.
Это далеко не все, что можно делать с клипами. Используйте другие параметры, экспериментируйте, творите!
Имена
Для того, чтобы обращаться к клипам, нам потребуется разобраться с понятием имени объекта (instance name) и пути до объекта (target path). Договоримся, что клип (movie clip) и объект для нас - одинаковые вещи. Имя объекта - это имя конкретного экземпляра символа. Скажем, у нас может быть символ - машинка, а экземпляры этого символа будут называться "Машинка1", "Машинка2", "Pickup", "Запорожец"… Для того чтобы дать имя объекту, нужно выделить объект и в панели Instance (Window->Panels->Instance, Ctrl+I) в графе Name ввести имя объекта (рис. 2). Имена могут состоять только из букв, цифр и символа подчеркивания ("_"), причем имя не может начинаться с цифры. |
Пути
Путь до объекта - это запись имени объекта с учетом иерархии. Попытаюсь объяснить, что это такое. Вы знаете, что во Flash объекты можно "вкладывать" друг в друга, составляя таким образом иерархию. Так вот, эта вложенность обеспечивает не только удобство в обращении с объектами, она еще и ограничивает видимость имен объектов. Видимость ограничивается своим уровнем. Объект может напрямую (по имени) обращаться только к объектам, входящим в него, стоящим на 1 уровень ниже в иерархии. Для того чтобы обратиться к объекту другого уровня, нужно знать путь до него. Причем путь может указываться как абсолютно (с самого верхнего уровня иерархии), так и относительно (с текущего уровня). Путь включает в себя объекты, через которые нужно "пройти" по дереву иерархии, чтобы добраться до нужного нам объекта. Имена объектов перечисляются через точку. Кроме того, существует несколько указателей (можно их назвать "виртуальными объектами"), которые часто очень полезны: this - указатель на "самого себя" (т.е. на текущий объект). Бывает нужен, например, для передачи в функцию указателя на объект, из которого эта функция вызывается. _parent - указатель на "родителя". Указывает на объект, стоящий в иерархии одним уровнем выше. _root - "корень". Это начало иерархии. Без него не обойтись при указании абсолютного пути. Путь выглядит так: leaf.play(); - у подобъекта leaf (лист) вызывается функция play(); _parent.tree.leaf.stop(); - подразумевается, что на одном уровне имеется объект tree, у которого есть объект leaf, у которого и вызывается функция stop(); _root.banner._visible = false; - сделать клип banner, находящийся на 1-м уровне, невидимым.
Рис. 3 - Иерархия клипов Для иллюстрации возьмем иерархию из 5-ти объектов (рис. 3). Объекты 1-4 находятся на 1-м слое, объект 5 - на 2-м слое. Объект 2 вложен в объект 1, а объект 3 вложен в объект 2. Объекты на рисунке визуально вложены друг в друга, но это ни в коем случае не означает, что так должно быть и "в жизни". Здесь они так сгруппированы для наглядности. Так как имя объекта не может начинаться с цифры, пусть объекты у нас называются obj1-obj5. Теперь займемся путями. Для начала посмотрим, какие объекты могут обращаться друг к другу по имени. obj1 может обращаться к obj2, а obj2 - к obj3, но при этом obj1 не может обратиться к obj3 напрямую, т.к. тот содержится не в obj1, а в obj2. Например, первому объекту нужно, чтобы объект 3 начал заново воспроизводиться с 1-го кадра. Вот как это делается: obj2.obj3.gotoAndPlay(1); Чтобы 4-му объекту сделать 1-й объект (заметьте - со всеми подобъектами!) полупрозрачным, ему нужно в своем сценарии написать следующее: _parent.obj1._alpha = 50; или _root.obj1._alpha = 50; Так как obj4 у нас находится на первом уровне иерархии, то для него _root и _parent - одно и то же. Теперь для объекта 3 напишем скрипт, который сделает объект 5 невидимым при нажатии клавиши мыши. В сценарии для объекта 3 пишем: onClipEvent (mouseDown) { _root.obj5._visible = false; } В этом фрагменте мы использовали абсолютный путь. Если бы мы использовали относительный, это выглядело бы как: _parent._parent._parent.obj5._visible = false; Надеюсь, я прояснил момент с путями. Приведенные выше примеры показали не только как выглядят пути, но и как вызываются функции и присваиваются значения свойствам. Вы можете попробовать использовать обработчик onClipEvent, задавая различные условия и выполняя различные действия с объектами при этом. Одними из самых важных являются функции управления ходом воспроизведения клипа (play(), stop(), gotoAndPlay(), gotoAndStop()). Функции play() и stop() вызываются без параметров, в то время как в goto нужно указывать кадр, и, возможно, сцену.
Отладка в ActionScript
Последнее, что мы рассмотрим в этой статье - окна Output (вывод) и Debugger (отладчик). Это инструменты, служащие для отладки сценариев ActionScript. Окошко Output пришло из Flash 4, где оно было единственным инструментом для отладки. Существует директива trace(), которая выводит сообщения в это окошко. Туда же выводятся сообщения об ошибках. Использовать trace очень просто: trace ("280-й кадр"); или, например, trace (xpos + k);
В 5-м Flash появился специальный инструмент - окошечко Debugger. Чтобы им пользоваться, нужно проверять свои фильмы не как обычно (Test movie, Ctrl+Enter), а с помощью Debug movie (Ctrl+Shift+Enter). Окошко Debugger (рис.) можно скрыть/показать с помощью Window → Debugger. В одной части окна Debugger находится иерархический список объектов, используемых в фильме. Выбрав объект, можно просматривать его свойства (закладка Properties). Под закладкой Variables находятся все переменные. Преимущество закладки Variables состоит в том, что вы можете модифицировать значения любых переменных "на лету" и тут же получать отражение этого изменения в фильме. И, наконец, можно добавить любые переменные в список просмотра (Watch list) и наблюдать за их значениями (закладка Watch). Debugger позволяет отслеживать практически любые параметры Flash-фильмов. Тем не менее, я считаю, что свое применение есть и у окошка Output, и у Debugger-a. Вот и все на этот раз. Это - последняя статья из цикла. К счастью, сейчас появилось много материалов и руководств по основам Macromedia Flash 5. Статьи по различным аспектам Flash постепенно переводятся/сочиняются на русском языке и появляются на наших сайтах. Последующие материалы по Flash будут посвящены его "продвинутым" аспектам. Так же есть идея написания руководств по другим программам, производящим Flash-фильмы (в частности трехмерные).
4. Flash 5 – новые возможности
4.1. Расширенные возможности Action Script 4.2. Эффекты свойства setProperty мувика 4.3. Введение в логику скриптового программирования. Понятие переменных, циклов, условий, выражений, операторов и т.д 4.4. Практический пример: Создаем наиболее часто используемые скрипты. Анимируем движение, создаем задержку (delay), создаем цикличность проигрывания клипа вперед-назад.
Начну с определения, возможно, несколько неожиданного для многих, но дающего направление всему дальнейшему разговору: «Flash 5 - язык программирования нестандартных интерфейсов с векторной анимацией». Здесь делается основной упор на то, что интерфейсы нестандартны. Что имеется в виду, зачем это нужно и к чему это ведет? «Нестандартные» интерфейсы имеют ряд отличий от «стандартных» (под «стандартными» подразумеваются привычные интерфейсы HTML):
- Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word – нестандартный объект. Ее практически невозможно реализовать в HTML, только картинку, но не интерактивную функциональность.
- Независимое размещение объектов, другими словами, не размещение объектов относительно друг друга, а расположение по координатам и уровням. В DHTML такая возможность существует, но в DHTML надежно реализовать можно только совсем простые вещи.
- Прозрачное взаимодействие с любым объектом. Т.е. все объекты равны, не складывается ситуация, когда часть принадлежит системе, часть вашему коду, и т.д., и при этом набор обрабатываемых событий один для всех.
В результате подобной «нестандартности» появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень предоставляемого сервиса. А значит, достигается «customer satisfaction» (удовлетворение посетителя), и, в конечном итоге, система становится более конкурентоспособной. И именно Flash 5 дает возможность делать такие интерфейсы принципиально проще, чем любой другой инструмент, который можно всерьез рассматривать как сколько-нибудь значимую рыночную технологию. Разработчики, попробовавшие программировать в среде Flash 5, подтвердят мои слова: Flash - уже не просто технология для создания анимационных роликов. Другими словами, Flash стал применим для создания интерактивных приложений. Резонно задаться вопросом: а оно надо? Есть ли смысл использовать Flash 5 там, где он никогда не использовался? Ведь «несть числа» всевозможным языкам программирования, описывающим клиентскую часть. А Flash, к тому же, - один из самых медленных. Здесь важно понять, что существует два принципиальных условия применения Flash:
- Надо аккуратно выбирать область применения Flash за пределами анимации.
- Этим инструментом надо уметь грамотно пользоваться.
С первым условием достаточно просто: Flash нужен там, где нестандартный интерфейс дает много новых возможностей, где нужна интерактивность, где не подходит «спартанская» внешность. При совпадении всех этих требований имеет смысл задуматься об использовании Flash 5 в качестве инструмента для построения системы. Чем определяется «грамотность» применения Flash 5? Необходимо определиться, каковы преимущества использования именно Flash в конкретном проекте, и с какими «подводными камнями» придется столкнуться. Основные плюсы программирования в среде Flash 5 - в процессе разработки:
- Почти каждая аккуратно запрограммированная функция сразу очевидно полезна во многих местах.
- Возможно построение универсального сервера.
- Легко переносится часть логики с серверной на клиентскую часть.
- Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).
Есть, однако, и недостатки, что-то работает не лучшим образом, а потому, если в системе важны определенные компоненты, Flash использовать пока нецелесообразно. Собственно, список тех компонентов, которые на данный момент «не дружат» с Flash:
- Сложные математические операции на клиентской части.
- Работа с очень сложными структурами данных на клиентской части.
- Мелкие тексты, написанные по-русски, из-за проблемы с кодировкой.
- Сайты со сверхсложной бизнес-логикой, требующие мгновенной загрузки.
- Механизмы, требующие работы с файловой системой клиента или его устройствами (например, web-камерой или микрофоном).
Вот, пожалуй, и все трудности. Но! Если в столь ожидаемом многими Flash 6 добавится некоторый набор усовершенствований, эти проблемы станут неактуальны. Это набор довольно простых вещей, которые очевидно не сложно сделать:
- Кэширование растрированных векторов.
- Поддержка Unicode.
- Усовершенствование механизма наследования объектов.
- Внедрение методов проектной/командной работы.
- Отладка Performance and Memory-Use на XML, Math/Data Functions.
- Окончательное разделение программирования и дизайна.
Это не так много, разница между Flash 4 и Flash 5 гораздо больше, чем эти изменения. Конечно, и после этого Flash не надо будет применять везде – он все равно останется для «своей» области. Производительность, поддержка кодировок – эти вопросы уже скоро будут решены. Инструмент будет более четко разделен, а концепция языка скорректирована. Разумеется, Flash 6 по-прежнему будет поддерживать разработанные на Flash 5 продукты. Многие описанные проблемы решаются уже сегодня:
- Проблема с текстом решается подгрузкой шрифта, как внешней библиотеки. Он становится четким и быстрым. Единственное, его надо подгрузить один раз – 30 килобайт.
- Проблемы в разработке решаются путем четкого структурирования, как данных, так и графики.
- Применение объектно-ориентированных подходов в программировании позволяет устранить сложность с псевдо-многопоточностью.
- Специализированные метки позволяют работать даже с невидимыми символами.
|