Информационно-познавательный сайт 8.1 Начало создание Flash-сайта
 
Начало создание Flash-сайта
Flash - Создание flash-сайта

Начало создание Flash-сайта

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

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

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

После того, как подготовлены все материалы для нашего будущего сайта можно приступать к созданию flash-cайта.

Первое что нужно сделать - это зараннее создать несколько новых слоёв. Для удобства первый слой переименуем как Кнопки. На данном слое будут находиться только кнопки, которые будут видны на протяжении всего ролика. Второму слою дадим имя Страницы. Третий слой назовём Метки. Четвёртому слою дадим имя ActionScript, который будет являться основным.

Теперь выберем слой страницы, и создадим три ключевых кадра. Выделив 10-й кадр нажмём клавишу F6 чтобы создать ключевой кадр. Далее сделаем ключивыми 15-й и 20-й кадр. После чего выделим 29-й кадр на слое кнопки и нажмём клавишу F5, чтобы продлить первый ключевой кадр. Таким же образом создадим три ключевых кадра на слое метки. Слой ActionScript продляем до 29-го кадра при помощи клавиши F5.

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

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

Чтобы ориентироваться и быстро переходить на нужные страницы сайта, создадим метки на соответсвующем слое. Выбрав первый кадр на панели свойства задаём имя кадра, (в нашем случае Home), Также присваиваем имена для 10 и 15 кадра (About  и Contacts).

 

Навигация по Flash-сайту

Теперь напишем ActionScript, которая будет управлять навигацией по сайту. Рассмотрим наглядный пример. Прежде всего, чтобы установить связь между нажатием на кнопку и определёнными действиями, нужно дать имя этой кнопке. Через присвоенное имя будем обращаться к кнопке через ActionScript. Зададим например имя кнопки Главная - Home_btn. Кнопке О компании дадим имя About_btn, а кнопку контакты переименуем в Contacts_btn.

Теперь выбрав первый кадр, на слое ActionScript, отобразим панель Действие - Кадр. В появившемся окне будем писать скрипт. В начале напишем stop() чтобы остановить непрерывное действие анимации и начать управлять ею самостоятельно.

stop();

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

Home_btn.addEventListener(MouseEvent.CLICK,OnClickHome);

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

Home_btn.addEventListener(MouseEvent.CLICK,OnClickHome);
Contacts_btn.addEventListener(MouseEvent.CLICK,OnClickContacts);
About_btn.addEventListener(MouseEvent.CLICK,OnClickAbout);

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

Следующей задачей необходимо создать функции, которые должны происходить по нажатию кнопки.

Функцию создаём при помоще зарезервированного слова function. Когда пишем данное слово то программе указываем что мы создаем функцию, затем пишем имя функции, двоеточие и слово void.

function OnClickHome():void

так как функция не возвращает никаких обратных переменных. Внутри круглых скобок необходимо принять передаваемое событие в какой-либо аргумент, и написать тип этого аргумента (e:MouseEvent). Теперь в фигурных скобках пишем действия, которые необходимо совершить.  Напишем функцию gotoAndStop() и в скобкад необходимо указать метку, куда надо перейти при нажатие на кнопку Главная ("Home"). Как правила метки пишуться в кавычках.

gotoAndStop("Home")

На этом закончили создание первой функции, которая будет направлять на метку Home. Аналогичным образом создадим функции и для других кнопок. В итоге мы получили следующий код:

stop();
Home_btn.addEventListener(MouseEvent.CLICK,OnClickHome);
Contacts_btn.addEventListener(MouseEvent.CLICK,OnClickContacts);
About_btn.addEventListener(MouseEvent.CLICK,OnClickAbout);

function OnClickHome(e:MouseEvent):void
{
    gotoAndStop("Home")
}

function OnClickAbout(e:MouseEvent):void
{
    gotoAndStop("About")
}

function OnClickContacts(e:MouseEvent):void
{
    gotoAndStop("Contacts")
}

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

 
 
© Сайт защищён авторскими правами. При перепечатки материала ссылка на наш сайт www.poznajvse.com обязательна
Написать web-мастеру: portal.inform@gmail.com
 

Посещаемость портала:

Посещаемость сайта: