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

Текущая версия на 17:33, 5 июня 2010

[править] Создание интерактивных приложений формата swf

Учимся делать игры, презентации и т.д. во Flash'е

[править] Что о чём?

Не сомневаюсь, Вы наверняка видели множество баннеров (анимированных рекламок), Flash-игр на просторах интернета. Как не сложно догадаться, всё это делается в программе Flash

[править] Что потребуется:

• Желание
• Прямые руки
• Сам Flash (начиная от 6'ой версии)

[править] Основы

[править] Общая терминология

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

[править] Интерфейс

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

• 

  Общий вид

• 

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

• 

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

• 

  Выделение

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

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

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();)
  • } //закрытие списка действий.

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

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

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

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

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

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

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

Ход работы

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

• 

  Мои кнопки

• 

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

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

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

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

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

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

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

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

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