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

Материал из Letopisi.Ru — «Время вернуться домой»
(Различия между версиями)
Перейти к: навигация, поиск
(→‎Общая терминология)
(→‎Если Вы уже создали свою презентацию или анимацию)
 
(не показаны 14 промежуточных версий 3 участников)
Строка 3: Строка 3:
 
Учимся делать игры, презентации и т.д. во Flash'е
 
Учимся делать игры, презентации и т.д. во Flash'е
 
=== Что о чём? ===
 
=== Что о чём? ===
−
Не сомневаюсь, Вы наверняка видели множество баннеров (анимированных рекламок), Flash-игр на просторах интернета. Как не сложно догадаться, всё это делается в программе <tt>Flash</tt> (спасибо, кэп!). В данной статье Я покажу Вам, как создать нечто подобное.
+
Не сомневаюсь, Вы наверняка видели множество баннеров (анимированных рекламок), Flash-игр на просторах интернета. Как не сложно догадаться, всё это делается в программе <tt>Flash</tt>
 +
 
 
=== Что потребуется: ===
 
=== Что потребуется: ===
 
* Желание
 
* Желание
 
* Прямые руки
 
* Прямые руки
 
* Сам Flash (начиная от 6'ой версии)
 
* Сам Flash (начиная от 6'ой версии)
−
== Приступим ==
+
== Основы ==
 
=== Общая терминология ===
 
=== Общая терминология ===
 
Ниже приведена таблица, обеспечивающая понимание терминов, которые будут использованы далее.
 
Ниже приведена таблица, обеспечивающая понимание терминов, которые будут использованы далее.
Строка 53: Строка 54:
 
  |}
 
  |}
  
−
=== Создание управляемой презентации ===
+
=== Интерфейс ===
−
* Для начала создадим новый проект:
+
Наглядный показ перечисленного в таблице.
−
# Файл (File) ->
+
<gallery>
−
# Новый (New Flash Document)
+
Изображение:MAS_flainterface.png|Общий вид
−
* Перед вами раб
+
Изображение:MAS_flatools.png|Панель инструментов
−
==== Создание кнопки ====
+
Изображение:MAS_flatimescale.png|Временная шкала
−
* Для начала создадим новый проект:
+
Изображение:MAS_flaselection.png|Выделение
 +
</gallery>
 +
 
 +
=== Создание нового проекта ===
 +
*Последовательность:
 
# Файл (File) ->
 
# Файл (File) ->
 
# Новый (New Flash Document)
 
# Новый (New Flash Document)
−
* Нарисуем в центре что - нибудь кистью
+
# Сразу его сохраним под каким-нибудь именем: для сохранение выполните сочетание клавиш Ctrl+S (''всегда сохраняйте файл, при внесении важных изменений, так же рекомендуется сохранять резервные копии'')
−
# На панели инструментов (слева) выберите "Кисть" (Brush)
+
'''Проект создан'''
−
# В центре рабочего поля нарисуйте что-нибудь кнопкообразное
+
 
−
* Теперь преобразуем получившийся рисунок в кнопку
+
=== Создание анимации ===
−
# Выделите свой рисунок
+
* Для начала создадим новый проект.
−
# Нажмите F8
+
** Теперь разберем простой пример создания покадровой анимации:
−
# В открывшемся окошке выберите "Кнопка" (Button)
+
# выберите инструмент "Кисть" (Brush);
−
# Нажмите "ОК"
+
# нарисуйте что-нибудь в центре <tt>рабочего поля</tt>;
 +
# нажмите клавишу F6 для создания нового <tt>ключевого кадра</tt>. Новый кадр появится на <tt>временной шкале</tt>, и Вы автоматически переместитесь на него;
 +
# как видите, на новом кадре ничего не изменилось. Выберите инструмент выделения "Selection Tool";
 +
# выделите инструментом нарисованный Вами объект, а потом, зажав левую кнопку мыши, переместите его на небольшое расстояние от начального положения;
 +
# повторяйте шаги 3, 4, и 6, пока не будете удовлетворены результатом;
 +
# теперь, чтобы увидеть проделанную работу, устройте предпросмотр, выполнив сочетание клавиш Ctrl+Enter;
 +
# наблюдайте :)
 +
'''Вывод:''' ''анимация - просто последовательность ключевых кадров, они легко создаются и легко редактируются. Не обязательно перемещать рисунок, Вы так же можете изменять  его, т.е. пририсовывать что-либо еще, стирать, изменять форму, цвет и т.д. Содержимое любого кадра полностью в Вашем распоряжении...
 +
''
 +
Внимание! Ваш мультик ограничивается только Вашей фантазией!
 +
 
 +
=== Написание скрипта для кадра ===
 +
*Наверное, Вы заметили, что при просмотре мультика, когда анимация доходит до последнего кадра, то всё начинается сначала? Это происходит потому, что по стандарту на последнем кадре нет команды "остановиться". Так напишем её:
 +
# перейдите на последний кадр, щёлкнув по нему мышкой (на <tt>временной шкале</tt>);
 +
# теперь нажмите на <tt>панель действий</tt>, чтобы она раскрылась;
 +
