Урок 6. Создание Flash-презентации. Часть первая

Компьютер выдает только то, что в него ввели. Секрет успеха не информация, но люди.

Ли Якокка

На данном уроке вам предлагается создать презентацию, посвященную рассмотрению автоматических Flash-эффектов. Вы не только пошагово выполните предлагаемое задание, изучите стандартные эффекты и команды Action Script, но и почерпнете ценные советы, которые помогут вам лучше сделать презентацию.

Что же презентуем?

Презентация, грамотно разработанная с помощью Macromedia Flash, будет выгодно выделяться среди шаблонных продуктов, рожденных в инкубаторе Microsoft Power Point. Представьте себе такую ситуацию. Вы приходите на важное для вас собрание и сталкиваетесь со следующим: выступавший перед вами человек создал свою презентацию с того же шаблона, что и вы. Вам это, конечно, неприятно и вовсе не повышает боевой дух. Если же вы создадите презентацию сами с помощью Macromedia Flash, то будете уверенно чувствовать себя на любом мероприятии. Сейчас, как, впрочем, и раньше, все стремятся выглядеть оригинальными, неповторимыми, узнаваемыми. И в этом программа Macromedia Flash станет вам верным помощником. В ней вы сможете заказывать музыку, анимацию и дополнительные реакции на действия мыши, создавать стильный неповторимый дизайн и делать многое другое.

Основные принципы создания презентации

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

  • Очень важно, чтобы ваша презентация имела цельный, законченный вид. Продумайте структуру и последовательность слайдов, которые должны точно дополнять вашу речь. Помните, что количество далеко не всегда определяет качество.
  • После создания структуры займитесь проработкой общих элементов дизайна для всех страниц-слайдов презентации.
  • Затем переходите к наполнению контентом — проработке отдельных слайдов и программированию реакций на действия мыши с помощью Action Script.
  • Наконец, дополните музыкальным сопровождением отдельные элементы презентации. Но не переусердствуйте, помните, что оно должно помогать, а не мешать вашему выступлению.
  • Особое внимание уделите тестированию. Не забывайте, что имеете дело не с отлаженными шаблонами, а с живым результатом вашей творческой деятельности.

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

  • Избегайте густой заполненности текстом страницы — у вас не урок чтения, а презентация, поэтому вместо слов лучше поместить иллюстрацию или наглядную схему либо диаграмму.
  • Не следует совсем отказываться от текста, поясняющего картинки, ведь от чрезмерного количества сложных схем и графиков также можно быстро устать.
  • Не перегружайте работу большим количеством зрелищных эффектов, все должно быть сделано со вкусом, с чувством меры и в русле основной идеи презентации. Излишняя пестрота раздражает, и зрители, вынужденные беспомощно следить за хаотическим мельканием перед глазами, не поймут, что же вы им хотите втолковать.

Как вы уже поняли, основное — это концепция. А теперь давайте наметим план работ.

Темой презентации сделаем сам Flash, а точнее, его стандартные эффекты. Таким образом мы убьем двух зайцев одним выстрелом — научимся создавать презентацию и работать с последними достижениями Flash-разработчиков (стандартные эффекты появились только в самой свежей версии программы Macromedia Flash 2004). На этом уроке и на следующем мы более подробно познакомимся и с возможностями языка Action Script.

Итак, нам необходимо подготовить перечень следующих слайдов: заглавный, собственно слайды, иллюстрирующие эффекты, и последний — с благодарностью за внимание.

Презентацию можно делать двумя способами.

Способ 1. Взять за основу стандартную Flash-презентацию. Для этого необходимо открыть файл шаблона, воспользовавшись меню File ? New (Файл ? Новый), выбрать в диалоговом окне вкладку Template (Шаблон) и отметить пункт Presentations (Презентации), а затем отдать предпочтение одному из стандартных шаблонов. Просмотрите их, может быть, кого-то из вас заинтересует и такой вариант. Во всяком случае, для тех, кто хочет слепить что-то на скорую руку, не слишком углубляясь во Flash-тонкости и секреты, такой подход будет самым удобным. Но как мы договорились, шаблоны не для нас.

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

Готовим Монтажный стол

