«Всё должно быть сделано настолько простым, насколько это возможно, но не проще» А. Энштейн.

Эта известная фраза вполне может быть девизом процесса проектирования KISS («Keep It Simple, Stupid»), который гласит, что простота системы является ее основной целью и ценностью.

Сегодня расскажу Вам о создании изумительной флэшки для сайта интернет магазина, торгующего сетевым оборудованием (в данный момент он находится в стадии тестирования). Она кажется простенькой на первый взгляд, но если прочитаете этот пост, поймете, где собака зарыта 🙂

Немного о сайте: Сайт имеет один интерфейс и две точки входа: для корпоративных и частных клиентов. Оба варианта выполнены в едином стиле, но с разным цветовым решением. Главные страницы имеют разное контентное наполнение, всё остальное — идентично.

Концепт: на главной странице сайта находится анимированная схема сети, состоящая из проводов и сетевого оборудования.
Для корпоративного сайта: 1. Серверы. 2. Компьютерные системы. 3. Защита питания. 4. Периферия. 5. Сетевое оборудование. 6. Мониторы. 7. Программное обеспечение.
Для розничного сайта: 1. Беспроводное оборудование. 2. Коммутаторы. 3. Маршрутизаторы, роутеры, безопасность. 4. КПК. 5. Сетевые адаптеры. 6. Монтажное оборудование. 7. Защита питания.

Алгоритм.

1) Рисуем пиктограммы.

Эффекты, накладываемые на пиктограммы: бегущий по проводам импульс (ток) и бликование при прохождении тока.

2) Рисуем сеть.

Соблюдаем необходимые особенности: flash должна быть очень гибкой, при растягивании на 1200, 1600 пикселей под расширение экрана пользователя она должна тянуться, при этом элементы сети (7 штук) должны распределяться по ней равномерно. Также растяжка на ширину окна любого из размеров должна соблюдаться и при вносимых деформациях сети (она будет подвижная, о чем будет сказано ниже). Правильным должно быть и использование тени – она должна четко следовать деформациям провода и бусинок.

3) Описываем и реализовываем поведение флэш:

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

При нажатии на бусинку с пиктограммой сетевого оборудования осуществляется переход в том же окне на соответствующий подраздел каталога.

Также необходимо:

— сделать так, чтобы провод дергался, когда по нему пробегает импульс тока (извивался например)

— бусинки немного перекатываются по проводу (но не делать назойливо, чтобы не раздражать посетителей)

пример перекатывания:

пример деформации провода:

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

Таким образом, простая на вид флэшечка оказалась достаточно трудоемкой и продуманной.
Отдельный респект программисту.

Результаты можно оценить на данный момент по адресу www2.wizard.ru