Руководство по созданию интерактивных флеш презентаций и приложений

Создание интерактивных приложений формата 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

Интерфейс

Наглядный показ перечисленного в таблице.

• 

  Общий вид

• 

  Панель инструментов

• 

  Временная шкала

• 

  Выделение

Создание нового проекта

• Последовательность:

1. Файл (File) ->
2. Новый (New Flash Document)
3. Сразу его сохраним под каким-нибудь именем: для сохранение выполните сочетание клавиш Ctrl+S (всегда сохраняйте файл, при внесении важных изменений, так же рекомендуется сохранять резервные копии)

Проект создан

Создание анимации

• Для начала создадим новый проект.
  • Теперь разберем простой пример создания покадровой анимации:

1. выберите инструмент "Кисть" (Brush);
2. нарисуйте что-нибудь в центре рабочего поля;
3. нажмите клавишу F6 для создания нового ключевого кадра. Новый кадр появится на временной шкале, и Вы автоматически переместитесь на него;
4. как видите, на новом кадре ничего не изменилось. Выберите инструмент выделения "Selection Tool";
5. выделите инструментом нарисованный Вами объект, а потом, зажав левую кнопку мыши, переместите его на небольшое расстояние от начального положения;
6. повторяйте шаги 3, 4, и 6, пока не будете удовлетворены результатом;
7. теперь, чтобы увидеть проделанную работу, устройте предпросмотр, выполнив сочетание клавиш Ctrl+Enter;
8. наблюдайте :)

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

Написание скрипта для кадра

• Наверное, Вы заметили, что при просмотре мультика, когда анимация доходит до последнего кадра, то всё начинается сначала? Это происходит потому, что по стандарту на последнем кадре нет команды "остановиться". Так напишем её:

1. перейдите на последний кадр, щёлкнув по нему мышкой (на временной шкале);
2. теперь нажмите на панель действий, чтобы она раскрылась;
3. напишите: stop(); - это заставит анимацию остановиться на последнем кадре;
4. проверьте это, запустив предпросмотр.

О "скриптах в кадрах": команды, написанные таким образом, будут срабатывать только во время перехода на кадр, в котором они содержатся.

Создание кнопки

• Нарисуем в центре рабочего поля что-нибудь кистью:

1. на панели инструментов (слева) выберите "Кисть" (Brush);
2. в центре рабочего поля нарисуйте что-нибудь кнопкообразное.

• Теперь преобразуем получившийся рисунок в кнопку:

1. выделите свой рисунок;
2. нажмите F8;
3. в открывшемся окошке выберите "Кнопка" (Button);
4. нажмите "ОК".

Кнопка создана!

Написание скрипта для кнопки

• Скрипт будем назначать на кнопку (о том, как её создать, написано выше):

1. выделите Вашу кнопку (вокруг неё должна появиться синяя рамочка);
2. зайдите в панель действий;
3. в поле ввода текста введите:

---

on(press){

stop();

}

---

• Разберём, что здесь написано:
  • on(press) //при нажатии на кнопку (press в скобках обозначает, что действие начнётся в тот момент, когда на кнопку нажмут. Но есть и множество других событий, например, release - если поставить его вместо press, то действия начнутся, когда кнопку нажмут, а потом отпустят, т.е. при отпускании);
  • { //открывающая скобка обозначает начало списка действий;
  • stop(); //остановить воспроизведение (если бы мы хотели, наоборот, продолжить воспроизведение, то вместо stop(); написали бы play();)
  • } //закрытие списка действий.

В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре.

Перечень основных команд (действий) для управления воспроизведением

Команда	Описание
play();	Возобновление (начало) проигрывания анимации.
stop();	Остановка воспроизведения анимации.
nextFrame();	Переход на следующий кадр.
prevFrame();	Переход на предыдущий кадр.
gotoAndPlay(<номер кадра>);	Переход на заданный кадр и воспроизведение анимации, начиная с него.
gotoAndStop(<номер кадра>);	Переход на заданный кадр и остановка воспроизведения на нём.

Создание интерактивной презентации

Создание управления воспроизведением

Создание панели навигации для презентации или мультика

• Для работы нам понадобятся:
  • кнопка "Промотать вперёд";
  • кнопка "Пауза";
  • кнопка "Следующий кадр";
  • кнопка "Предыдущий кадр".

Где их взять? Нигде. Будем делать сами - Вы и я.

Ход работы

1. Нарисуйте несколько объектов.
2. Преобразуйте каждый объект в кнопку, как это было описано выше.
3. На каждую кнопку назначьте своё действие (скрипт) по образцу.
4. Для кнопок "Следующий кадр" и "Предыдущий кадр" добавьте следующие действия: nextFrame(); (для кнопки "Следующий кадр") и prevFrame(); (для кнопки "Предыдущий кадр")

• 

  Мои кнопки

• 

  Вид получившейся панели на рабочем поле

Перенос панели на отдельный слой

Если анимации или кадров презентации еще нет

Для удобства:

Блокировка слоя

1. нажмите на кнопку "Блокировка слоя", как показано на рисунке;
2. добавьте новый слой. На нём будет размещаться анимация или слайды Вашей презентации;
3. на временной шкале нажмите на первый кадр нового слоя, чтобы перейти на него.

Панель готова. Вы можете сохранить Ваш проект и в будущем использовать как шаблон.

Если Вы уже создали свою презентацию или анимацию

1. Выделите всю Вашу панель с кнопками управления.
2. Выполните сочетание клавиш Ctrl+X (чтобы вырезать панель для последующей вставки).
3. На временной шкале нажмите на первый кадр нового слоя, чтобы перейти на него.
4. Добавьте новый слой. На нём будет размещаться панель управления.
5. Перейдите на первый кадр нового слоя.
6. Выполните сочетание клавиш Ctrl+V (чтобы вставить панель на новый слой).
7. Теперь пролистайте кадры на временной шкале до последнего кадра анимации/презентации.
8. Выберите на той же позиции кадр нового слоя (как на рисунке) и нажмите F6.