Практическая работа: Создание intro-ролика сайта

Раздел Другое
Класс -
Тип Другие методич. материалы
Автор
Дата
Формат doc
Изображения Есть
For-Teacher.ru - все для учителя
Поделитесь с коллегами:

Трудное - это то,

что может быть сделано немедленно;

невозможное - то,

что потребует немного больше времени.

Сантаяна

Создание intro-ролика сайта

Настраиваем параметры клипа: в Document Properties (Свойства документа) задаем фон. Остановимся на сером нейтральном фоне - #9B9B9B. Задаем ширину и высоту клипа, для чего вводим значения 400 и 300 пикселов соответственно. Потом мы растянем клип, увеличив его «площадь» в 2 раза - 800x600 пикселов. Но это позже.

Динамичная карта. Импорт объектов

  1. Займемся картой. Исходный рисунок map.jpeg.
    Сначала импортируем изображение на сцену. Для этого создаем новый слой и даем ему смысловое название «карта».

  2. Создаем серию ключевых кадров и анимацию движения в соответствии с имеющимися на рис. 1 (слой «карта»).

  3. Теперь переместите свое внимание на карту. У нас имеется шесть контрольных ключевых точек. Установите для каждой из них параметры, представленные в таблице. Для этого вам понадобятся две панели: панель Properties (Свойства), где вы будете настраивать параметр Alpha, и панель Info (Информация), вызываемая комбинацией клавиш +I.

Практическая работа: Создание intro-ролика сайта

Рис. 1. Так должна выглядеть первая группа слоев

С панелью Properties вы уже знакомы, а в нижней части Info отображается информация о параметрах цвета текущего объекта и о положении курсора. В верхней части панели можно устанавливать размеры (высоту и ширину) выделенного объекта, а также координаты его местонахождения (X и Y). Панель Info можно использовать в ряде случаев как альтернативу инструментам Free Transform Tool (Свободная трансформация) и Selection Tool (Выделение). Мы импортировали растровый рисунок, но трансформировать его можно точно так же, как и векторный.

№ кадра

№ фрейма

Ширина

Высота

X

Y

Alpha, %

1

1

540

223

69,7

15,3

0

2

7

365

152

17,6

53

52

3

24

365

152

17,6

53

0

4

52

365

152

17,6

53

0

5

56

365

152

17,6

30

100

6

57

365

152

17,6

30

55

Теперь при проигрывании клипа вы можете наблюдать на Рабочем столе эффектное мерцание и движение карты. А сейчас настала очередь текстовых блоков.

Текстовые блоки

Люди мечтали преодолеть пространство и время

  1. Создайте слой с надписью «Люди мечтали преодолеть пространство и время». Пусть текст будет яркого желтого цвета.

  2. Создайте серию ключевых кадров (3 и 9 фреймы) и анимацию в соответствии с показанным на рис. 1 (слой «Люди мечтали...»).

  3. На первом ключевом кадре задайте значение Alpha, равное 0, и настолько уменьшите надпись, чтобы у зрителя сложилось впечатление, будто лозунг выпрыгивает из сцены. Последний кадр слоя - в 34 фрейме.

У нас это получилось

  1. Создайте слой с текстом «У нас это получилось». Задайте для этой надписи такие же цвет и размер, как и у предыдущей.

  2. Сделайте с текстовым блоком три ключевых кадра (37, 52 и 60 фреймы) и анимацию движения, расположив их аналогично представленным на рис. 1 (слой «У нас это получилось»). На последнем кадре с помощью инструмента трансформации увеличьте надпись на весь экран и измените значение Alpha на 0. Теперь будет казаться, будто текст плавно растворяется.

Эффект стирающегося текста

