Создание простого сайта, с возможностью навигации

Используя изменение видимости клипов можно создать настоящий сайт, с возможностью навигации по нему. Предположим, кнопки навигации будут расположены в верхней части страницы. Каждая из кнопок будет выводить на страницу определённую информацию (На домашних страницах, обычно это личные данные, список работ и т.д.) За недостатком времени, пусть кнопки будут просто выводить на экран геометрические фигуры – круг, квадрат и треугольник.

Начнём с фигур. Нарисуйте в новом ролике фигуры и каждую преобразуйте в экземпляр «Movie Clip». Дайте экземплярам соответствующие имена «circle» «rectangle» «triangle»

Не страшно, если экземпляры перекрывают друг друга. Они не будут выводиться на экран одновременно. Пусть в начале будут видны лишь кнопки, а все три фигуры скрыты. Так как в нашем ролике на сцене существует лишь один кадр, то его скрипт лишь один раз исполнится в начале проигрывания. Отключим этим скриптом видимость всех трёх фигур.

(не присвойте скрипт чему то ещё кроме кадра). Сделайте щелчок правой кнопкой мыши на кадре и выберите «Actions». Введите скрипт (лучше в Expert Mode)

rectangle._visible = 0;

triangle._visible = 0;

circle._visible = 0;

Откомпилируйте ролик и убедитесь, что сцена пуста.

Создайте три экземпляра кнопки. Каждая из кнопок должна включать видимость своего клипа. Так как неизвестно, отображается ли какой-нибудь клип к этому моменту, кнопка должна, на всякий случай, отключить видимость остальных клипов. Для кнопки отображающей круг скрипт должен выглядеть так

on (release){

rectangle._visible = 0;

triangle._visible = 0;

circle._visible = 1;

}

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

Данная методика построения сайта далеко не идеальна.

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

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

При добавлении нового клипа и кнопки придётся сильно править код.

Но несмотря на это, для создания небольшого flash – ресурса такая схема вполне пригодна.

Событийная анимация

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

Рассмотрим пример с перемещением клипа. В новом ролике создайте экземпляр клипа с именем «ball», и четыре экземпляра кнопки со стрелками. (эталон кнопки может быть один, а экземпляры просто повёрнуты, кстати, удобнее вращать удерживая shift)

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

В первом кадре ролика создаём переменные и помещаем клип в начальное положение x=100 y=100. Для этого в кадр вводим скрипт

ball._x=100;

ball._y=100;

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

on (release){

ball._y+= 10

}

Остальные кнопки программируются аналогично.

Упражнение

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

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

Создайте кнопку, которая увеличивала бы шаг перемещения клипа.

Триггер

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

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

Теперь перейдём к триггеру. Создайте новый «Movie Clip». В первом кадре клипа нарисуйте изображение и преобразуйте его в кнопку. Добавьте в клип новый ключевой кадр(F6).

Первая кнопка будет останавливать анимацию. Создайте на ней обычное текстовое поле с «Stop». Вторая кнопка будет запускать анимацию. Напишите на ней «Play». Для того, что бы триггер постоянно находился в одном из состояний, в оба его кадра введите скрипты Stop().

Останавливающей кнопке присвойте скрипт (приказ основной линейке остановиться и приказ своему клипу продолжить воспроизведение, т.е перейти к кадру со второй кнопкой)

on (release){

_root.stop();

play();

}

Запускающей анимацию кнопке присвойте скрипт

on (release){

_root.play();

play();

}

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