Приступим. Создайте новый документ presentation.fla, а в нем сделайте четыре слоя. Давайте узнаем, зачем они нужны. Для этого движемся снизу вверх.

  1. Первый (нижний) слой, служащий «фоном», будет иметь дизайн, общий для всей последовательности слайдов. Создайте ключевой кадр на первом фрейме и изобразите в нем то, что вы были бы не прочь видеть на всем протяжении презентации. Нажмите на шестом фрейме, чтобы продлить кадры.
  2. Следующий слой назовите «муви-слайды». Именно на нем и будут находиться слайды презентации. Создаем покадровую анимацию на шесть фреймов, нажимая на каждом кадре. На первом фрейме делаем заглавную страницу: название, автор и т.п. Я полагаюсь на ваш вкус. Следующие четыре фрейма будут содержать муви-символы эффектов. На данном уроке мы рассмотрим такие эффекты, как Distributed duplication (Распределенное дублирование), Blur (Размытие), Transform (Трансформация), Explode (Взрыв), изучению же остальных эффектов будет посвящен следующий урок. И наконец, шестой, ключевой кадр последовательности мы посвятим благодарности за внимание. Также прорисуйте его.
  3. Слой «дальше» будет содержать кнопку, отвечающую за переход между слайдами. Можете сразу нарисовать для нее заготовку. Только когда будете продлевать ее, то не забудьте, что кнопка должна присутствовать лишь на первых пяти кадрах, на последнем, шестом, она отсутствует, так как переход на следующий слайд уже не нужен.
  4. Последний слой «действия» приберегите для команд Action Script, которые сделают переход между слайдами реальностью. Все сказанное выше представлено на рис. 1.
Рис. 1. Timeline (Монтажный стол) клипа и изображение на первом кадре

Подготовительная работа окончена. Теперь пора взяться за изготовление муви-символов. Ими мы наполним пока еще пустые фреймы одноименного слоя.

Стандарты автоматических Flash-эффектов

Не только мы озадачены проблемой изобретения интересных анимационных эффектов, разработчики Flash также постоянно размышляют над тем, как разнообразить автоматические функции создания эффектов. И в изучаемой нами последней версии программы Macromedia Flash MX 2004 они значительно в этом продвинулись, создав целую вкладку Timeline Effects (Эффекты Монтажного стола), которая открывается при выборе меню Insert (Вставить). Вкладка содержит три подпункта: Assistants (Помощники), Effects (Эффекты), Transform/Transition (Трансформация/Перемещение). В своей презентации мы пройдемся по всем трем группам, причем часть команд рассмотрим в этой статье, а оставшиеся в следующей.

Весна пришла, или Эффект Distributed duplication (Распределенное дублирование)

Начнем. Создайте с помощью клавиш + новый муви-символ «Distributed». Нарисуйте на одном слое луг, а на верхнем слое — цветок. Мы хотим, чтобы цветы появлялись один за другим без дополнительных усилий с нашей стороны. В этом нам поможет эффект Distributed duplication (Распределенное дублирование).

Выделите цветок и воспользуйтесь командой Distributed duplication (Распределенное дублирование) из меню Insert ? Timeline Effects ? Assistants (Вставить ? Эффекты Монтажного стола ? Помощники). В появившемся диалоговом окне настройте параметры для эффекта (рис. 2).

Рис. 2. Настройка диалогового окна Distributed duplication (Распределенное дублирование)
  • Number of copies (количество копий) — задайте количество клонов цветка равным семи.
  • Offset distance (Размер смещения) — определяется с помощью двух координат: X и Y. По горизонтали сделайте расстояние между копиями равным 100 пикселам (X), а по вертикали — 5 (Y).
  • Offset rotation (Поворот) — введите значение поворота последующих объектов равным 30?.
  • Offset start frame (Время смещения) — промежуток между появлением клонов задайте равным пяти фреймам.
  • Scale (Масштаб) — позволяет изменять масштаб каждой последующей копии, впишите значение, равное 95%.
  • Change color (Изменять цвет) — включите флажок, дабы позволить изменять цвет у последующих объектов.
  • Final color (Конечный цвет) — позволяет изменять цвет последующих клонов; установите красный цвет.
  • Final Alpha (Конечная прозрачность) — дает возможность плавно изменять прозрачность в течение анимации. Пусть параметр Alpha будет равен 100% и объекты не теряют видимость.
Рис. 3. Символ «distributed»