При переходе от первого лозунга ко второму воспользуемся следующим эффектным приемом. Я его называю «Стирающийся текст» - сначала постепенно стирается прежний текст, а затем открывается новый.

  1. Снова создаем новый слой, называем его «Резинка».

  2. С помощью инструмента - Rectangle Tool (Прямоугольник) создаем объект такого же цвета, что и фон, который будет скрывать и открывать текст. Высота прямоугольника должна несколько превышать высоту символов.

  3. Контур фигуры следует удалить, последовательно выделяя инструментом Selection Tool (Выделение) линии, очерчивающие прямоугольник, и нажимая .

  4. Данная фигура должна перемещаться в соответствии с рис. 1 (слой «Резинка»). Смысл такой. В первом ключевом кадре (28 фрейм) прямоугольник имеет ширину, равную одному пикселу, и располагается перед надписью «Люди мечтали преодолеть пространство и время». Во втором (34 фрейм) его ширина превышает ширину текста, на который он накладывается, закрывая надпись полностью. В третьем кадре (39 фрейм) ширина приводится в соответствие с новой надписью «У нас это получилось», а на четвертом (47 фрейм) «Резинка» снова приобретает толщину в один пиксел и возвращается на исходные позиции перед новым текстом, открывая его для всеобщего обозрения.

Практическая работа: Создание intro-ролика сайта

Рис. 2. А так должна выглядеть вторая группа слоев

Конэкс

С ним все очень просто. Создаем одноименный слой. Смотрим на рис. 2 (слой «Конэкс»), претворяя движение в жизнь. В первом кадре (43 фрейм) текст с мелким шрифтом находится сверху, вне сцены, да к тому же окрашен с помощью Tint в черный цвет. Но во втором ключевом кадре (49 фрейме) он приобретает белый цвет, солидный размер и приземляется в центре сцены.

Компания независимых экспедиторов

Создаем одноименный слой и движение на нем в соответствии с рис. 2 (слой «Компания...»). Размещаем текст под надписью «Конэкс». В первом ключевом кадре (62 фрейм) текст полупрозрачен, приплюснут и располагается на уровне «Конэкса», во втором ключевом кадре (66 фрейм) «Компания» симметрично размещается под «Конэксом».

Рельсы-рельсы, шпалы-шпалы

Практическая работа: Создание intro-ролика сайта

Рис. 3. «Шпалы-шпалы» - готовим «подставки» для ссылокПоскольку основная сфера деятельности компании
«Конэкс» - железнодорожные перевозки, то в заставке было решено подчеркнуть данное обстоятельство и привнести в клип рельсы как символ железной дороги. На новом слое с помощью инструмента Line (Линия) создайте линии, сходные с изображенными на рис. 3.

Практическая работа: Создание intro-ролика сайта

Рис. 4. «Рельсы-рельсы» в ожидании поезда

Реализуйте анимацию движения так, как показано на рис. 2, слой «подчерк_кнопок». Теперь в первом кадре (55 фрейм) сожмите линии, чтобы они удлинились ко второму кадру
(59 фрейму).

На отдельном слое нарисуйте линии (рис. 4) и создайте анимацию, как на рис. 2, слой «линии-рельсы». В первом кадре (48 фрейм) сделайте их невидимыми. Во втором ключевом кадре (53 фрейме), они полностью проявляются.

Ссылки

Теперь займемся ссылками на основные страницы сайта. Создайте новый слой «Кнопки» и серию ключевых кадров (58, 59, 60, 61 фреймы), как на рис. 2 (слой «Кнопки»). Ссылки у нас будут появляться последовательно. Так, в первом ключевом кадре присутствует только «О нас», во втором - «О нас» и «Новости», в третьем к ним добавляются «Перевозки», в четвертом - «Таможенные декларации». На рис. 5 продемонстрировано, какой должна быть сцена для последнего кадра.

Практическая работа: Создание intro-ролика сайта

Рис. 5. Так выглядит сцена на последнем кадре

Библиотека

В библиотеке (рис. 6) хранятся созданные во Flash символы и импортированные файлы. Первым идет импортированный нами растровый (bitmap) файл map.jpeg, а далее графические объекты. Я советую и библиотечным объектам давать осмысленные названия, так как потом вы сможете их использовать в других клипах. Но помните, что если они будут называться стандартно, то при импорте в другой клип вполне вероятен конфликт одноименных объектов.

