Галафеев Сергей. Директор интернет-студии MCMG.
Идея.
Итак, начнем с постановки задачи: разработать заглавную страницу сайта группы компаний 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 картинки с подсвеченными областями, а пользователю разрешить подсвечивать области наведением мыши только в момент, когда бабочка неподвижна. Отсюда еще одно правило поведения бабочки:
Картинок получилось десять:
-
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.
Заключение.
На следующий день дизайнер дорисовал все 10 картинок и бабочка MCMG прописалась по адресу http://mcmg.ru.
Кстати, если установить страницу http://mcmg.ru в качестве стартовой, то подъем настроения при каждом запуске браузера вам гарантирован.
В разработке участвовали:
|
|
|
Бабочка MCMG