Чтобы просмотреть внесенные изменения прямо в диалоговом окне, нажмите кнопку Update Preview (Обновить просмотр). Для окончательного принятия эффекта нажмите кнопку OK. Обратите внимание на то, как должен выглядеть Timeline (Монтажный стол) после наших упражнений — он самовольно удлинился на число фреймов, заданных в поле Effect duration (Длительность эффекта) диалогового окна Distributed duplication (Распределенное дублирование), что показано на рис. 3 (см. верхнюю часть). Откройте библиотеку и перетяните на сцену несколько экземпляров автоматически появившегося символа «Distributed Duplicate 1», чтобы рассадить больше цветов (рис. 3, см. нижнюю часть). Переходим к рассмотрению следующего эффекта.

Раннее лето, или Эффект Blur (Размытие)

Эффекты могут работать не только с векторными объектами, но и с растровыми. Давайте осуществим эффект размытия с помощью команды Blur (Размытие). Создайте новый муви-символ «Blur», импортируйте в него с диска журнала файл maki.jpeg. Нажмите на седьмом кадре (чтобы некоторое время рисунок оставался без изменения), выделите изображение данного фрейма и воспользуйтесь меню Insert ? Timeline Effects ? Effects (Вставить ? Эффекты Монтажного стола ? Эффекты), где выберите пункт Blur (Размытие).

Рис. 4. Настройка диалогового окна эффекта Blur (Размытие)

В появившемся диалоговом окне Blur (Размытие) настройте параметры у эффекта следующим образом (рис. 4):

  • Effect duration in frames (Длительность эффекта) — обозначает, сколько кадров будет длиться эффект. Задайте 20 фреймов.
  • Resolution (Число шагов) — определяет число шагов, за которые будет осуществляться эффект. Установите количество переходов равным 10.
  • Scale (Масштаб) — задает размер базового объекта по сравнению с теми объектами, которые используются для привнесения эффекта размытия. Значения, меньшие 1, указывают на то, что базовый объект будет меньше производных от него, а более 1, естественно, наоборот — вспомогательные «размытия» будут меньше размываемого объекта. Задайте данное значение равным 0,25.
  • Allow horizontal blur (Разрешить размытие по горизонтали) — позволяет производить размытие по горизонтали. Оставьте данный флажок включенным.
  • Allow vertical blur (Разрешить размытие по вертикали) — по аналогии с предыдущим пунктом позволяет «размывать» объект по вертикали. Пусть данный пункт также будет активен.
  • Direction of Movement (Направление движения) — позволяет выбрать одну из стрелок, указывающих на направление, по которому будет осуществляться размытие. Выберите центральный пункт, который означает, что движение будет производиться сразу по всем направлениям.

Нажмите OK — эффект готов.

Осень, опадает листва, или Эффект Transform (Трансформация)

Рис. 5. Настройка параметров размытия текста в диалоговом окне Transform (Трансформация)

Операцию Transform (Трансформация) мы используем для создания эффекта листвы, облетающей с дерева. Очень быстро создадим символ одного листа в свободном падении, а потом его размножим. Сделайте новый символ «Transform», а в нем выполните нижний слой с изображением дерева и верхний, на котором будет происходить облетание листвы. Нарисуйте лист, выделите его и воспользуйтесь командой Transform (Трансформация) из меню Insert ? Timeline Effects ? Transform/Transition (Вставить ? Эффекты Монтажного стола ? Трансформация/Перемещение). В появившемся диалоговом окне эффекта настройте параметры следующим образом (рис. 5). Как вы поняли, для разнообразных стандартных эффектов некоторые из них идентичны, поэтому я не буду подробно останавливаться на уже пройденных.

  • Effect duration (Длительность эффекта) — задайте равным 30 фреймам.
  • Change position (Изменить местоположение) — для изменения положения по горизонтали и вертикали определите следующие параметры: X=70, Y= -100 пикселов.
  • Scale (Масштабировать) — укажите 30%.
  • Rotate (Поворот) и Spin (Вращение) взаимосвязаны. Одно вращение равно 360? поворота. Задайте Spin (Вращение) равным трем оборотам.
  • Остальные параметры, такие как Change color (Изменить цвет), Final color (Конечный цвет) и Final Alpha (Конечная прозрачность), вам уже известны, настройте их по собственному усмотрению.
  • Motion ease (Замедлить движение) — позволяет изменять скорость движения. Сделаем анимацию вначале замедленной, задав значение параметра равным -50.
