Распечатать статью

Бабочка 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 картинки с подсвеченными областями, а пользователю разрешить подсвечивать области наведением мыши только в момент, когда бабочка неподвижна. Отсюда еще одно правило поведения бабочки:

*
во время взмаха крыльев пользователь не может кликнуть на цветной области крыла: подождал 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.

Заключение.

На следующий день дизайнер дорисовал все 10 картинок и бабочка mcmg прописалась по адресу http://mcmg.ru.

Кстати, если установить страницу http://mcmg.ru в качестве стартовой, то подъем настроения при каждом запуске браузера вам гарантирован.

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи