Итак, начнем с постановки задачи: разработать заглавную страницу сайта группы компаний mcmg, обобщающую собой четыре сайта подразделений организации и соответствующую им своим дизайном. Заглавная страница в то время представляла собой серое поле с расположенными на ней пластмассовыми (как мне казалось) прямоугольничками, которые никак не подходили к тому, что творилось на остальных страницах сайта.
Первым делом дизайнер придумал саму бабочку. Какими усилиями ему дался этот образ - тема другой статьи. Сейчас же имеет значение то, что бабочка имела на крыльях четыре области: красную, для перехода на сайт рекламного агентства, синюю - на сайт btl-агентства, зеленую - на сайт Интернет-агентства и оранжевую - на сайт производственного комплекса. После изучения всеми сотрудниками получившейся бабочки, генеральный директор постановил, что бабочка просто обязана время-от-времени делать взмах крыльями (и несколько раз показал ладонями, как же она должна это делать). Ну и само-сабой, при наведении указателя мыши на цветные области крыльев, они должны подсвечиваться.
Взмах крыльями бабочка делает весьма быстро, но мы решили, что наша бабочка, спокойная и умиротворенная, взмах (туда-сюда) делает за время где-то от полусекунды до секунды. Ради одного-единственного движения бабочки мы решили не морочить посетителей сайта флэшем, а сделать анимацию простой сменой кадров с помощью javascript. Движение длится менее секунды - десяти кадров за глаза. Смыкание крыльев производится абсолютно также, как и размыкание, меняется лишь порядок смены кадров. Таким образом, полный цикл "смыкание-размыкание" можно разложить по номерам картинок так:
1 - 2 - 3 - 4 - 5 - 6 - 5 - 4 - 3 - 2 - 1.
Если ограничиться пятью картинками, то все движение будет состоять из 9 кадров, но мы не хотели использовать менее 10, потому разложили взмах крыльев на 6 картинок (11 кадров на движение).
Дальше была эпопея с анимацией крыльев и связанным с этим изготовленим картинок. То тут крыло криво пошло, то здесь тень не так легла. Не закончив эпопею, разбрелись по домам...
Скрипт.
Вечером я принялся за тот самый скрипт, который был призван вдохнуть жизнь в бабочку. Для начала надо было определить поведение бабочки во время нахождения пользователя на заглавной странице сайта. Основные правила:
* бабочка должна делать первый взмах через секунду после загрузки страницы; * после первого взмаха бабочка должна повторять движение через произвольное время, но не менее, чем через пять секунд, и не более, чем через 15 секунд после последнего действия, коим является также и выбор области крыла указателем мыши; * при нахождении указателя мыши на цветных областях крыльев, бабочка не должна делать никаких движений;
При наведении указателя мыши на одну из цветных областей крыльев необходимо менять картинку на ту, где "подсвечена" эта область. Областей четыре, и получается, что для каждой из 6 картинок, участвующих в движении, нужно изготовить еще по четыре картинки с подсвеченными областями. Но тогда вся анимация будет состоять уже из 6 * 4 = 24 картинок, каждая из которых весит около 20 килобайт! Поэтому было решено сделать только 4 картинки с подсвеченными областями, а пользователю разрешить подсвечивать области наведением мыши только в момент, когда бабочка неподвижна. Отсюда еще одно правило поведения бабочки:
* во время взмаха крыльев пользователь не может кликнуть на цветной области крыла: подождал 10 секунд - подождет и еще полсекунды =d.
Картинок получилось десять:
* 1 - бабочка без движения, а также первый и последний кадр анимации крыльев; * 2-6 - кадры анимации крыльев; * 7 - подсвечена красная область; * 8 - подсвечена синяя область; * 9 - подсвечена зеленая область; * 10 - подсвечена оранжевая область.
Беру dreamweaver, верстаю страницу. Определяю набор переменных:
var step=1; // номер кадра анимации var dir=true; // направление смены кадров анимации (смыкание или размыкание крыльев) var moveena=true; // истинна, если разрешено сделать взмах крыльями // и ложна, если запрещено (пользователь выбрал цветную // область крыла) var moving=false; // истинна, если в данный момент совершается взмах крыльями var delay=50; // время задержки перед сменой кадра анимации в миллисекундах
Не забываю про предзагрузку картинок:
pic=new array(10); for(c=1;c<=10;c++) { pic[c] = new image(); pic[c].src=indexpics/+c+.jpg; }
Для смены картинки при наведении указателя мыши на область крыла, пишу простую функцию setpic, не забывая, что перед тем, как сменить картинку, нужно проверить, не совершает ли бабочка движение. В качестве параметра, передаю функции номер картинки, на которой подсвечена выбранная область. Эта же функция запрещает или разрешает делать взмах крыльями:
С помощью того же dreamweaver обвожу цветные области крыльев точками, а получившуюся карту привязываю к картинке с бабочкой. Для каждой области указываю смену картинки при наведении указателя мыши или при уходе указателя из области (устанавливается первая картинка, а значит разрешается делать взмах крыльями):
Области уже подсвечиваются и при нажатии на них, пользователь даже попадет на так необходимый ему сайт. Пришло время оживить насекомое - пишу функцию wingmove, которая и даст бабочке сил взмахнуть крыльями. Функция совершает ряд действий:
* в начале анимации (step==1) устанавливает прямой порядок смены кадров (переменная dir) и задает истинное значение переменной moveing, запрещая смену картинки при выборе области крыла указателем мыши; * увеличивает или уменьшает на единицу значение переменной step, в зависимости от установленного направления смены кадров; * если значение step равно шести (бабочка сомкнула крылья), меняет порядок смены кадров на противоположный; * устанавливает картинку, соответствующую текущему кадру анимации, на странице; * если движение не закончено, запускает сама себя через время, равное значению переменной delay; * прекращает движение и разрешает выбор области указателем мыши, если достигнут конец цикла смены кадров смыкания и размыкания крыльев.
Теперь бабочка умеет махать крыльями, достаточно вызвать функцию wingmove. Но нужно еще установить расписание взмахов. Пишу функцию newmove, которая будет время-от времени вызывать функцию wingmove. Каждый новый взмах происходит через произвольное время от пяти до пятнадцати секунд - через это время функция newmove перезапускает сама себя:
function newmove() { if(!moving&&moveena) { wingmove(); moving=true; } settimeout(newmove();,5000+math.floor(math.random()*10000)); }
Теперь достаточно один раз вызвать на сайте функцию newmove, и бабочка оживает и, в последствии, не умирает. Будем надеяться, что даже когда страница закрывается и скрипт прекращает свою работу, она все равно живет, чтобы вновь появиться перед новым посетителем сайта группы компаний mcmg.
Заключение.
На следующий день дизайнер дорисовал все 10 картинок и бабочка mcmg прописалась по адресу http://mcmg.ru.
Кстати, если установить страницу http://mcmg.ru в качестве стартовой, то подъем настроения при каждом запуске браузера вам гарантирован.