Практическая работа: Создание intro-ролика сайта

Рис. 6. Наш собственный библиотечный фонд на панели Library (Библиотека)

В Библиотеке должен быть порядок, поэтому переименуйте объекты в соответствии с рис. 6 с помощью контекстного меню.

Остановись, мгновенье

Для того чтобы клип после последнего кадра не переходил на первый и не проигрывался вновь, необходимо на последнем кадре прописать команду, останавливающую показ. Это делается с помощью команд-скриптов, написанных на языке ActionScript. Они выполняются после совершения определенных событий.

Итак, для того чтобы остановить клип, делаем следующее: нажимаем клавишу , чтобы активизировать панель Actions (Действия), устанавливаем курсор на поле для ввода текста и нажимаем комбинацию клавиш +s+t - у нас возникает скрипт stop();. Такого же эффекта можно было бы добиться еще двумя способами: во-первых, попросту введя необходимую команду, и во-вторых, выбрав ее из перечня стандартных скриптов (рис. 7).

Практическая работа: Создание intro-ролика сайта

Рис. 7. Выбор скрипта stop на панели Actions (Действия)

Команды могут быть одиночными, как в нашем случае, или состоять из последовательности команд. Данную команду мы пишем для определенного фрейма - последнего. Но применяться скрипты могут не только для отдельных кадров, но и для кнопок.

Протестируйте клип и сохраните файл.

Мы создали основу ролика, теперь же наша цель - наполнение клипа интерактивностью, т.е. реакцией объектов на действия пользователя.

Импорт файлов в Библиотеку

Сначала нужно импортировать в Библиотеку растровые рисунки и звуковые файлы, которые нам понадобятся.

  1. Выбираем File\Import\Import to Library (Файл\ Импортировать\ Импорт в библиотеку).

  2. В появившемся окне выбираем нужные файлы (avia.ipeg, avto.jpeg, rail.jpeg, sea.jpeg bw_avia.jpeg, bw_avto.jpeg, bw_rail.jpeg, bw_sea.jpeg, logo.jpeg, music1.wav, musik2.wav) и импортируем их в библиотеку. Можно выбирать как отдельные файлы, так и их группы. Чтобы сэкономить время, я рекомендую выделить одновременно все названные выше документы и нажать Open (Открыть). Вы видите, что на панели Library (Библиотека) у вас появились данные объекты.

Кнопки, кнопки и еще раз кнопки

Следующая задача - создание ссылок на информацию об основных типах перевозок, которые предлагает фирма «Конэкс»: авто, авиа, железнодорожные и морские. Для того чтобы оживить и обогатить intro-ролик, эти ссылки будут представлены пиктограммами картинок, соответствующими данным видам перевозок. Чтобы поддержать единый стиль, было решено сделать их черно-белыми, но при наведении курсора мыши рисунки должны становиться цветными.

  1. Создайте новый слой пикт_кнопки, на 48-м кадре нажмите и перетяните из Библиотеки на поле клипа элементы, начинающиеся с bw_ - bw_avia.jpeg, bw_avto.jpeg, bw_rail.jpeg, bw_sea.jpeg.

  2. Задайте размер изображений 70 на 40.

  3. С помощью панели Align (Выровнять) расположите их на одном уровне с одинаковыми расстояниями, как показано на рис. 8.

Практическая работа: Создание intro-ролика сайта

Рис.8. Так должны располагаться картинки-ссылки

Подробно рассмотрим создание кнопки для авиаперевозок, а для всех остальных видов перевозок вы по аналогии создадите их сами.

Авиакнопка

Чтобы создать кнопку с нуля, нужно нажать комбинацию клавиш +. Но мы возьмем в качестве прототипа кнопки уже существующий на сцене рисунок и преобразуем его в символ «Кнопка».

  1. Выделяем изображение самолета и нажимаем клавишу .

  2. В появившемся диалоговом окне Convert to symbol (Преобразовать в символ) выбираем пункт Button (Кнопка).

  3. Вводим название b_avia (кнопка с ссылкой на информацию об авиаперевозках). Нажимаем ОК.

