Бесплатный видеокурс: Как создать простой flash сайт в Adobe® Flash® CS4

Урок 1. Назначение программы Adobe® Flash® CS4 1:21 мин

Текст урока.

Программа Flash CS4 является самым мощным средством создания анимации. При этом она дает возможность использовать не только стандартные методы временной шкалы, и программные способы преобразования объектов во времени.

Естественно, Flash обладает всеми средствами работы с векторной графикой, так она и является основой анимации. В версии CS4 добавилась возможность трехмерного редактирования векторных объектов, но при этом сцена осталась плоской, то есть трехмерные эффекты просто имитируются, но это не мешает им быть очень реалистичными. Гибкий интерфейс позволяет легко настроить под себя все панели, что существенно ускоряет процесс работы над проектом. Стоит отметить, что основное понятие в среде разработки Flash – это символ. Символ – это графический элемент или анимация, структурный тип, из которого в основном и состоит анимация.

В версии CS4 символ стал обладать гораздо большими правами, чем раньше. Даже анимация движения привязывается теперь непосредственно к символу – это существенно облегчает редактирование путей и скорости движения.

Урок 2. Начало создания флэш-сайта. 1 часть 2:30 мин

Текст урока. Как создать простой Flash-сайт?

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

Прежде, чем начать создавать Flash-сайт, нужно заранее подготовить весь тот контент, который на нем будет размещаться. Это страницы, кнопки, текст, графика, видео, аудио и прочее. Естественно, большинство элементов сайта должно быть в символах, то есть, если это анимируемая кнопка, то она должна быть преобразована в символ. Как уже было сказано, использование символов позволяет значительно уменьшить объем файла.

В этом видео уроке не будем рассматривать рисование графики для флэш-сайта, а покажем базовые принципы создания простого сайта на флэш. Поэтому контент Вы должны подготовить самостоятельно.

После того, как все материалы подготовлены, можно приступать к созданию Flash – сайта. Первое, что нужно сделать, это заранее создать несколько новых слоев.

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

Теперь выделим слой «страницы» и создадим три ключевых кадра. Выбрав десятый кадр, нажмем клавишу «F6» чтобы создать ключевой кадр. Далее, сделаем ключевым кадром 15-й и 20-й кадры. После чего, выделим 29-й кадр на слое «кнопки» и нажмем клавишу «F5», чтобы продлить первый ключевой кадр.
 
Урок 3. Начало создания флэш-сайта. 2 часть 1:47 мин

Текст урока. Создание кнопок для навигации по сайту.

Таким же образом, создадим три ключевых кадра на слое «метки»…

Слой «экшн-скрипт» продляем до 29-го кадра, с помощью клавиши «F5».

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

Теперь, нужно заблокировать все слои, кроме слоя «страницы». Для этого достаточно кликнуть левой кнопкой мыши в среднем столбце, на временной шкале, удерживая клавишу «ALT». Выделив первый кадр слоя «страницы», переместим из библиотеки на сцену контент, который будет находится на главной странице.

Аналогичным образом, разместим контент, который будет соответствовать разделу «О компании». Для этого, выделим 9-й кадр и разместим контент на сцене. Потом выделим 29-й кадр и так же разместим контент, который будет соответствовать разделу «Контакты».

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

Выбрав первый кадр, на панели свойств задаем имя кадра, так же присваиваем имена для 11го и 21го кадров.

Урок 4. Навигация по сайту 3:51 мин 

Текст урока. Как написать Flash скрипт для навигации по сайту?

В этом уроке напишем экшн скрипт, который будет управлять навигацией по сайту. Рассмотрим наглядный пример. Прежде всего, чтобы установить связь между нажатием на кнопку и определенными действиями, нужно дать имя этой кнопке. Через присвоенное имя будем обращаться к кнопке с помощью ActionScript.

Выбрав первую кнопку, на панели свойств задаем ей имя «HOME_btn». Второй кнопке будет соответствовать имя «ABOUT_btn», а третью кнопку именуем «CONTACTS_btn»/

Теперь, выбрав первый кадр на слое «экшн скрипт», отобразим панель «действия-кадр».

В появившемся окне, будем писать Flash скрипт.

Сначала пишем: stop(); (стоп), чтобы остановить непрерывное воспроизведение анимации и начать управлять ей самостоятельно.

Далее пишем: home_btn.addEventListener (хоум битиэн, эд эвэнт листэнэр). Тем самым учим выбранную кнопку «слушать» клик мыши.

В круглых скобках пишем два аргумента. Первым аргументом является событие, которое слушаем:

MouseEvent.CLICK, ставим запятую и следующим пишем аргумент, который будет происходить, когда событие случится – onClickHome (он клик хоум).

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

Следующей задачей будет – создать эти самые функции. Функцию создаем с помощью зарезервированного слова «function». Когда пишем данное слово, то программе сообщаем, что создаем функцию. Далее пишем имя функции, затем круглые скобки, двоеточие, void (воид), так как функция не возвращает никаких обратных переменных.

Внутри круглых скобок нужно принять передаваемое событие в какой-либо аргумент и написать тип этого аргумента: Mouse Event (маус эве?нт). Теперь, в фигурных скобках пишем действие, которое нужно совершить.

Пишем: gotoAndStop (готоэндстоп) и в скобках пишем название метки, куда нужно перейти при нажатии на кнопку «Главная»: home (хоум). Как правило, метки пишутся в кавычках. На этом закончили создание первой функции, которая будет направлять на метку «хоум».

Скопируем данную функцию, вставим ее текст два раза и изменим название функции. Затем, в каждой функции изменим название меток.

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

Урок 5. Переходы на флэш сайте 3:14 мин

Текст урока. Создание анимационных эффектов

В этом уроке рассмотрим принцип создания анимационных эффектов для контентной области сайта.

Сначала, включим режим редактирования множества кадров и расширим его на временной шкале. Затем выделяем контент на всех кадрах. После чего, перемещаем весь контент за пределы сцены и отключаем режим редактирования множества кадров.

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

Те же самые действия проделываем и с остальным контентом….. (пауза 7 секунд)

Теперь нужно изменить экшн скрипт. Отобразив панель «кадр-действия», меняем название «gotoAndStop» на «gotoAndPlay».

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

Выделив 9-й кадр, пишем команду «стоп», затем пишем данную команду в 19-том кадре и 29-том кадре.

Тестируя ролик, хорошо видно, как переходы страниц анимируются. Но анимация происходит слишком быстро. Поэтому, чтобы ее замедлить, выделим два кадра первой анимации и нажмем три раза клавишу «F5». Затем повторим эту же операцию на второй анимации и на третьей анимации.

В завершение, выделим первый кадр на слое «экшн скрипт», отобразим панель скриптов и удалим первую команду «стоп».

В результате, получим анимированные переходы с одной страницы на другую.

Теперь, Вы научились делать анимационные эффекты с контентом. В уроке был рассмотрен простейший эффект, а вы можете, поняв принцип, создавать и более сложные. Не стоит забывать, что анимировать можно как свойства объектов, так и фильтры, которые были применены к объектам. Экспериментируйте, и у Вас все получится!