# напишите: '''<code>stop();</code>''' - это заставит анимацию остановиться на последнем кадре;
 +
# проверьте это, запустив <tt>предпросмотр</tt>.
 +
'''О "скриптах в кадрах":''' ''команды, написанные таким образом, будут срабатывать только во время перехода на кадр, в котором они содержатся.''
 +
 
 +
=== Создание кнопки ===
 +
* Нарисуем в центре <tt>рабочего поля</tt> что-нибудь кистью:
 +
# на панели инструментов (слева) выберите "Кисть" (Brush);
 +
# в центре рабочего поля нарисуйте что-нибудь кнопкообразное.
 +
* Теперь преобразуем получившийся рисунок в кнопку:
 +
# выделите свой рисунок;
 +
# нажмите F8;
 +
# в открывшемся окошке выберите "Кнопка" (Button);
 +
# нажмите "ОК".
 
'''''Кнопка создана!'''''
 
'''''Кнопка создана!'''''
−
==== Написание скрипта ====
+
 
−
*Скрипт будем назначать на кнопку (о том, как её создать написано выше)
+
=== Написание скрипта для кнопки ===
−
# Выделите вашу кнопку (вокруг неё должна появиться синяя рамочка)
+
*Скрипт будем назначать на кнопку (о том, как её создать, написано выше):
−
# Зайдите в <tt>панель действий</tt>
+
# выделите Вашу кнопку (вокруг неё должна появиться синяя рамочка);
−
# В поле ввода текста введите:
+
# зайдите в <tt>панель действий</tt>;
 +
# в поле ввода текста введите:
 
----
 
----
 
<code>on(press){
 
<code>on(press){
−
<br>stop();</br>
+
 
 +
stop();
 +
 
 
}
 
}
 
</code>
 
</code>
 
----
 
----
 
*Разберём, что здесь написано:
 
*Разберём, что здесь написано:
−
** <code>on(release)</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>''' ''//закрытие списка действий''.
−
'''''В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре'''''
+
'''''В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре.'''''
−
==== Создание управления ходом презентации ====
+
 
−
-Зачем нам управление? -Потому что это круто!
+
=== Перечень основных команд (действий) для управления воспроизведением ===
−
* '''Для управления нам понадобятся:'''
+
{|border="1"
−
** Кнопка "Промотать вперёд"
+
!Команда
−
** Кнопка "Пауза"
+
!Описание
−
** Кнопка "Следующий кадр"
+
|-
−
** Кнопка "Предыдущий кадр"
+
|<code>play();</code>
−
Где их взять? Нигде. Будем делать сами - Вы и Я.
+
|Возобновление (начало) проигрывания анимации.
 +
|-
 +
|<code>stop();</code>
 +
|Остановка воспроизведения анимации.
 +
|-
 +
|<code>nextFrame();</code>
 +
|Переход на следующий кадр.
 +
|-
 +
|<code>prevFrame();</code>
 +
|Переход на предыдущий кадр.
 +
|-
 +
|<code>gotoAndPlay(<номер кадра>);</code>
 +
|Переход на заданный кадр и воспроизведение анимации, начиная с него.
 +
|-
 +
|<code>gotoAndStop(<номер кадра>);</code>
 +
|Переход на заданный кадр и остановка воспроизведения на нём.
 +
|}
 +
== Создание интерактивной презентации ==
 +
=== Создание управления воспроизведением ===
 +
Создание панели навигации для презентации или мультика
 +
* '''Для работы нам понадобятся:'''
 +
** кнопка "Промотать вперёд";
 +
** кнопка "Пауза";
 +
** кнопка "Следующий кадр";
 +
** кнопка "Предыдущий кадр".
 +
Где их взять? Нигде. Будем делать сами - Вы и я.
 +
 
 +
'''Ход работы'''
 +
# Нарисуйте несколько объектов.
 +
# Преобразуйте каждый объект в кнопку, как это было описано выше.
 +
# На каждую кнопку назначьте своё действие (скрипт) по образцу.
 +
# Для кнопок "Следующий кадр" и "Предыдущий кадр" добавьте следующие действия: '''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.
 +
 
 +
 
  
−
'''Ход работы:'''
+
[[Категория:Информационные технологии]]
−
# Нарисуйте несколько объектов
+
−
# Преобразуйте каждый объект в кнопку, как это было описано выше
+
−
# На каждую кнопку назначьте своё действие по образцу
+
−
# Для кнопок "Следующий кадр" и "Предыдущий кадр" вместо действия play(); или stop(); напишите: NextFrame(); (для "Следующий кадр") и PervousFrame(); (для кнопки "Предыдущий кадр")
+

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

MAS flm.jpeg

Содержание

[править] Создание интерактивных приложений формата 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.
Источник — «http://letopisi.org/index.php?title=%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%BF%D0%BE_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8E_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85_%D1%84%D0%BB%D0%B5%D1%88_%D0%BF%D1%80%D0%B5%D0%B7%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D0%B9_%D0%B8_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9&oldid=751421»
Персональные инструменты
Инструменты