Идея.
Итак, начнем с постановки задачи: разработать заглавную страницу сайта группы компаний 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, не забывая, что перед тем, как сменить картинку, нужно проверить, не совершает ли бабочка движение. В качестве параметра, передаю функции номер картинки, на которой подсвечена выбранная область. Эта же функция запрещает или разрешает делать взмах крыльями:
function setpic(val)
{
if(!moving)
{
document.getelementbyid('departament').innerhtml=deps[val];
document.butter.src=pic[val].src;
}
if(val==1)
moveena=true;
else
moveena=false;
}
С помощью того же dreamweaver обвожу цветные области крыльев точками, а получившуюся карту привязываю к картинке с бабочкой. Для каждой области указываю смену картинки при наведении указателя мыши или при уходе указателя из области (устанавливается первая картинка, а значит разрешается делать взмах крыльями):
<img border="0" name="butter" src="indexpics/1.jpg" width="332" height="291" usemap="#map">
<map name="map">
<area shape="poly" coords="116,61,74,36,32,31,50,54,70,68,78, 100,82,112,88,125,114,126,157,135"
href=http://mcmg.ru/index.php onmouseover="setpic(7);" onmouseout="setpic(1);"
alt="Рекламное агентство">
<area shape="poly" coords="212,60,256,36,295,33,269,54,249,66, 250,99,247,111,243,123,203,126,167,133"
href=http://btl.mcmg.ru/index.php onmouseover="setpic(8);" onmouseout="setpic(1);"
alt="btl-агентство">
<area shape="poly" coords="114,138,56,175,77,179,62,197,81,196, 86,213,99,210,105,227,122,211,156,138"
href=http://web.mcmg.ru/index.php onmouseover="setpic(9);" onmouseout="setpic(1);"
alt="Интернет-агентство">
<area shape="poly" coords="170,137,200,209,217,229,224,209,236, 215,238,198,259,197,249,181,267,175,213,137"
href=http://outdoor.mcmg.ru/index.php onmouseover="setpic(10);" onmouseout="setpic(1);"
alt="Производственный комплекс">
</map>
Области уже подсвечиваются и при нажатии на них, пользователь даже попадет на так необходимый ему сайт. Пришло время оживить насекомое - пишу функцию wingmove, которая и даст бабочке сил взмахнуть крыльями. Функция совершает ряд действий:
*
в начале анимации (step==1) устанавливает прямой порядок смены кадров (переменная dir) и задает истинное значение переменной moveing, запрещая смену картинки при выборе области крыла указателем мыши;
*
увеличивает или уменьшает на единицу значение переменной step, в зависимости от установленного направления смены кадров;
*
если значение step равно шести (бабочка сомкнула крылья), меняет порядок смены кадров на противоположный;
*
устанавливает картинку, соответствующую текущему кадру анимации, на странице;
*
если движение не закончено, запускает сама себя через время, равное значению переменной delay;
*
прекращает движение и разрешает выбор области указателем мыши, если достигнут конец цикла смены кадров смыкания и размыкания крыльев.
Программный код этой функции:
function wingmove()
{
if(step==1){dir=true;moving=true;}
if(step>5)dir=false;
if(dir)
step++;
else
step--;
document.butter.src=pic[step].src;
if(step>1)
settimeout('wingmove();',delay);
else
moving=false;
}
Теперь бабочка умеет махать крыльями, достаточно вызвать функцию wingmove. Но нужно еще установить расписание взмахов. Пишу функцию newmove, которая будет время-от времени вызывать функцию wingmove. Каждый новый взмах происходит через произвольное время от пяти до пятнадцати секунд - через это время функция newmove перезапускает сама себя:
function newmove()
{
if(!moving&&moveena)
{
wingmove();
moving=true;
}
settimeout("newmove();",5000+math.floor(math.random()*10000));
}
Теперь достаточно один раз вызвать на сайте функцию newmove, и бабочка оживает и, в последствии, не умирает. Будем надеяться, что даже когда страница закрывается и скрипт прекращает свою работу, она все равно живет, чтобы вновь появиться перед новым посетителем сайта группы компаний mcmg.