Руководство по созданию интерактивных флеш презентаций и приложений
Содержание |
Создание интерактивных приложений формата swf
Учимся делать игры, презентации и т.д. во Flash'е
Что о чём?
Не сомневаюсь, Вы наверняка видели множество баннеров (анимированных рекламок), Flash-игр на просторах интернета. Как не сложно догадаться, всё это делается в программе Flash
Что потребуется:
- Желание
- Прямые руки
- Сам Flash (начиная от 6'ой версии)
Основы
Общая терминология
Ниже приведена таблица, обеспечивающая понимание терминов, которые будут использованы далее.
Термин | Название в редакторе | Описание |
---|---|---|
Фрейм/Кадр | Frame | Это просто кадр. Кадры разделяются на ключевые (Key frame) и обычные. |
Ключевой кадр | Key frame | Кадр, содержащий любое изображение или объекты. Из последовательности ключевых кадров и составляется анимация. |
Временная шкала | Time scale | Панель, находящаяся сверху*. Содержит все кадры документа. |
Панель инструментов | Tools | Панель, находящаяся слева. Содержит инструменты для рисования и выделения. |
Панель действий | Actions | Панель, находящаяся внизу. Содержит редактор кода на Action Script. |
Панель параметров | Properties & Parameters | Панель, находящаяся внизу, под панелью действий. Содержит свойства выделенного объекта или документа в целом. |
Скрипт/Экшэн скрипт | Action Script | Язык программирования Flash роликов. Необходим для игр и приложений. Так же используется для управления ходом презентации. |
Рабочее поле | Поле, находящееся по-центру документа, при его открытии. Имеет прямоугольную форму и цвет фона, выбранного на панели параметров. Определяет видимую область документа во время показа. | |
Предпросмотр | Preview | Режим отладки документа, необходим для просмотра "того, что получилось" и поиска ошибок. Вызывается по нажатию сочетания клавиш Ctrl+Enter |
Интерфейс
Наглядный показ перечисленного в таблице.
Создание нового проекта
- Последовательность:
- Файл (File) ->
- Новый (New Flash Document)
- Сразу его сохраним под каким-нибудь именем: для сохранение выполните сочетание клавиш Ctrl+S (всегда сохраняйте файл, при внесении важных изменений, так же рекомендуется сохранять резервные копии)
Проект создан
Создание анимации
- Для начала создадим новый проект.
- Теперь разберем простой пример создания покадровой анимации:
- выберите инструмент "Кисть" (Brush);
- нарисуйте что-нибудь в центре рабочего поля;
- нажмите клавишу F6 для создания нового ключевого кадра. Новый кадр появится на временной шкале, и Вы автоматически переместитесь на него;
- как видите, на новом кадре ничего не изменилось. Выберите инструмент выделения "Selection Tool";
- выделите инструментом нарисованный Вами объект, а потом, зажав левую кнопку мыши, переместите его на небольшое расстояние от начального положения;
- повторяйте шаги 3, 4, и 6, пока не будете удовлетворены результатом;
- теперь, чтобы увидеть проделанную работу, устройте предпросмотр, выполнив сочетание клавиш Ctrl+Enter;
- наблюдайте :)
Вывод: анимация - просто последовательность ключевых кадров, они легко создаются и легко редактируются. Не обязательно перемещать рисунок, Вы так же можете изменять его, т.е. пририсовывать что-либо еще, стирать, изменять форму, цвет и т.д. Содержимое любого кадра полностью в Вашем распоряжении... Внимание! Ваш мультик ограничивается только Вашей фантазией!
Написание скрипта для кадра
- Наверное, Вы заметили, что при просмотре мультика, когда анимация доходит до последнего кадра, то всё начинается сначала? Это происходит потому, что по стандарту на последнем кадре нет команды "остановиться". Так напишем её:
- перейдите на последний кадр, щёлкнув по нему мышкой (на временной шкале);
- теперь нажмите на панель действий, чтобы она раскрылась;
- напишите:
stop();
- это заставит анимацию остановиться на последнем кадре; - проверьте это, запустив предпросмотр.
О "скриптах в кадрах": команды, написанные таким образом, будут срабатывать только во время перехода на кадр, в котором они содержатся.
Создание кнопки
- Нарисуем в центре рабочего поля что-нибудь кистью:
- на панели инструментов (слева) выберите "Кисть" (Brush);
- в центре рабочего поля нарисуйте что-нибудь кнопкообразное.
- Теперь преобразуем получившийся рисунок в кнопку:
- выделите свой рисунок;
- нажмите F8;
- в открывшемся окошке выберите "Кнопка" (Button);
- нажмите "ОК".
Кнопка создана!
Написание скрипта для кнопки
- Скрипт будем назначать на кнопку (о том, как её создать, написано выше):
- выделите Вашу кнопку (вокруг неё должна появиться синяя рамочка);
- зайдите в панель действий;
- в поле ввода текста введите:
on(press){
stop();
}
- Разберём, что здесь написано:
-
on(press)
//при нажатии на кнопку (press
в скобках обозначает, что действие начнётся в тот момент, когда на кнопку нажмут. Но есть и множество других событий, например,release
- если поставить его вместоpress
, то действия начнутся, когда кнопку нажмут, а потом отпустят, т.е. при отпускании); -
{
//открывающая скобка обозначает начало списка действий; -
stop();
//остановить воспроизведение (если бы мы хотели, наоборот, продолжить воспроизведение, то вместоstop();
написали быplay();
) -
}
//закрытие списка действий.
-
В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре.
Перечень основных команд (действий) для управления воспроизведением
Команда | Описание |
---|---|
play();
|
Возобновление (начало) проигрывания анимации. |
stop();
|
Остановка воспроизведения анимации. |
nextFrame();
|
Переход на следующий кадр. |
prevFrame();
|
Переход на предыдущий кадр. |
gotoAndPlay(<номер кадра>);
|
Переход на заданный кадр и воспроизведение анимации, начиная с него. |
gotoAndStop(<номер кадра>);
|
Переход на заданный кадр и остановка воспроизведения на нём. |
Создание интерактивной презентации
Создание управления воспроизведением
Создание панели навигации для презентации или мультика
- Для работы нам понадобятся:
- кнопка "Промотать вперёд";
- кнопка "Пауза";
- кнопка "Следующий кадр";
- кнопка "Предыдущий кадр".
Где их взять? Нигде. Будем делать сами - Вы и я.
Ход работы
- Нарисуйте несколько объектов.
- Преобразуйте каждый объект в кнопку, как это было описано выше.
- На каждую кнопку назначьте своё действие (скрипт) по образцу.
- Для кнопок "Следующий кадр" и "Предыдущий кадр" добавьте следующие действия: nextFrame(); (для кнопки "Следующий кадр") и prevFrame(); (для кнопки "Предыдущий кадр")
Перенос панели на отдельный слой
Если анимации или кадров презентации еще нет
Для удобства:
- нажмите на кнопку "Блокировка слоя", как показано на рисунке;
- добавьте новый слой. На нём будет размещаться анимация или слайды Вашей презентации;
- на временной шкале нажмите на первый кадр нового слоя, чтобы перейти на него.
Панель готова. Вы можете сохранить Ваш проект и в будущем использовать как шаблон.
Если Вы уже создали свою презентацию или анимацию
- Выделите всю Вашу панель с кнопками управления.
- Выполните сочетание клавиш Ctrl+X (чтобы вырезать панель для последующей вставки).
- На временной шкале нажмите на первый кадр нового слоя, чтобы перейти на него.
- Добавьте новый слой. На нём будет размещаться панель управления.
- Перейдите на первый кадр нового слоя.
- Выполните сочетание клавиш Ctrl+V (чтобы вставить панель на новый слой).
- Теперь пролистайте кадры на временной шкале до последнего кадра анимации/презентации.
- Выберите на той же позиции кадр нового слоя (как на рисунке) и нажмите F6.