Руководство по созданию интерактивных флеш презентаций и приложений
м (переименовал «Руководство по созданию интерактивых флеш презентаций и приложений» в «[[Руководство по созданию интерактивных флеш през) |
|||
Строка 80: | Строка 80: | ||
# Теперь, чтобы увидеть проделанную работу, устройте предпросмотр, выполнив сочетание клавишь Ctrl+Enter | # Теперь, чтобы увидеть проделанную работу, устройте предпросмотр, выполнив сочетание клавишь Ctrl+Enter | ||
# Наблюдайте :) | # Наблюдайте :) | ||
− | Вывод: анимация - просто последовательность ключевых кадров, они легко создаются и легко редактируются. Не обязательно перемещать рисунок, Вы так же можете изменять его, т.е. пририсовывать что-либо еще, стирать, изменять форму, цвет и т.д. Содержимое кадра полностью в вашем распоряжении... | + | '''Вывод:''' ''анимация - просто последовательность ключевых кадров, они легко создаются и легко редактируются. Не обязательно перемещать рисунок, Вы так же можете изменять его, т.е. пририсовывать что-либо еще, стирать, изменять форму, цвет и т.д. Содержимое любого кадра полностью в вашем распоряжении... |
− | + | '' | |
Внимание! Ваш мультик ограничевается только Вашей фантазией! | Внимание! Ваш мультик ограничевается только Вашей фантазией! | ||
Строка 88: | Строка 88: | ||
# Перейдите на последний кадр, щёлкнув по нему мышкой (на <tt>временной шкале</tt>). | # Перейдите на последний кадр, щёлкнув по нему мышкой (на <tt>временной шкале</tt>). | ||
# Теперь нажмите на <tt>панель действий</tt>, чтобы она раскрылась. | # Теперь нажмите на <tt>панель действий</tt>, чтобы она раскрылась. | ||
− | # Напишите: <code>stop();</code> - это заставит анимацию остановиться на последнем кадре. | + | # Напишите: '''<code>stop();</code>''' - это заставит анимацию остановиться на последнем кадре. |
# Проверьте это, запустив <tt>предпросмотр</tt> | # Проверьте это, запустив <tt>предпросмотр</tt> | ||
'''О "скриптах в кадрах":''' ''команды написанные таким образом будут срабатывать только во время перехода на кадр, в котором они содержатся.'' | '''О "скриптах в кадрах":''' ''команды написанные таким образом будут срабатывать только во время перехода на кадр, в котором они содержатся.'' | ||
Строка 116: | Строка 116: | ||
---- | ---- | ||
*Разберём, что здесь написано: | *Разберём, что здесь написано: | ||
− | ** <code>on(press)</code> ''//при нажатии на кнопку (<code>press</code> в скобках обозначает, что действие начнётся, в тот момент, когда на кнопку нажмут. Но есть и множество других событий, например <code>release</code> - если поставить его вместо <code>press</code>, то действия начнутся, когда кнопку нажмут, а потом отпустят, т.е. при отпускании)'' | + | ** '''<code>on(press)</code>''' ''//при нажатии на кнопку (<code>press</code> в скобках обозначает, что действие начнётся, в тот момент, когда на кнопку нажмут. Но есть и множество других событий, например <code>release</code> - если поставить его вместо <code>press</code>, то действия начнутся, когда кнопку нажмут, а потом отпустят, т.е. при отпускании)'' |
− | ** <code>{</code> ''//открывающая скобка обозначает начало списка действий'' | + | ** '''<code>{</code>''' ''//открывающая скобка обозначает начало списка действий'' |
− | ** <code>stop();</code> ''//остановить воспроизведение (если бы мы хотели, наоборот, продолжить воспроизведение, то вместо <code>stop(); написали бы <code>play();</code>)'' | + | ** '''<code>stop();</code>''' ''//остановить воспроизведение (если бы мы хотели, наоборот, продолжить воспроизведение, то вместо '''<code>stop();</code>''' написали бы '''<code>play();</code>)''''' |
− | ** <code>}</code> ''//закрытие списка действий'' | + | ** '''<code>}</code>''' ''//закрытие списка действий'' |
'''''В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре''''' | '''''В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре''''' | ||
Строка 160: | Строка 160: | ||
# Преобразуйте каждый объект в кнопку, как это было описано выше | # Преобразуйте каждый объект в кнопку, как это было описано выше | ||
# На каждую кнопку назначьте своё действие (скрипт) по образцу | # На каждую кнопку назначьте своё действие (скрипт) по образцу | ||
− | # Для кнопок "Следующий кадр" и "Предыдущий кадр" | + | # Для кнопок "Следующий кадр" и "Предыдущий кадр" добавьте следующие действия: '''nextFrame();''' (для кнопки "Следующий кадр") и '''prevFrame();''' (для кнопки "Предыдущий кадр") |
+ | <gallery> | ||
+ | Изображение:MAS_flabuttons.png|Мои кнопки | ||
+ | Изображение:MAS_flapanel.png|Вид получившейся панели на рабочем поле | ||
+ | </gallery> | ||
+ | === Перенос панели на отдельный слой === | ||
+ | ==== Если анимации или кадров презентации еще нет ==== | ||
+ | Для удобства | ||
+ | [[Изображение:MAS_flablock.png|thumb|200x300px|Блокировка слоя]] | ||
+ | # Нажмите на кнопку "Блокировка слоя", как показано на рисунке | ||
+ | # Добавьте новый слой. На нём будет размещаться анимация или слайды вашей презентации. | ||
+ | # На <tt>временной шкале</tt> нажмите на первый кадр нового слоя, чтобы перейти на него. | ||
+ | '''Панель готова.''' Вы можете сохранить ваш проект и в будущем '''использовать как шаблон'''. | ||
+ | ==== Если Вы уже создали свою презентацию или анимацию ==== | ||
+ | # Выделите всю Вашу панель с кнопками управления. | ||
+ | # Выполните сочетание клавиш Ctrl+X (чтобы вырезать панель для последующей вставки). | ||
+ | # На <tt>временной шкале</tt> нажмите на первый кадр нового слоя, чтобы перейти на него. | ||
+ | # Добавьте новый слой. На нём будет размещаться панель управления. | ||
+ | # Перейдите на первый кадр нового слоя. | ||
+ | # Выполните сочетание клавиш Ctrl+V (чтобы вставить панель на новый слой). | ||
+ | # Теперь пролистайте кадры на <tt>временной шкале</tt> до последнего кадра анимации/презентации. | ||
+ | # Выберите на той же позиции кадр нового слоя (как на рисунке) и нажмите F6 |
Версия 09:02, 7 мая 2010
Содержание |
Создание интерактивных приложений формата 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