Теперь при выборе пиктограммы самолета вокруг объекта появляется голубая рамка. Значит, мы имеем дело с символом. Чтобы перейти в режим редактирования символа, необходимо выполнить одно из следующих действий:

 дважды щелкнуть левой клавишей мыши на объекте;

 воспользоваться контекстным меню - выделить объект, нажать правую клавишу мыши и выбрать один из пунктов: Edit (Редактировать), Edit in Place (Редактировать на месте) или Edit in New Window (Редактировать в новом окне);

 непосредственно на панели Library (Библиотека) найти интересующий объект и дважды щелкнуть на нем левой клавишей мыши.

Внимание!Самым быстрым является первое действие, поскольку оно позволяет редактировать в режиме Edit in Place (Редактировать на месте).

Вот вы и в режиме редактирования. Перед вами четыре кадра - четыре состояния кнопки, которые необходимо настроить. Займемся этим.

Все выше и выше. Up (Вверх) - данный режим уже готов, на сцене мы видим изображение самолета. Если указатель мыши не находится в области изображения самолета, рисунок будет точно таким же, как мы его видим. На Монтажном столе в кадре Up (Вверх) красуется жирная черная точка, которая свидетельствует о том, что фрейм не пуст. Обратите внимание, что на соседних кадрах подобной маркировки нет.

Над пропастью. Over (Над) - отмечаем курсором мыши состояние Over (Над) и нажимаем . В кадре под заголовком Over (Над) появилась такая же жирная точка, что и в Up (Вверх), а на Рабочем столе - серый самолет с предыдущего кадра. Но поскольку здесь он такой уже не нужен, то удаляем его и из Библиотеки перетаскиваем цветной двойник с именем avia. Чтобы самолет размещался точно на том же месте, где и серый собрат, воспользуемся панелью Info (Информация), вызываемой нажатием клавиш +I. На ней в координатах X и Y необходимо указать нули. Теперь цветное изображение «поставлено на место».

А там, внизу. Down (Вниз) - нажимаем на кадре Down (Вниз). Если удерживать левую клавишу мыши нажатой на данном пункте, изображение будет приобретать белый оттенок. Чтобы получить подобный эффект, выполните следующее.

  1. Преобразуйте содержимое кадра в символ Graphic (Графика), для чего выделите изображение и нажмите . В диалоговом окне выберите пункт Graphic (Графика) и дайте символу имя g_avia.

  2. Щелкните мышью по объекту, чтобы перейти в режим редактирования. Затем обратитесь к панели Properties (Свойства). Настройте в части Color (Цвет) Brightness (Яркость), равную 50%.

Только что мы рассмотрели пример того, что символ, как матрешка, может содержать в себе другие символы, а те в свою очередь - третьи.

Нажать и не отпускать. Hit (Нажатие) - нажмите в соответствующем кадре и удалите изображение самолета. На его месте с помощью инструмента Rectangle Tool (Прямоугольник) создайте фигуру, определяющую область, «чувствительную» к действиям мыши.

Нажми на кнопку, получишь результат - ссылку

Создадим ссылку на html-страницу нашего же ролика.

  1. Найдите и выделите на панели Actions (Действия) символ b_avia.

  2. Напишите для него следующий скрипт

on(release) {getURL(«konex.html»);}

Теперь вернитесь на сцену, щелкнув мышью по заголовку Scene 1 (Сцена 1) над Timeline (Монтажный стол), и проделайте аналогичные действия для остальных кнопок. Дайте им следующие названия: b_avto, b_rail, b_sea.

Нажмите комбинацию клавиш + и проверьте, как работают созданные вами кнопки. Впрочем, то же самое вы можете сделать и непосредственно на рабочем месте. Для этого нужно выбрать Control\Enable Simple Buttons (Контроль\ Включить простые кнопки) или нажать комбинацию клавиш ++B.