Рис. 6. Символ «Transform»

После того как все будет настроено, нажмите кнопку диалогового окна ОK. Найдите в библиотеке символ падающего листа и помещайте его экземпляры на сцене символа «Transform» столько раз, сколько вашей душе угодно, трансформируя и изменяя цвет на свой вкус (рис. 6).

Зима, ледяные брызги, или Эффект Explode (Взрыв)

Эффект Explode (Взрыв) создает иллюзию взрывающегося объекта — он распадается на отдельные части, которые могут вращаться, изменять размер, прозрачность и т.д. Но давайте обо всем по порядку.

Создайте новый муви-символ «Explode», в нем на одном слое поместите изображение моря, на втором — рыбы, а на третьем — небольшого столбика воды. Слой с морем остается неподвижным, для рыбы с помощью анимации Motion Tween реализуйте прыжок из воды и в воду. С Motion Tween мы работаем давно, и я не думаю, что эта процедура вызовет у вас затруднения. Наша главная задача — создать брызги при выпрыгивании рыбы из воды и при возвращении ее в родную стихию.

Выделите столбик воды и выберите в меню пункт Explode (Взрыв). Для этого воспользуйтесь меню Insert ? Timeline Effects ? Effects ( Вставить ? Эффекты Монтажного стола ? Эффекты). В ответ на это действие появится диалоговое окно Explode (Взрыв), параметры которого мы сейчас рассмотрим и настроим (рис. 7).

Рис. 7. Настройка параметров диалогового окна Explode (Взрыв)
  • Effect duration (Длительность эффекта) — задайте равным 15 фреймам.
  • Direction of explosion (Направление взрыва) — позволяет выбрать одно из направлений распространения взрывной волны. Выберите на верхней линейке центральный пункт.
  • Arc size (Размер смещения) — укажите размер смещения по осям X=30 и Y=150 пикселов.
  • Rotate Fragments (Поворачивать фрагменты на) — опция предназначена для определения угла поворота фрагментов в градусах. Установите его равным 90.
  • Change Fragments Size by (Изменять размер фрагментов) — задайте в поле Y и X значение, равное 2 пикселам, тем самым растягивая отдельные брызги на указанное число.

Нажмите ОK и поработайте над Монтажным столом так, чтобы он стал похож на представленный на рис. 8.

Рис. 8. Timeline (Монтажный стол) символа «Explode»

Беремся за Action Script

Теперь пора склеить все заготовленные «мувики» в одну слайд-последовательность. Вернемся на основную сцену и перетянем на кадры слоя муви-символы с панели Library (Библиотека). Второму кадру должен соответствовать символ «Distributed», третьему — «Blur», четвертому — «Transform», пятому — «Explode».

Второй слой используем для размещения на нем кнопки, которую еще предстоит создать. Что вы благополучно и проделаете, помня о правилах при работе с кнопками, изложенных в уроке 3.2 (см. «Мир ПК», № 1/05).

После того как кнопка готова, на панели Properties (Свойства) в поле Instance name, которое располагается слева под надписью Button, задайте любое имя латинскими буквами. Лучше, чтобы оно было более или менее осмысленным, — вам же проще будет потом разбираться. Например, нам необходимо, чтобы при нажатии на кнопку клип переходил на следующий кадр, тогда так и называем кнопку — forwardBtn.

Теперь обратитесь к панели Actions (Действия) и пропишите там следующий скрипт:

stop();

forwardBtn.onPress = function ()

{

nextFrame();

}

Перевожу: stop() — остановиться. При нажатии onPress на кнопку forwardBtn. выполнить функцию = function (), которая позволит перейти на следующий кадр клипа nextFrame(); Как видите, нет ничего хитрого и непонятного. Все формализовано и просто.

Протестируйте клип, воспользовавшись комбинацией клавиш +, и проверьте презентацию в работе.

* * *

Вот и все. На следующем уроке мы закончим рассмотрение стандартных Flash-эффектов.

Ксения Слепченко — менеджер и дизайнер Координационного центра программы ECDL на Украине (Европейский стандарт компьютерной грамотности), e-mail: ksenijas@yandex.ru.