Внимание! Имейте в виду, что при активном Enable Simple Buttons (Включить простые кнопки) вы не сможете легко и свободно двойным щелчком переходить к режиму редактирования кнопок. Вот тут-то мы и вспомним про два других способа перехода к редактированию (см. выше). Можно также нажать еще раз ++B, чтобы вернуться в прежний «неактивный» режим.

Логотип

Логотип - важная составная часть, формирующая имидж компании. Он способствует лучшему «узнаванию» фирмы, помогает клиентам отличать организации друг от друга. Следовательно, Лого должно занимать в клипе место, соответствующее своему статусу. Считаем, что фирма-заказчик нам его предоставила - это файл logo.gif.

Практическая работа: Создание intro-ролика сайта

Рис.9. Порядок расположения слоев

  1. Создайте новый слой «Лого» и ключевой кадр на 25-м фрейме.

  2. Из Библиотеки перетащите на сцену символ logo. Задайте размер изображения 40 на 30.

  3. Создайте серию ключевых кадров в соответствии с табл. 1.

  4. В ключевых кадрах задайте следующие координаты логотипу на панели Info (Информация), приведенные в таблице.

ключевого кадра

X

Y

25

18

-31

33

18

197

38

18

42

42

18

166

44

18

73

47

18

154

50

18

110

65

18

110

Фон для логотипа и прием «Расползание цвета»

  1. Создайте новый слой «желтая полоса». Обратите внимание на то, что он должен располагаться под слоями, которые обозначают рельсы и шпалы («линии-рельсы», «подчеркивание кнопок»), и над слоем с картой («карта»).

  2. Используя инструмент Rectangle Tool (Прямоугольник), создайте на 26-м кадре (рис. 9, слой «желтая полоса») вытянутый прямоугольник, такой же, как в левой части рис. 11, и удалите его контуры.

  3. Выделите прямоугольник и обратитесь к панели Color Mixer (Цветовой микшер). Выберите тип заливки Linear и настройте ее так, чтобы был переход от желтого цвета (#FFCC00) к цвету фона.

  4. Но созданная таким образом заливка объекта получается по вертикали, а не по горизонтали, как требуется. Чтобы изменить направление заливки, воспользуйтесь инструментом Feel Transform Tool (Трансформация заливки). Принципы его применения схожи с работой инструмента Free transformation (Свободная трансформация), только преобразуете вы не объект, а заливку выделенного объекта.

  5. Создайте движение в соответствии с рис. 9 (слой «желтая полоса»). На 1-м ключевом кадре (25) сожмите прямоугольник и расположите его над сценой так, чтобы он растягивался ко 2-му ключевому кадру (35).

Ссылки. Еще раз спасибо символам и экземплярам

Вспомним теперь про созданные заготовки ссылок «О нас», «Новости» и т.д. Они также нуждаются в интерактивности. Вы уже знаете, как добавить ссылку на страницу сайта. Но мы пойдем дальше и присоединим к ней короткий клип, который будет активизироваться при подведении курсора мыши к ссылке.

Этим клипом будет полет стрелы по сцене, и сейчас мы создадим его. Проработаем одну стрелку, а потом на ее основе образуем экземпляры и используем их в ссылках.

  1. Нажмите клавиши +, чтобы создать новый символ, назовите его «Strelka» и выберите тип символа Movie (Ролик).

  2. На новой сцене, соответствующей символу, создайте стрелку, имеющую сходство с изображенной на рис. 10. Размер 20 на 7.

  3. Нажмите на 10-м кадре и передвиньте стрелку так, чтобы от первого до последнего кадра она пролетала от левой части сцены к правой.

  4. На панели Actions (Действия) пропишите скрипт stop(); последнему, 10-му кадру, чтобы стрела совершала свой полет всего лишь раз.

Практическая работа: Создание intro-ролика сайта

Рис. 10. Стрелка

Сейчас мы рассмотрим создание интерактивной ссылки для пункта меню «О нас», а для остальных пунктов вы создадите их самостоятельно.

Внимание! Не забывайте, что ссылка по сути является тем же символом «кнопка», рассмотренным выше. И значит, все принципы работы здесь остаются в силе.

  1. Выделяем «О нас» и создаем на его основе кнопку «About».

Практическая работа: Создание intro-ролика сайта

Рис. 11. Сцена во всей красе при активной ссылке «О нас»

  1. Проставляем все активные состояния кнопки, изменяем цвет текста для 2-го (голубой) и 3-го кадров (белый).

  2. Создаем новый слой под уже существующим, на фрейме Over (Над) делаем ключевой кадр и на него перетаскиваем символ «Strelka» из Библиотеки.

  3. По аналогии с рассмотренными выше кнопками цепляем скрипт, который будет ссылкой на любую html-страницу.

  4. Тестируем клип, наводя курсор на ссылки (рис. 11).

Видите, как все просто и быстро. В этом неоценимую роль сыграли символы и экземпляры. Создав один раз символ, мы используем его экземпляры бессчетное количество раз в разных случаях и в разных клипах!

Музыкальный этюд.
Последний аккорд - добавление музыкального сопровождения

Следующая задача - музыкально оформить клип. Мы импортировали с диска звуковые файлы (musik1 и musik2) в самом начале урока. Теперь давайте привнесем звук непосредственно в клип.

  1. Создайте новый слой, назовите его «звуки-intro».

  2. На первом фрейме клипа создайте ключевой кадр. Теперь обратитесь к панели Properties (Свойства). В правой части панели отыщите строку Sound (Звук) и из списка выберите musik1. Это сохраненный нами в Библиотеке звуковой фрагмент.

  3. Вы видите, как соответствующий слой изменился при этом действии (рис. 9, слой «звуки-intro»). Теперь протестируйте клип.

Добавим звуковое оформление «Конэксу» и ссылкам.

  1. «Конэкс» - найдите одноименный слой, выделите его 1-й ключевой кадр и на панели Properties (Свойства) в строке Sound (Звук) выберите musik2 (см. рис. 9, слой «Конэкс»).

  2. Создайте слой «Звук» синхронно. С началом «выпрыгивания» ссылок (слой «кнопки») - на 58-м кадре нажмите на панели Properties (Свойства) и определите звучание файла musik2 (см. рис. 9, слой «Звук»).

  3. Отыщите в Библиотеке объект «Strelka». Дважды щелкнув на ней, войдите в режим редактирования и на 1-м ключевом кадре задайте musik2.

Дебют в браузере,
или Подготовка к публикации в Сети и сама публикация

Все, будем считать, что intro-ролик готов. Теперь необходимо подготовить его к публикации в Сети, т.е. сгенерировать html-файл.

  1. Делать мы это будем с помощью опции меню File\ Publish settings (Файл\ Настройки опубликования). При выборе данного пункта меню или нажатии комбинации клавиш ++ у вас появляется одноименное диалоговое окно настройки параметров публикации. Панель состоит из трех вкладок: Formats (Форматы), Flash и HTML.

  2. Нас будет интересовать вкладка HTML, выберем ее и настроим нужные параметры
    (рис. 12). В поле Dimensions (Размеры) выберем из раскрывающегося меню строку Pixels (Пикселы). Это означает, что размер публикуемого клипа будет теперь измеряться в пикселах, которые мы сами установим, а не автоматически браться из размеров клипа, который был определен в Document Properties (Свойства документа). Напомню, что мы с вами должны «растянуть» клип, назначив ему размеры в 2 раза больше исходных, но при этом объем файла в килобайтах останется неизменным.

Практическая работа: Создание intro-ролика сайта

Рис. 12. Диалоговое окно Publish Settings (Настройки опубликования)

  1. Теперь стали доступными для редактирования поля Width (Ширина) и Height (Высота). Устанавливаем для них значения 800 и 600 пикселов соответственно. Нажимаем ОК.

  2. Воспользуемся меню File\ Publish (Файл\ Опубликовать) или нажмем +. В окне браузера Интернета мы видим, как проигрывается наш клип.

  3. Открыв папку, в которой сохраняли flash-файл, вы увидите, что в ней появился новый документ с таким же названием, как у клипа, но с новым расширением .html


© 2010-2022